Navigation

Hur man använder ankare i Divi

Vi ska kolla lite närmare på hur man använder ankare i Divi. Vad är ett ankare? Ingen fara – inget hjärnsläpp idag där vi plötsligt blivit nautiska. Detta handlar fortfarande om hemsidor! Ett ankare – anchor – anger inget mer än en fast punkt på en specifik sida.

Säg att du t.ex. har en one page, d.v.s. en hemsida som egentligen bara är en enda och väldigt lång hemsida. Med jämna mellanrum på din sida har du en knapp som du vill skall leda till ett kontaktformulär i botten på sidan. Istället för att din besökare scrollar sig trött i fingret kan de klicka på knappen och automatiskt bläddras ner till din ankarpunkt (kontaktformuläret).

Vad gör ett ankare eller anchor på min hemsida HTML CSS
Bild från Elegant Themes

Börja med att skapa en ny knapp och gå in i egenskaperna (kugghjulet):

Divi Knapp Länk Inställningar
Bild från Elegant Themes

Som länk anger du #toggle3. Toggle3 är bara ett exempel i det här fallet, men hade också kunnat vara kontaktformular. Huvudsaken är att det inleds med #-tecknet! Som vanligt i internetadresser är det lämpligt att undvika specialtecken (å ä ö , . : ; / * %). Använd a-z, 0-9 samt bindestreck ( – ) eller underscore ( _ ).

När du angivit knappens länk går du till din sektion, rad eller modul. Öppna egenskaper och gå till avancerat. Under CSS ID anger du samma sak du angav i knapplänken utan #-tecknet.

Divi Toggle CSS ID Anchor
Bild från Elegant Themes

För att få ankaret att fungera behövs inte mer än så.

I exemplet från Elegant Themes blogginlägg har man också valt att automatiskt öppna toggle3 vilket kräver att vi går till Divi > Temainställningar > Integration och lägger in en bit kod i sektionen ”Lägg till kod i sidkroppen”:

<script>
jQuery(function ($) {
    //open toggle on button click
    $('a.open-toggle').on('click', function(event){
        $('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
    });
});
</script>

I blogginlägget har man också tagit upp andra exempel, till exempel hur man gör en meny för en one page.

0 0 röster
Article Rating
Prenumerera
Meddela vid
guest
0 Kommentarer
Inline feedback
Visa alla kommentarer

Relaterade inlägg

Hosta vid bröstsmärta
Första Hjälpen & HLR
Hosta vid bröstsmärta

Det förekommer både kedjebrev och delningar i sociala medier om en typ av självhjälp och att man ska hosta vid bröstsmärta (= vid misstänkt hjärtinfarkt).

Göteborgs-Postens korståg mot BB Gårda
BB & Förlossning
Göteborgs-Postens korståg mot BB Gårda

Det är tragikomiskt att se Göteborgs-Postens slogan ”riktig journalistik gör skillnad” i webbläsarens flik när man går in på deras sida och se artikelserien Naturlig födsel

Dr. Eva Wiberg-Itzel om BB Gårda
BB & Förlossning
Eva Wiberg-Itzel om BB Gårda

Under den gångna veckan skriver Doktor Eva Wiberg-Itzel om BB Gårda i ett nytt inlägg i sin blogg och även på Instagram. Doktor Eva Wiberg-Itzel,

0
Lämna gärna en kommentarx
()
x
Chrille Hedberg logotyp
Chrille Hedberg

Använd gärna detta formulär för att komma i kontakt med mig.

Hej! Vad kul att du är här!

Hemsidan har precis fått sig en rejäl ansiktslyftning! Allt gammalt innehåll sopades och den nya byggdes upp på nytt. Vissa länkar kan därför vara lite knas att funkera, och vissa bloggkategorier saknar innehåll.

Hoppas ändå att du trivs här! Tjoa gärna till om det är något!

Som många andra webbplatser kör jag cookies på denna. Du kan också, frivilligt, välja att använda ett konto från sociala medier för att logga in och kommentera. Du kan när som helst återkalla detta och/eller radera din profil.