[Ad_1]
Lad os gå.
undersøgelse
Inden vi dykker ned i selvstudiet, lad os tage et hurtigt kig på resultatet på forskellige skærmstørrelser.
kontor
Mobil
Download layoutet GRATIS
For at få fingrene i det gratis layout, skal du først downloade dem ved at bruge knappen nedenfor. For at få adgang til download skal du abonnere på vores Divi Daily mailingliste ved hjælp af formular under. Som ny abonnent vil du modtage endnu flere Divi-fordele og en gratis Divi Layout-pakke hver mandag! Hvis du allerede er på listen, skal du blot indtaste din e-mailadresse nedenfor og klikke på download. Du vil ikke blive "gentilmeldt" eller modtage yderligere e-mails.
Lad os begynde at genskabe!
Tilføj 2x pladsholderafsnit
Tilføj en ny sektion
Start med at tilføje en pladsholderafdeling til den side, du arbejder på.
dimensionering
Åbn sektionsindstillingerne, og ændr højden i størrelsesindstillingerne.
Klonsektion
Klon sektionen en gang. Dette efterlader dig med to pladsholderafsnit på din side. Disse pladsholderafsnit hjælper dig med at se den endelige effekt efter at have gennemgået selvstudiet. På et live websted vil pladsholderafsnit blive erstattet med normale sektioner, som du bruger på hele siden.
Tilføj nyt afsnit mellem pladsholderafsnit
Når pladsholderafsnittene er på plads, skal du tilføje en ny sektion mellem pladsholderafsnittene.
Baggrundsfarve
Åbn sektionsindstillingerne, og brug en hvid baggrundsfarve.
- Baggrundsfarve: #ffffff
afstand
Skift til sektionen design fane og ændre top og bund polstring værdier i overensstemmelse hermed:
- Top polstring: 10vh
- Bundpolstring: 10vh
Tilføj linje # 1
Kolonnestruktur
Fortsæt med at tilføje en ny række til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje moduler endnu, skal du åbne rækkeindstillingerne, gå til størrelsesindstillingerne og ændre de maksimale bredde- og breddeværdier.
- Bredde: 100%
- Maksimal bredde: 100%
Føj et tekstmodul til kolonnen
Tilføj en kopi
Det eneste modul, vi har brug for til denne linje, er et tekstmodul. Tilføj en kopi efter eget valg.
Tekstindstillinger
Skift til fanen moduldesign, og rediger tekstindstillingerne i overensstemmelse hermed:
- Tekstskrifttype: Montserrat
- Tekst Font Vægt: Ultra fed
- Tekst skrifttype: store bogstaver
- Tekstfarve: # fff2ea
- Tekststørrelse: 11vw
- Tekstlinje højde: 1 em
- Tekstjustering: Center
Tilføj linje # 2
Kolonnestruktur
Tilføj en anden række til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje moduler endnu, skal du åbne rækkeindstillingerne og ændre størrelsesindstillingerne som følger:
- Brug tilpasset tagrendebredde: Ja
- Rendebredde: 2
- Bredde: 90%
- Linjeføring: Center
Føj billedmodul til kolonne
Upload et billede
Tilføj et billedmodul til rækkolonnen. Upload et billede efter eget valg.
tilpasning
Skift til fanen moduldesign, og rediger billedjusteringen i overensstemmelse hermed:
dimensionering
Gå derefter til størrelsesindstillinger og tving modulet i fuld bredde.
Føj et knapmodul til kolonnen
Tilføj en kopi
Det næste og sidste modul, vi tilføjer til kolonnen, er et knapmodul. Brug en kopi efter eget valg.
Knapjustering
Gå til fanen Design, og ændr knapjusteringen.
Knapindstillinger
Stil derefter knappen på følgende måde:
- Brug tilpassede stilarter til knap: Ja
- Knaptekststørrelse: 16px
- Knaptekstfarve: # 000000
- Knap baggrundsfarve: #ffffff
- Knappens kantbredde: 0px
- Knapper mellem bogstaver: 2px
- Knappefont: Montserrat
- Knappefontvægt: fed
- Knappefontstil: store bogstaver
afstand
Brug også tilpassede polstringsværdier i afstandsindstillingerne.
- Top polstring: 20px
- Bundpolstring: 20px
- Venstre polstring: 5%
- Højre polstring: 5%
Tilføj absolut positionering til linje 1
Når du har gennemført den anden række, skal du vende tilbage til række # 1. Åbn rækkeindstillingerne, gå til fanen avanceret og gør sektionen absolut. Ved at gøre dette placeres linjen og tekstmodulet inde under linjen, der indeholder billedmodulet.
- Position: Absolut
- Beliggenhed: Center
Klon række nr. 1, og anbring dubletten under række nr. 2
For at tillade tekstmodulet at blive vist over billedet, skal vi bruge en anden række med en højere z-indeksværdi. Klon den første række, og placer dubletten under den anden række.
Anvend effekter på række 3
Forøg Z -indekset
Åbn den dublerede række, og rediger z -indekset i fanen Avanceret.
Skift tekstfarve
Åbn tekstmodulet i rækken, og skift tekstfarven.
Anvend blandingstilstand på linje
Åbn derefter rækkeindstillingerne, og skift blandingstilstand i filtreindstillingerne.
Brug rulleeffekten på tekstmodulet i række # 3
Tilføj en fade in og fade out effekt
Gennemfør selvstudiet ved at genåbne tekstpuden, gå til rulleeffekterne og tænde fade in og fade out -effekten. Det er det!
- Aktiver fade in og fade out: Ja
- Startopacitet: 0%
- Medium opacitet: 0% (til 26%)
- Endelig uigennemsigtighed: 100% (ved 28%)
- Motion Effect Trigger: Midt i elementet
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
kontor
Mobil
endelige tanker
I denne artikel har vi vist dig, hvordan du bliver kreativ med Divis indbyggede rulleeffekter. Specifikt viste vi dig, hvordan du blander rullende kopi. I første omgang ser kopien ud til at være under billedet. Efter rulning afsløres kopien over billedet og fusionerer med billedet. Du kunne også downloade JSON -filen gratis! Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet herunder.
Hvis du vil lære mere om Divi og få flere Divi-gratis, skal du sørge for at abonnere på vores nyhedsbrev på e-mail og til vores YouTube-kanal så du altid er en af de første, der kender og drager fordel af dette gratis indhold.
[Ad_2]
