Divis rulleeffekter bringer et væld af nye designmuligheder til de websteder, du opretter. De subtile interaktioner, du vælger at tilføje, kan virkelig hjælpe med at løfte det overordnede udseende af din Websted. Alt bliver endnu bedre, så snart du synkroniserer rulleeffekterne. I denne vejledning vil vi specifikt håndtere at skabe en flot kolliderende heltesektion med kolonner på rulle. Helteafsnittets design fusionerer to forskellige kolonner på rullen, hvilket igen hjælper med at understrege kopien.
Muligt resultat
Nu hvor vi har gennemgået alle trin, lad os se på resultatet på forskellige skærmstørrelser.
Gendan layoutet af Heltesektionen
Tilføj en ny sektion
Tilpasning af baggrundsfarven
Start med at tilføje et nyt afsnit til den side, du arbejder på. Åbn sektionsindstillingerne, og skift baggrundsfarven.
- Baggrundsfarve: # f4f2f7
afstand
Fjern også den øvre og nederste polstring fra alle sektioner.
- Øvre polstring: 0px
- Bundpolstring: 0px
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny linje til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje moduler endnu, skal du åbne linjeparametrene og ændre dimensioneringsparametrene i overensstemmelse hermed:
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Udligne kolonnehøjder: Ja
- Bredde: 100%
- Maks bredde: 100%
afstand
Fjern derefter al standard øvre og nedre polstring.
- Øvre polstring: 0px
- Bundpolstring: 0px
overløb
Og skjul rækkens overløb.
- Vandret overløb: skjult
- Lodret overløb: skjult
Indstillinger for kolonne 1
afstand
Åbn derefter indstillingerne i kolonne 1, og tilføj tilpassede udfyldningsværdier.
- Øvre polstring: 15vw
- Bundpolstring: 10vw
- Venstre polstring: 5vw
- Højre polstring: 5vw
Z-indeks
Forøg også z-indekset i kolonnen.
- Z-indeks: 12
Indstillinger for kolonne 2
Baggrundsbillede
Fortsæt med at åbne indstillingerne i kolonne 2 og upload et baggrundsbillede efter eget valg.
- Baggrundsbilledstørrelse: Cover
- Baggrundsbilledets placering: Center
- Gentag baggrundsbillede: ingen gentagelse
- Blanding af baggrundsbilleder: Normal
Føj tekstmodul # 1 til kolonne 1
Tilføj H1 indhold
Det er tid til at tilføje moduler, startende med et første tekstmodul i kolonne 1. Tilføj ethvert H1-indhold efter eget valg.
H1 tekstindstillinger
Skift til moduldesignfanen, og rediger H1-tekstindstillingerne i overensstemmelse hermed:
- Titeltype: Skygger i lys
- Vægt på titeltype: fed
- Farve på sidehovedtekst: # 000000
- Overskriftstekststørrelse: 6vw (desktop), 11vw (tablet), 13vw (telefon)
- Mellemrum for overskrift: -2px
- Hovedliniehøjde: 1.2em
afstand
Tilføj også en øverste margen.
- Øvre margen: 10vw
Føj tekstmodul # 2 til kolonne 1
Tilføj indhold
Indsæt et andet tekstmodul med beskrivelsesindhold efter eget valg.
Tekstindstillinger
Skift modulets tekstindstillinger som følger:
- Tekst font: Open Sans
- Tekstfarve: # 1e1e1e
- Tekststørrelse: 0.9vw (desktop), 1.9vw (tablet), 3vw (telefon)
- Tekstlinjehøjde: 2,4 em
afstand
Og tilføj tilpassede margenværdier på forskellige skærmstørrelser.
- Øverste margen: 4vw (desktop), 8vw (tablet), 12vw (telefon)
- Nederste margen: 4vw (desktop), 8vw (tablet), 12vw (telefon)
Føj et knapmodul til 1-kolonnen
Tilføj en kopi
Det næste og sidste modul, vi har brug for i denne kolonne, er et knapmodul. Tilføj en kopi efter eget valg.
Knapindstillinger
Ændring af parametre for modulknapperne som følger:
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Knappen tekstfarve: #ffffff
- Knappens baggrundsfarve: # 000000
- Knapkantbredde: 0px
- Knapgrænseradius: 100px
- Knapfont: Åben uden
afstand
Og fuldfør knapindstillinger ved at tilføje tilpassede polstringsværdier på forskellige skærmstørrelser.
- Øvre polstring: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Bundpolstring: 1vw (skrivebord), 2vw (tablet), 3vw (telefon)
- Venstre polstring: 3vw (desktop), 5vw (tablet), 7vw (telefon)
- Højre polstring: 3vw (skrivebord), 5vw (tablet), 7vw (telefon)
Føj et tekstmodul til 2-kolonnen
Tilføj indhold
I den anden kolonne er det eneste modul, vi har brug for, et tekstmodul. Indtast indholdet efter eget valg.
Tekstindstillinger
Skift til moduldesignfanen og rediger tekstindstillingerne i overensstemmelse hermed:
- Tekst font: skygger i lyset
- Tekstfarve: rgba (0,0,0,0,25)
- Tekststørrelse: 9vw (desktop), 14vw (tablet og telefon)
- Afstand mellem tekstbogstaver: -3px
- Højde på tekstlinjen: 1em
- Tekstjustering: center (kontor), venstre (tablet og telefon)
afstand
Tilføj også tilpassede udfyldningsværdier.
- Øvre polstring: 5vw (skrivebord),
- Bundpolstring: 60vw (tablet og telefon)
- Venstre polstring: 5vw (tablet og telefon)
Anvend rulleanimationer
Sektion
Stigning og nedstigning
Når alle dine mods er på plads, er det tid til at anvende rulleeffekterne! Åbn først sektionsparametrene, og brug følgende skaleringseffekt:
- Aktivér Sclaing fra top til bund
- Startskala: 100% (til 49%)
- Medium skala:
- Kontor: 70% (100%)
- Tablet og telefon: 100% (100%)
- Slutskala:
- Kontor: 70%
- Tablet og telefon: 100%
Kolonne 1
Horisontal bevægelse
Fortsæt ved at åbne indstillingerne i kolonne 1 og brug følgende vandrette bevægelseseffekt:
- Aktivér vandret bevægelse: Ja
- Start offset: 0
- Gennemsnitlig modregning:
- Kontor: 0 (ved 65%)
- Tablet og telefon: 0 (93%)
- Slut offset:
- Kontor: 6
- Tablet og telefon: 0
Stigning og nedstigning
Anvend også en skalering op og ned i kolonnen.
- Aktiver skalering op og ned: Ja
- Start skala:
- Kontor: 10%
- Tablet og telefon: 100%
- Medium skala:
- Kontor: 90%
- Tablet og telefon: 100%
- Slutskala: 100%
Kolonne 2
Horisontal bevægelse
Åbn derefter parametrene i kolonne 2 og brug følgende vandrette parametre for bevægelse:
- Aktivér vandret bevægelse: Ja
- Start offset: 0
- Gennemsnitlig modregning:
- Kontor: 0 (ved 53%)
- Tablet og telefon: 0 (56%)
- Slut offset:
- Kontor: -6 (53%)
- Tablet og telefon: 0 (100%)
Fade ind og ud
Fuldfør kolonneindstillingerne ved at tilføje en fade in og fade out effekt.
- Aktivér fade ind og ud: Ja
- Indledende opacitet: 100% (ved 47%)
- Gennemsnitlig opacitet:
- Kontor: 0% (47%)
- Tablet og telefon: 100% (47%)
- Slut på opacitet:
- Kontor: 0%
- Tablet og telefon: 100%
endelige tanker
I denne artikel har vi vist dig, hvordan du kreativt bruger Divi's rulleeffekter til at skabe en kolonnekolliderende heltesektion. Så snart besøgende rulle, begynder de to forskellige kolonner og deres elementer at smelte sammen. Dette vil igen give dig mulighed for at understrege kopien endnu mere.
Andre ressourcer
Her er en liste over indhold, der giver dig mulighed for at gøre mere med din WordPress tema Divi.