Framhäv en menyknapp i Divi

14 februari, 2019 | Tips & tricks

Som du säkert sett på många hemsidor har man en knapp i menyn som tar en till en riktigt bra sida. Det finns många tutorials på nätet som ger dig tips om hur du kan transformera dina knappar i menyn. T ex vill du framhäva din knapp för

  • Kontakta oss
  • Boka nu
  • Köp nu
  • Testa här
  • Ring oss
  • FAQ

Det kan såklart vara vad som helst anpassad för just din hemsida i WordPress. För att skapa denna effekt så behöver du använda dig av CSS. Det är alltid bra om du har ett barntema där du kan skriva in din kod, annars lägger du den under Divi tema-inställningar.

På denna sida ser det ut så här:

Framhäv en menyknapp i Divi 1

Så här gör du:

  1. Öppna din meny och se till så att du har CSS-klasser aktiveradeFramhäv en menyknapp i Divi 2
  2. Skriv in klassnamnet under ditt menyalternativ, i detta fall cta_buttonFramhäv en menyknapp i Divi 3
  3. I din barnmeny eller under Divi temainställningar under allmänt klistrar du sist in CSS-koden i fältet längst ned.
    Detta syns bäst på din desktopsida så vi väljer bort tablet och mobilvyn.
/*--- Anpassad menyknapp ---*/

@media (min-width: 1025px) {
  
.cta_button a {
    background-color: #e09900;
    padding: 10px 20px !important;
    border-radius: 20px;
    text-transform: uppercase;
    color: #fff !important;
    box-shadow: 0px 0px 30px 2px rgba(0, 0, 0, 0.1);}
  
}

Tips på lite olika varianter:

How to create a call to action button in the menu

Transform a Divi Menu Item Into a CTA Button

How to Create a Call To Action Button for the Divi Menu

Om sidan

Om sidan

Divi.se ägs och drivs av Henrik Rossini som driver webbyrån Joolo Webbdesign.
Sidan visar svensk information samt tips & trix för premium-temat Divi för WordPress. Divi.se har inga kopplingar till temats leverantör Elegant Themes. Divi samt Elegant Themes är registrerade varumärken som tillhör Elegant Themes, Inc.

Vissa länkar på denna webbplats är sk ”affiliate länkar” vilket innebär att om du klickar på länken och köper en produkt på de sidan så kommer jag att erhålla en viss ersättning.

Söker du hjälp med Divi så kontakta mig via min webbyrå Joolo Webbdesign

Läs även

4 plugins för custom post types i WordPress

4 plugins för custom post types i WordPress

Ibland finns behov av att bygga ett register på sin webbplats, med anpassade fält just för dig och din verksamhet. Här kommer jag tipsa om fyra olika plugins som du kan använda i WordPress för detta ändamål.

Den ultimata guiden till Divi tema-anpassare

Den ultimata guiden till Divi tema-anpassare

I Divi temat ställer du enkelt in din design med hjälp av den sk tema-anpassaren. Det kan vara menyer, färger, typografi, CSS och en hel del annat. Du hittar Divi Anpassaren i menyn under Divi > Tema-Anpassare. Elegant Themes har en väldig lättförståelig guide för...

Hur du skapar mikroanimeringar på ikoner och blurbs

Hur du skapar mikroanimeringar på ikoner och blurbs

Mikroanimeringar är ett kul sätt att utöka synligenheten för ikoner och blurbs på din sida. Det kan vara att de pulserar, skakar, roterar eller liknande för att väcka uppmärksamheten för dina besökare. https://www.youtube.com/watch?v=vcLNc_I_BSI