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 Create A Stylish Inline Bloom Optin
Learn how to style your inline Bloom optin with a transparent background overlay and rounded submit button. It uses styling and custom CSS for the Bloom form, and a fullwidth code module with section styling.
2. How to Add Icons to Your Divi Menu
In this tutorial, Josh Hall shows you how to add icons to your Divi menu. While there are numerous ways to achieve this specialized menu effect, you’ll learn how to do it without the use of plugins, font awesome, or unneeded imported images. Follow along with the video and use the code provided on the page to easily add icons to your Divi menu.
3. Creating a Divi 404 Page
This tutorial teaches how to make a 404 page using a Divi page without the need of a plugin. It shows how to create a message by creating a file called 404.php, how to find the post ID, and where to place code that will insert the layout into the 404 page using your layout ID. It’s primarily focused on PHP. It also covers why you need a 404 page.
4. 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 styling adjustments made within the module and adding 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.
5. 5 Fun Ways to Style Divi’s Blurb Module
This tutorial covers five interesting styles for the blurb module. It mostly focuses on settings within the blurb module and 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.
6. How to Add More Social Media Icons to Divi
Divi normally only has the three top social networks for the header and footer areas. This tutorial shows how to add more social icons using PHP to your child theme. It includes both a text version and a video version of the tutorial with code that you can copy and paste, which includes the list of social networks you can add. It also shows how to upload the file and create the folder for it using FTP.
7. How to Create a Scrolling Image Carousel in Divi
This tutorial creates a scrolling image carousel that’s great for displaying icons of clients, projects for your portfolio, photos, or anything else you can place the image module. It uses custom CSS and section and row styling. The scrolling is accomplished through the animation effect that’s built in CSS. The code is provided, with different code depending on the number of images you want to display, and you can download the layout as a JSON file if you want.
8. How to add an Animated Typing Effect to Your Divi WordPress Theme
This is a video tutorial that covers how to add a typing effect to your text using the Typed Js plugin. It shows how to use the Divi modules to add Google fonts, using Developer Tools to identify the cursor ID to manipulate the design of the cursor using CSS, and where to place the code within Divi. It also shows how to change the cursor to a different character using HTML.
9. Create a Full Width Call to Action Button
Learn how to create a full-width CTA button that changes color on hover. It uses styling for the row with custom CSS for the module to create the effect. It includes the CSS so you can copy and paste. It also includes the JSON file if you want to download it.
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, 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.