[Ad_1]

De manier waarop u de ingebouwde functies van Divi creatief gebruikt, kan een verschil maken in uw paginaontwerp. Met Divi's scroll-effecten kun je bijvoorbeeld prachtige scroll-interacties creëren. Vandaag voegen we nog een tutorial toe aan je lijst met dingen die je kunt doen met Divi's ingebouwde scroll-effecten. In het bijzonder laten we u zien hoe u scrollend kopiëren kunt samenvoegen. Op het eerste gezicht wordt de kopie onder de bijbehorende afbeelding geplaatst. Zodra u echter naar een bepaald punt scrolt, verschijnt de kopie boven de productafbeelding en begint deze op te gaan in de afbeelding. Dit leidt tot een opvallend effect dat moeiteloos lijkt. U kunt het lay-out JSON-bestand ook gratis downloaden!

Laten we gaan.

overzicht

Laten we, voordat we in de tutorial duiken, even kijken naar het resultaat op verschillende schermformaten.

Bureau

Scroll mix kopie

Mobile

Scroll mix kopie

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.

Scroll mix kopie

sizing

Open de sectie-instellingen en wijzig de hoogte in de maatinstellingen.

Scroll mix kopie

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.

Scroll mix kopie

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.

Scroll mix kopie

Achtergrond kleur

Open de sectie-instellingen en gebruik een witte achtergrondkleur.

  • Achtergrondkleur: #ffffff

Scroll mix kopie

tussenruimte

Schakel over naar het sectieontwerptabblad en wijzig de bovenste en onderste opvulwaarden dienovereenkomstig:

  • Bovenvulling: 10vh
  • Bodemvulling: 10vh

Scroll mix kopie

Voeg regel # 1 . toe

Kolomstructuur

Ga verder door een nieuwe rij aan de sectie toe te voegen met behulp van de volgende kolomstructuur:

Scroll mix kopie

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%

Scroll mix kopie

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.

Scroll mix kopie

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

Scroll mix kopie

Voeg regel # 2 . toe

Kolomstructuur

Voeg nog een rij toe aan de sectie met behulp van de volgende kolomstructuur:

Scroll mix kopie

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

Scroll mix kopie

Voeg een afbeeldingsmodule toe aan de kolom

Upload een afbeelding

Voeg een afbeeldingsmodule toe aan de rijkolom. Upload een afbeelding naar keuze.

Scroll mix kopie

alignement

Schakel over naar het tabblad moduleontwerp en wijzig de uitlijning van de afbeelding dienovereenkomstig:

Scroll mix kopie

sizing

Ga dan naar maatinstellingen en forceer de volledige breedte op de module.

Scroll mix kopie

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.

Scroll mix kopie

Uitlijning van knoppen

Ga naar het tabblad Ontwerpen en wijzig de uitlijning van de knoppen.

Scroll mix kopie

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

Scroll mix kopie

tussenruimte

Gebruik ook aangepaste opvulwaarden in de afstandsinstellingen.

  • Bovenste vulling: 20px
  • Bodemvulling: 20px
  • Linker vulling: 5%
  • Rechter vulling: 5%

Scroll mix kopie

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

Scroll mix kopie

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.

Scroll mix kopie

Effecten toepassen op rij 3

Verhoog de Z-index

Open de dubbele rij en wijzig de z-index op het tabblad Geavanceerd.

Scroll mix kopie

Tekstkleur wijzigen

Open de tekstmodule in de rij en verander de tekstkleur.

Scroll mix kopie

Overvloeimodus toepassen op lijn

Open vervolgens de rij-instellingen en wijzig de overvloeimodus in de filterinstellingen.

Scroll mix kopie

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

Scroll mix kopie

overzicht

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

Bureau

Scroll mix kopie

Mobile

Scroll mix kopie

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]

bron link