A playlist web page is a great way to give equivalent content material in some way that’s simple for the person to get right of entry to. Divi Video Slider modules are a good way to construct a playlist web page with video content material, corresponding to classes and tutorials. On this article, we’ll see the right way to create a playlist web page with Divi’s Video Slider module the usage of more than one sections and several other supporting modules.

Let’s get began.

Playlist Web page Preview

First, right here’s a take a look at what we’ll construct.

Desktop

Playlist Page

Telephone

Playlist Page

Create a Playlist Web page

Our web page could have 3 sections with two rows each and every. Every phase could have 5 modules. When we’ve created the primary phase, we’ll replica it two times and make adjustments to create the second one and 3rd sections.

Our first phase and rows will use the default styling. I’m the usage of the styling queues from the free Print Shop Layout Pack that’s to be had inside Divi. To make it simple to observe, I’ll construct the web page with the Wireframe View and elegance it with the Desktop View.

Complete Width Row

First, create a new web page, permit the Visible Builder, and upload a complete width row.

Create a Playlist Page

2/3 1/3 Row

Below this row, upload a 2/3, 1/3 row.

Create a Playlist Page

Upload the Video Slider Identify Textual content Module

Within the complete width row, upload a Textual content module.

Add the Video Slider Title Text Module Playlist Page

Upload a Video Slider Module

Subsequent, upload a Video Slider module to the left column of the two/3, 1/3 row.

Add a Video Slider Module Playlist Page

Upload a Video Slider Description Identify Textual content Module

Subsequent, upload a Textual content module beneath the Video Slider module. This shall be used to introduce the outline.

Add a Video Slider Description Title Text Module Playlist Page

Upload a Video Slider Description Textual content Module

Subsequent, upload the Textual content module that can comprise the outline. This is going beneath the Description Identify module.

Add a Video Slider Description Text Module Playlist Page

Upload the Particular person Module

In the end, upload a Particular person module in the correct column of the two/3, 1/3 row.

Add the Person Module

Taste the Video Playlist Web page

Your web page will now appear to be mine. That is the Wireframe View. Now it’s time to taste the modules. We’ll transfer to the Desktop View. On account of the way in which I constructed the web page, mine is not going to display the default content material.

Style the Video Playlist Page

Taste the Playlist Web page Video Slider Identify Textual content Module

Open the settings for the primary Textual content module.

Style the Video Slider Title Text Module

Alternate the Textual content Degree to Heading 2 and upload the name Pillar One: Divi Basics (or your name) to the frame content material.

  • Textual content Degree: H2
  • Frame Content material: Pillar One: Divi Basics

Style the Video Slider Title Text Module

Subsequent, pass to the Design tab. Choose the H2 Heading Textual content and alter the Font to Oswald. Set the Taste to TT, the Alignment to Middle, and the Colour to #000645.

  • Heading Degree: H2
  • Font: Oswald
  • Taste: TT
  • Alignment: Middle
  • Colour: #000645

Style the Video Slider Title Text Module

Subsequent, set the Font measurement to 46px for Desktop, 32px for Pill, and 20px for Telephone. Alternate the Letter Spacing to 1px and the Line Top to at least one.4em. Shut the module’s settings.

  • Font Measurement: Desktop 46px, Pill 32px, Telephone 20px
  • Letter Spacing: 1px
  • Line Top: 1.4em

Style the Video Slider Title Text Module

Taste the Playlist Web page Video Slider Module

Subsequent, we’ll upload the content material and elegance the Video Slider module. Hover over the module and click on the equipment icon to open its settings.

Style the Video Slider Module

Click on Upload New Video.

Style the Video Slider Module

Upload your video and shut the submodule.

Style the Video Slider Module

Proceed the method till you’ve added your entire movies for the primary phase. I’m the usage of the default settings, however you’ll additionally use Dot Navigation instead of the Slider Monitor and permit Overlays in the event you don’t wish to display the default featured symbol for the movies.

Style the Video Slider Module

Taste the Playlist Web page Video Slider Description Identify Textual content Module

Subsequent, open the settings for the Textual content module at once beneath the Video Slider. This shall be used as our description’s name.

Style the Video Slider Description Title Text Module

Alternate the Frame Textual content to Heading 3 and input the textual content About This Sequence into the Frame Content material house.

  • Textual content Degree: Heading 3
  • Content material: About This Sequence

Style the Video Slider Description Title Text Module

Subsequent, pass to the Design tab. Choose Heading Textual content H3 and alter the Font to Oswald, the Taste to TT, the Alignment to Left, and the colour to #000645. Shut the module’s settings.

  • Heading Textual content: H3
  • Font: Oswald
  • Taste: TT
  • Alignment: Left
  • Colour: #000645

Style the Video Slider Description Title Text Module

Taste the Playlist Web page Video Slider Description Textual content Module

Subsequent, open the settings for the following Textual content module. This may increasingly comprise the outline of the video collection.

Style the Video Slider Description Text Module

Input the description of the collection into the Frame Content material house.

  • Content material: video description

Style the Video Slider Description Text Module

Subsequent, pass to the Design tab and scroll all the way down to Textual content Alignment. Set the Alignment to Left. We’ll depart the remainder of its settings at their defaults. Shut the module’s settings.

  • Alignment: Left

Style the Video Slider Description Text Module

Taste the Playlist Web page Particular person Module

In the end, open the settings for the Particular person module.

Style the Person Module

Within the Common tab, beneath Textual content, input the individual’s title into the Identify box and sort Teacher within the Place box. Input any of the social media hyperlinks you need. I’m leaving them clean for this instructional.

  • Identify: particular person’s title
  • Place: Teacher

Style the Person Module

Scroll all the way down to the content material house and upload the description of the teacher. Below Symbol, make a selection a picture out of your media library.

  • Content material: description
  • Symbol: particular person’s symbol

Style the Person Module

Identify Textual content

Pass to the Design tab and scroll to Identify Textual content. Make a selection the H4 Heading Degree. Set the Font to Oswald, the Weight to Semi Daring, the Taste to TT, and the Colour to #000645. Set the Measurement to 20px, the Spacing to 1px, and the Line Top to at least one.5em.

  • H4
  • Oswald
  • Semi Daring
  • TT
  • #000645
  • 20px
  • Spacing 1px
  • Line top 1.5em

Style the Person Module

Place Textual content

In the end, scroll all the way down to Place Textual content. Make a selection Oswald for the Font and set the Weight to Semi Daring. Set the Taste to TT, the Colour to #8f9ca4, the Measurement to 15px, the Line Spacing to 1px, and the Line Top to at least one.5em. Shut the module’s settings.

  • Font: Oswald
  • Weight: Semi Daring
  • Taste: TT
  • Colour: #8f9ca4
  • Measurement: 15px
  • Spacing: 1px
  • Line Top: 2em

Style the Person Module Playlist Page

Reproduction the Playlist Web page’s Phase

Now that the Phase is designed and styled the way in which we wish, hover over its settings and make 2 duplicates.

Duplicate the Playlist Page Section

Taste the Playlist Web page 2d Phase

For the second one phase, we’ll exchange the background colour, so it stands except the others. We’ll additionally exchange the content material of the modules.

Phase Settings

Subsequent, open the settings for the 2d phase.

Style the Second Section Playlist Page

Scroll all the way down to Background and set the colour to #f9f7f4. Shut the settings.

  • Background Colour: #f9f7f4

Style the Second Section Playlist Page

2d Video Slider Identify Textual content Module

Open the name for the second one phase and alter it to mirror the second one set of movies. I’m calling this phase Pillar Two: Divi Modules. Shut the settings.

  • Content material: Pillar Two: Divi Modules

Second Video Slider Title Text Module

2d Video Slider Module

Open the settings for the second one phase’s Video Slider module. Substitute the movies with the ones for the second one phase. Shut the settings.

  • Submodules: make a selection movies

Second Video Slider Module Playlist Page

2d Video Slider Description Identify Textual content Module

This name will stay the similar, so we received’t wish to make adjustments.

Second Video Slider Description Title Text Module

2d Video Slider Description Textual content Module

Subsequent, open the Textual content module with the second one video description and create the outline for the second one set of movies.

  • Frame Content material: video description

Second Video Slider Description Text Module

2d Particular person Module

If a special teacher teaches the second one set of movies, open the second one Particular person module and change the title. additionally, exchange or upload the social media URLs in the event you’re the usage of them.

  • Identify: teacher’s title

Second Person Module Playlist Page

Subsequent, scroll all the way down to the Frame Content material and Symbol house and change the individual’s description and symbol.

  • Frame Content material: particular person’s description
  • Symbol: particular person’s symbol

Second Person Module Playlist Page

Taste the 3rd Phase

For the 3rd phase, we’ll exchange the content material of the modules. This phase will use the default settings, so we will be able to transfer directly to the primary name.

Style the Third Section Playlist Page

3rd Video Slider Identify Textual content Module

Open the name Textual content module and alter the name to compare this set of movies. Shut the module’s settings.

  • Frame Content material: Pillar 3: Divi Layouts

Third Video Slider Title Text Module Playlist Page

3rd Video Slider Module

Open the 3rd Video Slider module and change the movies with the ones for this set. Alternate the Amin Labels if you need and shut the module’s settings.

  • Upload New Video: change each and every video

Third Video Slider Module Playlist Page

3rd Video Slider Description Textual content Module

Open the Textual content module for the 3rd phase’s video description. Create a description for this set of movies. Shut the Textual content module’s settings.

  • Frame Content material: video description

Third Video Slider Description Text Module

3rd Particular person Module

In the end, open the Particular person module for this phase and change the title if it’s other from the primary set of movies. If it’s the similar particular person as the second one set, merely replica that module, paste it into this column, and delete this module. Alternate or upload social community hyperlinks in the event you’re the usage of them.

  • Identify: Teacher’s title

Third Person Module

Scroll all the way down to the Frame Content material and Symbol house and change them to compare this particular person’s knowledge. Shut the module, save your web page, and go out the Visible Builder.

  • Frame Content material: particular person’s description
  • Symbol: particular person’s symbol

Third Person Module

Playlist Web page Effects

Right here’s how our playlist web page appears on desktop and make contact with.

Desktop

Playlist Page

Telephone

Playlist Page

Finishing Ideas

That’s our take a look at the right way to create a playlist web page with Divi’s Video Slider module. It’s a easy procedure and developing duplicates whenever you’ve styled the primary phase makes developing the second one and 3rd sections a lot more uncomplicated. We best have to switch the content material and we’re completed. Divi’s Video Slider module is a superb selection for any playlist web page with movies.

We wish to listen from you. Have you ever constructed a playlist web page with Divi’s Video Slider module? Let us know about your enjoy within the feedback.

The publish How to Create a Playlist Page with Divi’s Video Slider Module seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]