Divi Help

Tips and Tutes For Beginners and DIY’ers

Getting Acquainted

Our goal is to provide DIVI tutorials on how to get the most out of the Divi theme by Elegant Themes, without the use of custom code (“CSS”).  Yes, CSS will sometimes make the job “better” but by knowing the basics, of which there are a lot of with Divi, your dependence on CSS and other code are minimized. The Divi theme includes more native features than any other theme on the market, which makes it a perfect choice for people who are just starting out with web design or for the DIY’ers who just want to build a site for their own business.  Divi can be intimidating when it is still new to you, and it does come with a fairly significant learning curve.  However; the robust controls and settings that are native to Divi make it possible to build a great looking website, even if you can’t write the first line of code. And that is why we started Divi Help, where our mantra is:

“CSS? We don’t need no stinkin’ CSS!”

We didn’t choose this mantra because we’re big fans of Blazing Saddles (Truth be told, I’ve never even seen it). We realized that there are tons of Divi users who may not yet be comfortable using CSS, or who have no need to learn CSS to accomplish their goals. While there are dozens of groups and forums for more advanced Divi users, we wanted to provide a comfortable environment where new designers and/or DIY’ers can learn the basics and ask questions without feeling overwhelmed or intimidated by the Super-Geeks (Most of the Super Geeks are our friends and know that we say this with the utmost respect and adoration!)

If you are a new user of Divi, or a more seasoned designer who may have stepped away from it for a bit, we want to help you acclimate to Divi and demonstrate how to use some of the more complex and/or often overlooked features and settings. We encourage you to provide feedback and make recommendations for anything that you’d like to see here, no matter how basic (or advanced) you think it might be. And if your goal is to become an expert with Divi, we also encourage you to follow some of the more advanced groups and blogs also, as there is a wealth of talent and knowledge out there in the Divi community.

Welcome to your new and somewhat nerdy Divi family. Let’s have some fun!

*LOOKING FOR SEO TIPS? CHECK OUT DIVISEO.PRO*

* Divi Help is run by 3rd parties and is not associated, or acting on behalf of Elegant Themes *

DIVI TUTORIALS

Alicia Hughes

WHO

 

WE

 

ARE

Shawn Campbell

Working With The Customizer

THE DIVI SLIDER MODULE

MOST COMMON PROBLEMS WITH THE DIVI SLIDER

More often than not, the default settings of the Divi slider are not going to give you the desired look right out of the box, and therefore will require some adjustments. If you’ve added a slider and it is not quite right, it’s not you, it’s Divi.

When you see a slider that is displayed as a large, fullwidth image, this is achieved by placing the image as the background image in the individual slide setting. The field labeled “slide image” is a much smaller image that appears in front of the background image, or can also be left blank so that just the fullsize background image appears.

Divi slider tutorial

To get our slider’s images displaying properly, we’ll need to adjust the background size and possibly position. While in the individual slide module settings, you’ll see these settings directly below the background image field. If the focal point of your background image is fairly centered and/or where you would like it to be, you can leave the background image position setting at the default. If you wish to reposition your background image, this setting is where you can play around to achieve the desired position. There is no right or wrong here, as the ideal setting will vary by image and desired look. As you get familiar with the position settings, it will just be a little trial and error until you’ve found the position that best suits your needs.

Divi slider tutorial

This is the MOST common issue with the Divi slider… 

The background image size will rarely be left at the default value. The most common values here will be “cover” or “contain”, in that order. “Cover” means that the image will be resized to to fully cover the slider container, regardless of screen size. In keeping with a responsive design, this is typically the best choice.  Feel free to play around with the options here to get a feel for how each of the settings display and be sure to look at each device type to see how it translates to the various screen sizes. Changing the display size is literally 1 click of the mouse and you will not break anything, so experiment all you want!

If you’ve got to this point and your slider still doesn’t look quite right, odds are that you’ve not done anything wrong.  The height of the slider is determined by the content that is in the slide, i.e. the slide title, sub title, button, and text. If you are including all of these elements, your slider should be pretty close to displaying properly at this point, if not perfect.  If not, some minor padding adjustments might be needed. See PADDING below.

If you are not including a title, sub title, button, and/or text, your slider is probably looking rather squatty right now. To compensate for the lack of content within the slider, you will need to add a good bit of top and bottom padding to the module in order for it to display properly and show your full image(s).

PADDING:

If you need some further adjustments, you’ll be adding the top and bottom padding in the slider module settings, under the Advanced Design tab.  The top and bottom padding is best expressed in percentage values in order to keep with cross-browser compatability. The actual value is a bit of a SWAG here and will involve some trial and error. As a starting point, it you have no text or button content whatsoever in slides, I’d recommend starting at or around 45% top and 45% bottom padding and adjust accordingly from there.  If you do have text and buttons but still need a little extra height to the slider, try something around 5% top and 5% bottom padding and adjust accordingly from there until you have the desired look. Remember to check the appearance on all devices, as the same values may not apply for all screen sizes but if you are using a percentage as is recommended, these values should work consistently across all device types. The phone icon to the right of the padding fields will open the fields for the desktop, tablet and phone padding settings, should changes be needed.

divi slider tutorial

At this point, you should have a slider in which all images are properly displayed. Go ahead and style your elements to suit your branding or design and your slider will be looking awesome in no time. For demo purposes, we’ve added a quick semi-opaque color overlay to the background image (in the slide settings) to soften the background image and make the slide image and slide content contrast and pop. Within the module settings, you will find the background overlay color and opacity settings, as well as text overlay settings should you prefer to have the overlay behind the text rather than over the full background image.

divi slider tutorial

 

 

 

 

 

 

COLUMNS AND ROWS

GETTING THE F@#$ING EQUALIZE COLUMN HEIGHTS OPTION TO WORK

If only I had a nickel for every time this question is posted in the Divi help groups, or for every F-bomb that I’d dropped while trying to figure this out!

The equalize column height option will equalize the BACKGROUND SIZE of the modules within the row. It does NOT equalize the size of the content within the modules. To make some sense of this, think of the background size like a picture frame, and the modules/content are the photographs. If you put a 4×6 picture and a 5×7 picture side by side, you’re never going to make them the same height.  The same is true when you put 2 modules with content side by side – the content is not the exact same size, therefore the columns are not going to be the same height. Now if you put each of those photographs in a 5X7 frame and placed them side by side, the photographs (content) are still different sizes but the frames that they are in are the same height.  When you use a background image and/or background color in your column settings, you’re essentially creating that “frame” that will then allow you to equalize the height of your content/modules.

FOR EQUAL HEIGHT ROW USING IMAGE AND TEXT: If you are trying to create an equal column height row with image and text side by side, the image MUST go into the background-image field in the row settings (green bar) and NOT in a module. If you put the image in an image module, despite that this would seem intuitive and logical enough, it’s going to look like crap and the columns are not going to be equal.

FOR EQUAL HEIGHT ROW USING TEXT AND TEXT: If you are trying to create side by side text boxes that are equal in height, you MUST give both of them a background color in the row settings (green bar) > column 1 and column 2 background color fields. The background color can be different than the page color to create some contrast if you so choose, but it does not have to be a different color than your page background if you do not want it to be.  If you do not want a contrasting background color, in your row settings, you can set the column 1 and column 2 background colors to the same color as your page or section background. There will be no visual difference on the front end, but because a background color was specified in the row settings and the equalize column feature works based on the background size, your columns will now be equal height.

Pictured: Image/Text layout

EQUALIZE COLUMN HEIGHT IN DIVI

 

REDUCE ROW HEIGHT FOR EACH DEVICE TYPE (TOO MUCH WHITE SPACE BETWEEN SECTIONS)

In my love/hate relationship with Divi, one of the things I definitely hate is that the section heights are rather chunky, which makes for a lot of white space above and below each section, especially on tablets and phones. In the customizer settings, you can change the section height settings on a site-wide basis, and preview how the setting will appear for each type of device.  By adjusting this setting at the customizer level, you shouldn’t have to mess around with making padding adjustments in every single module.

You will find these setting in the Customizer > General Settings > Layout Settings. Use the desktop, tablet and phone icons at the bottom of the screen to preview your settings for each type of device.

change section height in divi

If needed, row height can be further customized in the page builder settings, typically by setting top and bottom padding to 0px.

FONT/TEXT

CHANGE THE COLOR OF PARTIAL TEXT OR LINKS

Global settings are awesome and will save you a ton of time, but sometimes you want to mix things up a bit. Maybe change a word or two of text to a different color to make it “pop”, or make a certain hyperlink stand out by making it a different color than the site-wide default color.  This question comes up often in the various Divi groups and the responses always involve custom CSS. Nope, it’s really quite stupid-simple to do right in the text editor. Using your mouse, highlight the word(s) or hyperlink that you want to change. Click on the “A” icon in the toolbar and either pick your desired color from the standard swatch options, or choose custom color and enter the HEX or RGB value for whatever custom color you want to use.

If you don’t know the HEX or RGB values for the color you want to use, or if these terms sound more like some kind of nerdy-spy operation, this is an awesome tool to use: http://www.color-hex.com/

CHANGE FONT COLOR IN DIVI

 

 

ADJUST TEXT SIZE, TEXT SPACING, LINE HEIGHT, PADDING & MARGINS FOR ALL DEVICES (MODULE)

If you want to deviate from your site-wide settings and adjust your text size, text spacing or line height for different devices in just one module, you can do so under the Advanced Tab in that module’s settings. The phone icon will not appear next to the setting until you’ve moved the size slider bar in either direction.  For padding and margins, the phone icon does not appear until you’ve typed a value into one of the fields and hit tab or enter.  As soon as you interact with any of the fields in these settings, the phone icon will appear to the far right of the setting. If you click on the phone icon, you will now have 3 tabs appear over that setting.  Click through each of the desktop, tablet and phone tabs and set your value for each device type.

 

FOOTER

FIX THE FLOATING FOOTER (WHITE SPACE BELOW THE FOOTER)

On pages that do not have much content, you’ve probably experienced the floating footer (white space below the footer). For a very simple cheat, you can add a divider module below your existing content, set the divider to “not visible”, and give it a really large value for divider height (try 600px or so to start and adjust if needed).

The better way to fix the floating footer is to use a code script… (WTF you said we don’t need no stinkin’ CSS??? This code is javascript so technically I’ve kept my word about not using any CSS and besides, it’s going to be just a copy and paste deal. You’ve got this – easy peasy.)

From your dashboard, go to Divi > Theme Options. On the purple nav bar, select the “Integration” tab. Scroll to the field labeled: “ADD CODE TO THE < BODY > (GOOD FOR TRACKING CODES SUCH AS GOOGLE ANALYTICS)” and copy/paste the script that is in red below, then SAVE CHANGES.

<script>// <![CDATA[

varth = jQuery(‘#top-header’).height(); varhh = jQuery(‘#main-header’).height(); varfh = jQuery(‘#main-footer’).height(); varwh = jQuery(window).height(); varch = wh – (th + hh + fh); jQuery(‘#main-content’).css(‘min-height’, ch);
// ]]></script>
FIX FLOATING FOOTER IN DIVI

SIZING / RESPONSIVENESS ISSUES

(AKA MY SITE LOOKS LIKE CRAP ON A TABLET AND PHONE)

ADJUST TEXT SIZE, TEXT SPACING, LINE HEIGHT, PADDING & MARGINS FOR ALL DEVICES (MODULE)

If you want to deviate from your site-wide settings and adjust your text size, text spacing or line height for different devices in just one module, you can do so in the Advanced Tab in the module settings. For text size, text spacing and line height, the phone icon will not appear next to the setting until you’ve moved the slider bar in either direction.  For padding and margins, the phone icon does not appear until you’ve typed a value into one of the fields and hit tab or enter.  As soon as you interact with any of the fields in these settings, the phone icon will appear to the far right of the setting. If you click on the phone icon, you will now have 3 tabs appear over that setting.  Click through each of the desktop, tablet and phone tabs and set your value for each device type.

 

REDUCE ROW HEIGHT FOR EACH DEVICE TYPE (TOO MUCH WHITE SPACE BETWEEN SECTIONS)

In my love/hate relationship with Divi, one of the things I definitely hate is that the section heights are rather chunky, which makes for a lot of white space above and below each section, especially on tablets and phones. In the customizer settings, you can change the section height settings on a site-wide basis, and preview how the setting will appear for each type of device.  By adjusting this setting at the customizer level, you shouldn’t have to mess around with making padding adjustments in every single module.

You will find these setting in the Customizer > General Settings > Layout Settings. Use the desktop, tablet and phone icons at the bottom of the screen to preview your settings for each type of device.

change section height in divi

If needed, row height can be further customized in the page builder settings, typically by setting top and bottom padding to 0px.

COMING SOON:

IMPORT/EXPORT LIBRARY
WORDBREAK FOR MOBILE

SHIT HAPPENS. HERE’S HOW TO FIX IT.

ACCIDENTAL DELETIONS OR MISTAKES ON PAGE - BEFORE SAVING CHANGES

Take a deep breath, you didn’t ruin your site and you’re not going to have to start over. Whew!  If you deleted an element or made any other type of mistake and you have NOT YET SAVED the changes, the counter-clockwise arrow in the purple nav bar is your “UNDO” tool.

 

ACCIDENTAL DELETIONS OR MISTAKES ON PAGE - CHANGES HAVE BEEN SAVED

If you deleted an element or made any other type of mistake and the changes HAVE BEEN SAVED, Divi has got your back. To the right of your page builder and slightly above the Update/Publish button, locate the “REVISIONS” option and click on the blue “Browse” link.  A timeline bar will appear and you can simply move the slider to the left until you reach a previously saved version that precedes the mistake. When you select a previously saved version, you will get an option to compare the current and previous version side by side, but this will be in html and may not be very clear to you what the differences are. However, If you know that the error just occurred, you should be perfectly fine going back one previous version. Click on “restore this version” option and you’re good to go!

Another way to revert back to a prior revision is under the “Screen Options” in the top right corner, just below the “Howdy” message. Click on “Screen Options” and check the box for “Revisions”.  A list of all previous versions of the page will appear below the page builder and you can select from that list.

GENERAL FAQs

CHILD THEMES - WHAT THEY ARE AND DO YOU NEED ONE

Child Themes come in 2 varieties.

There are pre-made Divi child themes, which are essentially fully designed and built for you so that all you have to do is upload the child theme zip file and add your logo, content, and possibly make some minor changes to make the site your own.  They are usually premium (paid), though there are several free child themes that have been created by well known designers within the Divi community.  The advantage to using a pre-made Divi child theme is that it’s a tremendous time saver for you, since all of the design work has already been done. It’s the difference between building a new house from the foundation up, or buying an existing home in move-in condition and merely decorating it to suit your taste.

The other type is a blank child theme. These are free and you create them yourself either manually or via a child theme creator plugin. If and when you decide that you do wish to dive into learning to write custom CSS, HTML and/or PHP, a blank child theme will be essential so that your custom code does not get over-written when the parent theme is updated. At this stage of your work with Divi, if you are not using any custom CSS or PHP, a child theme is really not necessary.

With either type of child theme, you must have the Divi theme installed in order to use a Divi child theme. A child theme is dependant upon the parent theme in order to work.

DIVI THEME VERSUS DIVI PAGE BUILDER PLUGIN

This is one of the most confusing topics among folks who are new to Divi.

The Divi theme already includes the Divi page builder. The builder comes installed natively with the theme and you do not need to purchase the page builder plugin separately.

The Divi Page Builder plugin is to be used with OTHER themes that are not Divi. Many themes do not include a page builder of their own, and others use page builders but they are nothing whatsoever like the Divi builder.  The plugin allows you to use the Divi page builder on those themes that either have no native builder, or use a different style builder than Divi’s.

DO NOT INSTALL THE DIVI PAGE BUILDER PLUGIN IF YOU ARE USING THE DIVI THEME!  Doing so will cause pre-mature balding, excessive cursing, and may cause increased urges to hide in a corner with a tub of Ben & Jerry’s. You’ve been warned!

BASIC DESIGN PRINCIPLES (UX)

THINGS TO AVOID IF YOU DON'T WANT YOUR VIEWERS TO HATE YOU

User Experience (or “UX”) is one of the primary determining factors as to how long a viewer will stay on your website, and whether or not they will convert to a subscriber, buyer, etc. The more user-friendly your site is, the more likely a viewer will follow through to your site’s objective. Here are some basic principles of good design protocol.

MENU / NAVIGATION

Your tab names should be very clear and intuitive to a user. The menu is not the time or place to get uber-creative and make up new words or otherwise deviate from what users expect to find. Users should be able to move quickly through the navigation without any extraneous clicks to get from point A to point B. It’s a website, not a scavenger hunt.

Also, when selecting the font style for the menu, keep it simple and easy to read on all devices. Fonts that are cute or “trendy” often look ok on desktop but become totally illegible blobs on smaller devices, which is greater than 50% of a website’s traffic.

HEADERS

Your “above the fold” area (what a user sees when they land on your site) will determine whether they will scroll down the page to see more, or bounce from the site altogether. Your header or hero image should tell a viewer exactly what it is that you do or provide, and give them a reason to want to stay on the site.

Static images are best for the header section.  If a slider is used, it should be controlled by the user so they can read each slide and navigate at their own speed and desire. Auto-play sliders are kind of obnoxious and have become the virtual equivalent of a pushy telemarketer.

Video backgrounds are extremely poor choices for headers and should not be used.  They will slow down your load time significantly and on mobile devices, they will eat up a viewer’s data usage without their knowledge or consent. Not exactly the best foot to get off on with a new prospect!  The Ken Burns affect is a much better option for creating a moving background image but will require some code to achieve this.  Videos are fine to include further down the page, but the viewer should have control rather than auto play.

CONTENT

Content should pass the skim test, meaning it should be kept to shorter, defined paragraphs so viewers can easily skim through the page. Where appropriate, especially on longer sections of content, use H3 sub-headlines to articulate what the paragraph is about. Also, use relevant images to break up large sections of text and keep the page visually interesting.

Content should be relevant, concise, and written for humans. If you are using an SEO plugin such as Yoast or All in One SEO, do not “game” your content to satisfy the plugin. The search engines do not favor content that sounds contrived, and keyword-stuffing will only cause a penalty in the long run.

IMAGES

In a perfect world, images should be optimized and compressed prior to uploading them to your media library.  Images are the biggest resource hog and will have significant effect on your website’s load time, so you don’t want to upload a billboard sized image where a wallet-sized would suffice. A list of the proper image sizes for all module types can be found on our resource page.

We know not everyone is going to optimize and compress their images beforehand (guilty of this myself!).  Even if you do optimize prior to upload, you can still benefit further by using a plugin such as TinyPNG or Ewww Optimizer (free in the WP repository) to bulk- compress your images after they’ve been uploaded. There are plenty of image optimizer plugins to choose from.

TYPOGRAPHY

Typography is a huge factor in user experience. It doesn’t matter if you have the most gorgeous site on the internet if your viewers can’t read the content.  Divi offers a plethora of font styles, weights, colors and sizes, but this is not an element to get overly artsy with.

Most importantly, your font color should have sufficient contrast with whatever color background it is against so that it is easily readable. Select a font style and weight that is easy to read on all devices. Scripted or more flowery fonts generally translate poorly on smaller devices, so it is important when selecting your fonts to test them on all screen sizes. What looks great on desktop might be an unintelligible blob on phones.

I realize as a 40-something, near sighted, internet warrier I might be somewhat biased here, but for the love of all that is good, please keep your font size and line height comfortable for people of all ages to read without having to be right on top of the monitor or device.

Things to avoid:

This contrast is rather obnoxious, no?  Nobody will strain this hard to read your content.
This font style is ok if used sparingly, but you’d want to harm me and my pets if I wrote the whole site in this font.
 Mad props to you if you can even read this small font.  

We tend to base our tutorials on questions that we see frequently asked in other forums, but if you have a specific question or topic that you would like to see us cover, please send us a note and we will be sure to add a tutorial for you.

FREE TIPS & TRICKS NEWSLETTER

Subscribe to our newsletter to stay on top of new tutorials and free resources!

SIGN UP NOW!