En spellistasida är ett effektivt sätt att presentera liknande innehåll på ett sätt som är lätt för användaren att komma åt. Divi Video Slider-moduler är ett bra sätt att bygga en spellistasida med videoinnehåll, såsom kurser och handledningar. I den här artikeln kommer vi att se hur du skapar en spellistasida med Divis Video Slider-modul med flera sektioner och flera stödjande moduler.
Låt oss börja.
Förhandsgranskning av spellista
Först, här är en titt på vad vi kommer att bygga.
Skrivbord
Telefon
Skapa en spellistasida
Vår sida kommer att ha tre sektioner med två rader vardera. Varje sektion kommer att ha 5 moduler. När vi har skapat det första avsnittet kopierar vi det två gånger och gör ändringar för att skapa det andra och tredje avsnittet.
Vår första sektion och rader kommer att använda standardstilen. Vi använder design från gratis Print Shop Layout Pack som är tillgängligt inom Divi. För att göra det enkelt att följa, bygger Vi sidan med Wireframe View och stilar den med Desktop View.
Full bredd rad
Skapa först en ny sidaaktivera Visual Builderoch lägg till en rad med full bredd.
2/3 1/3 rad
Under denna rad, lägg till en 2/3, 1/3 rad.
Lägg till Video Slider Title Text Module
Lägg till en i raden med full bredd Textmodul.
Lägg till en Video Slider Module
Lägg sedan till a Video Slider-modul till vänster kolumn på 2/3, 1/3 raden.
Lägg till ett videoskjutreglage Beskrivning Titel Textmodul
Lägg sedan till a Textmodul under Video Slider-modulen. Detta kommer att användas för att introducera beskrivningen.
Lägg till en Video Slider Beskrivning Text Module
Lägg sedan till Textmodul som kommer att innehålla beskrivningen. Detta går under modulen Beskrivningstitel.
Lägg till personmodulen
Lägg slutligen till a Personmodul i den högra kolumnen på 2/3, 1/3 raden.
Style sidan för videospellista
Din sida kommer nu att se ut som min. Detta är Wireframe View. Nu är det dags att styla modulerna. Vi byter till skrivbordsvyn. På grund av hur Vi byggde sidan kommer min inte att visa standardinnehållet.
Styla spellistans sida Video Slider Title Text Module
Öppna inställningar för den första textmodulen.
Ändra Textnivå till rubrik 2 och lägg till titel Pillar One: Divi Fundamentals (eller din titel) till kroppens innehåll.
- Textnivå: H2
- Kroppsinnehåll: Pillar One: Divi Fundamentals
Gå sedan till Design flik. Välj H2 Rubriktext och ändra teckensnittet till Oswald. Ställ in Style till TT, Alignment till Center och Color till #000645.
- Rubriknivå: H2
- Typsnitt: Oswald
- Stil: TT
- Inriktning: Center
- Färg: #000645
Ställ sedan in Font storlek till 46px för stationär dator, 32px för surfplatta och 20px för telefon. Ändra Teckenavstånd till 1px och Radavstånd till 1,4 em. Stäng modulens inställningar.
- Teckenstorlek: Desktop 46px, surfplatta 32px, telefon 20px
- Bokstavsavstånd: 1px
- Linjehöjd: 1,4em
Style spellistans sida Video Slider Module
Därefter lägger vi till innehållet och stilar Video Slider-modul. Håll muspekaren över modulen och klicka på kugghjulsikonen för att öppna den inställningar.
Klick Lägg till ny video.
Lägg till din video och stäng undermodulen.
Fortsätt processen tills du har lagt till alla dina videor för det första avsnittet. Vi använder standardinställningarna, men du kan också använda punktnavigering i stället för skjutreglaget och aktivera överlägg om du inte vill visa standardbilden för videorna.
Style spellistans sida Videoskjutreglage Beskrivning Titel Textmodul
Öppna sedan inställningar för Textmodul direkt under Video Slider. Detta kommer att användas som vår beskrivnings titel.
Ändra Kropp text till rubrik 3 och ange text Om den här serien i området Kroppsinnehåll.
- Textnivå: Rubrik 3
- Innehåll: Om den här serien
Gå sedan till Design flik. Välj Rubriktext H3 och ändra teckensnittet till Oswald, stilen till TT, justeringen till vänster och färgen till #000645. Stäng modulens inställningar.
- Rubriktext: H3
- Typsnitt: Oswald
- Stil: TT
- Inriktning: Vänster
- Färg: #000645
Styla spellistans sida Videoskjutreglage Beskrivning Textmodul
Öppna sedan inställningar för nästa Textmodul. Detta kommer att innehålla beskrivningen av videoserien.
Gå in i beskrivning av serien till området Kroppsinnehåll.
- Innehåll: videobeskrivning
Gå sedan till Design fliken och bläddra ned till Textjustering. Ställ in justeringen till vänster. Vi lämnar resten av dess inställningar på standardinställningarna. Stäng modulens inställningar.
Styla spellistsidans personmodul
Öppna slutligen inställningar för Personmodul.
I den Allmän fliken, under Text, skriv in personens namn i fältet Namn och skriv Instruktör i fältet Position. Ange någon av de sociala medier-länkar du vill ha. Vi lämnar dem tomma för denna handledning.
- Namn: personens namn
- Befattning: Instruktör
Rulla ned till innehållsområdet och lägg till beskrivning av instruktören. Under Bildvälj en bild från ditt mediebibliotek.
- Innehåll: beskrivning
- Bild: personens bild
Titeltext
Gå till Design fliken och bläddra till Titeltext. Välj H4 Heading Level. Ställ in typsnittet på Oswald, vikten till halvfet, stilen på TT och färgen på #000645. Ställ in storleken på 20px, mellanrummet till 1px och linjehöjden till 1,5em.
- H4
- Oswald
- Halvfet
- TT
- #000645
- 20px
- Avstånd 1px
- Linjehöjd 1,5 em
Positionstext
Till sist, scrolla ner till Positionstext. Välj Oswald för typsnittet och ställ in vikten på halvfet. Ställ in stilen på TT, färgen till #8f9ca4, storleken på 15px, radavståndet till 1px och linjehöjden till 1,5em. Stäng modulens inställningar.
- Typsnitt: Oswald
- Vikt: Semi fet
- Stil: TT
- Färg: #8f9ca4
- Storlek: 15px
- Avstånd: 1px
- Linjehöjd: 2em
Duplicera spellistans sidas avsnitt
Nu när sektionen är designad och utformad som vi vill, håll muspekaren över dess inställningar och gör 2 dubbletter.
Style spellistans andra avsnitt
För det andra avsnittet ska vi ändra bakgrundsfärgen, så det skiljer sig från de andra. Vi kommer också att ändra innehållet i modulerna.
Sektionsinställningar
Öppna sedan inställningar för andra avsnittet.
Scrolla ner till Bakgrund och ställ in färgen till #f9f7f4. Stäng inställningarna.
- Bakgrundsfärg: #f9f7f4
Andra Video Slider Titel Text Module
Öppna titel för det andra avsnittet och ändra det för att återspegla den andra uppsättningen videor. Vi kallar det här avsnittet för pelare två: Divi-moduler. Stäng inställningarna.
- Innehåll: Pelare två: Divi-moduler
Andra Video Slider Module
Öppna inställningar för det andra avsnittet Video Slider-modul. Byt ut videorna med de för det andra avsnittet. Stäng inställningarna.
- Undermoduler: välj videor
Second Video Slider Beskrivning Titel Text Module
Den här titeln kommer att förbli densamma, så vi behöver inte göra ändringar.
Andra videoskjutreglaget Beskrivning Textmodul
Öppna sedan Textmodul med den andra videobeskrivningen och skapa beskrivningen för den andra uppsättningen videor.
- Kroppsinnehåll: videobeskrivning
Andrapersonsmodul
Om en annan instruktör lär ut den andra uppsättningen videor, öppna den andra Personmodul och byt ut namnet. ändra eller lägg till webbadresserna för sociala medier om du använder dem.
- Namn: instruktörens namn
Scrolla sedan ner till Kroppsinnehåll och Bild område och ersätt personens beskrivning och bild.
- Kroppsinnehåll: persons beskrivning
- Bild: personens bild
Style det tredje avsnittet
För tredje avsnittet, kommer vi att ändra innehållet i modulerna. Det här avsnittet kommer att använda standardinställningarna, så att vi kan gå vidare till den första titeln.
Tredje Video Slider Title Text Module
Öppna titeln Textmodul och ändra titeln så att den matchar denna uppsättning videor. Stäng modulens inställningar.
- Kroppsinnehåll: Pelare tre: Divi-layouter
Tredje Video Slider Module
Öppna den tredje Video Slider-modul och ersätt videorna med de för denna uppsättning. Ändra Amin-etiketterna om du vill och stäng modulens inställningar.
- Lägg till ny video: ersätt varje video
Tredje videoskjutreglaget Beskrivning Textmodul
Öppna Textmodul för det tredje avsnittets videobeskrivning. Skapa en beskrivning för denna uppsättning videor. Stäng textmodulens inställningar.
- Kroppsinnehåll: videobeskrivning
Tredjepersonsmodul
Slutligen öppnar du Personmodul för det här avsnittet och ersätt namnet om det skiljer sig från den första uppsättningen videor. Om det är samma person som den andra uppsättningen, kopiera helt enkelt den modulen, klistra in den i den här kolumnen och ta bort den här modulen. Ändra eller lägg till länkar till sociala nätverk om du använder dem.
- Namn: Instruktörens namn
Scrolla ner till Kroppsinnehåll och Bild området och byt ut dem för att matcha denna persons information. Stänga modulen, spara din sida och utgång Visual Builder.
- Kroppsinnehåll: persons beskrivning
- Bild: personens bild
Resultat för spellistsidor
Så här ser vår spellistasida ut på dator och telefon.
Skrivbord
Telefon
Summering
Det är vår titt på hur man skapar en spellistasida med Divis Video Slider-modul. Det är en enkel process och att skapa dubbletter när du väl har formaterat den första delen gör det mycket lättare att skapa den andra och tredje delen. Vi behöver bara ändra innehållet och vi är klara. Divis Video Slider-modul är ett utmärkt val för alla spellistsidor med videor.
Vi vill höra från dig. Har du byggt en spellistasida med Divis Video Slider-modul? Berätta för oss om din upplevelse i kommentarerna.