Hur man markerar text i WordPress (nybörjarguide)

Kommer du ihåg att du använde en gul överstrykningspenna för att markera viktiga passager i läroböcker? Det digitala motsvarigheten i WordPress är lika användbart för att få viktig information att sticka ut på din webbplats.

Men många nybörjare inser inte hur enkelt det är att lägga till denna formatering i sitt innehåll.

Under hela tiden vi drivit WPBeginner har vi märkt att enkla tekniker som textmarkering ofta gör störst skillnad i hur läsare engagerar sig i innehåll.

När den används strategiskt kan markerad text guida besökare till dina viktigaste punkter och förbättra minnesåterkallningen av budskapet.

I den här guiden visar vi dig flera enkla metoder för att markera text i WordPress.

Varför markera text i WordPress

Att markera text i WordPress hjälper dig att dra uppmärksamhet till de viktigaste delarna av ditt innehåll.

Det gör viktig information lättare att upptäcka, förbättrar läsbarheten och ger stöd för tillgänglighet för användare som kan ha visuella eller lässvårigheter.

Här är de främsta fördelarna med att markera text:

• Förbättrar synligheten av viktig information: Det hjälper viktiga detaljer som rabatter, erbjudanden eller varningar att sticka ut så att läsarna inte missar dem.
• Ökar konverteringar: Genom att markera uppmaningar till handling eller specialerbjudanden kan du enklare guida användare mot att ta nästa steg.
• Förbättrar läsbarheten: Det gör långt innehåll lättare att skanna, vilket hjälper läsare att snabbt hitta de mest relevanta punkterna.
• Stödjer tillgänglighet: Det kan hjälpa användare med synnedsättning eller lässvårigheter att bättre förstå och navigera ditt innehåll.
• Förbättrar det visuella utseendet: När det används korrekt kan markeringar göra ditt innehåll mer strukturerat och engagerande.

Bästa praxis för effektiv textmarkering

Nu när du vet varför textmarkering är användbart är det viktigt att använda det på rätt sätt.

När det görs korrekt förbättrar det läsbarheten och engagemanget, men att överanvända det kan ha motsatt effekt.

Med det sagt, låt oss titta på hur man enkelt markerar text i WordPress. Du kan använda snabblänkarna nedan för att hoppa till den metod du vill använda:

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

Den här metoden är för dig om du enkelt vill markera text i WordPress med hjälp av blockredigeraren (Gutenberg).

Först måste du öppna ett befintligt eller nytt inlägg i innehållsredigeraren från sidofältet i WordPress-administrationen.

Väl där, markera helt enkelt texten du vill markera. Klicka sedan på nedåtpilen i verktygsfältet för blocket för att se fler alternativ.

Detta öppnar en rullgardinsmeny där du måste välja alternativet 'Markera' från listan.

Ett färgvalsverktyg öppnas nu på din skärm. Härifrån behöver du välja alternativet 'Bakgrundsfärg'.

Välj därefter en standardfärg för markering från de givna alternativen.

Du kan också välja en anpassad färg för att markera text genom att klicka på alternativet 'Anpassad' för att öppna hela färgvalet.

Glöm slutligen inte att klicka på knappen ‘Publicera’ eller ‘Uppdatera’ för att spara dina ändringar.

Du kan nu besöka din WordPress-blogg för att se den markerade texten i aktion.

Om du någonsin vill ta bort markeringen, välj den markerade texten igen i blockredigeraren, klicka på nedåtpilsikonen och välj 'Markering'.

Välj sedan alternativet 'Rensa' från färgvalet.

Metod 2: Markera text i WordPress med WPCode (rekommenderas)

Om du vill använda en specifik färg konsekvent för att markera text över hela din WordPress-webbplats, då är denna metod för dig.

Den största fördelen med denna metod är global kontroll. Om du någonsin bestämmer dig för att ändra markeringsfärgen behöver du bara uppdatera kodavsnittet en gång. Det kommer automatiskt att uppdatera markeringsfärgen över hela din webbplats.

Du kan enkelt markera text i WordPress genom att lägga till CSS-kod i dina temafiler. Men det minsta felet när du anger koden kan bryta din webbplats och göra den otillgänglig.

Därför rekommenderar vi att använda WPCode, som är det bästa pluginet för WordPress-kodavsnitt på marknaden. Det har över 3 miljoner aktiva installationer och ett betyg på 4,9/5 stjärnor på WordPress.org.

Efter noggranna tester har vi funnit att det är det enklaste och säkraste sättet att lägga till kod på din webbplats utan att direkt redigera dina temafiler. Detta beror helt på dess smarta kodvalidering, inbyggda felhantering och säkra exekveringsmiljö.

För detaljer, se vår WPCode-recension.

Steg 1: Installera och konfigurera WPCode

Först måste du installera och aktivera pluginet WPCode. För fler instruktioner, se vår nybörjarguide om hur man installerar ett WordPress-plugin.

Steg 2: Skapa ett anpassat CSS-avsnitt

Efter aktivering, gå till sidan Kodavsnitt » + Lägg till avsnitt från WordPress admin sidofält.

Klicka sedan bara på knappen ‘+ Lägg till anpassad kodsnutt’ under alternativet ‘Lägg till din anpassade kod (ny kodsnutt)’.

Sedan behöver du välja en kodtyp. För den här handledningen, välj alternativet 'CSS-kodavsnitt'.

Lägg sedan till ett lämpligt namn för din kodsnutt.

Detta tar dig till sidan 'Skapa anpassad snutt', där du kan börja med att skriva ett namn för din kodsnutt.

Namnet är endast för din referens och kan vara vad som helst för att hjälpa dig att komma ihåg vad koden är till för.

Steg 3: Lägg till din anpassade kod

Kopiera och klistra sedan in följande kod i rutan 'Kodförhandsgranskning':

mark {
background-color: #ffd4a1;
}

När du har gjort det, lägg till hexkoden för din föredragna markeringsfärg bredvid raden background-color i koden.

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

Steg 4: Aktivera automatisk infogning och spara

Skrolla sedan ner till avsnittet ‘Infogning’.

Välj här metoden ‘Automatisk infogning’ för att köra koden vid aktivering.

Gå sedan till toppen av sidan och byt omkopplaren från 'Inaktiv' till 'Aktiv'.

Klicka slutligen på knappen 'Spara kodavsnitt' för att spara dina ändringar.

Steg 5: Redigera inlägg i HTML-vyn

Nu när CSS-avsnittet har aktiverats måste vi tillämpa formateringen. Eftersom detta är en anpassad stil kommer vi kort att växla till HTML-vyn för ett specifikt block för att omsluta texten.

Öppna först ett befintligt eller nytt inlägg i WordPress blockredigerare.

Härifrån klickar du på ikonen 'Fler alternativ' (tre vertikala prickar) i verktygsfältet för det valda blocket. Detta öppnar en ny rullgardinsmeny där du måste välja alternativet 'Redigera som HTML'.

Steg 6: Rama in text med <mark>-taggar

Du kommer nu att se blockinnehållet i HTML-format.

Här, slå bara in texten du vill markera inom <mark> </mark> taggarna så här:

<mark>highlighted-text</mark>

Detta kommer att markera texten i hexfärgen som du valde i ditt WPCode-utdrag.

Därefter klickar du på alternativet 'Redigera visuellt' i blockets verktygsfält för att växla tillbaka till den visuella redigeraren.

Steg 7: Spara och publicera ditt inlägg

När du är klar, klicka på knappen 'Uppdatera' eller 'Publicera' för att spara dina ändringar.

Nu kan du besöka din webbplats för att se den markerade texten i aktion.

Bonus: Använd SeedProd för att markera viktiga sidor på din webbplats

Vi har diskuterat hur man formaterar specifik text i ditt innehåll. Ibland kanske du dock vill markera hela sektioner eller sidor på din webbplats, som ett kontaktformulär eller en presentkupong.

Om du till exempel har en onlinebutik och precis har lanserat en säsongsvis rea, kanske du vill markera det erbjudandet på din webbplats.

Du kan markera dessa sektioner genom att skapa landningssidor för dem. Dessa är fristående sidor på din webbplats som är utformade för att generera leads.

För att skapa visuellt tilltalande landningssidor för din webbplats rekommenderar vi att du använder SeedProd. Det är den bästa WordPress-byggaren för landningssidor på marknaden, betrodd av över 1 miljon webbplatser och konsekvent betygsatt 4,9/5 stjärnor på WordPress.org.

SeedProd kommer med en dra-och-släpp-byggare, 350+ färdiga mallar och 90+ block.

Vi har sett många företag, inklusive e-handelsbutiker och marknadsföringsbyråer, uppnå stora resultat med SeedProd, och de rapporterar ofta betydande förbättringar i leadgenerering och konverteringar.

För detaljer, se vår SeedProd-recension.

Pluginet gör det enkelt att skapa attraktiva landningssidor som lyfter fram viktiga sektioner på din webbplats, som ett kontaktformulär, rekommendationsmeddelanden, tävlingar, kundrecensioner, optin-formulär, inloggningssidor och mer.

Förutom det kan du också använda SeedProd för att skapa anpassade teman, kommande sidor, underhållssidor och mycket mer.

För detaljer kan du se vår handledning om hur du skapar en landningssida i WordPress.

Vanliga frågor om textmarkering i WordPress

Här är några frågor som våra läsare ofta har ställt om att markera text i WordPress:

Hur ändrar du textfärg i WordPress?

Du kan ändra textfärg i WordPress med hjälp av blockredigeraren genom att markera din text och justera färginställningarna i blockets alternativ 'Textfärg'. Detta gör att du snabbt kan styla ditt innehåll utan kodning.

För mer information, se vår guide om att ändra textfärg i WordPress.

Hur kan du markera text med HTML i WordPress?

Du kan markera text med HTML i WordPress genom att rama in den i en <mark>-tagg eller använda inline CSS-stilar. Detta ger dig mer kontroll över hur markeringen ser ut.

Om du föredrar ett enklare alternativ kan du också använda ett plugin som WPCode för att lägga till och hantera anpassade CSS-utdrag inuti din WordPress-instrumentpanel.

Vilken Ctrl-tangent används för att markera text i WordPress?

Det finns ingen specifik Ctrl-tangentgenväg i WordPress för att direkt markera text. Markering görs vanligtvis manuellt genom att markera text med musen eller styrplattan.

Du kan dock använda Ctrl + A (Cmd + A på Mac) för att markera all text i ett block eller redigerare, vilket gör det enklare att applicera formatering som markering eller färgändringar efteråt.

Hur ändrar du länkafärg i WordPress?

Du kan ändra länkafärg i WordPress med hjälp av ditt temas anpassningsinställningar eller anpassad CSS. Detta gör att du kan matcha länkstilar med din webbplatsdesign för ett konsekvent utseende.

För steg-för-steg-instruktioner, se vår handledning om hur man ändrar länkafärg i WordPress.

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 steg-för-steg-guide om hur man anpassar färger i WordPress för att göra din webbplats mer estetiskt tilltalande och vår jämförelse av de bästa AI-webbplatsbyggarna för WordPress.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.