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.

Divi sektion kollision

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
Divi sektion konfiguration

afstand

Fjern også den øvre og nederste polstring fra alle sektioner.

  • Øvre polstring: 0px
  • Bundpolstring: 0px
Konfiguration af divi-afstand

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:

Layout af divikolonner

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%
Konfiguration af divi linjeafstand

afstand

Fjern derefter al standard øvre og nedre polstring.

  • Øvre polstring: 0px
  • Bundpolstring: 0px
Divi linjeafstand

overløb

Og skjul rækkens overløb.

  • Vandret overløb: skjult
  • Lodret overløb: skjult
Divi-synlighedslinjekonfiguration

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
Divi række søjleafstands konfiguration

Z-indeks

Forøg også z-indekset i kolonnen.

  • Z-indeks: 12
Relativ position divi

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
Divi kolonne baggrund

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.

Freelance divi support

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
Divi font konfiguration

afstand

Tilføj også en øverste margen.

  • Øvre margen: 10vw
Konfiguration af tekstafstand

Føj tekstmodul # 2 til kolonne 1

Tilføj indhold

Indsæt et andet tekstmodul med beskrivelsesindhold efter eget valg.

Tilføj en tekstkolonne 1 divi

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
Divi tekst skrifttype tilpasning

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)
Konfiguration af divi-tekstafstand

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.

Tilføj et divi-knap-modul

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
Brugerdefineret stil knap divi
  • Knapfont: Åben uden
Parameterindstillinger for skrifttypeknap

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)
Mellemrum Divi-knap

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.

Tekstkolonne 2 divi

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)
Jane doe tekst kolonne 2 divi

afstand

Tilføj også tilpassede udfyldningsværdier.

  • Øvre polstring: 5vw (skrivebord),
  • Bundpolstring: 60vw (tablet og telefon)
  • Venstre polstring: 5vw (tablet og telefon)
Mellemrum med divi-tekst

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%
Rul effekt animations divi

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
Divi vandret justering

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%
del af helte, der kolliderer med kolonner

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%)
Vandret animationsafdeling

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%
Motion animations divi

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.