Hoewel sliders niet heel populair zijn, worden ze nog steeds gebruikt. In Divi zijn er heel veel mogelijkheden om sliders te laten zien, en met de background en overlay mogelijkheden kun je er hele leuke dingen mee doen. Daarbij hanteer ik altijd wel het credo: omdat het kan, betekent niet dat je het moet doen. Subtiliteit en bezoekersbeleving staan altijd bovenaan bij goed design.

Divi standaard slider

De slider van Divi biedt heel veel mogelijkheden, maar de slides komen altijd van beneden naar boven binnen. Dit is iets waar nog geen oplossing voor is binnen Divi zelf. Het meest logische zou zijn om een ‘animatie’ mogelijkheid te bieden, zoals bij de meeste andere modules, maar helaas is die er nog niet. Gelukkig hebben we CSS en met een paar eenvoudige regels code kun je de slider van links naar rechts binnen laten komen.

Laten we wat CSS toevoegen

CSS is een codetaal die ervoor zorgt dat de html van de website er anders uit gaat zien. Dit heeft dus te maken met het uiterlijk en in dit geval een klein stukje functionaliteit.

De CSS code die we nodig hebben om de functionaliteit van de slider aan te passen is deze:

.et-pb-active-slide .et_pb_slide_description {animation-name:fadeInLeft;
transition: .2s ease-in-out;
}

.et-pb-active-slide en .et_pb_slide_description zijn standaard css-klasses in Divi. Wat we hier dus mee doen is zeggen: als je een actieve slide tegenkomt met een slide beschrijving, dan verander je de animatie naar fade in left met een transitie van 0,2 seconden. Uiteraard kun je deze waarden aanpassen naar bijvoorbeeld fadeInRight, en de transitie naar .3s (0,3 seconden). Voor de animatiemogelijkheden verwijs ik graag naar W3 schools, via deze link.

Je kunt de code op verschillende manier plaatsen.

  1. Je wilt alleen de slider op deze pagina aanpassen:
    Plaats dan de CSS in de pagina instellingen, bovenaan rechts in de back-end van de Divi builder:
    pagina-instellingen Divi
    of gebruik de code module en zet de code tussen <style> </style>
  2. Je wilt de sliders op de hele site aanpassen:
    Plaats je code dan onderaan het stylesheet van je Child Theme, of als je dat niet hebt in de Custom CSS van de Customizer of in de Custom CSS van de Divi Thema Opties.

Conclusie

Divi heeft de laatste tijd heel veel functionaliteit toegevoegd die we daarvoor met CSS moesten oplossen. Deze is nog niet opgelost, maar met CSS eenvoudig aan te passen. Veel succes en plezier en voor vragen ben ik altijd beschikbaar via de Dutch Divi Facebook groep.