Zo gebruik je een eigen afbeelding als back-to-top knop

Stap 1: Maak je eigen back-to-top knop afbeelding met transparante achtergrond

Zorg ervoor dat hij al op het juiste formaat is (50 tot 75px breed is ideaal) en dat de afbeelding een transparante achtergrond heeft! Sla hem dus op als png bestand.

Die van mij is gemaakt door de Happy Creator! Check zeker haar leuke pakketten voor ondernemers voor eigen custom GIFjes / illustraties / animaties 😃.

Stap 2: Zorg ervoor dat de back-to-top staat ingesteld in de DIVI Thema Opties

Ga vanuit je Dashboard naar DIVI -> Thema opties en check of de Terug naar boven toets staat ingeschakeld:

Stap 3: Upload je afbeelding in je mediabibliotheek en kopieer de URL

Stap 4: Plak de URL in onderstaande CSS

Vervang in onderstaande code de tekst URL UIT MEDIABIBLIOTHEEK door de url die je net hebt gekopieerd.

/*EIGEN AFBEELDING BACK-TO-TOP KNOP*/
.et_pb_scroll_top:before { 
    content: url(URL UIT MEDIABIBLIOTHEEK) !important; 
}
.et_pb_scroll_top.et-pb-icon {
    right: 10px; /*afstand van rechterkant scherm*/
    bottom: 20px; /*afstand van onderkant scherm*/
    background: none !important; 
    transition: all .1s ease-in-out; /* add transition */
}
.et_pb_scroll_top.et-pb-icon:hover {
    bottom: 25px; /*afstand van onderkant bij hover*/
    transition: all .1s ease-in-out; /*add transition*/
}

Je ziet dat er in de CSS code nog wat waardes staan voor de afstand van de rechterkant en onderkant van het scherm, die zijn uiteraard aan te passen naar wens!

Stap 5: Voeg de CSS code toe bij je DIVI Thema opties

Ga vanuit je dashboard naar DIVI -> Thema opties -> Aangepaste CSS en voeg de code toe.

Onderstaande CSS code kun je er nog onder zetten, zodat je knop met een fade-in en fade-out tevoorschijn komt vs verdwijnt (das toch fancyy? 😁):

/*ANIMATIE BACK-TO-TOP KNOP*/
.et_pb_scroll_top.et-visible {
    -webkit-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
    -moz-animation: fadeInBottom 2s 1 cubic-bezier(.50,0,.160,1);
    -o-animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
    animation: fadeInBottom 1s 1 cubic-bezier(.50,0,.160,1);
}
.et_pb_scroll_top.et-hidden {
    opacity: 0;
    -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
    animation: fadeOutBottom 1s 1 cubic-bezier(.77,0,.175,1);
}

Stap 6: Bekijk het resultaat!

Yes, je eigen back-to-top knop die perfect aansluit op de rest van je website 🙌!

Check hem ook nog even op mobiel en tablet om te zien of het formaat daar ook acceptabel is! Maak hem anders nog wat kleiner 😊.

Wil je gewoon die van mij in je eigen huisstijlkleur? Neem dan even contact op met Felicity van de Happy Creator!

Succes!

Laat je het me weten als ik die van jou kan bewonderen? 😃