5 Text Styling Tricks for WordPress and Divi

Posted on August 23, 2016 by in Divi Resources | 52 comments

5 Text Styling Tricks for WordPress and Divi

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:

[dropcap]yourletter[/dropcap]

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.

Learn More About Divi 3.0


52 Comments

  1. This has to be one of my favorite recent posts!
    Simple yet Stylish!

    • Melissa Love

      Thanks Bradley!

    • I was just thinking that myself!!

      Great post. Has something useful for every site!

    • Very creative!

    • TOTALLY AGREE – thank you!

  2. I like dropcaps, too, but I hardly ever use them in blog posts because it messes up the preview summary text. “We think it’s great” becomes “e think it’s great” or, worse, “[dropcap]W[/dropcap]e think it’s great”. Anyone have a fix for this?

    • Well David you can test this out in your functions.php file and see if it works:

      add_filter( ‘the_excerpt’, ‘wpsdc_filter_excerpt’ );

      function wpsdc_filter_excerpt( $content )
      {
      $content = str_replace( ‘[dropcap]’, ”, $content );
      $content = str_replace( ‘[/dropcap]’, ”, $content );
      return $content;
      }

    • Perhaps a jquery remove class function on the preview page?

      $( “.et-dropcap” ).remove();

    • Thanks a lot! I intend to try this out.

  3. This is great, Melissa. Thank you!

  4. Superb! Love the use of the Testimonial module. GREAT idea! I always forget about dropcaps and worry that they might look gigantic on a mobile screen. But I love the way it can add color to a dense block of words.

  5. Thank you so much, Melissa, for those awesome Tipps. I also liked your post about styling Widgets. Look forward to see more of your elegant styles 🙂

    P.S. I have one question (and I understand when you like to keep the secret, because you live of it): By surfing on your shop I discovered this awesome header – the text field is rushing under the header image on smaller screens:
    http://thedesignspacedemo.co/stylist-divi/about/
    How is this accomplished? I would so much love to implement this effect 🙂

    • Melissa Love

      No secret! It’s a set of three text modules in a 1/3 column with lots of extra padding at the top of a column and you can add as much extra padding as you need on mobile to reveal less or more of the image. The image is in the section background area.

      • WOW, dear Melissa, thank you sooooo much for your answer. I’ll try it out ASAP. Have a great day 🙂

  6. Very cool – I’m actually using a full width block on my website to showcase testimonials so this was nice to see.

  7. OMG such wonderful tips!!! thank you so much Melissa! there is love in them. Thank you from my heart

  8. “I can’t resist a dropcap.”
    Neither can I Melissa and it really adds interest to the beginning of a page or article.

  9. Great tips, I didn’t know that there is a shortcode for dropcaps and I wasn’t even thinking about using a drop cap in my designs but now I will.
    Melissa I saw a comment that there is a post for styling the widgets. Can you give me the link please.

    Thanks

  10. Hi Melissa, Thank you for the tricks! I will surely apply it on the next pages I will be creating soon. More tricks and tips! I always love learning tricks in web designing so I have options.

  11. Great post! Thank you. Very useful information to spice up a site without a ton of CSS to do it! You did a great job describing the effect and how to do it. Well done!

  12. Thx for help.

  13. Really wonder how you got Use Any Font working in the WP editor? I bought the plugin, got an API key, but no possibility to use it in the editor.. any thoughts?

    TIA
    Helen

    • Melissa Love

      It just appears in the Editor as soon as the API key is entered and the fonts are uploaded, Helen. You do have to upload some fonts first though.

      • Hi Melissa, thank you for your reply. Funniest thing.. I just contacted the plugin builder and he told me the Use Any Font plugin does not work inside the Divi editor, only the WP editor itself. But on your screenshot I can clearly see the Divi Builder, and a font list?

        • I have the same problem, I have nothing different in my divi text editor =(

      • Just tested this. It works fine with Divi. You need to activate the “Tool Bar Toggle”

    • Hi Helen, Did you toggle the toolbar on in the text module? You can then see the fonts in a dropdown?

  14. Love the DropCap! But one thing I discovered is it disappears if you remove the bolding from the letter you’re encapsulating – which makes sense when you think about it – but is something to be aware of for sure.
    As a novice with DIVI (& WP) I’m really enjoying these posts. Thanks Melissa!

  15. Absolutely love these tips. Thanks Melissa for sharing these.

  16. Great tips. I used several of them within a few minutes of reading about them. End users (and Pros) just have to love wordpress!!!

  17. thank you for this post. It is good to do some different things to set a website a little above the ordinary.

    It is easy to forget about the ET shortcodes including dropcaps – I must revisit them so that you

  18. Does anyone have a recommendation for the most elegant way to do the larger text size just for the first paragraph of a post?

    Thanks!

    • Andrew, I just create a new class called .lead and manually add it to the post paragraph. Then use the “exerpt” for the intro text.

    • A separate text module just for the first paragraph with the font size made larger?

  19. I have really enjoyed reading the awesome posts over the last 85 days – almost without fail there is something of real value we can use. Once again, the team at Elegant Themes have provided real actionable content….Thanks Melissa.

  20. This post arrived in my inbox at the perfect time! Thank you Melissa

  21. Love it! More inspiration on styling in divi is what I need! Thanks.

    My best tip on text styling in accordions, toggles and tabs, is:
    – Insert a toggle or tab.
    – Switch from Visual to Text editor tab
    – Use the [ONE HALF], [ONE THIRD] etc shortcodes, to break up wide text into two, three or more columns _within_ the toogle, tab etc. Quite useful for larger amounts of text.

    Works perfectly in divi without additonal plugins and is responsive – tested extensively on phones and tablets.

  22. Looks cool. thinking to try divi.

  23. Thanks for the clever ideas!

    I have a question, though: I use the Divi theme, but when I surrounded the first letter of one of my blog post words with [dropcap] [/dropcap], nothing changed. Did I miss a step? Or is that shortcode no longer automatic with the Divi theme?

  24. Beauty in serenity…
    It makes me want to take time & read all of them…
    (Even if i’m bored with lorem ipsum and I prefere to read the Ricksum 😉
    Magique…

  25. I did not need to read who wrote this blog post to know who it was! Melissa your sites are always beautiful

  26. Thanks for sharing this ideas, I was looking how to implement Dropcaps in my site and I found this great article, I’ll try the plugin too it look very well. Thanks again

  27. Been using the Divi builder and theme for about 8 months now, continue to be impressed by it.

  28. This worked for my site at abitupnorth.com

    /* Add Drop Cap to 1st letter of post */
    .et_pb_section .et_pb_row .et_pb_column .et_pb_module:last-child:first-letter {
    background: #4db2ec;
    display: block;
    float: left;
    font-size: 3.2em;
    line-height: .4em;
    margin-right: 0.15em !important;
    padding: .25em .1em 0.28em .1em !important;
    }

    • forgot to add that I add my posts in a text module.

      • gave the text module a custom class of single-post-text because the original code was affecting other pages. Now it looks like this:

        /* Add Drop Cap to 1st letter of post */
        .single-post-text:first-letter {
        background: #4db2ec;
        display: block;
        float: left;
        font-size: 3.2em;
        line-height: .4em;
        margin-right: 0.15em !important;
        padding: .25em .1em 0.28em .1em !important;
        }

  29. How do you add the default Divi Fonts to the Use Any Font plugin? This part is not clear.

    Thank you!

  30. I’m having an issues with Use Any Font and the divi blog module where it changes in the editor but when saved, it defaults back to Times New Roman

  31. will it be helpful in making event blogs ? i need a framework asap….

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest