fbpx
blog back to top knop divi header image

Back to Top knop stijlen in Divi

Geschreven door Marleen Tigchelaar

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.   

0 reacties

01. WAT KLANTEN ZEGGEN

MINT Internet & Advies
4.8
Based on 5 reviews
powered by Google
wilma van Dam
wilma van Dam
11:03 29 Aug 20
Marleen is gastvrij (koffie staat altijd klaar), vriendelijk, geduldig en ze weet waar ze het over heeft! Zeker een... aanrader!lees meer
Sjoukje van der Velde
Sjoukje van der Velde
10:32 10 Aug 20
Marleen heeft mij geholpen met een aantal technische zaken in mijn website die ik met DIVI heb gemaakt. Daarnaast heeft... ze mij nog van allerlei tips voorzien om mijn site te verbeteren. Marleen weet goed haar weg met DIVI en daarnaast kent ze veel handige tips en tools die je tijd besparen en/of je website verbeteren. Ik vond het fijn om een op een met Marleen te werken, en ik raad het daarom iedereen aan!lees meer
Ed van Sch.
Ed van Sch.
09:46 01 Aug 20
De site Oriendum was verouderd en zeer moeilijk te vinden. Samen met MINT een hele nieuwe site gebouwd en heel veel... tips & tools gekregen zodat vindbaarheid enorm toenam. Klasse.lees meer
Autotaalglas Heerenveen
Autotaalglas Heerenveen
06:49 10 Apr 20
Wanneer je een website wil die echt smoelt en goed bezocht wordt dan moet je bij Mint Internet zijn.
Bekijk alle beoordelingen

02. PARTNERS

versio hosting aanbieding

03. DEEL DIT BLOG

Spiekbriefje vol handige tips & tools

13 beste online tools voor jouw bedrijf

Je kunt nu je spiekbrief downloaden.