Hur man markerar ett menyalternativ i WordPress

Att markera ett menyalternativ i WordPress kan dra dina besökares uppmärksamhet till viktiga sidor eller specialerbjudanden. Detta kan hjälpa till att förbättra navigeringen och användarnas engagemang.

Oavsett om du vill betona en ny funktion, en rea eller en viktig uppdatering, kan det att få vissa menyalternativ att sticka ut öka din webbplats effektivitet.

Till exempel har vi framhävt prissidan i huvudnavigeringsmenyn hos många av våra partnervarumärken för att dra användarnas uppmärksamhet. Detta tillvägagångssätt har uppmuntrat fler besökare att utforska våra produktpriser och har resulterat i ökade konverteringar.

I den här artikeln visar vi dig hur du enkelt kan framhäva ett menyalternativ i WordPress med hjälp av CSS-kod.

Varför markera ett menyalternativ i WordPress?

En navigeringsmeny är en lista med länkar som pekar till viktiga områden på din webbplats. De presenteras vanligtvis som en horisontell stapel i sidhuvudet på varje sida på en WordPress-webbplats.

Genom att markera ett menyalternativ i din navigeringsmeny kan du enkelt rikta användarens uppmärksamhet mot din mest framträdande uppmaning till handling.

Om du till exempel vill att användare ska besöka prissidan eller ett specifikt inlägg på din WordPress-blogg, kan du markera det objektet i din navigeringsmeny. Detta kan öka trafiken till den sidan och öka försäljningen.

Med det sagt, låt oss se hur du kan markera ett menyalternativ i WordPress med CSS:

• Metod 1: Framhäv ett menyalternativ med hjälp av Full Site Editor
• Metod 2: Framhäv ett menyalternativ med en temaanpassare
• Anpassa din menyobjektshöjdpunkt

Metod 1: Framhäv ett menyalternativ med hjälp av Full Site Editor

Om du använder ett blockaktiverat tema, då har du Full Site Editor istället för den äldre Theme Customizer. Du kan enkelt markera ett aktuellt menyalternativ i den också.

Gå först till sidan Utseende » Redigerare från WordPress adminpanel. Detta tar dig till redigeraren för hela webbplatsen.

Dubbelklicka här helt enkelt på menyalternativet du vill framhäva, och klicka sedan på 'Inställningar'-ikonen högst upp. Detta öppnar omedelbart inställningarna för det specifika menyalternativet i blockpanelen.

Skrolla nu helt enkelt ner till fliken 'Avancerat' och klicka på pilikonen bredvid den för att expandera den.

Detta öppnar ett fält för 'Additional CSS Class' där du måste skriva highlighted-menu.

Klicka sedan på knappen 'Spara' högst upp på sidan för att spara dina ändringar.

Därefter behöver du lägga till en liten mängd CSS i ditt tema för markerings­effekten. Du kan antingen åtgärda den saknade temaanpassaren, eller så kan du använda ett plugin för kodutdrag för att lägga till CSS-kod.

Hur man lägger till CSS-kodsnuttar med WPCode

För att lägga till CSS i WordPress rekommenderar vi att du använder WPCode eftersom det är det bästa pluginet för kodavsnitt i WordPress på marknaden som gör det säkert och enkelt att lägga till anpassad kod.

Först måste du installera och aktivera WPCode-pluginet. För fler instruktioner, kolla in vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, navigera till sidan Kodavsnitt » + Lägg till avsnitt från din WordPress adminpanel.

Håll sedan muspekaren över alternativet 'Lägg till din anpassade kod (ny kodsnutt)' och klicka på knappen '+ Lägg till anpassad kodsnutt' under den.

Sedan måste du välja 'CSS-utdrag' som kodtyp från listan med alternativ som visas.

Nu kommer du till sidan 'Skapa anpassad kodsnutt', där du kan börja med att välja ett namn för din kodsnutt.

Kopiera och klistra sedan in följande CSS-kod i rutan 'Code Preview':

/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Så här ska det se ut:

När du har gjort det, scrolla ner till avsnittet 'Infogning'.

Välj här helt enkelt läget 'Auto Insert' så att koden automatiskt kan köras på hela din webbplats.

Gå nu till toppen av sidan och växla reglaget från 'Inaktiv' till 'Aktiv'.

Klicka sedan helt enkelt på knappen 'Spara utkast' för att lagra dina inställningar.

Du har nu framgångsrikt markerat ett menyalternativ i WordPress med hjälp av en redigerare för hela webbplatsen.

Så här kommer ditt menyalternativ att se ut efter att du har lagt till CSS-koden.

Hur man kommer åt temaanpassaren med ett blocktema

Om du vill använda temaanpassaren och ett FSE-tema, kopiera och klistra helt enkelt in URL:en nedan i din webbläsare. Se till att ersätta 'example.com' med din egen webbplats domännamn:

https://example.com/wp-admin/customize.php

Detta öppnar temaanpassaren för ditt blocktema, där du måste expandera fliken 'Ytterligare CSS'.

Härifrån, kopiera och klistra in CSS-utdraget i rutan 'Ytterligare CSS':

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Klicka sedan helt enkelt på knappen 'Publicera' högst upp för att spara dina inställningar.

Metod 2: Framhäv ett menyalternativ med en temaanpassare

Om du använder ett äldre WordPress-tema, kommer du troligen att ha en temaanpassare aktiverad som standard. Att markera ett menyalternativ i en temaanpassare är en ganska enkel process.

Gå först helt enkelt till Utseende » Anpassa i din WordPress-instrumentpanel för att starta tema-anpassaren. När den öppnas klickar du helt enkelt på fliken 'Menyer' i sidofältet till vänster.

Härifrån klickar du på kugghjulsikonen längst upp till höger för att visa avancerade egenskaper.

Nu kan du gå vidare och kryssa i rutan 'CSS-klasser'.

Därefter, scrolla ner till avsnittet 'Menyer'.

Om du har flera WordPress-menyer, klicka helt enkelt på menyn med de menyalternativ du vill framhäva.

Detta öppnar en ny flik där du kan välja det menyalternativ du vill framhäva. Det kan vara 'Kontakta oss' som i vårt exempel, eller det kan vara din prissida eller länken till din webbutik.

Klicka helt enkelt på menyalternativet du väljer för att expandera vissa inställningar. Klicka här på fältet 'CSS-klasser'.

Allt du behöver göra är att skriva 'highlighted-menu' i fältet. Du kan lägga till denna CSS-klass till flera menyalternativ, och de kommer alla att markeras.

Gå sedan helt enkelt till fliken 'Ytterligare CSS' i temaanpassaren.

Kopiera och klistra sedan in följande CSS-kod:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Grattis! Du har framgångsrikt framhävt ett menyalternativ.

Glöm slutligen inte att klicka på knappen 'Publicera' högst upp för att spara dina inställningar.

Anpassa din menyobjektshöjdpunkt

Nu när du har framhävt menyalternativet kan du finjustera CSS-koden för att anpassa ditt menyalternativ som du vill.

Du kan till exempel ändra bakgrundsfärgen på ditt menyalternativ.

Leta helt enkelt efter följande kod i CSS-kodsnutten du precis klistrade in:

background: #FFB6C1

När du har hittat den kan du helt enkelt ersätta färgkoden för rosa med hexkoden för valfri färg du önskar:

background: #7FFFD4;

Ovan är hexkoden för akvamarin.

Du kan kolla in vår guide för att enkelt lägga till anpassad CSS för andra idéer om hur du anpassar det markerade menyalternativet.

När du är nöjd med dina val klickar du helt enkelt på knappen 'Publicera' i temaanpassaren eller 'Spara kodavsnitt' i WPCode för att spara dina ändringar.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du markerar en menyikon i WordPress. Du kanske också vill kolla in vår nybörjarguide om hur du stylar WordPress-navigeringsmenyer eller vår handledning om hur du lägger till bildikoner med navigeringsmenyer i WordPress.

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