Hoe kan je de “Back to Top” link aanpassen.

Bevat je website zeer lange berichten of maak je gebruik van Parallax effect waarbij bezoekers moeten scrollen om helemaal tot het einde van de pagina te lezen ? Zo ja, dan is het misschien een goed idee om de “Terug naar boven” knop te activeren. Trouwens, ook voor kortere pagina’s kan zo’n “Terug naar boven” knop handig zijn.

Wat doet die “Terug naar boven” knop eigenlijk ?

Van zodra je begint te scrollen zal de “Terug naar boven” knop zichtbaar zijn in de rechter benedenhoek van je website. Klikken op deze knop zal je direct terug naar de hoofding van je site brengen. Zo hoeven bezoekers niet telkens gebruik te maken van de scrollbar.

Deze functie is niet standaard actief, je zal dus eerst even moeten inloggen in je WordPress administratie.

Hoe activeer ik deze functie in Divi ?

Ga naar https://domeinnaam.be/wp-admin om in te loggen :

Inloggen

Na inloggen ga je naar > Divi > Thema Opties.

Thema opties

Scroll helemaal naar beneden en daar kan je de optie “Terug naar boven Toets” inschakelen.

Thema opties

De knop zal zichtbaar zijn op je website van zodra je naar beneden begint te scrollen.

Hoe kan je deze link aanpassen

Divi bevat een groot aantal opties en instelling die gemakkelijk te bereiken zijn via de Customizer. Voor de “Terug naar boven” knop is er echter geen instelling voorzien om deze aan te passen naar je eigen wensen.

Hieronder enkele mogelijkheden om dit alsnog te doen

Door het toevoegen van een simpele css regel kan je bijvoorbeeld de achtergrond kleur aanpassen.

/* Achtergrondkleur wijzigen */
.et_pb_scroll_top.et-visible
{
background-color:#dd3333;
}

Ook de vorm en plaatsing kan je dmv. css gemakkelijk veranderen.

/* Cirkel terug naar boven knop */
.et_pb_scroll_top.et-pb-icon {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
padding: 10px;
right: 25px;
}

Je kan het icoontje ook vervangen door een eigen transparante afbeelding. Zorg ervoor dat je afbeelding ongeveer 35 pixels groot en hoog is en upload dit naar je media bibliotheek en kopiƫer de url link. Gebruik volgende css code :

/* Vervang icoon door afbeelding */
.et_pb_scroll_top:before {
content: url( plak de url link hier ) !important;
}

Knop verbergen op mobiel en tablet

Door gebruik te maken van een regel css in een media query verberg je de knop.

Voeg onderstaande css toe aan > Divi > Thema Opties > Custom css

@media only screen and ( max-width: 651px ) {
.et_pb_scroll_top{
display:none !important;
}
}

Maak het jezelf gemakkelijk en gebruik een plugin

Download de gratis “Back To Top” plugin van Elegant Themes en bespaar jezelf de moeite om custom css toe te voegen. Deze plugin zal 6 extra stijlen toevoegen waaruit je kan kiezen.

Upload en activeer de plugin op je website en navigeer naar : Divi 100 > Back to Top

Je kan de plugin hier downloaden.

Divi theme kan je rechtstreeks bij Elegant Themes aankopen

Voor slechts $89/jaar koop je een licentie bij Elegant Themes waarmee je toegang krijgt tot Divi, de Divi builder en 87 andere WordPress themes.