Bij het ontwerpen van uw dienstenpagina wilt u ervoor zorgen dat uw bezoekers let op alle verschillende diensten die u levert. In veel gevallen zal het slechts één specifieke dienst zijn waarnaar ze op zoek zijn, maar als je een gestroomlijnde manier in je dienstenstructuur voorziet, is de kans groter dat je bezoekers behandel ze allemaal. 

In deze zelfstudie laten we u zien hoe u creatief kunt worden met de scroll-effecten van Divi en een naadloze servicetransitie te creëren. U kunt het JSON-bestand ook gratis downloaden!

Laten we gaan.

Mogelijk resultaat

Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.

Overgang tussen sectie divi

1, maak de structuur van de elementen opnieuw

Voeg sectie # 1 toe

tussenruimte

Begin met het toevoegen van een nieuwe sectie aan de pagina waaraan u werkt. Open de sectie-instellingen en verander de opvulwaarden op verschillende schermformaten.

  • Bovenste padding: 80px (desktop en tablet), 0px (telefoon)
  • Vulling onderkant: 80px
Divi parameter sectie

Voeg een nieuwe regel toe

Kolomstructuur

Blijf een nieuwe rij toevoegen met behulp van de volgende kolomstructuur:

sizing

Open de lijnparameters zonder meer modules toe te voegen en pas de volgende wijzigingen toe op de dimensioneringsparameters:

  • Gebruik een aangepaste gootbreedte: Ja
  • Dakgootbreedte: 1
  • Breedte: 90%
  • Maximale breedte: 1580 px
Divi-afstandsconfiguratie

tussenruimte

Voeg vervolgens een aangepaste boven- en ondermarge toe.

  • Bovenmarge: 200px
  • Ondermarge: 200px
Divi regelafstand configuratie

Voeg een tekstmodule toe aan de 1-kolom

Voeg H2-inhoud toe

Het is tijd om modules toe te voegen, te beginnen met een tekstmodule in kolom 1. Voer het inhoud H2 naar keuze.

Onze diensten worden aangeboden door de experts van dit moment

H2 tekstinstellingen

Ga naar het tabblad moduleontwerp en wijzig de H2-tekstinstellingen als volgt:

  • Titel 2 Politie: driemaandelijks
  • Kop 2 Tekstgrootte: 80 px (desktop), 50 px (tablet), 40 px (telefoon)
  • Hoogte lijn 2 van het hoofd: 1.2em
Hoofd divi politie

tussenruimte

Voeg vervolgens een lagere marge toe op de tablet en de telefoon.

  • Ondermarge: 50 pixels (alleen tablet en telefoon)
Divi-configuratie voor tekstafstand

Voeg een tekstmodule toe aan de 2-kolom

Voeg inhoud toe

Laten we verder gaan naar de tweede kolom. Daar is de eerste module die we nodig hebben een tekstmodule met een bepaalde waarde inhoud beschrijving.

Inhoud divi tekstvak

Tekst instellingen

Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:

  • Tekstlettertype: cabine
  • Tekstlettertype: hoofdletters
  • Tekstkleur: # 000000
  • Tekstgrootte: 18 px (desktop), 15 px (tablet), 13 px (telefoon)
  • Tekstletterafstand: 3 px (desktop), 1 px (tablet en telefoon)
  • Hoogte van de regel tekst: 3em
Divi-tekstparameter

Voeg een scheidingsmodule toe aan kolom 2

zichtbaarheid

De volgende en laatste module die we nodig hebben in deze kolom is een scheidingsmodule. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.

  • Scheidingsteken tonen: Ja
Zichtbare scheidingslijn

lijn

Wijzig vervolgens de lijnkleur van de module.

  • Lijnkleur: # 000000
Divider kleur achtergrond

sizing

Breng vervolgens enkele wijzigingen aan in de formaatparameters.

  • Gewicht verdeler: 3px
  • Breedte: 28%
Divi separator maatvoering

tussenruimte

We voegen ook een bovenmarge toe.

  • Bovenmarge: 10px
Divi-scheidingsmodule-afstand

Voeg sectie # 2 toe

tussenruimte

Laten we doorgaan naar de volgende gewone sectie. Verwijder de standaard bovenvulling uit de sectie.

  • Bovenste vulling: 0 px
Deel 2 divi-afstand

overflows

Verberg ook de overlopen.

  • Horizontale overloop: verborgen
  • Verticale overloop: verborgen
Verberg overlopen van de divi-module

Voeg een nieuwe regel toe

Kolomstructuur

Ga door met het toevoegen van een eerste rij met behulp van de volgende kolomstructuur:

Kies een divi-indeling

sizing

Open, zonder meer modules toe te voegen, de lijnparameters, open de dimensioneringsparameters en breng de volgende wijzigingen aan:

  • Gebruik een aangepaste gootbreedte: Ja
  • Dakgootbreedte: 1
  • Kolomhoogten gelijk maken: Ja
  • Breedte: 90%
  • Maximale breedte: 1580 px
Goot configuratie divi sectie

tussenruimte

Verwijder vervolgens alle standaard boven- en ondervulling.

  • Bovenste vulling: 0 px
  • Vulling onderkant: 0px
Divi 1 regelmodule-afstandsinstellingen

Kolom 1 instellingen

Achtergrond kleur

Open vervolgens de instellingen voor kolom 1 en verander de achtergrondkleur.

  • Achtergrondkleur: # f7f7f7
Divi line module achtergrondconfiguratie

tussenruimte

Voltooi de kolominstellingen door aangepaste opvulwaarden toe te voegen aan verschillende schermformaten.

  • Bovenste vulling: 200 px (bureau), 100 px (tablet en telefoon)
  • Vulling onderkant: 200px (bureau), 100px (tablet en telefoon)
  • Linker vulling: 8%
  • Juiste opvulling: 8%
Kolominstellingen voor rijmodule

Kolom 2 instellingen

tussenruimte

Ga verder door de instellingen in kolom 2 te openen. Ga naar het tabblad Geavanceerd en voeg aangepaste opvulwaarden toe op verschillende schermformaten.

  • Top padding: 100px (desktop), 50px (tablet en telefoon)
  • Vulling onderkant: 200px
  • Linker opvulling: 150 px (bureau), 0 px (tablet en telefoon)
Divi module afstand instellingen

Voeg een scheidingsmodule toe aan kolom 1

zichtbaarheid

In de eerste kolom is de eerste module die we nodig hebben een scheidingsmodule. Zorg ervoor dat de optie "Show Separator" is ingeschakeld.

  • Scheidingsteken tonen: Ja
Scheidingsteken divi 1 weergeven

lijn

Wijzig vervolgens de lijnkleur van de module.

  • Lijnkleur: # 000000
Divi scheidingsteken instellingen

sizing

Breng ook wijzigingen aan in de formaatparameters.

  • Gewicht verdeler: 3px
  • Breedte: 50%
Divi separator maatvoering

Voeg een tekstmodule toe aan de 1-kolom

Voeg H3-inhoud toe

De volgende module die we nodig hebben in kolom 1 is een tekstmodule met inhoud H3.

Divi-inhoudsectie-instelling

H3 tekstinstellingen

Schakel over naar het tabblad moduleontwerp en verander de H3-tekstinstellingen:

  • Titel 3 Politie: driemaandelijks
  • Tekstkleur van item 3: # 000000
  • Item 3 Tekstgrootte: 50 px (desktop), 40 px (tablet), 35 px (telefoon)
  • Hoogte lijn 3 van het hoofd: 1.1em
Divi design nagelsetting

Voeg een tekstmodule toe aan de 2-kolom

Voeg inhoud toe

In de tweede kolom is de eerste module die we nodig hebben een tekstmodule met wat beschrijvende inhoud.

Divi-tekstmodule-instelling

Tekst instellingen

Wijzig de tekstinstellingen van de module als volgt:

  • Tekstlettertype: cabine
  • Tekstlettertype: hoofdletters
  • Tekstgrootte: 18 px (desktop), 15 px (tablet), 13 px (telefoon)
  • Tekstletterafstand: 3 px (desktop), 1 px (tablet en telefoon)
  • Hoogte van de regel tekst: 3em
Divi-lettertype aanpassing van de tekstvorm

Voeg een knopmodule toe aan de 2-kolom

Voeg een kopie toe

De volgende en laatste module die we nodig hebben, is een knopmodule. Voer een kopie naar keuze in.

Instelling inhoud tekstmodule

Knop instellingen

Stijl vervolgens de knop.

  • Gebruik aangepaste stijlen voor de knop: Ja
  • Knoptekstgrootte: 20 pixels
  • Knoptekstkleur: #ffffff
  • Achtergrondkleur knop: # 000000
  • Knoprandbreedte: 0 px
Divi-knopstijlinstelling
  • Knoplettertype: driemaandelijks
  • Gewicht lettertype knop: vetgedrukt
Divi-knop kleurinstellingen

tussenruimte

Voeg ook aangepaste opvulling toe.

  • Bovenste vulling: 50 px
  • Vulling onderkant: 50px
  • Linker opvulling: 100px
  • Vulling rechts: 100 px
Instellingen voor de afstand tussen knoppen in de Divi-module

Positie

En verplaats de knop dienovereenkomstig:

  • Positie: Absoluut
  • Locatie: linksonder
Positie van de Divi-knopmodule

Kloon de lijn zo vaak als nodig

Als je de hele lijn en alle modules hebt voltooid, kun je de hele lijn drie keer klonen.

Divi-module klonen

Verander alle inhoud

Zorg ervoor dat u alle inhoud in dubbele regels bewerkt.

Bewerk de inhoud van de divi-sectie

2. Pas schuifeffecten toe

Scrolleffecten op de eerste rij

Horizontale beweging

Zodra je alle regels in je sectie hebt voltooid, is het tijd om de scroll-effecten toe te voegen. Open de eerste rij van de sectie en voeg horizontale beweging toe.

  • Activeer horizontale beweging: Ja
  • Start offset: -5
  • Gemiddelde offset: 0 (bij 26%)
  • Eindoffset: 0
  • Trigger motion effect: midden van element
Pas divi-scrolleffecten toe

Vervagen in en uit

Gebruik ook een inkomend en uitgaand fade-effect.

  • Fade in en out activeren: Ja
  • Aanvankelijke dekking: 100%
  • Gemiddelde dekking: 100% (bij 50%)
  • Einddekking: 0% (tot 53%)
  • Trigger motion effect: midden van element
Configureer de fade-animatiesectie divi

Scrolleffecten in de middelste rij

Verticale beweging

Vervolgens zullen we scrolleffecten toevoegen aan alle regels tussen de eerste en de laatste regel van de sectie. Gebruik eerst een verticale beweging:

  • Activeer verticale beweging: Ja
  • Start offset: -4
  • Gemiddelde offset: 0 (bij 26%)
  • Eindoffset: 0
  • Motion trigger effect: midden van element
Divi-scrolling-configuratie

Vervagen in en uit

Activeer ook een in en uit fade-effect.

  • Fade in en out activeren: Ja
  • Aanvankelijke dekking: 0%
  • Gemiddelde dekking: 100% (van 27% tot 50%)
  • Einde offset: 0 (bij 53%)
  • Trigger motion effect: midden van element
Divi line fade-animatie

Laatste lijn scrolleffecten

Verticale beweging

Open vervolgens de laatste regel van de sectie en voeg de volgende verticale beweging toe:

  • Activeer verticale beweging: Ja
  • Start offset: -4
  • Gemiddelde offset: 0 (bij 26%)
  • Eindoffset: 0
  • Trigger motion effect: midden van element
Scrolling-animatie van Divi Line-module

Vervagen in en uit

Met een inkomend en uitgaand fade-effect en je bent klaar!

  • Fade in en out activeren: Ja
  • Aanvankelijke dekking: 0%
  • Gemiddelde dekking: 100% (van 27% tot 50%)
  • Einddekking: 100% (tot 53%)
  • Trigger motion effect: midden van element
Animatie-instellingen voor het uiterlijk van de Divi-lijnmodule

Eindresultaat

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Laatste demo

Final gedachten

In dit artikel hebben we je laten zien hoe je een mooie serve-overgang kunt maken met de scroll-effecten van Divi. Zelfs voordat de ene service verdwijnt, begint de andere te verschijnen, wat een mooie overgang geeft die gemakkelijk is voor het oog. Met deze aanpak kunt u elke service op individueel niveau onder de aandacht brengen. Je kon het JSON-bestand ook gratis downloaden! Als u vragen of suggesties heeft, kunt u een opmerking achterlaten in het opmerkingengedeelte hieronder.