Growing distinctive textual content designs on your site may also be difficult, particularly for those who don’t need to use a ton of CSS or hotel to supplementing seo-friendly textual content for pictures you design in Photoshop. With Divi (and a few “out of the field” considering), you’ll be able to create some distinctive textual content designs with none exterior css or customized pictures. The trick is to make use of Divi’s phase dividers to overlay your textual content so as to add breaks and texture in quite a few other ways. On this instructional, I’m going to discover the ability of Divi’s phase dividers to create some distinctive textual content designs that may take your web page headers to the following degree.
Let’s get began.
Sneak Peek
This is only some examples of the textual content designs conceivable the usage of this method:
Getting Began
For this design, it is important to create a brand new web page the usage of the visible builder. Out of your WordPress Dashboard, navigate to Pages > Upload New. Then give your web page a name and deploy the visible builder. Make a selection the choice “Construct from Scratch”. Now you’re ready to start out!
Design #1: Damaged Textual content with a Gradient Spotlight
On this first textual content design, I’m going to make use of phase dividers to get a divorce the textual content and upload a uniquely formed highlighting part the usage of a gradient background. Upload a brand new phase with a one column structure. You don’t wish to upload a module at this level. We will be able to get started with customizing the phase first.
Segment Settings
Open the phase settings and replace the next:
Background Gradient Left Colour: rgba(124,218,36,0.66)
Background Gradient Proper Colour: rgba(0,106,193,0.61)
Width: 80%
Segment Alignment: Heart
Best Divider Taste: see screenshot
Best Divider Colour: #ffffff
Best Divider Top: 1.8vw
Best Divider Horizontal Repeat: 3x
Best Divider Association: On Best Of Segment Content material
Backside Divider Taste: see screenshot
Backside Divider Colour: #ffffff
Backside Divider Top: 1.8vw
Backside Divider Horizontal Repeat: 3x
Backside Divider Association: On Best Of Segment Content material
Customized Margin: 5vw Best, 5vw Backside
Customized Padding: 0px Best, 0px Backside
Because the design of your textual content will happen the usage of the phase dividers, it is very important stay the phase compact with none padding in order that dividers will overlap the textual content with minimum divider top. Atmosphere the divider top with a vw length unit will make certain the divider taste will scale properly for a constant design on all display sizes. Giving the phase a customized margin is not obligatory but additionally useful for spacing since we can be the usage of damaging margins on our textual content module to increase it above and beneath our phase (this must make extra sense afterward).
Row Settings
For the row, all we wish to do is regulate the width and the padding. Replace the next row settings:
Customized Width: 100%
Customized Padding: 0px Best, 0px Backside
Since our textual content will probably be added to the row column, we wish to eliminate the padding in order that our dividers will hug the highest and backside of our textual content.
Textual content Module Settings
Now we will be able to after all upload the textual content module to the only column row. Within the row, upload a textual content module with the content material “our paintings”. Then replace the design settings as follows:
Textual content Font: Oswald
Textual content Font Taste: TT
Textual content Textual content Colour: #0c71c3
Textual content Textual content Dimension: 10vw
Textual content Line Top: 1em
Textual content Orientation: Heart
Customized Margin: -5vw Best, -4vw Backside
Customized Padding: 2vw Best, 2vw Backside
The important thing this is to make use of the customized damaging margin to increase the textual content above and beneath the phase. This permits the phase dividers to overlap the interior of the textual content to create the damaged design impact. And the background gradient shines thru to provide it a pleasing design contact as neatly. The result’s most likely considered one of my favourite textual content designs that opens the door for a ton of inventive diversifications.
This is the general design.
Textual content Design #2: Textual content with a Vertical Line Texture
For the second one textual content design, cross forward and create a brand new phase with a one column row. Then upload a textual content module to the column. As a substitute of customizing the phase first, I believed it easiest initially the textual content module so you’ll be able to see the design procedure higher.
Textual content Settings
Within the one-column row, upload a textual content module with the content material “our paintings”. Then replace the design settings as follows:
Textual content Font: Poppins
Textual content Font Weight: Extremely Daring
Textual content Font Dimension: 8vw
Textual content Line Top: 1em
Textual content Orientation: Heart
Customized Margin: 0px Best, 0px Backside
Row Settings
The row settings would be the identical as the primary design instance, so you’ll be able to replica the row kinds and paste them into this row. Or simply replace the row settings as follows:
Customized Width: 100%
Customized Padding: 0px Best, 0px Backside
Segment Settings
Replace the phase settings as follows:
Width: 70%
Best Divider Taste: see screenshot
Best Divider Colour: #ffffff
Best Divider Top: 8vw
Best Divider Horizontal Repeat: 150x
Best Divider Association: On Best Of Segment Content material
Backside Divider Taste: see screenshot
Backside Divider Colour: #ffffff
Backside Divider Top: 8vw
Backside Divider Horizontal Repeat: 150x
Backside Divider Turn: Vertical
Backside Divider Association: On Best Of Segment Content material
Customized Padding: 0px Best, 0px Backside
The important thing to this design is the Divider Horizontal Repeat choice. Atmosphere the divider horizontal repeat to 150x with a top equivalent to the peak of the textual content creates a sequence of overlapping vertical traces that stretch from the highest and backside of the phase. Don’t overlook to set the Backside Divider to turn vertically in order that the “traces” will lengthen upward.
This is the general design.
Design #3: Textual content with Partial Texture at the Best and Backside
To hurry up the method for this subsequent design, cross forward and copy the phase you simply created in the second one design instance above.
Replace Segment Settings
Background Colour: #e02b20
Best Divider Taste: see screenshot
Best Divider Colour: #e02b20
Best Divider Top: 3vw
Best Divider Horizontal Repeat: 30x
Backside Divider Taste: see screenshot
Backside Divider Colour: #e02b20
Backside Divider Top: 3vw
Backside Divider Horizontal Repeat: 30x
The important thing this is to ensure your divider colour suits the phase background colour in order that the dividers are most effective visual the place they overlap the textual content.
Replace Textual content Settings
Now all that’s left is updating the textual content textual content colour:
Textual content Textual content Colour: #ffffff
This is the general design.
A Amusing Design Choice to Design #3
Prior to I go away this design, I believed I’d percentage how the ground divider on this phase can simply be become grass in order that the textual content appears to be like find it irresistible is sitting in a box. To do that, replace the settings as follows:
Background Gradient Left Colour: #68a4d8 (the sky)
Background Gradient Proper Colour: #1c7503 (the grass)
Get started Place: 82%
Finish Place: 0%
Customized Padding: 5vw Best
Best Divider Taste: Clouds (or bubbles?)
Backside Divider Colour: #1c7503
Then replace the textual content colour to #000835
This is the outcome.
What About Cell?
For the reason that vw length unit has been used right through those designs, the textual content and divider kinds will scale properly on all browsers with out the wish to assign further sizes on pill and smartphone. Alternatively, for those who run into the issue of the textual content cutting down too little on smartphone, it’s possible you’ll wish to building up the textual content measurement vw period unit price.
Ultimate Ideas
I’m hoping you had some a laugh experimenting with phase dividers for distinctive textual content designs. With all of the other fonts, colours, and divider kinds to be had in Divi, I’m certain you gained’t have any bother developing some superior taking a look textual content designs of your personal on your subsequent undertaking.
For extra inspiration on the best way to use phase dividers in inventive techniques, take a look at those background textures, navigation menu frames, and bottom footer bar backgrounds.
Till subsequent time, I stay up for listening to from you within the feedback.
Cheers!
The publish How to Create Stunning Text Designs Using Section Dividers in Divi seemed first on Elegant Themes Blog.
WordPress Web Design