10 Must-Read Divi Tutorials From 2016

Posted on January 3, 2017 by in Divi Resources | 19 comments

10 Must-Read Divi Tutorials From 2016

2016 was a big year for Divi tutorials. We published more Divi-specific tutorials than ever before, in large part, thanks to our Divi 100 series promoting the launch of Divi 3.0. During that series it became apparent that both we and the community wanted a lot more Divi content in general–not just for special occasions. As evidence of that some of our most popular and engaging content this year were Divi tutorials. In today’s post I’m highlighting ten that I feel are must-read for anyone using Divi in our community.

10 Must Read Divi Tutorials From 2016

Aside from all of these Divi tutorials making the top ten cut, they are not listed in any particular order. Enjoy!

1. 5 Creative Ways to Use Divi’s Built-In Margin and Gutter Controls

1-fav-divi-tutorials-2016

“When it comes to using Divi’s built-in Advanced Design Settings there are three controls that, once understood, can be used to stunning effect over and over again. They are your margin, padding, and gutter controls…

Of the three–margin, padding, and gutter–it seems to me that margin and gutter are often under utilized by many users. For some reason the idea of padding seems to instantly click with a lot of people, but the various uses for margin and gutter controls do not. That’s why in today’s post we’re going to show you five creative ways to utilize Divi’s built-in margin and gutter controls to achieve more interesting layouts.”

Read More

2. How to Create a Responsive Image Grid with the Divi Page Builder and the Call to Action Module

2-fav-divi-tutorials-2016

“Responsive grids are perfect for showcasing a collection of links to content because they look good on every device. The Divi page builder has some fantastic built-in modules which use grid displays, including the Portfolio Grid, the Blog Grid and the Gallery Grid.

But sometimes you might want a visual display of links to selected pages of your site rather than auto-generated content. You can easily use the Divi Image Module, but I like to include a button link, so that visitors understand that the image they can see is also a clickable call to action.

You could use a plugin, like Essential Grid, to achieve an image grid with buttons, but I prefer not to have to add a plugin when I don’t need one. Instead we’re going to be creating the grid below using the Divi Call To Action Module.”

Read More

3. 5 Unique Button Styles You Can Achieve With Divi’s Button Module

3-fav-divi-tutorials-2016

“In this post, we’re going to look at Divi’s Button Module and show you how to style it in five unique ways. The button module is one of the most popular of all the Divi modules because it’s so versatile and useful for getting site visitors to help you achieve your objective in a given post, page, or section. Therefore, it’s very important that we as designers and developers make these buttons appealing and eye catching.

Let’s dig in and find out what’s possible with Divi’s Button Module!”

Read More

4. 5 Fun Ways to Style Divi’s Blurb Module

4-fav-divi-tutorials-2016

“In this post, we’re going to explore one of Divi’s most popular features, The Blurb Module. Although seemingly simple out of the gate, it’s packed icon options and many customizable features that can bring your website elements to life. I generally use the Blurb Module for things like services, benefits, contact information, etc, but Divi provides us with so many icons that the possibilities are endless.”

Read More

5. 5 Unique Ways to Style Divi’s Contact Form Module

5-fav-divi-tutorials-2016

“The humble contact form is often a straight-forward even boring section on many websites. My goal with this post was to look for some lively design inspiration on various design showcase websites and Pinterest and see if I could then re-create what I found with Divi–adding some spice to a traditionally bland contact form area. Here are my results!”

Read More

6. 5 Text Styling Tricks for WordPress and Divi

6-fav-divi-tutorials-2016-1

“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.”

Read More

7. 5 Easy Ways to Beautify Your Divi Sidebar

7-fav-divi-tutorials-2016-1

“When designing a website, the sidebar can sometimes be a little neglected. It’s easy to get carried away putting together a knock-out blog landing page and forget to remove the standard widgets and style them to match the rest of your site. Remember, even if your prefer the look of a full width post, the standard sidebar will still appear on archive pages…

In this post, I’m going to share five of my favorite ways to spice up your sidebar.”

Read More

8. How to Add More Social Media Icons to Divi

8-fav-divi-tutorials-2016-1

“[In this post], you’ll discover how you can enable extra social media icons in Divi’s theme options, how to use the Divi Builder to insert social media icons anywhere on a page or post, and lastly, how to add more social icons to Divi using a little PHP.”

Read More

9. How to Add Icons to the Divi Menu – Divi Nation Short

9-fav-divi-tutorials-2016

“If I’ve learned one thing creating tutorials for Divi it’s that the community loves tinkering with the Divi Menus. As a staff, we are well aware of the desire for more Divi Menu options and look to expand upon the header/menu options we already provide in future updates. But in the meantime, we’re happy to offer little tips, tricks, and hacks that can be applied to the Divi header/menu area and today’s post is just that.”

Read More

10. 5 Ways to Get Creative with Divi’s Person Module

10-fav-divi-tutorials-2016

“…the Person Module is a useful and highly versatile tool that you will likely want to use over and over again. But you may not always want to use it in the same way. That’s why in today’s post we’re going to show you five ways that you can get creative when it comes to styling Divi’s Person Module.”

Read More

Looking forward to a New Year of Learning in 2017

I know I’m really looking forward to a new year of learning and sharing about Divi with all of you. We’ve already started to put together this year’s line-up of excellent Divi tutorials and as always we’re open to requests. Let us know what you’re interested in learning in the comments below!

Featured Image via PureSolution / shutterstock.com

19 Comments

  1. Nice summary! Thanks!

    Love the Elegant themes blog. Keep it up in 2017 🙂

  2. Hi! NIce post!

    Any suggest about How to Add Buy Woocommerce buttons in homepage products? Will be great!

  3. I love the tutorials of divi! Why does elegant themes doesnt make pre made layouts every month to use? Like the betheme of themeforest. This will inspire alot of buyers, because they are not creative!

    • Nathan B. Weller

      Stay tuned! We’ll be giving away a lot this year 🙂

      • Yihaa! Love for the group. Thank you!

  4. I’ve been saving the tutorial emails I’ve been getting in a folder, so I’m glad you compiled the top 10 here, thanks!

    I find these quick posts so useful.

    Here’s to making my Divi themed website awesome in 2017!

  5. Are these all working with Divi 3.xx? I just try the 2. How to Create a Responsive Image Grid with the Divi Page Builder and the Call to Action Module. Loaded…

    Divi > Divi Library page and click the Import/Export

    but I had a error…

  6. We have already known this information, haven’t we?
    Hope the blog can give us more free layout~!

  7. This is awesome! Thanks

  8. i m so glad you compiled the top 10 here and more

  9. I thank you for the work you guys are putting into Divi, Iam enjoying the new learning curve.
    I am trying to get my home page to have a popup box but I having no success, can you help please?

  10. Thanks for the roundup, Nathan – I’d somehow managed to miss a couple of these. 🙂
    One thing I have found though, is that some of these don’t look so good on mobile devices. And being ‘given’ a layout can actually make it more difficult to figure out the correct css necessary to get the new module/section to behave properly at different screen resolutions.
    I hope future articles will include appropriate responsive css to cover mobile devices.
    Keep up the great work. 🙂

  11. The resources you have provided so far and continue to provide are fantastic, and offer a lot of content and inspiration for creative design work. Thanks so much!

    For a suggestion, a mini-series (or more) I’d be interested in exploring is one that highlights creative applications for Monarch and Bloom, including things that may be outside the box. For instance, what are some awesome ways of using those plugins’ Custom CSS functionality?

  12. Thanks for putting these 10 ten lessons all in one place to reference in the future and to try some of these advanced techniques on a future design job when I need some design inspiration!

  13. Hello, Great article!! I’m new here and I’ll be working with DIVI. My question is about migrating the blog content.

    If I already have a website running but I decided to change the theme to DIVI, I’m not sure if after I install DIVI on my old website I will keep the content of the blog that has many articles since 2013.

    Is it going to be migrated automatically? or is there a tutorial to learn how to keep the blog content once I have installed DIVI theme? If not that will be a LOT of copy-paste to do!

    Thank you for any help on this!

    • Nathan B. Weller

      Hi Susan,

      When you change themes your content doesn’t go anywhere. However, it may appear quite differently depending on what theme you have installed. For instance, if your theme has built-in ratings and reviews, custom post types, etc. those functions, page templates, and styles will not work with another theme installed. But the content will still be there if you re-activate your old theme.

      That said I would recommend following the standard best practice of backing everything up before doing plugin/theme updates or changes. That way you can easily roll everything back if for some reason things don’t go as planned.

      This post will help you create your backup: https://www.elegantthemes.com/blog/tips-tricks/the-ultimate-guide-to-updraftplus-how-to-backup-restore-or-migrate-your-wordpress-website

      Best,

      Nathan

      • Thank you Nathan, I’ll check that out!

        Have a great day 😉

  14. Hi, I learned How to Code with HTML and CSS (basic to intermediate level) how to use it to modify different module, I know Divi has section (theme option, before, after, main-element) to write css but how to select the item inside the module to design it

    e.g a contact form how to control where the location of “name filed”, “Email field” “text area” etc.

401,632 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