[Ad_1]
La oss gå.
undersøkelsen
Før vi dykker ned i opplæringen, la oss ta en rask titt på resultatet på forskjellige skjermstørrelser.
kontor
Mobil
Last ned oppsettet GRATIS
For å få tak i den gratis layouten, må du først laste dem ned ved å bruke knappen nedenfor. For å få tilgang til nedlastingen, må du abonnere på vår Divi Daily e-postliste ved å bruke skjema under. Som ny abonnent vil du motta enda flere Divi-fordeler og en gratis Divi Layout-pakke hver mandag! Hvis du allerede er på listen, skriv inn e-postadressen din nedenfor og klikk på last ned. Du vil ikke bli "registrert på nytt" eller motta flere e-poster.
La oss begynne å gjenskape!
Legg til 2x plassholder seksjoner
Legg til en ny seksjon
Start med å legge til en plassholder -seksjon på siden du jobber med.
dimensjonering
Åpne seksjonsinnstillingene og endre høyden i størrelsesinnstillingene.
Klonseksjon
Klon seksjonen en gang. Dette gir deg to plassholder seksjoner på siden din. Disse plassholderdelene hjelper deg med å se den endelige effekten etter å ha gått gjennom opplæringen. På et live nettsted vil plassholderdeler bli erstattet med vanlige seksjoner som du bruker på hele siden.
Legg til en ny seksjon mellom plassholderdeler
Når plassholderdelene er på plass, legger du til en ny seksjon mellom plassholderdelene.
Bakgrunnsfarge
Åpne delen innstillinger og bruk en hvit bakgrunnsfarge.
- Bakgrunnsfarge: #ffffff
avstanden
Bytt til kategorien seksjonsdesign og endre de øvre og nedre polstringsverdiene tilsvarende:
- Øvre polstring: 10vh
- Bunnpolstring: 10vh
Legg til linje # 1
Kolonnestruktur
Fortsett med å legge til en ny rad i seksjonen ved hjelp av følgende kolonnestruktur:
dimensjonering
Uten å legge til noen moduler ennå, åpner du radinnstillingene, går til størrelsesinnstillingene og endrer maksimal bredde og bredde.
- Bredde: 100%
- Maksimal bredde: 100%
Legg til en tekstmodul i kolonnen
Legg til en kopi
Den eneste modulen vi trenger for denne linjen er en tekstmodul. Legg til en kopi av ditt valg.
Tekstinnstillinger
Bytt til moduldesignfanen og endre tekstinnstillingene deretter:
- Tekstskrifttype: Montserrat
- Tekst Skriftvekt: Ultra fet
- Tekstskrifttype: store bokstaver
- Tekstfarge: # fff2ea
- Tekststørrelse: 11vw
- Tekstlinje høyde: 1 em
- Tekstjustering: Senter
Legg til linje # 2
Kolonnestruktur
Legg til en annen rad i seksjonen ved hjelp av følgende kolonnestruktur:
dimensjonering
Uten å legge til noen moduler ennå, åpner du radinnstillingene og endrer størrelsesinnstillingene som følger:
- Bruk tilpasset takbredde: Ja
- Takrenne bredde: 2
- Bredde: 90%
- Linjelinjering: Senter
Legg til bildemodul i kolonnen
Last opp et bilde
Legg til en bildemodul i radkolonnen. Last opp et bilde du ønsker.
justering
Bytt til moduldesign -fanen og endre bildejusteringen deretter:
dimensjonering
Gå deretter til størrelsesinnstillinger og tving modulen i full bredde.
Legg til en knappmodul i kolonnen
Legg til en kopi
Den neste og siste modulen vi legger til i kolonnen er en knappemodul. Bruk en kopi av ditt valg.
Knappjustering
Gå til kategorien Design og endre knappjusteringen.
Knappinnstillinger
Deretter styler du knappen slik:
- Bruk egendefinerte stiler for knapp: Ja
- Knapptekststørrelse: 16px
- Knapptekstfarge: # 000000
- Knappens bakgrunnsfarge: #ffffff
- Knappens kantbredde: 0px
- Knappbokstavavstand: 2px
- Knappefont: Montserrat
- Knapp skriftvekt: fet skrift
- Knapp skriftstil: store bokstaver
avstanden
Bruk også egendefinerte polstringsverdier i avstandsinnstillingene.
- Øvre polstring: 20px
- Bunnpolstring: 20px
- Venstre polstring: 5%
- Høyre polstring: 5%
Legg til absolutt posisjonering til linje 1
Når du har fullført den andre raden, går du tilbake til rad # 1. Åpne radinnstillingene, gå til den avanserte fanen og gjør delen absolutt. Ved å gjøre dette vil linjen og tekstmodulen inne plasseres under linjen som inneholder bildemodulen.
- Posisjon: Absolutt
- Sted: Senter
Klon rad nr. 1 og legg duplikatet under rad nr. 2
For at tekstmodulen skal vises over bildet, trenger vi en rad til med en høyere z-indeksverdi. Klon den første raden og legg duplikaten under den andre raden.
Bruk effekter på rad 3
Øk Z -indeksen
Åpne den dupliserte raden og endre z -indeksen i kategorien avansert.
Endre tekstfarge
Åpne tekstmodulen i raden og endre tekstfargen.
Bruk blandingsmodus på linje
Åpne deretter radinnstillingene og endre blandingsmodus i filterinnstillingene.
Bruk rulleeffekten på tekstmodulen i rad # 3
Legg til en fade in og fade out -effekt
Fullfør opplæringen ved å åpne tekstpuden på nytt, gå til rulleeffektene og slå på fade in og fade out -effekten. Det er det!
- Aktiver fade inn og fade out: Ja
- Start opacitet: 0%
- Middels ugjennomsiktighet: 0% (til 26%)
- Endelig ugjennomsiktighet: 100% (ved 28%)
- Motion Effect Trigger: Middle of Element
undersøkelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.
kontor
Mobil
avslutt~~POS=TRUNC tanker
I denne artikkelen har vi vist deg hvordan du kan bli kreativ med Divis innebygde rulleeffekter. Spesielt har vi vist deg hvordan du blander rullekopi. Først ser det ut til at kopien er under bildet. Etter å ha rullet, avsløres kopien over bildet og smelter sammen med bildet. Du kunne også laste ned JSON -filen gratis! Hvis du har spørsmål eller forslag, kan du legge igjen en kommentar i kommentarfeltet nedenfor.
Hvis du vil lære mer om Divi og få flere Divi-gratistilbud, sørg for å abonnere på vår nyhetsbrev på e-post og til vår YouTube-kanal slik at du alltid er en av de første som kjenner og drar nytte av dette gratisinnholdet.
[Ad_2]
