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.
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
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
tussenruimte
Voeg vervolgens een aangepaste boven- en ondermarge toe.
- Bovenmarge: 200px
- Ondermarge: 200px
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.
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
tussenruimte
Voeg vervolgens een lagere marge toe op de tablet en de telefoon.
- Ondermarge: 50 pixels (alleen tablet en telefoon)
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.
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
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
lijn
Wijzig vervolgens de lijnkleur van de module.
- Lijnkleur: # 000000
sizing
Breng vervolgens enkele wijzigingen aan in de formaatparameters.
- Gewicht verdeler: 3px
- Breedte: 28%
tussenruimte
We voegen ook een bovenmarge toe.
- Bovenmarge: 10px
Voeg sectie # 2 toe
tussenruimte
Laten we doorgaan naar de volgende gewone sectie. Verwijder de standaard bovenvulling uit de sectie.
- Bovenste vulling: 0 px
overflows
Verberg ook de overlopen.
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
Voeg een nieuwe regel toe
Kolomstructuur
Ga door met het toevoegen van een eerste rij met behulp van de volgende kolomstructuur:
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
tussenruimte
Verwijder vervolgens alle standaard boven- en ondervulling.
- Bovenste vulling: 0 px
- Vulling onderkant: 0px
Kolom 1 instellingen
Achtergrond kleur
Open vervolgens de instellingen voor kolom 1 en verander de achtergrondkleur.
- Achtergrondkleur: # f7f7f7
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%
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)
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
lijn
Wijzig vervolgens de lijnkleur van de module.
- Lijnkleur: # 000000
sizing
Breng ook wijzigingen aan in de formaatparameters.
- Gewicht verdeler: 3px
- Breedte: 50%
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.
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
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.
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
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.
Knop instellingen
Stijl vervolgens de knop.
- Gebruik aangepaste stijlen voor de knop: Ja
- Knoptekstgrootte: 20 pixels
- Knoptekstkleur: #ffffff
- Achtergrondkleur knop: # 000000
- Knoprandbreedte: 0 px
- Knoplettertype: driemaandelijks
- Gewicht lettertype knop: vetgedrukt
tussenruimte
Voeg ook aangepaste opvulling toe.
- Bovenste vulling: 50 px
- Vulling onderkant: 50px
- Linker opvulling: 100px
- Vulling rechts: 100 px
Positie
En verplaats de knop dienovereenkomstig:
- Positie: Absoluut
- Locatie: linksonder
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.
Verander alle inhoud
Zorg ervoor dat u alle inhoud in dubbele regels bewerkt.
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
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
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
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
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
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
Eindresultaat
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
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.