Gå til hovedindhold

Sådan oprettes et teammedlem, der ruller karrusel med Divi

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

Lors de la création de votre page “À propos”, vous souhaiterez probablement également y présenter les membres de votre équipe. Ce faisant, vous permettez ainsi aux visiteurs d’interagir avec les personnes derrière votre entreprise. Si vous cherchez un moyen d’animer la section des membres de votre équipe sur le défilement, ce tutoriel pourra vous plaire. Nous allons créer un carrousel de membres de l’équipe à défilement automatique qui se déplace lorsque vos visiteurs font défiler la page. 

Demonstration

Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.

Rul divi-teammedlem

Begyndelsen af ​​undfangelsen

Tilføj en ny sektion

afstand

Start med at tilføje et nyt almindeligt afsnit til den side, du arbejder på. Åbn sektionsindstillinger og tilføj tilpasset polstring på forskellige skærmstørrelser.

  • Øvre polstring: 200px (skrivebord), 100px (tablet og telefon)
  • Bundpolstring: 200px (skrivebord), 100px (tablet og telefon)
Parameterkonfiguration

overløb

For at sikre, at der ikke vises nogen vandret rullebjælke i vores design, skjuler vi sektionsoverløb i den avancerede fane.

  • Vandret overløb: skjult
  • Lodret overløb: skjult
Overløbskonfiguration

Tilføj linje 1

Kolonne struktur

Fortsæt med at tilføje en ny linje til sektionen ved hjælp af følgende kolonnestruktur:

Vælg divi-layout

dimensionering

Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillingerne, skifte til designfanen og ændre bredden og den maksimale bredde i størrelsesindstillingerne.

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

afstand

Vi tilføjer også brugerdefineret øverste og nedre polstring.

  • Øvre polstring: 100px
  • Bundpolstring: 100px
Konfiguration af linjeafstandsdivi

Føj et tekstmodul til kolonnen

Tilføj H2 indhold

Det er tid til at tilføje moduler startende med et første tekstmodul. Indtast det H2-indhold, du vælger.

Mød holdet

H2 tekstindstillinger

Gå til fanen til moduldesign, og skift indstillingerne for H2-tekst som følger:

  • Skrifttitel 2: Quicksand
  • Skrifttitel 2: semi-fed
  • Tekstfarve på punkt 2: # 000000
  • Header 2 Tekststørrelse: 70px (desktop), 50px (tablet), 40px (telefon)
Mellemrum med divi-tekst

Føj et separationsmodul til kolonnen

synlighed

Tilføj derefter et separationsmodul. Sørg for, at indstillingen "Vis separator" er aktiveret.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

  • Vis separator: Ja
Vis diviseparator

Linje

Foretag derefter nogle ændringer af linieindstillingerne.

  • Linjefarve: # edf000
  • Linjestil: solid
  • Linjeposition: Øverst
Divi afstandsafstand

dimensionering

Og fuldfør modulparametrene ved at ændre dimensioneringsparametrene i overensstemmelse hermed:

  • Divider vægt: 20px
  • Bredde: 11%
  • Justering af modulet: venstre
  • Højde: 20px
Dimensionering af divi-linjemodul

Tilføj en linje # 2

Kolonne struktur

Til næste række! Brug følgende kolonnestruktur:

Divi-kolonnekonfiguration

dimensionering

Uden at tilføje flere moduler skal du åbne linjeparametrene og ændre størrelsesparametrene som følger:

  • Brug en brugerdefineret tagrendebredde: Ja
  • Tagrendebredde: 2
  • Bredde: 100%
  • Maks bredde: 100%
Gutter bredde konfiguration

afstand

Tilføj derefter kun venstre og højre polstring på de mindre skærme.

  • Venstre polstring: 5% (kun tablet og telefon)
  • Høj polstring: 5% (kun tablet og telefon)
Konfiguration af linjeafstandsstil

Kolonneparametre (5x)

Nu, i de næste tre trin i denne vejledning, skal vi foretage nogle ændringer i kolonnerne. Anvend de tre trin på hver af kolonnerne i din række.

Divi-parameterlinjekonfiguration

Gradient baggrund

Først skal du tilføje en gradientbaggrund til hver kolonne.

  • 1 farve: rgba (255,255,255,0)
  • 2 farve: rgba (0,0,0,0,84)
  • Gradienttype: lineær
  • Startposition: 25%
  • Slutposition: 86%
  • Placer gradient over baggrundsbillede: Ja
Divi bageste søjlekonfiguration

Baggrundsbillede

Upload derefter et baggrundsbillede efter eget valg. Dette baggrundsbillede repræsenterer hvert teammedlem, så brug et andet billede til hver kolonne.

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

  • Baggrundsbilledstørrelse: Cover
  • Baggrundsbilledets placering: Center
Tilføj baggrundsbillede til divisøjle

Hovedelement

Fuldfør kolonneindstillingerne ved at tilføje brugerdefineret CSS til det vigtigste tabletelement i hver kolonne. Disse linjer med CSS-kode hjælper os med at placere kolonnerne over hinanden på tabletten i stedet for at have to side om side.

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

Føj et personmodul til kolonnen

Tilføj indhold

For at dele oplysninger om teammedlemmer bruger vi et personmodul. Føj det første personmodul til kolonne 1, og brug det indhold, du vil have.

Divi personnavn

Slet billede

Slet derefter billedet. Vi bruger i stedet kolonnets baggrundsbillede.

Fjern divi-billede

Baggrundsbillede

Vi tilføjer derefter et billedoverlay som baggrundsbillede af modulet. Du kan finde den, vi bruger, ved at downloade mappen i starten af ​​denne vejledning.

  • Baggrundsbilledstørrelse: Cover
  • Baggrundsbilledets placering: Center
Konfiguration af baggrund for personmodul

Titeltekstindstillinger

Gå til fanen for moduldesign, og skift indstillingerne for titelteksten som følger:

  • Titleniveau: H3
  • Titeltype: Quicksand
  • Vægt på titeltype: fed
  • Titelfarvefarve: #ffffff
  • Titeltekststørrelse: 230%
Divi-modul titeltilpasning

Indstillinger for kropstekst

Skift også indstillinger for kropstekst.

  • Body Font: Open Sans
  • Tekstfarve på krop: #ffffff
  • Kropslinjens højde: 2,2 em
Divi body tilpasning

Placering af tekstindstillinger

Foretag derefter nogle ændringer til positionstekstindstillingerne.

  • Skrifttype Position: Open Sans
  • Placeringstekstfarve: # edf000
Divi position

afstand

Og fuldfør modulindstillingerne ved at tilføje tilpassede polstringsværdier til afstandsindstillingerne.

  • Øvre polstring: 70%
  • Nedre polstring: 10%
  • Venstre polstring: 10%
  • Høj polstring: 10%
Divi person modulafstand

Kopier personmodulet 4 gange

Når du har afsluttet Personmodulet, kan du klone hele modulet fire gange.

Placer duplikater i de resterende kolonner

Placer duplikatmoduler i de resterende fire kolonner i rækken. Sørg også for at redigere indholdet.

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

Vend række til en automatisk rullekarusel

Skift størrelse på linje # 2

For at gøre denne række til en automatisk rullende teammedlemskarusel skal vi genåbne rækkeindstillinger og ændre bredden og den maksimale bredde i størrelsesindstillinger.

  • Bredde: 180%
  • Maksimal bredde: 220% (skrivebord), 100% (tablet og telefon)
Linjedivi modifikationsafstand

Tilføj vandret bevægelse af linje # 2

Fuldfør linjeindstillingerne ved at tilføje vandret bevægelse til indstillingerne for rulleeffekten i fanen avanceret, og du er færdig!

  • Aktivér vandret bevægelse: Ja
  • Start offset:
    • Kontor: 2,5
    • Tablet og telefon: 0
  • Gennemsnitlig forskydning: 0 (ved 40%)
  • Slut offset:
    • Kontor: -25 (62%)
    • Tablet og telefon: 0
  • Trigger bevægelseseffekt: midten af ​​elementet
Divi rulning animation konfiguration

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

Rul divi-teammedlem

endelige tanker

I denne vejledning har vi vist dig, hvordan du bliver kreativ med Divis indbyggede rulleeffekter. Specifikt har vi genskabt en smuk, automatisk rullende teammedlemskarusel. Når besøgende ruller ned på siden, vises en anden del af karrusellen.

Denne artikel indeholder kommentarer 0

Skriv en kommentar

Din e-mail-adresse vil ikke blive offentliggjort. Påkrævede felter er markeret med *

Dette websted bruger Akismet til at reducere uønskede. Få flere oplysninger om, hvordan dine kommentarer data bruges.

Tilbage til toppen
0 aktier
andel
tweet
Tilmeld