Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

One of the best features of Divi is the powerful Settings features built into each section, row, column and module. It is one of the biggest selling points and the reason most people use Divi. It is an excellent way to introduce non-coders into the wonderful world of web design.

So the question comes up often…

Why Use Custom CSS With Divi?

In this article, I would like to share what we over at Monterey Premier have learned about the benefits of using CSS, the benefits of using the Divi Builder settings, and when to use either option.

Divi Builder Cannot Do Everything

The first and most obvious reason to use custom CSS is that the Divi Builder cannot do everything (yet). There are specific animations and hover effects that require more options that are currently available in the Divi Builder.

Let us say, for example, triggering custom overlays in a module, when hovering over a column, or triggering column overlays, when hovering over a module. The great news is, just by mentioning this in this article, I would bet it will be available as a feature coming soon. But at the time of writing this article, it is not available, and my clients can’t wait for it to become available.

Case in point? Every single tutorial on this website was to provide some customization that was not available in the Divi Builder settings at the time of publishing the tutorial.

 

Divi has come a long way, and they continue to add many new settings, many of which make it much easier to use the settings rather than come up with the custom CSS. But there are still many things that require a little extra CSS, PHP, and JS love.

Making Global Design Changes Can Be Tedious

At Monterey Premier, we are working in the Divi Theme all day, every day, doing many out of the box customizations for our clients.

We work exclusively with Divi and no other theme. Not only is it one of the most flexible, and dominant WordPress themes in the market, but I have personally invested thousands of hours helping to be a part of building this massive community of Divi users.

Over the years I have learned that on some large websites, going back and making design changes in the settings in each module, section, row, and page can take up a lot of time. I have taken over sites where all the design changes were made in the individual modules thus leaving a lot of inconsistencies in font weights, sizes, padding, shadows, animations, etc.

There is nothing more tedious and going through a 30-page website and making sure the font styles are consistent on each page by going into the settings, finding each specific configuration, then making the adjustments.

A recent Divi update gives us the ability to copy and distribute module styles throughout a row, section and even page. This is great, but in my experience, not every grouping of modules on a page is meant to be the same, so you still have to take a few extra steps using this method.

Imagine a client comes to you and tells you they want to change the font weight, family and style on all h4’s throughout a website. If you relied on the Divi Builder settings, this might take a while.

Now, imagine being able to make that change globally in just a few seconds.

via GIPHY

The Benefits of Using Custom CSS with Divi

The great thing about using custom CSS is that you can keep all your design and style in one place, and still use the Divi Builder settings when needed. An even more significant benefit to using custom CSS is the cost of building Divi sites becomes more efficient and effective.

This does not mean we don’t use the Divi Builder or exclusively use custom CSS on all our builds. If a client prefers to have all the design done using only the Divi Builder settings, there are certain expectations they need to have.

  • It will take more time to build, customize, and make edits, so expect it to take longer to develop and make edits.
  • We charge hourly so the more time it takes to build it, the more it is going to cost.
  • There are many things Divi cannot do out of the box that requires some additional PHP, JS, or CSS customizations, so be prepared not to get all the functionality you want.

Our Clients Can Still Benefit From the Features of the Divi Builder

In the early days, I used to use the default Divi classes and ID’s to make modifications. The problem with that was that now the user would be locked into those CSS styles. This was especially important for our premium child theme customers.

So I started to take advantage of the ability to add custom classes and ID’s to each section, row, and module. By adding these custom classes, I can target any item that uses that class, and if the client wanted to change the design using the Divi Builder, they could remove that class from the settings or create a new module without that class. The same goes for sections, rows, and columns.

So by using custom classes, the user is never locked into the CSS being used. They are still free to use Divi and the Visual Editor the way it was intended.

The Benefits of Using the Divi Builder Settings

As I mentioned before, I love all the features that come packed with Divi, especially all the settings enhancements they keep coming up with. Just yesterday I saw a sneak peek of some new transition settings that look amazing. Currently, my favorite built-in settings are the shadows and animation settings. When I add animations, I only use the built-in settings.

So for the Divi users who are using Divi to build their own website, or for a local church, non-profit, small business, etc., using layouts and the visual editor are perfect. I recommend using the visual editor and built-in settings. I train all my clients on how to use it if they plan on tinkering with their site after I hand it over. That is the beauty of Divi.

And for web designers who build websites for a living, layouts and the visual editor are great for cranking out small 5-10 page websites in a short amount of time. At Monterey Premier, we give our clients the option to have a completely  custom website usually starting over $2000, or a premade layout kit with 1-10 page packages ranging from $500-$2000.

Divi continues to amaze me with the new settings and features they keep introducing. But there are still many things that require a little extra CSS, PHP, and JS love.

Here Are Some of the Most Common CSS Snippets Used on All Our Builds

These are useful snippets that go into just about every new build and cannot be done using the standard Divi Builder settings (yet).

A Cleaner Drop Down Menu

Compact Divi Sub-Menu

I like to keep a tidy drop down menu so this is automatically included in my basic child theme used on every new build.

A Better Responsive Divi Menu For Desktops and Laptops With Smaller Screens

Have you ever been annoyed with the Divi menu carrying over into a second line on smaller desktop & laptop screens? Well so do I, and that is why I have a little CSS I keep handy for just about every website I build with Divi.

Divi Fixed Footer Bar For Mobile Devices

Divi Fixed Footer Bar For Mobile Devices Image

I have been injecting Divi library sections into pages for a couple of years now and one of those sections is a fixed footer bar for mobile devices. This is great if you want to have a clear call to action for mobile viewers. It also gives your website the look and feel of an actual app.

Turn Your Mobile Menu Hamburger Icon Into A Menu Button With Text

Tired of the boring old hamburger icon on your mobile menu? Here is an easy way to turn your Hamburger icon into a button with text.

Inline Buttons

We wanted to use the button module but we did not want to use multiple columns either because we would have to modify the column width. So I decided to use a little CSS so that we can easily make several buttons added to a single row all line up horizontally. I now use this on pretty much every single build.

Transform a Divi Menu Item Into a CTA Button

By far one of my most popular tutorials. One popular place to put a call to action button is in your main menu and why not? It’s on every page, it’s always accessible and it is pretty valuable real estate. Almost every clients wants this CTA action in their primary menu.

Inject a Layout From Your Divi Library Into Your Footer Using Divi Hooks

Awhile back, I wrote up a tutorial for injecting Divi Library Layouts into your footer by modifying the footer.php template. With the introduction of Divi Hooks, we can now inject that layout into the footer without having to modify any php template files.  All we have to do is add a simple snippet of PHP to your functions.php file.

In Closing

There are a handful of other snippets I use in almost every build. These include classes for global header modules (H1, H2, H2, H4, Preheader & Subheader), custom dividers, vertically aligned centered columns, swap columns order on mobile devices, and scroll to top, just to name a few.

Imagine just being able to assign a custom class to a module and have all the custom style applied in a second. That is one of just many of the reasons I love using CSS, even with a wonderful page builder tool like Divi.


Well, that’s all for now. I hope you find this article useful.

The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2018 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest