Textual content Modules are a very important a part of any web page design you create with Divi, I’m positive that’s one thing we will all agree upon. In most cases, they’re used to show textual content in a simple approach. However you’ll be able to use Textual content Modules to create surprising design parts as smartly. In earlier weblog posts, we’ve already proven you easy methods to use textual content to raise your internet design.
On this instructional, we’ll proceed including choices for you to choose between when designing a web page and the use of Textual content Modules. As you could or would possibly not know, there a number of other textual content sorts that you’ll be able to mix inside of the similar textual content module. Moreover, one module can comprise a number of headings, paragraphs, hyperlinks and extra. On this put up, we’re going to make use of all of those textual content sorts to our merit to create surprising block parts in our web page design.
Let’s get to it!
Preview
Earlier than we dive into the academic, let’s check out the outcome on other display sizes.
Let’s Get Began!
Upload New Common Phase
Background Colour
Get started by means of including a brand new common segment to the web page you’re recently operating on. Then, open the segment settings and alter the background colour.
- Background Colour: #000000
Spacing
Pass to the Spacing settings of your segment subsequent and upload some customized padding values.
- Best Padding: 280px (Desktop), 150px (Pill & Telephone)
- Backside Padding: 280px (Desktop), 150px (Pill & Telephone)
Upload New Row
Column Construction
If you’re carried out editing the segment settings, upload a brand new row the use of the next column construction:
Sizing
With out including any modules, open the row settings and make the row soak up all of the width of the display within the Sizing settings.
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
Finally, upload some customized padding within the Spacing settings.
- Column 1 Left Padding: 100px (Desktop & Pill), 50px (Telephone)
- Column 2 Customized Padding: 50px
- Column 3 Customized Padding: 50px
Upload Name Textual content Module to Column 1
Content material Field
Time to start out including the other modules! The primary module we’ll want within the first column is a Textual content Module. Upload some H2 Content material to the content material field.
H2 Textual content Settings
Then, move to the H2 textual content settings and make some adjustments:
- Heading 2 Font: Supply Code Professional
- Heading 2 Font Taste: Uppercase
- Heading 2 Textual content Colour: #ffffff
- Heading 2 Textual content Measurement: 100px
- Heading 2 Letter Spacing: 24px
Spacing
Scale back the gap on the best by means of the use of some damaging best margin.
- Best Margin: -50px
Upload Description Textual content Module to Column 1
Textual content Settings
The second one module wanted within the first column is an outline Textual content Module. After including your content material, move to the textual content settings and make some adjustments:
- Textual content Font: Supply Code Professional
- Textual content Colour: #ffffff
- Textual content Orientation: Justify
Sizing
Scale back the width of the Textual content Module as smartly.
- Width: 68%
Spacing
And final however now not least, create some house between this Textual content Module and the former one within the Spacing settings.
- Best Margin: 200px (Desktop), 100px (Pill & Telephone)
- Backside Margin: 100px (Pill & Telephone)
Upload Block Textual content Module to Column 2
Content material Field
Time to transport directly to the second one column! Right here, we’re going to make use of Textual content Modules to create block parts. A very important a part of making this paintings is structuring the content material field as it should be. Within the print display under, you’ll be able to see that we’re the use of an H3 name, an H4 name, a paragraph and a hyperlink. Between the H4 name and the paragraph, we’re ensuring there’s some further house left as smartly.
Background Colour
Upload a black background colour to the Textual content Module.
- Background Colour: #000000
Textual content Settings
We’re going to change each and every probably the most textual content sorts in my opinion. Get started by means of editing the paragraph settings.
- Textual content Font: Supply Code Professional
- Textual content Orientation: Left
- Textual content Colour: Gentle
Hyperlink Textual content Settings
Then, make some further adjustments to the hyperlink settings.
- Hyperlink Font Taste: Uppercase & Underline
- Hyperlink Underline Colour: #ffffff
- Hyperlink Textual content Colour: #edf000
- Hyperlink Textual content Measurement: 16px
- Hyperlink Letter Spacing: 3px
Heading 3 Textual content Settings
The H3 name in our content material field wishes the next settings:
- Heading 3 Font Taste: Uppercase
- Heading 3 Textual content Measurement: 33px
Heading 4 Textual content Settings
Proceed by means of opening the H4 textual content settings and make some adjustments there as smartly.
- Heading 4 Textual content Colour: #4f4f4f
- Heading 4 Textual content Measurement: 19px
- Heading 4 Letter Spacing: -1px
Sizing
To create the precise form we would like, we’re going to cut back the width of the Textual content Module subsequent.
- Width: 88% (Desktop), 60% (Pill), 90% (Telephone)
Spacing
We’ll wish to alternate the Spacing settings as smartly.
- Left Margin: 200px (Pill)
- Best Padding: 50px
- Backside Padding: 50px
- Left Padding: 50px
- Proper Padding: 50px
Border
Then, upload a delicate border to the Textual content Module.
- Border Width: 2px
- Border Colour: #424242
Field Shadow
And to complete off, upload a colourful field shadow.
- Field Shadow Horizontal Place: 19px
- Field Shadow Vertical Place: 16px
- Field Shadow Unfold Energy: -4px
- Shadow Colour: #f2ff00
Clone Block Textual content Module Two times & Position in Column 3
To save lots of time, we’re going to clone the block Textual content Module we’ve created two times and position each duplicates within the 3rd column of the row.
Purple Textual content Module Adjustments
Exchange Hyperlink Textual content Colour
Open the primary Textual content Module within the 3rd column and alter the hyperlink colour.
- Hyperlink Textual content Colour: #e02b20
Exchange Spacing
Then, move to the Spacing settings and upload some best margin.
- Best Margin: -150px (Desktop), -20px (Pill), 50px (Telephone)
Exchange Field Shadow Colour
Exchange the Field Shadow Colour into the similar colour this is used for the hyperlink textual content.
- Shadow Colour: #e02b20
Blue Textual content Module Adjustments
Exchange Hyperlink Textual content Colour
Exchange the hyperlink colour of the second one Textual content Module within the 3rd column as smartly.
- Hyperlink Textual content Colour: #0ff3ff
Exchange Sizing
Exchange the Sizing settings subsequent.
- Sizing: 67% (Desktop), 60% (Pill), 90% (Telephone)
Exchange Spacing
And to create some overlap between this module and the 2 different Textual content Modules, mess around with the customized margin values.
- Best Margin: -20px (Desktop), -30px (Pill), 50px (Telephone)
- Left Margin: -160px (Desktop), 200px (Pill), 0px (Telephone)
Exchange Field Shadow Colour
To complete off, alternate the field shadow colour into the similar blue colour used for the hyperlink textual content and also you’re carried out!
- Shadow Colour: #0ff3ff
Preview
Now that we’ve long past thru all of the steps, let’s take a last have a look at the outcome on other display sizes.
Ultimate Ideas
You’d be amazed at what number of distinctive designs you’ll be able to reach the use of Textual content Modules together with Divi’s integrated choices. No additional CSS code required. On this put up, we’ve proven you easy methods to use other textual content sorts to create surprising block parts for your Divi web page design. In case you have any questions or ideas, be sure you go away a remark within the remark segment under!
The put up Using Divi’s Text Module to Create Block Elements in Your Divi Page Design seemed first on Elegant Themes Blog.
WordPress Web Design