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

29 jun 2021 | DESIGN TIP

Marloes met laptop blog
Een back-to-top knop is handig, vooral als je je menubalk niet vastzet in beeld. Maar de standaard knop is wel een beetje suf! Vervang hem door een eigen afbeelding met deze handige tutorial.
divi-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:

divi-thema-opties-terug-naar-boven-toets

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? 😃

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Customize lekker verder!

Marloes blij blog

Hoi, ik ben Marloes!

Een enthousiaste webdesigner, gespecialiseerd in het DIVI thema voor WordPress. Mijn tutorials zijn geschreven voor iedereen die de basics van DIVI al kent.

Ken jij die nog niet, maar wil je graag met DIVI aan de slag? Bekijk dan mijn uitgebreide beginners training!