De pagina die over jou (over) praat, is een van de belangrijkste pagina's van je Site web. Hierdoor kunnen mensen je beter leren kennen en beslissen of ze de volgende stap op hun gemak vinden. Als u op zoek bent naar een eenvoudige manier om gesproken tekst op deze pagina op te nemen, zult u deze tutorial geweldig vinden. We gebruiken de scrolleffecten van Divi om een vloeiende verhaalovergang bij het scrollen te creëren. Zodra een deel van het verhaal vervaagt, verschijnt een ander deel. Dit geeft de bezoekers het gevoel een interessant verhaal te lezen.
Mogelijk eindresultaat
Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.
1. Maak het eerste volledige schermgedeelte van de pagina
Voeg een nieuw gedeelte toe
Achtergrond kleur
Begin met het toevoegen van een eerste sectie aan uw Over-pagina. Open de sectie-instellingen en verander de achtergrondkleur in zwart.
- Achtergrondkleur: # 000000
sizing
Draai vervolgens het gedeelte naar volledig scherm door een minimale hoogte toe te voegen aan de parameters voor de grootte.
- Min hoogte: 100vh
2. Voeg een geanimeerde regel toe
Voeg een nieuwe regel toe
Kolomstructuur
Voeg vervolgens een nieuwe rij toe aan uw sectie met behulp van de volgende kolomstructuur:
sizing
Open de lijnparameters en laat de lijn de volledige breedte van de sectiecontainer innemen door de dimensioneringsparameters te wijzigen.
- Breedte: 100%
- Max breedte: 100%
tussenruimte
Voeg vervolgens links en rechts opvulling toe op verschillende schermformaten.
- Vulling links: 20vw (bureau), 10vw (tablet en telefoon)
- Vulling rechts: 20vw (bureau) 10vw (tablet en telefoon)
Animatie
Om het verteleffect te vergroten, gebruiken we ook een fade-animatie voor de regel.
- Animatiestijl: vervagen
- Animatieduur: 3000ms
- Animatiesnelheidscurve: gemak in uit
- Animatie herhalen: een keer
Positie
Ten slotte zullen we ervoor zorgen dat de lijn in het midden van de sectiecontainer wordt geplaatst door de positie-opties te wijzigen.
- Positie: absoluut
- Locatie: Centrum
3. Voeg een titel in met schuifeffecten
Voeg tekstmodule # 1 toe aan de kolom
Voeg H1-inhoud toe
De enige module die we in deze regel nodig hebben is een tekstmodule met inhoud H1.
Titel 1 Tekstinstellingen
Ga naar het tabblad moduleontwerp en wijzig de H1-tekstinstellingen als volgt:
- Titel lettertype: Nunito
- Gewicht lettertype titel: Semi vetgedrukt
- Kleur koptekst: #ffffff
- Tekstgrootte koptekst: 7vw (desktop), 9vw (tablet), 11vw (telefoon)
Verticale beweging
We zullen ook een subtiele verticale animatie toevoegen.
- Activeer verticale beweging: Ja
- Start offset: 0 (bij 50%)
- Gemiddelde offset: 10 (bij 100%)
- Laatste offset: 10
Inkomend en uitgaand scroleffect
Met een inkomend en uitgaand vervagingseffect.
- Fade in en out activeren: Ja
- Aanvankelijke dekking: 100%
- Gemiddelde dekking: 100% (bij 55%)
- Einddekking: 0% (tot 62%)
Het scrolleffect op en neer schalen
Last but not least gebruiken we ook een scroleffect op schaal omhoog en omlaag.
- Schalen op en neer inschakelen: Ja
- Startschaal: 100% (tot 40%)
- Gemiddelde schaal: 95% (tot 74%)
- Eindschaal: 90%
4. Kloon een hele sectie eenmaal en neem een beschrijvende tekst op met scrolleffecten
Bewerk titel en inhoud
Nadat u het eerste gedeelte heeft voltooid, kunt u het volledig klonen. Open de tekstmodule in de dubbele sectiecontainer en gebruik een H2-kopie.
Wijzig de tekstparameters van de H2 Text-module
Wijzig de H2-tekstinstellingen dienovereenkomstig:
- Titel 2 Politie: Nunito
- Titel 2 van het lettertype: semi-vetgedrukt
- Item 2 Tekstkleur: #ffffff
- Item 2 Tekstgrootte: 5vw (desktop), 7vw (tablet), 8vw (telefoon)
- Hoogte van lijn 2: 1em (kantoor), 1.2em (tablet en telefoon)
Voeg tekstmodule # 2 toe aan de kolom
Voeg inhoud toe
Voeg vervolgens nog een tekstmodule toe aan de kolom met a inhoud beschrijving van uw keuze.
Tekst instellingen
Wijzig de tekstinstellingen voor de tekstmodule als volgt:
- Tekstlettertype: Open Sans
- Tekstkleur: #ffffff
- Tekstgrootte: 1vw (desktop), 2.5vw (tablet), 3vw (telefoon)
- Hoogte tekstregel: 3.1em (bureau), 2.5em (tablet en telefoon)
tussenruimte
Gebruik ook een bovenmarge.
- Bovenmarge: 8vw
Inkomend en uitgaand scroleffect
Schakel vervolgens over naar scrolleffecten in het geavanceerde tabblad en gebruik de volgende instellingen voor fade-in en fade-out:
- Fade in en out activeren: Ja
- Aanvankelijke dekking: 100%
- Gemiddelde dekking: 0% (bij 31%)
- Einddekking: 0% (tot 35%)
Het scrolleffect op en neer schalen
Voeg ook een op- en neerwaarts effect toe.
- Schalen op en neer inschakelen: Ja
- Startschaal: 100% (tot 40%)
- Gemiddelde schaal: 95% (tot 74%)
- Eindschaal: 90%
Deze laatste sectie kun je nu zo vaak mogelijk klonen. U zult echter de inhoud van elke sectie voor uw behoeften.
overzicht
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 u laten zien hoe u een verhaal op uw over-pagina kunt vertellen met behulp van de ingebouwde scrolleffecten van Divi. Door het effect dat we hebben gecreëerd, kan de opeenvolgende kopie in- en uitfaden, waardoor de bezoekers zoals het lezen van een verhaal. Je kon het JSON-bestand ook gratis downloaden! Als u vragen of suggesties heeft, kunt u een opmerking achterlaten in het opmerkingengedeelte hieronder.
Heel erg bedankt, je tutorial heeft me veel geholpen 🙂
Weet jij hoe je pagina-overgangen maakt met divi? Ik heb deze plug-in gevonden die goed lijkt te werken https://divi-page-transition.com op mijn site. Wat denk je ?