Gå till innehållet

Hur man skapar en teammedlem som rullar karusell med Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

När du skapar din About-sida vill du antagligen också presentera dina teammedlemmar. På så sätt tillåter du besökare att interagera med människorna bakom ditt företag. Om du letar efter ett sätt att liva upp dina teammedlemmar på rullningen kan den här handledningen vara för dig. Vi skapar en karussell för teammedlemmar som flyttar automatiskt när dina besökare bläddrar på sidan. 

Demonstration

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

Bläddra divi teammedlem

Början av befruktningen

Lägg till en ny sektion

avstånd

Börja med att lägga till ett nytt vanligt avsnitt på sidan du arbetar med. Öppna sektionsinställningar och lägg till anpassad stoppning på olika skärmstorlekar.

  • Övre stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
  • Botten stoppning: 200 px (skrivbord), 100 px (surfplatta och telefon)
Parameterkonfiguration

överflöden

För att se till att inget horisontellt rullningsfält visas i vår design kommer vi att dölja sektionsöverflöden i den avancerade fliken.

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
Konfiguration av överflöde

Lägg till rad 1

Kolumnstruktur

Fortsätt att lägga till en ny rad i avsnittet med följande kolumnstruktur:

Välj divi-layout

dimensionering

Utan att lägga till några moduler ännu, öppna radinställningarna, växla till designfliken och ändra bredden och den maximala bredden i storleksinställningarna.

  • Bredd: 90%
  • Max bredd: 1580px
Divi line parameter

avstånd

Vi lägger också till anpassad övre och undre stoppning.

  • Övre stoppning: 100px
  • Botten stoppning: 100px
Konfiguration av linjeavstånd

Lägg till en textmodul i kolumnen

Lägg till H2-innehåll

Det är dags att lägga till moduler, börjar med en första textmodul. Ange det H2-innehåll du väljer.

Möt teamet

H2 textinställningar

Gå till fliken moduldesign och ändra H2-textinställningarna enligt följande:

  • Teckensnitt titel 2: Quicksand
  • Teckensnitt titel 2: halvfet
  • Textfärg på artikel 2: # 000000
  • Rubrik 2 Textstorlek: 70 px (skrivbord), 50 px (surfplatta), 40 px (telefon)
Divi textavstånd

Lägg till en separationsmodul i kolumnen

synlighet

Lägg sedan till en separationsmodul. Se till att alternativet "Visa separator" är aktiverat.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

  • Visa separator: Ja
Visa diviseparator

Linje

Gör sedan några ändringar i radinställningarna.

  • Linjefärg: # edf000
  • Linjestil: solid
  • Linjeposition: överst
Divi-avståndsstil

dimensionering

Och slutföra modulparametrarna genom att ändra dimensioneringsparametrarna i enlighet därmed:

  • Divider vikt: 20px
  • Bredd: 11%
  • Justering av modulen: vänster
  • Höjd: 20px
Storleksdelningslinjemodul

Lägg till en rad # 2

Kolumnstruktur

Till nästa rad! Använd följande kolumnstruktur:

Divi-kolumnkonfiguration

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna och modifierar dimensioneringsparametrarna enligt följande:

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 2
  • Bredd: 100%
  • Max bredd: 100%
Rännans breddkonfiguration

avstånd

Lägg sedan till vänster och höger polstring på endast de mindre skärmarna.

  • Vänster stoppning: 5% (endast surfplatta och telefon)
  • Höger stoppning: 5% (endast surfplatta och telefon)
Konfiguration av linjeavståndsstil

Kolumnparametrar (5x)

Nu, i de närmaste tre stegen i denna handledning, kommer vi att göra några ändringar i kolumnerna. Tillämpa de tre stegen på var och en av kolumnerna i din rad.

Divi-parameterradkonfiguration

Lutningbakgrund

Lägg först till en lutningsbakgrund i varje kolumn.

  • 1-färg: rgba (255,255,255,0)
  • 2-färg: rgba (0,0,0,0,84)
  • Lutningstyp: linjär
  • Startposition: 25%
  • Slutposition: 86%
  • Placera övertoningen ovanpå bakgrundsbilden: Ja
Divi bakre kolonnkonfiguration

Bakgrundsbild

Ladda sedan upp en bakgrundsbild efter eget val. Den här bakgrundsbilden representerar varje lagmedlem, så använd en annan bild för varje kolumn.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

  • Bakgrundsstorlek: Omslag
  • Bakgrundsbildens position: Mitt
Lägg till bakgrundsbild för divikolumn

Huvudelementet

Fyll i kolumninställningarna genom att lägga till anpassad CSS till huvudplattelementet i varje kolumn. Dessa rader med CSS-kod hjälper oss att placera kolumnerna under varandra på surfplattan istället för att ha två sida vid sida.

bredd: 100%! viktigt; marginal: 50px 0px 50px 0px! viktigt;
Kod css divi kolumn

Lägg till en personmodul i kolumnen

Lägg till innehåll

För att dela information om teammedlemmar använder vi en personmodul. Lägg till den första Person-modulen i kolumn 1 och använd vilket innehåll du vill ha.

Personnamn divi

Radera bild

Radera sedan bilden. Vi använder istället kolumnens bakgrundsbild.

Ta bort divi-bilden

Bakgrundsbild

Vi lägger sedan till ett bildöverlägg som modulens bakgrundsbild. Du hittar den vi använder genom att ladda ner mappen i början av denna handledning.

  • Bakgrundsstorlek: Omslag
  • Bakgrundsbildens position: Mitt
Konfiguration av personmodulens bakgrund

Titeltextinställningar

Gå till fliken moduldesign och ändra titeltextinställningarna enligt följande:

  • Titelnivå: H3
  • Titel typsnitt: Quicksand
  • Titel typsnitt vikt: fetstil
  • Titelfärg: #ffffff
  • Titeltextstorlek: 230%
Divi-modul titel anpassning

Inställningar för kroppstext

Ändra också inställningarna för kroppstext.

  • Kroppstypsnitt: Open Sans
  • Kroppstextfärg: #ffffff
  • Kroppslinjens höjd: 2,2 em
Divi kropp anpassning

Position textinställningar

Gör sedan några ändringar i positionstextinställningarna.

  • Font Position: Open Sans
  • Position i textfärg: # edf000
Divi position

avstånd

Och slutför modulinställningarna genom att lägga till anpassade utfyllnadsvärden i avståndsinställningarna.

  • Övre stoppning: 70%
  • Nedre stoppning: 10%
  • Vänster stoppning: 10%
  • Höger stoppning: 10%
Divi person modulavstånd

Duplicera Person-modulen 4 gånger

När du har slutfört Personmodulen kan du klona hela modulen fyra gånger.

Placera dubbletter i de återstående kolumnerna

Placera duplicerade moduler i de återstående fyra kolumnerna på raden. Se till att redigera innehållet också.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Vänd rad till en automatisk rullkarusell

Ändra storleken på rad nr 2

För att göra denna rad till en automatisk rullning av teammedlemskarusell måste vi öppna radinställningarna igen och ändra bredden och den maximala bredden i storleksinställningarna.

  • Bredd: 180%
  • Maximal bredd: 220% (skrivbord), 100% (surfplatta och telefon)
Avstånd för ändring av linjedivi

Lägg till horisontell rörelse av linje # 2

Slutför radinställningarna genom att lägga till horisontell rörelse till inställningarna för bläddringseffekten på fliken avancerat så är du klar!

  • Aktivera horisontell rörelse: Ja
  • Starta offset:
    • Kontor: 2,5
    • Tablet och telefon: 0
  • Genomsnittlig offset: 0 (vid 40%)
  • Slutförskjutning:
    • Kontor: -25 (62%)
    • Tablet och telefon: 0
  • Trigger motion-effekt: mitt i elementet
Konfiguration för animering av divi-rullning

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

office

Bläddra divi teammedlem

Avslutande tankar

I denna handledning har vi visat dig hur du blir kreativ med Divis inbyggda rullningseffekter. Specifikt har vi återskapat en vacker, automatisk rullning teammedlemskarusell. När besökare rullar ner på sidan visas en annan del av karusellen.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
0 aktier
del
tweet
Enregistrer