Divi: Det beste WordPress-temaet hele tiden!

mer 901.000 nedlastinger, Divi er det mest populære WordPress-temaet i verden. Den er komplett, enkel å bruke og leveres med mer enn 62 gratis maler.

Når du oppretter About-siden din, vil du sannsynligvis også introdusere teammedlemmene dine. Når du gjør det, lar du besøkende samhandle med menneskene bak virksomheten din. Hvis du leter etter en måte å oppleve teammedlemmene dine på rullen, kan denne opplæringen være for deg. Vi oppretter en karusell til et teammedlem for automatisk rulling som beveger seg når de besøkende blar gjennom siden. 

Demonstrasjon

Før vi dykker inn i opplæringen, la oss ta en titt på resultatet på forskjellige skjermstørrelser.

Rull divi-teammedlem

Begynnelsen av unnfangelsen

Legg til en ny seksjon

avstanden

Start med å legge til en ny vanlig seksjon på siden du jobber med. Åpne seksjonsinnstillinger og legg til tilpasset polstring på forskjellige skjermstørrelser.

  • Øvre polstring: 200px (skrivebord), 100px (nettbrett og telefon)
  • Bunn polstring: 200 px (skrivebord), 100 px (nettbrett og telefon)
Parameterkonfigurasjon

overløp

For å sikre at ingen horisontale rullefelt vises i vårt design, vil vi skjule seksjonsoverløp i den avanserte fanen.

  • Horisontalt overløp: skjult
  • Vertikal overløp: skjult
Overløpskonfigurasjon

Legg til linje 1

Kolonne struktur

Fortsett å legge til en ny linje til seksjonen ved hjelp av følgende kolonnestruktur:

Velg divi-layout

dimensjonering

Uten å legge til noen moduler ennå, åpne radinnstillingene, bytt til designfanen og endre bredden og maksimal bredde i størrelsesinnstillingene.

  • Bredde: 90%
  • Maks bredde: 1580px
Divi line parameter

avstanden

Vi legger også til tilpasset øvre og nedre polstring.

  • Øvre polstring: 100px
  • Bunnpolstring: 100px
Linjeavstandskonfigurasjon

Legg til en tekstmodul i kolonnen

Legg til H2-innhold

Det er på tide å legge til moduler, og starte med en første tekstmodul. Skriv inn H2-innholdet du ønsker.

Møt teamet

H2 tekstinnstillinger

Gå til moduldesignfanen og endre H2-tekstinnstillingene som følger:

  • Fonttittel 2: Quicksand
  • Skrifttittel 2: halvfet
  • Tekstfarge på element 2: # 000000
  • Header 2 Tekststørrelse: 70px (stasjonær), 50px (nettbrett), 40px (telefon)
Avstand mellom divi-tekst

Legg til en skillemodul i kolonnen

synlighet

Deretter legger du til en separasjonsmodul. Forsikre deg om at alternativet "Vis separator" er aktivert.

Opprett enkelt nettstedet ditt med Elementor

Elementor lar deg lage Enkelt og gratis ethvert nettsted eller bloggdesign med et profesjonelt utseende. Slutt å betale mye for et nettsted du kan gjøre selv.

  • Vis separator: Ja
Vis diviseparator

Ligne

Gjør deretter noen endringer i linjeinnstillingene.

  • Linjefarge: # edf000
  • Linestil: solid
  • Linjeposisjon: Topp
Divi avstandsstil

dimensjonering

Og fullfør modulparametrene ved å endre dimensjoneringsparametrene tilsvarende:

  • Divider vekt: 20px
  • Bredde: 11%
  • Justering av modulen: venstre
  • Høyde: 20px
Dimensjonerende divi linjemodul

Legg til en linje nr. 2

Kolonne struktur

Til neste rad! Bruk følgende kolonnestruktur:

Divi kolonnekonfigurasjon

dimensjonering

Uten å legge til flere moduler, åpne linjeparametrene og endre dimensjoneringsparametrene som følger:

  • Bruk en tilpasset rennebredde: Ja
  • Rennesteinsbredde: 2
  • Bredde: 100%
  • Maks bredde: 100%
Takrennekonfigurasjon

avstanden

Legg deretter til venstre og høyre polstring på de mindre skjermene.

  • Venstre polstring: 5% (bare nettbrett og telefon)
  • Høyre polstring: 5% (bare nettbrett og telefon)
Konfigurasjon av linjeavstandstil

Kolonneparametere (5x)

Nå, i de neste tre trinnene i denne opplæringen, skal vi gjøre noen endringer i kolonnene. Bruk de tre trinnene på hver av kolonnene i raden din.

Divi-parameterlinjekonfigurasjon

Gradient bakgrunn

Ønsker du å selge produktene dine på internett?

Last ned WooCommerce gratis, de beste e-handelspluginene for å selge dine fysiske og digitale produkter på WordPress og enkelt lage din nettbutikk. Perfekt for nybegynnere.

Først legger du til en gradientbakgrunn i hver kolonne.

  • 1-farge: rgba (255,255,255,0)
  • 2-farge: rgba (0,0,0,0,84)
  • Gradienttype: lineær
  • Startposisjon: 25%
  • Sluttposisjon: 86%
  • Plasser stigning på bakgrunnen: Ja
Divi bakre kolonnekonfigurasjon

Bakgrunnsbilde

Last deretter opp et bakgrunnsbilde du ønsker. Dette bakgrunnsbildet representerer hvert teammedlem, så bruk et annet bilde for hver kolonne.

  • Bakgrunnsbildestørrelse: Omslag
  • Bakgrunnsbildets plassering: Senter
Legg til divi kolonne bakgrunnsbilde

Hovedelement

Fullfør kolonneinnstillingene ved å legge til tilpasset CSS til hovedtavleelementet i hver kolonne. Disse linjene med CSS-kode hjelper oss å plassere kolonnene under hverandre på nettbrettet, i stedet for å ha to side om side.

bredde: 100%! viktig; margin: 50px 0px 50px 0px! viktig;
Kode css divi kolonne

Legg til en personmodul i kolonnen

Legg til innhold

For å dele informasjon om teammedlemmer, vil vi bruke en Person-modul. Legg til den første personmodulen i kolonne 1, og bruk innholdet du vil ha.

Divi personnavn

Slett bildet

Slett deretter bildet. Vi bruker i stedet bakgrunnsbildet til kolonnen.

Fjern divi-bilde

Bakgrunnsbilde

Vi vil deretter legge til et bildeoverlegg som bakgrunnsbilde av modulen. Du finner den vi bruker ved å laste ned mappen i begynnelsen av denne opplæringen.

  • Bakgrunnsbildestørrelse: Omslag
  • Bakgrunnsbildets plassering: Senter
Konfigurasjon av personmodulbakgrunn

Tekstinnstillinger for tittel

Gå til moduldesignfanen og endre titteltekstinnstillingene som følger:

  • Tittelnivå: H3
  • Tittel font: Quicksand
  • Tittel skriftvekt: fet skrift
  • Tittel tekstfarge: #ffffff
  • Tittelstørrelse: 230%
Divi-modul titteltilpasning

Innstillinger for brødtekst

Endre også innstillinger for brødtekst.

  • Kropps skrifttype: Åpen sans
  • Tekstfarge på kroppen: #ffffff
  • Linjehøyde: 2,2 em
Divi kroppstilpasning

Innstillinger for plasseringstekst

Gjør deretter noen endringer i innstillingene for posisjonstekst.

  • Font Position: Open Sans
  • Tekstfarge på plassering: # edf000
Divi posisjon

avstanden

Og fullfør modulinnstillingene ved å legge til tilpassede polstringsverdier i avstandsinnstillingene.

  • Øvre polstring: 70%
  • Nedre polstring: 10%
  • Venstre polstring: 10%
  • Høyre polstring: 10%
Divi personmodulavstand

Dupliser Person-modulen 4 ganger

Når du har fullført Person-modulen, kan du klone hele modulen fire ganger.

Plasser duplikater i de resterende kolonnene

Plasser duplikatmoduler i de resterende fire kolonnene på raden. Sørg også for å redigere innholdet.

Gjør Row til en automatisk rullekarusell

Endre størrelsen på linje 2

Nå, for å gjøre denne raden til en automatisk rulling av teammedlemskarusellen, må vi åpne radinnstillingene på nytt og endre bredden og maksimal bredde i størrelsesinnstillingene.

  • Bredde: 180%
  • Maksimal bredde: 220% (skrivebord), 100% (nettbrett og telefon)
Avstand for modifikasjon av linjedivi

Legg til horisontal bevegelse av linje nr. 2

Fullfør linjeinnstillingene ved å legge til vannrett bevegelse til rulleeffektinnstillingene i den avanserte kategorien, og du er ferdig!

  • Aktiver horisontal bevegelse: Ja
  • Start forskyvning:
    • Kontor: 2,5
    • Nettbrett og telefon: 0
  • Gjennomsnittlig forskyvning: 0 (ved 40%)
  • Slutt forskyvning:
    • Kontor: -25 (62%)
    • Nettbrett og telefon: 0
  • Trigger bevegelseseffekt: midten av elementet
Divi rullende animasjonskonfigurasjon

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

Rull divi-teammedlem

avslutt~~POS=TRUNC tanker

I denne veiledningen har vi vist deg hvordan du kan bli kreativ med Divis innebygde rulleeffekter. Spesielt har vi gjenskapt en vakker, automatisk rullende teammedlemskarusell. Når besøkende blar nedover på siden, vises en annen del av karusellen.

0 aksjer
del
tweet
Enregistrer