Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Så här markerar du text i WordPress (Beginner’s Guide)

Letar du efter ett sätt att markera text i WordPress?

Genom att markera text kan du rikta användarens uppmärksamhet mot en viss del av ditt content. Detta kan vara bra för att visa upp en call-to-action, ett specialerbjudande eller för att helt enkelt lägga tonvikten på specifika meningar.

I den här artikeln visar vi hur du enkelt kan markera text i ett post eller en page i WordPress.

Adding text highlight color in WordPress

Varför och när du ska markera text i WordPress

Textmarkering är ett enkelt sätt att framhäva viktig information i your content. Det riktar användarens uppmärksamhet mot detaljer som du inte vill att de ska missa.

Om du till exempel markerar ett rabatterbjudande på din website WordPress med en annan färg kommer läsaren att uppmärksamma det, vilket hjälper dig att generera mer försäljning.

Här är ett exempel på hur textmarkeringar kan gilla att se ut i ett blogginlägg:

Preview for highlighting text in the block editor

Att markera text i en annan färg kan också hjälpa användare med synnedsättning eller lässvårigheter att navigera och förstå innehållet lättare. Det kan till och med förbättra ditt contents appearance och göra det mer visuellt tilltalande.

Om du markerar för mycket text på din page kan det dock vara distraherande och minska sidans effektivitet. Därför rekommenderar vi att du bara markerar viktig informationstext som gillar call-to-action, varningar och andra detaljer som läsarna bör uppmärksamma.

Med detta sagt, låt oss ta en titt på hur du enkelt kan markera text i WordPress. Du kan använda snabblänkarna under för att hoppa till den metod du vill använda:

Metod 1: Markera text i WordPress med hjälp av Block Editor

Den här metoden är för dig som enkelt vill markera text i WordPress med hjälp av Block Editor (Gutenberg).

Först måste du öppna ett befintligt eller new post i content editor från WordPress admin sidebar.

Väl där väljer du helt enkelt den text du vill markera och klickar på ikonen ”More” i blockets toolbar högst upp. Detta öppnar en dropdown-meny där du måste välja alternativet ”Markera” från listan.

Expand the More dropdown menu from the block toolbar and select the Highlight option

Ett färgväljarverktyg kommer nu att öppnas på din vy. Härifrån måste du först byta till tabben ”Bakgrund”.

Därefter kan du välja en standardfärg för markeringen från de givna alternativen.

Du kan också välja en custom färg för att markera text genom att clicka på alternativet ”Custom” för att starta ett ”Eyedropper”-verktyg.

Choose a highlight color from the color picker tool

Glöm inte att klicka på knappen ”Publicera” eller ”Updated” för att save your changes.

You can now visit your WordPress blogg to check out the highlighted text in action.

Preview for highlighting text in the block editor

Metod 2: Markera text i WordPress med hjälp av WPCode (rekommenderas)

Om du konsekvent vill använda en viss färg för att markera text över hela din WordPress website, då är den här metoden något för dig.

Du kan enkelt markera text i WordPress genom att lägga till CSS-kod i dina theme-filer. Men minsta error när du enter koden kan göra att din website inte fungerar och blir otillgänglig.

Det är därför vi rekommenderar att du använder WPCode, som är det bästa WordPress code snippet plugin på marknaden. Det är det enklaste och säkraste sättet att add to kod till din website utan att direkt editera dina theme-filer.

Skapa ett code snippet med WPCode

Först måste du installera och aktivera pluginet WPCode. För mer instruktioner, vänligen se vår guide för nybörjare om hur man installerar ett plugin för WordPress.

Note: WPCode har också en gratis plan som du kan använda för denna tutorial. Men uppgradering till den betalda planen kommer att låsa upp fler funktioner som ett molnbibliotek med code snippets, smart villkorlig logik och mer.

Efter aktivering, head över till Code Snippets ” + Add Snippet page från WordPress admin sidebar.

Därefter klickar du bara på knappen ”Använd snippet” under alternativet ”Lägg till din anpassade kod (New Snippet)”.

Add new snippet

Detta tar dig till sidan ”Create Custom Snippet”, där du kan börja med att skriva ett namn för ditt code snippet.

Därefter väljer du alternativet ”CSS Snippet” från dropdown-menyn ”Code Type” i det högra hörnet av vyn.

CSS Snippet as code type for the highlighting text in WordPress

Därefter kopierar du och klistrar in följande kod i boxen ”Code Preview”:

mark {
background-color: #ffd4a1;
}

När du har gjort det, add to hex-koden för din föredragna markeringsfärg bredvid bakgrundsfärg-raden i koden.

I vårt exempel använder vi #ffd4a1, som är en ljusbrun färg.

Paste the code snippet to highlight text in WordPress

Därefter rullar du ner till ”Insertion” section.

Härifrån väljer du metoden ”Auto Insert” för att exekvera koden vid aktivering.

Choose an insertion method

Därefter går du högst upp på sidan och togglar omkopplaren ”Inaktiverad” till ”Aktiv”.

Slutligen klickar du på knappen ”Save Snippet” för att spara dina ändringar.

Save text highlight code snippet

Markera text i Block Editor

Nu när CSS-snippet har aktiverats måste vi lägga till lite HTML-kod i WordPress Editor för att markera texten på webbplatsen.

Först öppnar du ett befintligt eller new post i WordPress block editor.

Härifrån klickar du på ikonen ”Options” i blockets toolbar högst upp. Detta öppnar en new dropdown-meny där du måste selecta alternativet ”Edit as HTML”.

Choose the edit as HTML option from the Options dropdown menu in the block toolbar

Nu ser du innehållet i blocket i HTML-format.

Här omsluter du helt enkelt texten som du vill markera inuti <mark> </mark> tags så här:

<mark>highlighted-text</mark>

Detta kommer att markera texten i den hexfärg som du valde i ditt WPCode snippet.

Därefter klickar du på alternativet ”Edit Visually” i block toolbar. för att växla tillbaka till visual editor.

Write HTML code on both sides of the text that you want to highlight

När du är klar, gå vidare och klicka på knappen ”Update” eller ”Publicera” för att save your changes.

Nu kan you besöka your website för att kontrollera den markerade texten i action.

Demo of highlighting text in WordPress

Bonus: Använd SeedProd för att markera viktiga pages på din website

Förutom att markera text i dina blogginlägg kanske du också vill markera viktiga sections på din WordPress site, gillar kontaktformuläret eller en gift coupon.

Om du till exempel har en store på nätet och precis har lanserat en säsongsrea, kanske du vill lyfta fram det erbjudandet på din website.

Du kan lyfta fram dessa sections genom att skapa landing pages för dem. Dessa är fristående pages på your website som är utformade för att generera leads.

För att skapa visuellt tilltalande landing pages för din website rekommenderar vi att du använder SeedProd. Det är den bästa WordPress landning page builder på marknaden som kommer med en drag and drop-byggare, färdiga templates och många block.

SeedProd

SeedProd gör det super enkelt att skapa attraktiva landing pages som lyfter fram viktiga sektioner på din webbplats gillar ett kontaktformulär, försäljningsmeddelande, giveaways, rekommendationer, optin-formulär, login pages och mer.

För detaljer kan du se vår tutorial om hur du skapar en landing page i WordPress.

Create a landing page

Utöver det kan du också använda SeedProd för att skapa custom themes, coming soon pages, maintenance pages och så mycket mer.

För mer information, se vår kompletta SeedProd review.

Vi hoppas att den här guiden hjälpte dig att lära dig hur du markerar text i WordPress. Du kanske också vill se vår Step-by-Step guide om hur man customize färger i WordPress för att göra din website mer estetiskt tilltalande och vår jämförelse av de bästa email marketing tjänsterna för att öka din trafik.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

10 kommentarerLämna ett svar

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dennis Muthomi says

    When I am choosing a custom color for the highlight, how can I add a custom color of my choice to appear in the default 5 color options shown at the bottom of the color picker.
    It would be helpful if I could save a custom hex color to easily reuse instead of having to enter it manually each time.

    • WPBeginner Support says

      There is not a simple method we would recommend at the moment but should we find a method we will be sure to share!

      Administratör

      • Dennis Muthomi says

        hi thanks taking the time to reply, I will definitely keep an eye out in case you discover a good method in the future

  3. Ralph says

    Such a simple way to make something stand out! Great!
    This must be related to my theme customization, but when I highlight text itself or the background, it changes the font. Which is weird as at customizing I set all fonts in all scenarios to only 2 fonts. First for headings and second for all the rest. I have to spend another evening on that, I guess.

    • WPBeginner Support says

      That is very strange, we would recommend reaching out to your theme’s support to see if there is some kind of styling conflict.

      Administratör

  4. Prakash Joshi says

    Hello,… thanks for the post.
    I tried using mark HTML and advanced editor tools. But there’s one problem. The highlighted text is being bold automatically. Why is this happening ? Do you have any solutions??

    • WPBeginner Support says

      If it happens automatically then you would want to check with the support for your specific theme to ensure it is not a conflict with the theme’s default styling.

      Administratör

  5. Luqman khokhar says

    Nice post about, highlight the specific text as per my experience 2nd and 3rd option is fine because lots of plugins are not a good approach. They can slow your site.

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.