[Ad_1]
Laten we gaan.
overzicht
Laten we, voordat we in de tutorial duiken, even kijken naar het resultaat op verschillende schermformaten.
Bureau
Mobile
Download de lay-out GRATIS
Om de gratis lay-out te bemachtigen, moet u deze eerst downloaden met behulp van de onderstaande knop. Om toegang te krijgen tot de download, moet u zich abonneren op onze Divi Daily-mailinglijst met behulp van de formulier onderstaand. Als nieuwe abonnee ontvang je elke maandag nog meer Divi-voordelen en een gratis Divi Layout-pakket! Als je al op de lijst staat, vul dan hieronder je e-mailadres in en klik op downloaden. U wordt niet "opnieuw ingeschreven" of ontvangt geen extra e-mails.
Laten we beginnen met recreëren!
2x tijdelijke aanduiding-secties toevoegen
Voeg een nieuw gedeelte toe
Begin met het toevoegen van een tijdelijke aanduiding-sectie aan de pagina waaraan u werkt.
sizing
Open de sectie-instellingen en wijzig de hoogte in de maatinstellingen.
Kloon sectie
Kloon de sectie één keer. Dit laat je met twee tijdelijke aanduiding-secties op je pagina. Deze tijdelijke aanduiding-secties helpen u het uiteindelijke effect te zien nadat u de zelfstudie hebt doorlopen. Op een live website worden tijdelijke secties vervangen door normale secties die u op de pagina gebruikt.
Nieuwe sectie toevoegen tussen tijdelijke aanduiding-secties
Zodra de tijdelijke aanduiding-secties op hun plaats zijn, voegt u een nieuwe sectie toe tussen de tijdelijke aanduiding-secties.
Achtergrond kleur
Open de sectie-instellingen en gebruik een witte achtergrondkleur.
- Achtergrondkleur: #ffffff
tussenruimte
Schakel over naar het sectieontwerptabblad en wijzig de bovenste en onderste opvulwaarden dienovereenkomstig:
- Bovenvulling: 10vh
- Bodemvulling: 10vh
Voeg regel # 1 . toe
Kolomstructuur
Ga verder door een nieuwe rij aan de sectie toe te voegen met behulp van de volgende kolomstructuur:
sizing
Zonder nog modules toe te voegen, opent u de rij-instellingen, gaat u naar de formaatinstellingen en wijzigt u de maximale breedte- en breedtewaarden.
- Breedte: 100%
- Maximale breedte: 100%
Voeg een tekstmodule toe aan de kolom
Voeg een kopie toe
De enige module die we nodig hebben voor deze regel is een tekstmodule. Voeg een kopie naar keuze toe.
Tekst instellingen
Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:
- Lettertype tekst: Montserrat
- Tekst lettertype gewicht: ultra vet
- Tekst lettertype: hoofdletters
- Tekstkleur: # fff2ea
- Tekstgrootte: 11vw
- Hoogte tekstregel: 1 em
- Tekstuitlijning: Midden
Voeg regel # 2 . toe
Kolomstructuur
Voeg nog een rij toe aan de sectie met behulp van de volgende kolomstructuur:
sizing
Open, zonder nog modules toe te voegen, de rij-instellingen en wijzig de formaatinstellingen als volgt:
- Aangepaste gootbreedte gebruiken: Ja
- Gootbreedte: 2
- Breedte: 90%
- Lijnuitlijning: Midden
Voeg een afbeeldingsmodule toe aan de kolom
Upload een afbeelding
Voeg een afbeeldingsmodule toe aan de rijkolom. Upload een afbeelding naar keuze.
alignement
Schakel over naar het tabblad moduleontwerp en wijzig de uitlijning van de afbeelding dienovereenkomstig:
sizing
Ga dan naar maatinstellingen en forceer de volledige breedte op de module.
Voeg een knopmodule toe aan de kolom
Voeg een kopie toe
De volgende en laatste module die we aan de kolom zullen toevoegen, is een knopmodule. Gebruik een kopie naar keuze.
Uitlijning van knoppen
Ga naar het tabblad Ontwerpen en wijzig de uitlijning van de knoppen.
Knop instellingen
Stijl de knop vervolgens als volgt:
- Gebruik aangepaste stijlen voor knop: Ja
- Tekstgrootte knop: 16px
- Knoptekstkleur: # 000000
- Achtergrondkleur knop: #ffffff
- Breedte knoprand: 0px
- Knop letterafstand: 2px
- Lettertype knop: Montserrat
- Gewicht knoplettertype: vet
- Lettertype-stijl knop: hoofdletters
tussenruimte
Gebruik ook aangepaste opvulwaarden in de afstandsinstellingen.
- Bovenste vulling: 20px
- Bodemvulling: 20px
- Linker vulling: 5%
- Rechter vulling: 5%
Absolute positionering toevoegen aan regel 1
Zodra u de tweede rij hebt voltooid, keert u terug naar rij # 1. Open de rij-instellingen, ga naar het tabblad geavanceerd en maak de sectie absoluut. Door dit te doen, worden de regel en de tekstmodule binnenin onder de regel geplaatst die de afbeeldingsmodule bevat.
- Positie: Absoluut
- Locatie: Centrum
Kloon rij nr. 1 en plaats het duplicaat onder rij nr. 2
Om de tekstmodule boven de afbeelding te laten verschijnen, hebben we nog een rij nodig met een hogere z-indexwaarde. Kloon de eerste rij en plaats het duplicaat onder de tweede rij.
Effecten toepassen op rij 3
Verhoog de Z-index
Open de dubbele rij en wijzig de z-index op het tabblad Geavanceerd.
Tekstkleur wijzigen
Open de tekstmodule in de rij en verander de tekstkleur.
Overvloeimodus toepassen op lijn
Open vervolgens de rij-instellingen en wijzig de overvloeimodus in de filterinstellingen.
Gebruik het scrolleffect op de tekstmodule in rij # 3
Een fade-in- en fade-out-effect toevoegen
Voltooi de zelfstudie door de tekstpod opnieuw te openen, naar de scroll-effecten te gaan en het fade-in- en fade-out-effect in te schakelen. Dat is het!
- Fade-in en fade-out inschakelen: Ja
- Begindekking: 0%
- Gemiddelde dekking: 0% (tot 26%)
- Definitieve dekking: 100% (bij 28%)
- Bewegingseffecttrigger: midden van element
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Bureau
Mobile
Final gedachten
In dit artikel hebben we je laten zien hoe je creatief kunt worden met de ingebouwde scrolleffecten van Divi. In het bijzonder hebben we u laten zien hoe u scrollend kopiëren in willekeurige volgorde kunt afspelen. In eerste instantie lijkt de kopie onder de afbeelding te staan. Na het scrollen wordt de kopie boven de afbeelding onthuld en versmelt met de afbeelding. Je kon het JSON-bestand ook gratis downloaden! Als u vragen of suggesties heeft, kunt u een opmerking achterlaten in de opmerkingen hieronder.
Als u meer wilt weten over Divi en meer Divi-freebies wilt ontvangen, abonneer u dan op onze nieuwsbrief per e-mail en naar onze YouTube-kanaal zodat u altijd een van de eersten bent die deze gratis inhoud kent en ervan profiteert.
[Ad_2]