Vill du att dina teammedlemmar ska presenteras i form av en karusell med Divi ?
När du ställer in din Om-sida vill du förmodligen inkludera dina teammedlemmar där också. Genom att göra det tillåter du besökare för att få kontakt med människorna bakom ditt företag.
Om du letar efter ett sätt att animera dina teammedlemmars avsnitt på scroll, kommer du att älska den här handledningen.
Vi kommer att återskapa en vacker automatisk rullande karusell som rör sig som din besökare scrolla sidan.
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
Stationär dator
Mobilversion
Låt oss börja designa med Divi
Läs också: Divi: Så avslöjar du innehåll när du håller muspekaren över avsnittsavdelaren
Lägg till en ny sektion
Interna magiker
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.
- Utfyllnad (överst och neder): 200px (dator), 100px (surfplatta och telefon)
synlighet
För att säkerställa att inga horisontella rullningslister visas i vår design, kommer vi att dölja avsnittsspill på fliken Avancerat.
- Horisontellt överflöde: Dold
- Vertikalt överflöde: Dold
Lägg till rad #1
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad i sektionen med följande kolumnstruktur:
Bredd
Utan att lägga till några moduler ännu, öppna linjeinställningarna, växla till fliken Designa och ändra bredd och maxbredd i storleksinställningarna.
- Bredd: 90 %
- Max bredd: 1px
avstånd
Vi lägger också till anpassad övre och undre stoppning.
- Utfyllnad (topp och botten): 100px
Lägg till en textmodul i kolumnen
Lägg till innehåll i H2-storlek
Det är dags att lägga till moduler, börja med en första textmodul. Ange a innehåll H2 storlek efter eget val.
H2 textinställningar
Byt till flik Designa i modulen och ändra H2-textparametrarna enligt följande:
- Typsnitt: Quicksand
- Teckensnittsvikt: Halvfet
- Textfärg: #000000
- Textstorlek: 70px (dator), 50px (surfplatta), 40px (telefon)
Lägg till en "Divider"-modul i kolumnen
synlighet
Lägg sedan till en modul divider. Se till att alternativet "Visa avdelare" är aktiverat.
- Visa avdelare: JA
Linje
Gör sedan några ändringar i linjeinställningarna.
- Linjefärg: #edf000
- Stil: Solid
- Linjeposition: Överst
Storlek
Och komplettera modulparametrarna genom att ändra storleksparametrarna i enlighet med detta:
- Divider Vikt: 20px
- Bredd: 11 %
- Justeringsmodul: vänster
- Höjd: 20px
Lägg till rad 2
Strukturen av kolonnen
Nästa rad! Använd följande kolumnstruktur:
Storlek
Utan att lägga till några moduler än, öppna radinställningarna och ändra storleksinställningarna enligt följande:
- Använd anpassad rännbredd: Ja
- Rännans bredd: 2
- Bredd: 100 %
- Max bredd: 100 %
Avstånd (endast surfplatta och telefon)
Lägg sedan till vänster och höger stoppning endast på små skärmstorlekar.
- Utfyllnad (vänster och höger): 5 % (endast surfplatta och telefon)
Kolumnparametrar (5x)
Nu, i de kommande 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.
Bakgrundsgradient
Lägg först till en gradientbakgrund till varje kolumn.
- Gradientstopp (25%): rgba(255,255,255,0)
- Gradientstopp (86%): rgba(0,0,0,0.84)
- Typ: Linjär
- Fyrkantig gradient ovanför bakgrundsbild : JA
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.
- Bakgrundsbildstorlek : Omslag
- Bakgrundsbild Position: Mitten
Tillagd anpassad CSS (endast surfplatta)
Slutför kolumninställningarna genom att lägga till anpassad CSS till huvudelementet (För visning Tablett endast) 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.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Lägg till en "Person"-modul i kolumnen
Lägg till innehåll
För att dela information om teammedlemmar använder vi en modul Person.
Lägg till den första personmodulen i kolumn 1 och använd innehåll som du väljer.
Radera bild
Radera sedan bilden. Istället använder vi kolumnens bakgrundsbild.
Bakgrundsbild
Därefter lägger vi till en bildöverlagring som bakgrundsbild för modulen.
- Bakgrundsbildstorlek: Omslag
- Bakgrundsbildens position: mitten
Titeltextinställningar
Byt till flik Designa modul och ändra titeltextinställningarna enligt följande:
- Rubriknivå: H3
- Titel Teckensnitt: Quicksand
- Teckensnittsvikt: Fet
- Titel Text Färg: #ffffff
- Titeltextstorlek: 230 %
Inställningar för kroppstext
Ändra också inställningarna för kroppstext.
- Body Font: Open Sans
- Textfärg: #ffffff
- Linjehöjd: 2,2 em
Teammedlem post textinställningar
Gör sedan några ändringar i textinställningarna för positionen som innehas av teammedlemmen.
- Position Font: Öppna utan
- Positionstextfärg: #edf000
avstånd
Och slutför modulinställningarna genom att lägga till anpassade utfyllnadsvärden i avståndsinställningarna.
- Vaddering: 70% (överst), 10% (nedre, vänster och höger)
Klona "Person"-modulen fyra gånger
När du har slutfört Personmodulen kan du klona hela modulen fyra gånger.
Placera dubbletter i återstående kolumner
Placera dubbletter av moduler i de återstående fyra kolumnerna i raden.
Se också till att ändra innehåll.
Förvandla en rad till en karusell med automatisk rullning
Se även: Divi: Hur man skapar ett rutnät för flytande kolumner vid hovring
Ändra radstorlek #2
För att nu förvandla den här linjen till en karusell med automatisk rullning, måste vi öppna linjeinställningarna igen och ändra bredd och maxbredd i storleksinställningarna.
- Bredd: 180 %
- Max bredd: 220 % (skrivbord), 100 % (surfplatta och telefon)
Lägg till horisontell rörelse på linje 2
Komplettera linjeinställningarna genom att lägga till horisontell rörelse för att rulla effektinställningar i fliken Advanced Open water under alternativ Ruleffekter och du är klar!
- Aktivera horisontell rörelse: Ja
- Startoffset:
- Desktop: 2,5
- Surfplatta och telefon: 0
- Mittoffset: 0 (till 40 %)
- Slutförskjutning:
- Desktop: -25 (till 62 %)
- Surfplatta och telefon: 0
- Rörelseeffektutlösare: Mitten av element
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.
Stationär dator
Ladda ner DIVI nu!!!
Mobilvy
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln har vi visat dig hur du blir kreativ med de inbyggda rullningseffekterna av Divi.
Närmare bestämt återskapade vi en vacker karusell med teammedlemmar som rullar automatiskt. När besökare scrolla sidan, en annan del av karusellen dyker upp.
Vi hoppas att den här handledningen kommer att inspirera dig för dina nästa projekt. Divi. Om du har några funderingar eller förslag, hitta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
