9 Divi Theme Tutorials to Transform Your Divi Site

by | Sep 21, 2017 | Resources | 0 comments

One of the greatest advantages to Divi is the vast amount of tutorials available across the web. If there’s something you want to learn how to do with Divi, chances are there’s a tutorial for it. In this article, we’ll take a look at 9 Divi theme tutorials to transform your Divi site.

1. How to Add Custom CSS to Divi

As seen in a lot of these tutorials, knowing how to use CSS with Divi is a valuable skill for transforming your Divi website. This tutorial shows how to apply the CSS to Divi using 6 different methods. It also shows some example use-cases and discusses when it’s ideal to use any of the methods. Helpful links are included for a child theme generator and a few tutorials on using child themes with Divi. The knowledge gained from this tutorial can help you with just about all of the other tutorials.

2. How To Create A Stylish Inline Bloom Optin

Bloom is one of the most popular plugins for Divi, but it can be tricky to style. Learn how to style your inline Bloom optin with a transparent background overlay and rounded submit button. Add a background image, center it in a full-width code module, make it transparent, and more. It uses styling and custom CSS for the Bloom form and a fullwidth code module with section styling.

3. How to Create a Scrolling Module Carousel in Divi

This tutorial replaces the image carousel tutorial and takes the concept several steps further. By ignoring Microsoft Edge, this tutorial is able to focus on the CSS grid and variables. It shows how to build a module carousel without having to use columns or floats. It works in all modern browsers (MS has stopped supporting Edge, so it no longer qualifies) and devices. Using variables, you can easily include as many modules as you want. The tutorial also shows how to customize the variables.

4. How to Create a Diagonal Shape Background in Top Header of Divi

This tutorial shows how to create a diagonal shape background for the top secondary menu using the provided CSS. The code is simple and once you’ve learned how it works you can use it to create any type of shape you want. You can make the shape as large as you want and even have an overlapping logo.

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

As the title suggests, this tutorial covers five different button styles. It mostly covers using the styling adjustments that are made within the module and adding your own custom CSS. It teaches how to change the shape, using the image module with the button module, using two button modules together to create a double-sided button, adding a background image, and integrating the button within an image. All of the CSS is included so you can copy and paste.

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

This tutorial covers five interesting styles for the blurb module. It mostly focuses on using the settings within the blurb module and adding custom CSS. Styles include a centered color blurb, a circle blurb with CSS, side by side blurbs with icons, creating a blurb grid, and adding hover animation. All but the first blurb uses custom CSS, which is included so you can copy and paste.

7. Move the Divi Blurb Header Above The Image

This tutorial shows how to place the blurb’s header above the image of the blurb using jQuery. It shows how to apply the code to all blurb modules or target specific blurb modules. The jQuery snippet is provided as a download. It shows how to create the custom CSS classes for the specific modules you want to target.

8. How to Create a Custom Divi Header

This tutorial shows how to insert a Divi section above the main header. Like any Divi section, you can add any number of Divi rows and modules you want to create any type of layout you can imagine. It uses CSS and hooks, which will be applied to a child theme. It includes several examples with descriptions of how they were created.

9. How to Create a Responsive Accordion Slider in Divi

This one shows how to create an accordion slider with panels that stack horizontally. Hovering over a panel expands it to show its content, such as images and text, and changes the icon. The other panels are then contracted to get out of the way. The panels are stacked vertically on mobile devices. It uses multiple blurb modules with CSS to build the slider. It includes all of the code with instructions and a downloadable layout that you can use without having to code it yourself.

Ending Thoughts

If you want to transform your Divi site, these 9 tutorials are a great place to start. A lot can be learned from these tutorials. They demonstrate how to use the Divi modules to style your elements, the proper way to use CSS, how to add PHP, using jQuery, uploading files via FTP, using Developer Tools, and much more.

We want to hear from you! Which of these Divi tutorials is your favorite? Let us know in the comments.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Featured Divi Products

 

Recommended Hosting

Pin It on Pinterest

Shares