Back to Top knop stijlen in Divi

by | 03 augustus 2017

De meeste pagina’s hebben back to top knop rechtsonder op de pagina, die je ziet zodra je begint te scrollen. Het is meestal een vrij onopvallende knop, een knop die doet wat het moet doen, zonder de aandacht al te veel te trekken. Maar wat als je dat nu anders wil?

Ik ben zelf al een tijdje aan het experimenteren met het aanpassen van de back-to-top knop in Divi. Ik heb verschillende manieren geprobeerd. Die allebei geweldig goed werken. Het is maar net wat je wilt.

  1. Aanpassen met een plugin.
  2. Handmatig aanpassen met CSS

Waarom moeilijk doen?

Met de plugin DIVI Switch kun je de back-to-top knop heel makkelijk aanpassen. Dit heb ik ook op mijn eigen site gedaan. Je kunt met deze Plugin niet alleen je back-to-top knop aanpassen, maar nog tientallen andere dingen.  De developers noemen de plugin zelf een Zwitsers Zakmes. Het enige dat je hoeft te doen is een knop indrukken. ‘Flip a Switch’.

Andere makkelijke aanpassingen die je kunt doen zijn het laten zien van een pre-loader icoon, het gebruiken van instagram filter of het woord menu toevoegen bovenaan je mobiele menu. Er zijn meer dan vijftig van dit soort ‘switches’!

Een plugin zorgt altijd voor extra laadtijd van je site. Als je alleen je back to top knop wil aanpassen is deze plugin dan ook nogal overkill. Wil je op een makkelijke manier, heel veel dingen aan je site veranderen dan is Divi Switch een hele goede investering en kan ik je het zeker aanraden om deze plugin te kopen.

 

Coderen makkelijk?

Met de hand kun je ook op een hele makkelijke manier aanpassingen doen in Divi. Je hoeft hiervoor echt geen coderings ninja te zijn.

je gebruikt hier CSS voor. De CSS code kun je heel makkelijk in een Child Theme of in je Theme Customizer/ Aanpasser van Thema kwijt. Kom je er niet uit dan kun je me altijd om hulp vragen.

Als je alleen de kleur en de vorm van het icoon wil veranderen, dan kun je deze code gebruiken:

//*Back to top button stijlen*//
/*Achtergrondkleur aanpassen*/
.et_pb_scroll_top.et-pb-icon {
 background: rgba(247, 150, 33, 0.8);
}

/*Maak een cirkel van de knop en laat de knop van rechts komen*/
.et_pb_scroll_top.et-pb-icon {
 padding: 10px;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
 right: 20px;
}

Melissa Love van The Design Space is een design en Divi heldin van mij. Zij heeft afgelopen week een tutorial gemaakt over het veranderen van de back to top knop in een afbeelding.

Zij gebruikte hiervoor deze code:

//*Back to top button stijlen*//
/*Hier plaats je de afbeelding*/
.et_pb_scroll_top::before {
    content: url(https://jouwbestand.png);
    padding: 10px;
}
.et_pb_scroll_top.et-pb-icon {
    background: none;
}

Je hebt hiervoor een transparante png afbeelding nodig. Het plaatje kun je opslaan in je media bibliotheek. Vergeet niet na het opslaan de url van de afbeelding te kopiëren.

Op de plek [ content: url (https://jouwbestand.png) ] vervang je de url door de url van je eigen afbeelding.

Het tweede stukje code zorgt ervoor dat de achtergrond transparant wordt. Wil je liever wel een gekleurde achtergrond dan kun je dit natuurlijk weglaten, of een andere kleur toevoegen.

Veel plezier met je aanpassingen! En ik wil graag zien wat je van de knop hebt gemaakt.   

Pin It on Pinterest

Share This