fbpx

Scrolla med Divi

Publicerad: 22 april, 2020

Scrolla med DiviIbland uppstår behov att erbjuda din besökare att enkelt kunna scrolla till en sektion på din webbsida. Här visar jag två sätt du kan använda med din Divi hemsida.

Knapp för att scrolla upp till toppen

Under menyn Divi > Temainställningar > Allmänt kan du aktivera “Till toppen knappen”.
När du sedan scrollat ned en bit på sidan dyket knappen upp i nedre högra hörnet och erbjuder läsaren ett snabbt sätt att scrolla till toppen igen.

Scrolla med Divi 1

Scrolla med Divi 2

För att anpassa knappen så den passar din design, använd CSS i ditt style.css i barntemat eller kopiera in koden under Anpassad CSS på samma ställe som ovan, dvs Divi > Temainställningar > Allmänt.

/*----------Anpassad sk "Back To Top"-knapp----------*/

/* Hur knappen visas standard */
.et_pb_scroll_top.et-visible {
opacity: 1;
-webkit-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
-moz-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
-o-animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
animation: fadeInBottom 1s 1 cubic-bezier(.77,0,.175,1);
}

.et_pb_scroll_top.et-pb-icon {
right: 90px;
bottom: 15px;
border-radius: 25px;
background: rgba(25, 72, 103, 0.48);
padding: 10px;
}

/* Hoover-effekt */
.et_pb_scroll_top.et-pb-icon:hover {
background: #000000;
}

/* Ikon inuti knappen */
.et_pb_scroll_top:before {
content: "\21";
}

Scrolla till en sektion på din webbsida

Om du jobbar med en sk onepager, en webbsida med flera sektioner istället för en webbsida med flera sidor. Då behöver du från menyn kunna länka direkt till en sektion, t ex Kontakta oss.

Först behöver du ange ett id för den sektion som du vill länka till. Under sektion-inställningar > avancerat och css-id anger du det namn du vill använda, t ex kontakt

Scrolla med Divi 3

I menyn sedan (Utseeende > menyer) skapar du en sk anpassad länk. Ange URL till sidans namn och #id, dvs i detta fall startsidan /#kontakt

Skulle länken legat på sidan /om-oss hade den blivit /om-oss/#kontakt

Scrolla med Divi 4

På samma vis kan du skapa länkar och CTA-knappar på din sida för att erbjuda besökaren ett snabbt sätt att hoppa mellan sektioner.

Det går även bra att länka till en sektion på en helt annan webbadress, då skriver du URL först följt av /#bokmarke

Lycka till och scrolla lungt!

Läs även

Vertikal meny i Divi

Vertikal meny i Divi

Som standard i Divi-temat så får du en meny placerad i toppen av din webbsida, men visste du att du även kan använda dig av en vertikal meny?

Bakgrundsfärg Divi menyn

Bakgrundsfärg Divi menyn

I denna artikel tänkte jag förklara hur du kan ställa in bakgrundsfärgen i dina menyrader, både primära och sekundära.
Även om det mesta går att lösa under Divi och Tema-anpassaren finns det alltid tillfällen då lite CSS kan förenkla vardagen så jag visar även hur du kan anpassa din meny med lite enkel kod.