5 Text Styling Tricks for WordPress and Divi

Thinking About Getting a .blog Domain Name? Here’s What You Need to Know
August 24, 2016
HeroPress: A Minority Amongst Minorities
August 24, 2016
Show all

Welcome to Day 85 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


What can take a website from good to great is attention to detail, particularly when it comes to adding some interesting finishing touches to your text areas. Many people spend a long time perfecting their home page only to run out of design inspiration when creating information pages with lots of copy and fewer images. Adding a few simple features will give even the most text-heavy page a real lift, helping you to add interest and break up the page.

That’s why in today’s post I’m going to show you five different ways that I style text with WordPress and Divi.

1. Add Dropcaps

dropcap-demo

I can’t resist a dropcap. In fact, I add them to nearly every website I design. Dropcaps or initial caps are often used to great effect in printed magazines and newspapers and they are very straightforward to implement in WordPress. A dropcap gives any page section an editorial feel and you can style your dropcap fairly easily with a contrasting color, if you wish.

There are plenty of plugins that automatically add a drop cap to your first paragraph but I like to have a little more control. Did you know that all of the themes from Elegant Themes have a built-in dropcap shortcode that’s really easy to style?

To use it, add the following code either side of your initial capital letter like this:

yourletter

If you want to style the ET dropcap differently from the standard version, here are the lines of CSS you can add to your Divi Custom CSS box in the Theme Options > General tab.

The code snippet below will allow you to change the font-size, line height (ie. does the cap fill two lines or three), change the font family and also change the color. It might take a little fiddling with the font size and line height values to get it just how you want it.

.et-dropcap {
    font-size: 95px;
    line-height: 0.7;
    color: #9ae5d3;
    font-family: Times;
    padding-top: 10px;
}

2. Mix & Match Text Styles in a Module

font-demo

When it comes to mixing and matching fonts in a single text module, it can be tricky. One of my favorite tools is the free custom font plugin, Use Any Font. Not only can you upload and use custom fonts (ttf,otf,woff formats all accepted), you can also assign fonts to heading or H tags. from H1 to H6.

use-any-font-install

Because the fonts load from your own server, it doesn’t slow your site down at all. In fact, in many cases, it may be quicker than pulling through a font from a third platform.

More importantly, it adds two key controls to your WordPress text editor for selected text – font family and font size. This means you can highlight single words or phrases and change just the selected text and font size, making it much easier to mix and match font styles and sizes in a single text module.

use-any-font

3. The Divi Testimonial Module

testimonial_demo

One of my favorite ways to break up a text-heavy page, is to use the Divi Testimonial Module. It’s perfect for creating attractive quotes areas as well as standard testimonials. Adding a background image and an offset border will make it really stand out. If you are using a background image, you’ll need to add a line of CSS into the Custom CSS, main element box, as below. This will make sure the background image is contained and cropped within the module.

If you would also like to add the offset keyline, then you’ll need to add a couple more lines of CSS in the same area. The offset keyline code will work with almost any Divi module.

testimonial_code

Here is the code in full:

background-size: cover;
outline: solid 1px #000;
outline-offset: 10px;

4. Fullwidth Text Blocks

full_width_text

Adding full width  text blocks can give your website a really sleek modern feel, particularly if you add a solid background color and vary the style or size of fonts you are using.

Start by adding a new standard section and add two columns and add a text module to each column. In the General Settings tab of the green row section containing the text modules, you’ll need to make the row full width and set the Custom Gutter Width to 1.

full-width-settings-1

Finally, in the Advanced Design Settings tab, you’ll need to Equalize Column Heights and add some padding to each of the columns. In the example shown, I added 10% to each column and reduced that to 5% for mobile.

full-width-settings-2

Once you have adjusted the settings, add your text and have fun playing with font styles and sizes.

5. The Divi Toggle Module

toggles-demo

The Divi Toggle Module is a handy tool when it comes to handling sections of your website that can be a little dull, such as FAQs. I like to use a mixture of open and closed toggles with different styling effects, to add interest and break up the page.

To achieve the example above, add a new section and choose a 1/3 and 2/3 column layout. Add an image module to the 1/3 column and set the animation style to Left to Right. Add the toggles you need into the 2/3 column and style the text, background color and border using the Advanced Design Settings Tab of each toggle.

toggle_styling

This arrangement works particularly well when you duplicate the finished section and reverse the columns, as below. You can see the complete toggle section here.

Wrapping Up

Getting creative with text doesn’t mean you have to stick to text modules. Other modules that you can use to display text more attractively include the Call To Action Module and the Blurb Module as well as the modules we’ve explored in this post. Implementing some of these ideas may just save you from design boredom next time you’re tackling a page that needs to impart a lot of information. And don’t forget those lovely Divi dropcaps!

Sidenote: You can view any of the effects discussed in this post on this demo page.

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

divi-2-6-logo

Divi 100 Day 85

The Countdown To Divi 3.0

This post is part of our Divi 100 marathon. Follow along as we post free Divi resources for 100 days in a row! This 100-day countdown will end with the game-changing release of Divi 3.0, including our brand new visual editor built from the ground up using React. Divi 3.0 will change the way you build websites with the Divi Builder forever!
Let the countdown begin.

jQuery(document).ready(function(){jQuery(“#DIV_TO_PLACE_COUNTDOWN”).jCountdown({timeText:”2016/9/7 7:00:00″,timeZone:-8,style:”slide”,color:”black”,width:0,textGroupSpace:15,textSpace:0,reflection:false,reflectionOpacity:10,reflectionBlur:0,dayTextNumber:1,displayDay:true,displayHour:true,displayMinute:true,displaySecond:true,displayLabel:true});});Learn More About Divi 3.0

.section-header{width: 520px; padding: 50px 40px 20px; margin: 100px 0; text-align: center; color: #fff !important; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #6c2eb9; background-image: url(https://cdn.elegantthemes.com/blog/wp-content/uploads/2016/04/divi-100.jpg); background-repeat: no-repeat;}.section-header h2{margin-top: 0 !important; color: #fff;}.section-header strong{color:#fff;}.section-header img{margin-bottom: 10px;}.section-header:after{position: absolute; bottom: -16px; left: 50%; margin-left: -16px; width: 32px; height: 32px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); content:”; background: #6c2eb9;}.divi-demo-link{border-bottom: 4px solid #00d5b5; margin-top: 15px; border-radius: 4px; transition: all.5s ease-in-out; display: block; width: 100%; padding: 10px 0; text-transform: uppercase; font-weight: bold; text-align: center; color: #1C695D; background-color: #00efcb;}.divi-demo-link:hover{text-decoration: none; background-color: #2CFFDF;}.divi-download-link{text-align: center; font-size: 18px; border-radius: 4px; padding: 20px; color: #fff; display: block; margin: 10px 0 10px; background-color: #7e3bd0; transition: background .5s; text-decoration: none; font-weight: bold;}.divi-download-link:hover{background-color: #C04BDE; text-decoration: none;}hr{border-style: solid; margin: 0 0 40px 0; border: 1px solid #EAEBEB;}

The post 5 Text Styling Tricks for WordPress and Divi appeared first on Elegant Themes Blog.

View @ ElegantThemes

Skip to toolbar