All of the new Divi function updates that experience took place over the past couple of months have undeniably expanded the variety of chances you’ve got when designing web sites. For this educational, we’ve created 5 alternative ways to get inventive with the Divi Particular person Module with out the use of any further CSS code. The principle objective of this submit is to encourage you ahead of beginning your subsequent Divi undertaking. The Particular person Module is incessantly used to percentage extra details about staff participants or percentage testimonials. With those 5 other examples, you’re able to provide your pages a design spice up.
Let’s get to it!
Preview
Prior to we dive into the educational, let’s take a snappy take a look at the end result on other display sizes.
Desktop
Cellular
Recreate Instance #1
Upload New Segment
Let’s get started developing the primary instance! Open a brand new or current web page and upload a standard segment.
Upload New Row
Column Construction
With out enhancing the segment settings, upload a brand new row the use of the next column construction:
Sizing
Open the row settings and make some adjustments to the sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
Subsequent, open the spacing settings and upload some customized padding values.
- Best Padding: 100px (Desktop), 80px (Pill & Telephone)
- Backside Padding: 100px (Desktop), 80px (Pill & Telephone)
- Left Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
- Proper Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
Upload Symbol Module to Column 1
Add Symbol
Time to start out including modules! Upload an Symbol Module to the primary column and add a squared symbol of selection.
Field Shadow
Proceed via going to the design tab and making use of a refined field shadow.
Filters
You’ll additionally mess around with the filters settings so as to add an impact on your symbol.
- Saturation: 40%
- Distinction: 130%
Upload Particular person Module #1 to Column 2
Upload Content material
The following module we’ll want is a Particular person Module. Pass forward and upload one to the second one column and fill within the title and place fields.
Gradient Background
Upload a gradient background to this module.
- Colour 1: rgba(11,15,229,0.41)
- Colour 2: rgba(45,237,255,0.87)
- Gradient Route: 150deg
Identify Textual content Settings
Then, trade the identify textual content settings within the design tab.
- Identify Font: Baloo
- Identify Textual content Colour: #ffffff
- Identify Textual content Dimension: 20px
Frame Textual content Settings
Alter the frame textual content settings as neatly.
- Frame Font Weight: Mild
- Frame Textual content Colour: #ffffff
Spacing
And upload some customized margin and padding values within the spacing settings.
- Left Margin: -4vw (Desktop & Pill), 0vw (Telephone)
- Proper Margin: 8vw (Desktop & Pill), 0vw (Telephone)
- Best Padding: 25px
- Backside Padding: 25px
- Left Padding: 20px
Border
We’re additionally including a refined left border to the module.
- Left Border Width: 3px
- Left Border Colour: #ffffff
Field Shadow
In conjunction with a field shadow that’ll will let you create intensity at the web page.
- Field Shadow Blur Power: 80px
Upload Particular person Module #2 to Column 2
Upload Content material
Upload every other Particular person Module proper underneath the former one. We’re the use of this module to turn the social media profiles and the outline.
Icon Settings
Pass to the design tab and alter the icon colour within the icon settings.
- Icon Colour: #50e8fe
Spacing
Ultimate however no longer least, open the spacing settings and upload some customized padding values.
- Best Padding: 30px
- Left Padding: 30px (Desktop & Pill), 0px (Telephone)
Recreate Instance #2
Upload New Segment
Directly to the following instance! Upload a brand new segment on your web page.
Upload New Row
Column Construction
Upload a brand new row to this segment the use of the next column construction.
Column 2 Background Colour
With out including any modules but, open the row settings and upload a column 2 background colour.
- Column 2 Background Colour: #f4f4f4
Sizing
Then, cross to the design tab and make some adjustments to the sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
- Equalize Column Heights: Sure
Spacing
Upload some customized padding values within the spacing settings as neatly.
- Best Padding: 100px (Desktop), 80px (Pill & Telephone)
- Backside Padding: 100px (Desktop), 80px (Pill & Telephone)
- Left Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
- Proper Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
Upload Symbol Module to Column 1
Add Symbol
Time to start out including modules! The primary module we’ll want is an Symbol Module in column 1. Add a picture of selection.
Field Shadow
Then, upload a field shadow to the picture.
- Field Shadow Blur Power: 160px
Filters
You’ll additionally mess around with the filters settings.
- Saturation: 40%
- Distinction: 130%
Upload Particular person Module #1 to Column 2
Upload Content material
In the second one column, the primary module we’ll want is a Particular person Module. Fill within the title and place fields.
Background Colour
Pass to the background settings and upload a clear background colour.
- Background Colour: rgba(255,255,255,0.7)
Textual content Settings
Then, trade the textual content orientation within the textual content settings.
- Textual content Orientation: Middle
Identify Textual content Settings
Alternate the identify textual content settings as neatly.
- Identify Font: Abril Fatface
- Identify Textual content Colour: #000000
- Identify Textual content Dimension: 40px
Frame Textual content Settings
In conjunction with the frame textual content settings.
- Frame Font Weight: Mild
- Frame Textual content Colour: #000000
- Frame Textual content Dimension: 15px
Spacing
We’re developing an overlap via the use of some damaging left margin within the spacing settings.
- Left Margin: -21.64vw (Desktop), -46.1vw (Pill), 0vw (Telephone)
- Best Padding: 30px
- Backside Padding: 30px
Field Shadow
And we’re making use of a refined field shadow as neatly.
- Field Shadow Blur Power: 80px
Upload Particular person Module #2 to Column 2
Upload Content material
The second one module we’d like in column 2 is every other Particular person Module. Right here, we’re including the social media hyperlinks and outline.
Icon Settings
Proceed via going to the design tab and converting the icon colour within the icon settings.
- Icon Colour: #000000
Spacing
Upload some customized margin and padding values as neatly.
- Best Margin: 3vw
- Best Padding: 30px
- Backside Padding: 30px
- Left Padding: 30px
- Proper Padding: 30px
Recreate Instance #3
Upload New Segment
Directly to the 3rd instance! Upload a brand new segment on your web page.
Upload New Row
Column Construction
Then, upload a brand new row to the segment the use of the next column construction:
Sizing
Open the row settings and alter the sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
- Equalize Column Heights: Sure
Spacing
Upload some customized padding values as neatly.
- Best Padding: 100px (Desktop), 80px (Pill & Telephone)
- Backside Padding: 100px (Desktop), 80px (Pill & Telephone)
- Left Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
- Proper Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
Upload Particular person Module #1 to Column 1
Upload Content material
Time to start out including modules! Upload the primary Particular person Module to column 1 and fill within the title and place fields.
Background Colour
Then, upload a background colour to the module.
- Background Colour: #ffffff
Identify Textual content Settings
Alter the identify textual content settings as neatly.
- Identify Font Weight: Extremely Daring
- Identify Textual content Colour: #000000
- Identify Textual content Dimension: 40px
- Identify Letter Spacing: -4px
Frame Textual content Settings
Do the similar for the frame textual content settings.
- Frame Font Weight: Mild
- Frame Textual content Colour: #000000
- Frame Textual content Dimension: 15px
Spacing
Proceed via going to the spacing settings and upload some customized margin and padding values.
- Best Margin: 40px (Desktop), 0px (Pill & Telephone)
- Best Padding: 30px
- Backside Padding: 30px
- Left Padding: 30px
- Proper Padding: 30px
Border
Upload ’20px’ to the highest left nook within the border settings as neatly.
Field Shadow
And provides the module a colourful field shadow.
- Field Shadow Blur Power: 140px
- Shadow Colour: rgba(31,15,255,0.66)
Upload Particular person Module #2 to Column 1
Upload Content material
Directly to the second one particular person module in column 1! Use this module to show the social media hyperlinks and outline.
Background Colour
Then, cross to the background settings and upload a white background colour.
- Background Colour: #ffffff
Icon Settings
Alternate the icon colour as neatly.
- Icon Colour: #000000
Spacing
Proceed via including some customized spacing values within the spacing settings.
Border
And upload ’20px’ to the ground left nook.
Field Shadow
Ultimate however no longer least, upload the field shadow.
- Field Shadow Vertical Place: 50px
- Field Shadow Blur Power: 140px
- Field Shadow Unfold Power: -10px
- Shadow Colour: rgba(2,219,219,0.26)
Upload Symbol Module to Column 2
Add Symbol
The following module we’ll want is a picture module. Pass forward and upload one to the second one column and add a picture of selection.
Border
Give this module ’20px’ of rounded corners within the border settings.
Field Shadow
And upload a refined field shadow.
Filters
Once more, be at liberty to mess around with the filters settings to modify the illusion of the picture.
Recreate Instance #4
Upload New Segment
Directly to the fourth instance! Upload a brand new segment on your web page.
Upload New Row
Column Construction
Proceed via including a brand new row to the segment the use of the next column construction:
Sizing
With out including any modules but, open the row settings and adjust the sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
- Equalize Column Heights: Sure
Spacing
Alternate the spacing settings as neatly.
- Best Padding: 100px (Desktop), 80px (Pill & Telephone)
- Backside Padding: 100px (Desktop), 80px (Pill & Telephone)
- Left Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
- Proper Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
Upload Particular person Module to Column 1
Upload Content material
Time to start out including modules! Upload a Particular person Module to column 1 and fill in the entire fields.
Icon Settings
Then, cross to the icon settings and alter the icon colour.
- Icon Colour: #000000
Textual content Settings
Alternate the textual content orientation within the textual content settings as neatly.
- Textual content Orientation: Middle
Identify Textual content Settings
Then, open the identify textual content settings and make some adjustments.
- Identify Font Weight: Extremely Daring
- Identify Textual content Colour: #000000
- Identify Textual content Dimension: 40px
- Identify Letter Spacing: -4px
Frame Textual content Settings
Alter the frame textual content settings as neatly.
- Frame Font Weight: Mild
- Frame Textual content Colour: #000000
- Frame Textual content Dimension: 15px
- Frame Line Top: 2em
Spacing
And create a form the use of customized padding values within the spacing settings.
- Best Padding: 280px (Desktop), 200px (Pill), 50px (Telephone)
- Backside Padding: 280px (Desktop), 200px (Pill), 50px (Telephone)
- Left Padding: 200px (Desktop), 150px (Pill), 20px (Telephone)
- Proper Padding: 200px (Desktop), 150px (Pill), 20px (Telephone)
Border
Create a circle via including ‘700px’ to every one of the vital corners within the border settings and upload a refined border as neatly.
- Border Width: 1px
- Border Colour: #333333
Upload Symbol Module to Column 2
Add Symbol
Proceed via including an Symbol Module to the second one column and add a squared symbol of selection.
Spacing
Alter the spacing settings of this module.
- Best Margin: 7vw (Desktop), -15vw (Pill), -5vw (Telephone)
- Left Margin: -5vw (Desktop), 0vw (Pill & Telephone)
Border
Create a circle form out of this symbol via including ‘1000px’ to every one of the vital corners of the module.
Field Shadow
Upload a refined field shadow as neatly.
- Field Shadow Blur Power: 160px
- Field Shadow Unfold Power: -10px
Filters
And end the design via taking part in round with the filters settings of the picture.
- Saturation: 0%
- Distinction: 130%
Recreate Instance #5
Upload New Segment
Directly to the following and ultimate instance! Upload a brand new segment on your web page.
Upload New Row
Column Construction
Proceed via including a brand new row the use of the next column construction:
Column 1 Gradient Background
Open the row settings and upload a column 1 gradient background.
- Colour 1: #dddddd
- Colour 2: #ffffff
- Column 1 Gradient Route: 90deg
- Column 1 Get started Place: 40%
- Column 1 Finish Place: 40%
Sizing
Then, cross to the sizing settings and make some adjustments.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
Upload some customized padding values to the row as neatly.
- Best Padding: 100px (Desktop), 80px (Pill & Telephone)
- Backside Padding: 100px (Desktop), 80px (Pill & Telephone)
- Left Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
- Proper Padding: 100px (Desktop), 30px (Pill), 25px (Telephone)
Upload Particular person Module to Column 1
Upload Content material
Time to start out including modules! Upload a Particular person Module to column 1 and fill in the entire fields.
Icon Settings
Then, trade the icon colour within the icon settings.
- Icon Colour: #000000
Textual content Settings
Alternate the textual content orientation within the textual content settings as neatly.
- Textual content Orientation: Proper
Identify Textual content Settings
Subsequent, make some adjustments to the identify textual content settings.
- Identify Font: Chenla
- Identify Textual content Colour: #000000
- Identify Textual content Dimension: 50px
- Identify Letter Spacing: -1px
Frame Textual content Settings
Do the similar for the frame textual content settings.
- Frame Font Weight: Mild
- Frame Textual content Colour: #000000
- Frame Textual content Dimension: 15px
- Frame Line Top: 2em
Spacing
Proceed via including some customized padding values to the spacing settings of the module.
- Best Padding: 200px (Desktop), 100px (Pill & Telephone)
- Backside Padding: 200px (Desktop), 100px (Pill & Telephone)
- Left Padding: 500px (Desktop), 250px (Pill), 50px (Telephone)
- Proper Padding: 200px (Desktop), 100px (Pill), 50px (Telephone)
Border
Finally, upload a border to the module.
Upload Symbol Module to Column 2
Add Symbol
The following module we’ll want is an Symbol Module in column 2. Pass forward and add a squared symbol of selection.
Spacing
Then, make some adjustments to the spacing settings of this module.
- Best Margin: 7vw (Desktop), -2vw (Pill & Telephone)
- Left Margin: -10vw (Desktop), 0vw (Pill & Telephone)
Field Shadow
Give the Symbol Module a field shadow as neatly.
- Field Shadow Blur Power: 160px
- Field Shadow Unfold Power: -10px
Filters
And to most sensible it off, mess around with the filters settings.
- Saturation: 50%
- Distinction: 130%
Preview
Now that we’ve long past via the entire steps, let’s take a last take a look at the end result on other display sizes.
Desktop
Cellular
Ultimate Ideas
On this submit, we’ve proven you 5 alternative ways to get inventive with the Divi Particular person Module. You’ll use those examples for any site you’re construction and create your individual selection variations via tweaking the settings of every design component. When you have any questions or ideas, you’ll want to go away a remark within the remark segment underneath!
The submit 5 Ways to Get Creative with Divi’s Person Module gave the impression first on Elegant Themes Blog.
WordPress Web Design