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).

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

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.

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.