Normally, each structure pack that comes out on our weblog features a weblog structure, which is helping you get your weblog in a position very quickly. However, have you ever ever sought after to look how one can construct a type of weblog pages your self? On this article, we’ll use a type of weblog layouts to look how one can construct a weblog web page with Divi’s weblog module. We’ll move step by step thru each surroundings.
Let’s get began!
Weblog Web page Preview
First, let’s take a look at what we’re development.
Preview Desktop
Preview Cell
Making a New Weblog Web page
Create New Web page
First, we’ll create our web page. Within the WordPress dashboard, make a selection Pages > Upload New.
Give the web page a identify that is sensible to you. I’m the use of the identify of the web page from the structure pack, which is Acai Weblog Web page. Make a choice any web page attributes you need in the fitting sidebar. I’m leaving the attributes at their defaults.
- Web page Identify: Acai Weblog Web page
Transfer Over to Divi Builder
Subsequent, it’s time to modify to the Divi Builder. Click on the crimson button within the middle of the web page: Use Divi Builder. This will likely redirect you to the entrance finish with the Divi Builder lively, so we will get started development the web page.
Upload Hero with Weblog Web page Identify
Taste the Hero Segment
We’ll get started with the primary phase. Open the phase’s settings.
Scroll right down to Background and alter the colour to #f9f3fd. Input Weblog because the Admin Label. Shut the Segment’s settings.
- Background: #f9f3fd
- Admin Label: Weblog
Create the Weblog Web page Identify
Subsequent, we’ll upload a Row for the identify. Make a choice the fairway icon and select the single-column Row.
Subsequent, upload a Textual content module to the Row. If the modal doesn’t open whilst you upload the Row, make a selection the Grey plus icon and seek for Textual content.
Taste the Weblog Identify Textual content Module
Open the Textual content module settings and make a selection Heading 1. Upload the identify Our Weblog.
- Font: Heading 1
- Textual content: Our Weblog
Subsequent, move to the Design tab and set the Alignment to Heart. For H1 Heading Textual content, select Cormorant Toddler for the Font and make it Daring.
- Textual content Alignment: Heart
- Heading Textual content: H1
- Font: Cormorant Toddler
- Weight: Daring
Set the Colour to #442854, the Measurement to 130px (that is for the Desktop, we’ll exchange the pill and make contact with in a minute), and set the Line Hight to 0.8em.
- Colour: #442854
- Desktop Textual content Measurement: 130px
- Line Peak: 0.8em
Hover over the Heading Textual content Measurement choices and make a selection the display screen icon. Select the Pill icon and set the Measurement to 60px.
- Pill Textual content Measurement: 60px
Finally, make a selection the Telephone icon and set the Measurement to 40px.
- Telephone: 40px
Create the Weblog Web page Newest Put up and CTA
Our hero phase comprises the most recent put up and an electronic mail optin. Upload a brand new Row beneath our first Row and make a selection the Column design with 2/3 at the left and 1/3 at the proper.
Open the Row settings through clicking the equipment.
Make a choice the Design tab, scroll right down to Spacing, and upload 0px to the Backside Padding. Shut the settings.
- Backside Padding: 0px
Upload and Taste the Featured Weblog Put up Module
Subsequent, we’ll upload a Weblog module. This will likely comprise our newest put up. Click on the grey plus icon within the left column of our new Row and upload the Weblog module.
Content material
Beneath Content material, input 1 for the Put up Rely.
- Put up Rely: 1
Parts
Scroll right down to Parts and uncheck Creator and Pagination. We’ll depart the remainder at their defaults.
- Display Creator: No
- Display Pagination: No
Format
Subsequent, make a selection the Design tab and select Fullwidth for the Format and disable the Featured Symbol Overlay.
- Format: Fullwidth
- Featured Symbol Overlay: Off
Identify Textual content
Scroll right down to Identify Textual content. Make a choice H2 and select Cormorant Toddler. Make a choice Daring and alter the colour to #442854.
- Heading Degree: H2
- Font: Cormorant Toddler
- Weight: Daring
- Colour: #442854
Set the Desktop Font Measurement to 30px, the Pill to 20px, and the Telephone to 18px. Trade the Line Peak to at least one.1em.
- Measurement: 30px Desktop, 20px Pill, 18px Telephone
- Identify Line Peak: 1.1em
Frame Textual content
Subsequent, scroll to Frame Textual content. Select Cabin for the font, exchange the colour to #442854, and alter the Line Peak to at least one.8em.
- Font: Cabin
- Colour: #442854
- Line Peak: 1.8em
Meta Textual content
Subsequent, scroll to Meta Textual content. Trade the font to Cormorant Toddler, set the Weight to Common, take away the TT styling, and set the colour to #442854. For the Measurement, set the Desktop to 16px, Pill to 15px, and Telephone to 14px. Trade the Line Peak to at least one.8em.
- Font: Cormorant Toddler
- Weight: Common
- Taste: None
- Colour: #442854
- Measurement: Desktop 16px, Pill 15px, Telephone 14px
- Line Peak: 1.8em
Spacing
Subsequent, scroll right down to Spacing and alter the Best Margin to 0vw.
- Best Margin: 0vw
Field Shadow
In any case, scroll to Field Shadow and disable it.
- Field Shadow: Disable
Upload and Taste the Weblog E mail Textual content Module
Now, we’ll transfer directly to the fitting column and create the e-mail CTA. First, upload a Textual content module to the fitting column. Click on the grey plus icon and seek for Textual content.
Content material
Make a choice Heading 2 and input the textual content Subscribe for Offers & Recipes.
- Font: H2
- Textual content: Subscribe for Offers & Recipes
Heading Textual content
For the Heading Textual content, make a selection Heart Alignment, select H2, make a selection Cormorant Toddler, and set it to Daring.
- Textual content Alignment: Heart
- Heading Textual content: H2
- Font: Cormorant Toddler
- Weight: Daring
Trade the Colour to #442854, the Measurement to 32px, and the Line Peak to 0.95em.
- Colour: #442854
- Measurement: 32px
- Line Peak: 0.95em
Spacing
In any case, scroll right down to Spacing and upload 10px to the Backside Margin. Shut the Textual content module settings.
- Backside Margin: 10px
Upload and Taste the Weblog E mail Optin Module
Subsequent, we’ll construct the e-mail shape. Upload an E mail Optin module beneath the Textual content module in the fitting column.
Content material
First, delete the Identify and Frame textual content.
- Identify: None
- Frame Textual content: None
Scroll right down to E mail Account and upload your Carrier Supplier.
Subsequent, scroll to Background and unselect the Background Colour.
- Use Background Colour: no
Fields
Move to the Design tab and alter the Fields Background Colour to rgba(255,255,255,0) and the Textual content colour to #442854.
- Background Colour: rgba(255,255,255,0)
- Fields Textual content Colour: #442854
Scroll right down to the Font choices and alter the font to Cabin, the Measurement to 16px, and the Line Peak to at least one.8em.
- Fields Font: Cabin
- Measurement: 16px
- Line Peak: 1.8em
Subsequent, regulate the Fields Rounded Nook to 32px, the Border Width to 2px, and alter the Border Colour to #442854.
- Fields Rounded Corners: 32px
- Border Width: 2px
- Border Colour: #442854
Button
Scroll right down to Button and make a selection Use Customized Kinds for Button. Trade the dimensions to 18ps, the Button Colour to white, and the Button Background Colour to #442854.
- Use Customized Kinds for Button: Sure
- Measurement: 18px
- Colour: #ffffff
- Button Background: #442854
Trade the Border Radius to 50px, the font to Cormorant Toddler, and make the Weight Daring.
- Border Radius: 50px
- Font: Cormorant Toddler
- Weight: Daring
Finally, let’s upload some Button Margin and Padding. Input 20px for the Best Margin, 12px for the Best and Backside Padding, and 32px for the Left and Proper Padding. Shut the E mail Optin settings.
- Button Best Margin: 20px
- Best, Backside Padding: 12px
- Left, Proper Padding: 32px
Upload New Row for the Weblog Web page Weblog List
Now, we’ll construct the Weblog List for the weblog web page. First, upload a brand new single-column Row beneath our Hero Row.
Weblog List Row Settings
Move to the Design tab and upload 0px to the Best Padding. Shut the Row settings.
- Best Padding: 0px
Upload a Weblog Module to Your Row
Upload a Weblog module on your new Row through clicking the grey plus icon and clicking on Weblog.
Taste the Weblog Feed
Let’s taste the feed for the Weblog web page.
Weblog Feed Content material
Open the Weblog module’s settings and input 3 for the Put up Rely. The Put up Rely permits you to select the collection of posts that presentations at the display screen.
A decrease quantity, similar to 3, permits us to concentrate on the previous few posts and helps to keep the web page smaller. This can be a sensible choice in the event you don’t put up ceaselessly, or you need to stay the web page cleaner. Appearing extra posts, similar to 6-9, is a good suggestion if you wish to center of attention at the weblog feed.
- Put up Rely: 3
Input 1 for the offset. This tells Divi to begin at the second one weblog put up, which helps to keep us from showing the similar put up that’s already displayed within the featured weblog put up Row above this one.
- Put up Offset Quantity: 1
Parts
Scroll right down to Parts. Permit the Featured Symbol, Date, Classes Excerpt, and Pagination. Disable the remainder.
- Display Featured Symbol: Sure
- Date: Sure
- Classes: Sure
- Excerpt: Sure
- Pagination: Sure
Background
Move to Background and set the Grid Tile Background Colour to rgba(255,255,255,0)
- Grid Tile Background Colour: rgba(255,255,255,0)
Format and Overlay
Subsequent, move to the Design tab. Go away the Format set to Grid. We selected the fullwidth structure for the featured weblog put up above this one. We’ll use the grid structure for this weblog feed, which is the default choice. Disable the Featured Symbol Overlay.
- Format: Grid
- Featured Symbol Overlay: Off
Identify Textual content
For the Identify Textual content, make a selection H2. Select Cormorant Toddler, set it to Daring, and input #442854 for the Colour.
- Heading Degree: H2
- Font: Cormorant Toddler
- Weight: Daring
- Colour: #442854
Select 20px for the Desktop Textual content Measurement. Make a choice the Telephone icon and set it to 18px. Set the Line Peak to at least one.1em.
- Measurement: 20px Desktop, 18px Telephone
- Line Peak: 1.1em
Frame Textual content
Scroll to Frame Textual content and select Cabin. Set the Colour to #442854.
- Font: Cabin
- Colour: #442854
Set the Line Peak to at least one.8em.
- Line Peak: 1.8em
Meta Textual content
Scroll right down to Meta Textual content and select Cormorant Toddler. Set the Weight to Common, Taste to none, and Colour to #442854.
- Font: Cormorant Toddler
- Weight: Common
- Taste: None
- Colour: #442854
Set the Desktop Measurement to 16px, the Pill to 15px, and the Telephone 14px. Trade the Line Peak to at least one.8em.
- Measurement: 16px Desktop, 15px Pill, 14px Telephone
- Line Peak: 1.8em
Pagination Textual content
Now, let’s transfer to the Pagination Textual content. For the Font, select Cormorant Toddler, make a selection Daring, and alter the colour to #442854.
- Font: Cormorant Toddler
- Weight: Daring
- Colour: #442854
Spacing
Subsequent, we’ll move to Spacing and upload 0vw Margin to the Best. This helps to keep our module from overlapping the former module.
- Best Margin: 0vw
Border
Scroll to Border and input 0px for all 4 corners. This offers us our sq. form for the cardboard.
- Rounded Corners: 0px
Field Shadow
In any case, scroll to Field Shadow and disable it. Shut the Weblog settings. The weblog phase is done.
- Field Shadow: None
Upload New CTA Segment to the Weblog Web page
Subsequent, we’ll create the CTA phase of the web page. This phase features a fullwidth background symbol in parallax, touch data, and social apply hyperlinks.
Upload a New Segment
Click on the blue icon to upload a brand new Common Segment on the backside of the web page.
- Segment: Common
Taste the CTA Segment
Open the Segment’s settings through clicking on its equipment icon.
Background
Scroll to Background and select the Symbol tab. Click on the grey icon classified Upload Background Symbol.
Select a full-width symbol out of your Media Library. Make a choice Use Parallax Impact after which select CSS for the Parallax Manner.
- Background: Symbol
- Use Parallax Impact: Sure
- Parallax Manner: CSS
Scroll right down to Admin Label and input Footer into the sphere. This will likely mean you can stay monitor of the sections.
- Admin Label: Footer
Subsequent, move to the Design tab. Scroll to Spacing and upload 10vw to the Best and Backside Padding. Shut the Segment settings.
- Padding: 10vw (Best and Backside)
Upload a New CTA Row
Click on at the inexperienced plus icon and upload a single-column Row for our content material.
- Row: One Column
Sizing
Open the Row’s settings and move to the Design tab. Beneath Sizing, make a selection the Pill icon beneath Max Width and input 320px. This will likely mechanically replicate within the Telephone settings. Shut the Row settings.
- Max Width: 320px Pill
Identify Textual content Module
Our CTA is presented with a identify. To create this, upload a Textual content module to the Row.
Taste the Identify Textual content
Upload your identify and alter the font to Heading 3.
- Font: H3
- Textual content: Well being Begins Right here
Heading Textual content
Move to the Design tab and scroll right down to Heading Textual content. Select middle for the Alignment, make a selection H3, select Cormorant Toddler, set it to Daring, and select white for the Colour.
- Alignment: Heart
- Heading Textual content: H3
- Font: Cormorant Toddler
- Weight: Daring
- Colour: #ffffff
Trade the Desktop Measurement to 42px, the Pill Measurement to 20px, and the Telephone Measurement to 16px. Make a choice 1.1em for the Line Peak.
- Measurement: 42px Desktop, 20px Pill, 16px Telephone
- Line Peak: 1.1em
Spacing
In any case, scroll to Spacing and upload 10px to the Backside Margin. Shut the module’s settings.
- Backside Margin: 10px
Deal with Textual content Module
Upload every other Textual content module beneath the CTA Identify on your bodily deal with.
Taste the Deal with Textual content Module
Deal with Textual content
Upload your deal with as Paragraph textual content.
- Taste: Paragraph
- Textual content: your deal with
Paragraph Textual content
Subsequent, move to Textual content within the Design tab and select Cormorant Toddler, semi daring, and set it to white.
- Font: Cormorant Toddler
- Weight: Semi Daring
- Colour: #ffffff
For the Measurement, set the Desktop to 28px, Pill to 20px, and Telephone to 16px. Trade the Line Peak to at least one.2em and shut the module’s settings.
- Measurement: 28px Desktop, 20px Pill, 16px Telephone
- Line Peak: 1.2em
Upload the Social Media Observe Module
Our ultimate module is the Social Media Observe module. Upload it to the ground of the Row.
Taste The Social Media Observe Module
We’ll get started with the Design tab this time. Make a choice Heart for the Module Alignment and alter the Icon Colour to #442854.
- Module Alignment: Heart
- Icon Colour: #442854
Scroll to Border and upload 23px for the Rounded Corners.
- Rounded Nook: 23px
Upload and Taste Your Social Networks
Now, return to the Content material tab and upload all of the social networks you need to incorporate. Click on the grey plus icon. To taste them, make a selection the equipment.
Open the settings for each and every of your Social Networks, select the community, and upload the hyperlink on your account. Set the Background Colour to #f9f3fd. Shut the submodule’s settings.
- Social Community: your selection
- Account Hyperlink URL: your hyperlink
- Background Colour: #f9f3fd
Save the Weblog Web page & Go out the Visible Builder
In any case, save the web page within the decrease proper nook and make a selection Go out Visible Builder on the most sensible of the web page. You’re in a position to view your paintings.
Weblog Web page Preview
Listed here are our effects.
Preview Desktop
Preview Cell
Finishing Ideas
That’s our take a look at how one can construct a weblog web page with Divi. The Divi Builder makes it simple to create attention-grabbing layouts and there are a number of tactics each and every of the modules can be utilized. As this instructional explored, it’s imaginable to make use of more than one variations of the Weblog module at the identical web page to show the weblog feed in several tactics.
We wish to listen from you. Have you ever constructed your personal weblog web page with Divi? Tell us about your enjoy within the feedback.
The put up How to Build a Blog Page with Divi’s Blog Module gave the impression first on Elegant Themes Blog.
WordPress Web Design