Source: https://divicake.com/blog/9-divi-theme-tutorials-transform-divi-site/ [Blog](https://divicake.com/blog/)/[Resources](https://divicake.com/category/resources/) # 9 Divi Theme Tutorials to Transform Your Divi Site By Divi Cake·19 September 2026·Updated 5 September 2026·5 min read 9 Divi theme tutorials to transform your Divi site We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [1. How to Add Custom CSS to Divi](https://divicake.com#1how-to-add-custom-css-to-divi) - [2. How To Create A Stylish Inline Bloom Opt-in](https://divicake.com#2-how-to-create-a-stylish-inline-bloom-opt-in) - [3. How to Create a Scrolling Module Carousel in Divi](https://divicake.com#3-how-to-create-a-scrolling-module-carousel-in-divi) - [4. How to Create a Diagonal Shape Background in Top Header of Divi](https://divicake.com#4how-to-create-a-diagonal-shape-background-in-top-header-of-divi) - [5. 5 Unique Button Styles You Can Achieve With Divi’s Button Module](https://divicake.com#5-5-unique-button-styles-you-can-achieve-with-divis-button-module) - [6. 5 Fun Ways to Style Divi’s Blurb Module](https://divicake.com#6-5-fun-ways-to-style-divis-blurb-module) - [7. Move the Divi Blurb Header Above The Image](https://divicake.com#7-move-the-divi-blurb-header-above-the-image) - [8. How to Create a Custom Divi Header](https://divicake.com#8-how-to-create-a-custom-divi-header) - [9. How to Create a Responsive Accordion Slider in Divi](https://divicake.com#9-how-to-create-a-responsive-accordion-slider-in-divi) - [Ending Thoughts](https://divicake.com#ending-thoughts) One of the greatest advantages to [Divi](https://divicake.com/go/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. Divi 5 note: Several of these tutorials were written for Divi 4, and a few hand you a downloadable layout built in the old shortcode format. Import one into a Divi 5 site and Divi flags the page with a “Backwards Compatibility Mode Enabled” warning in the admin bar, listing the legacy modules it found and linking you to the D5 Migrator to convert them. Six of the nine Divi tutorials at a glance ## 1. How to Add Custom CSS to Divi As seen in a lot of these tutorials, knowing [how to use CSS with Divi](https://divicake.com/blog/how-to-add-custom-css-to-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 Opt-in Divi theme tutorials to transform your Divi site Bloom is one of the most popular plugins for Divi, but it can be tricky to style. Learn [how to style your inline Bloom opt-in](https://divicake.com/blog/create-stylish-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 Divi Theme Tutorials to Transform Your Divi Site This tutorial replaces the image carousel tutorial and takes the concept several steps further. This tutorial focuses on 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 and devices. Using variables, you can easily include as many modules as you want. The tutorial also shows how to customize the variables. Learn More: [R41: How to Create a Scrolling Module Carousel in Divi](https://divisoup.com/r41-how-to-create-a-scrolling-module-carousel-in-divi/) ## 4. How to Create a Diagonal Shape Background in Top Header of Divi Divi Theme Tutorials to Transform Your Divi Site This tutorial shows [how to create a diagonal shape background](https://joshhall.co/how-to-create-a-diagonal-background-shape-in-top-header-of-divi/) 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 Divi Theme Tutorials to Transform Your Divi Site 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. Learn More: [5 Creative Divi Button Module Designs & How to Make Them](https://divicake.com/go/divi-button-module-designs/) ## 6. 5 Fun Ways to Style Divi’s Blurb Module Divi Theme Tutorials to Transform Your Divi Site 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. Read More: [5 Creative Divi Blurb Module Designs](https://divicake.com/go/divi-blurb-module-designs/) ## 7. Move the Divi Blurb Header Above The Image Divi Theme Tutorials to Transform Your Divi Site 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. Learn More: [Move the Divi Blurb Header Above The Image](https://divicake.com/go/responsive-accordion-slider-in-divi/) ## 8. How to Create a Custom Divi Header Divi Theme Tutorials to Transform Your Divi Site 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. Learn More: [3 Ways to Customize the Divi Header](https://divicake.com/blog/customize-divi-header-layouts-plugins-tutorials/) ## 9. How to Create a Responsive Accordion Slider in Divi Guide to setting default open or closed states for Divi Accordion modules using jQuery. Learn how to automatically control the state of all accordions on page load. This one shows [how to create an accordion slider with panels](https://divicake.com/go/how-to-create-a-responsive-accordion-slider-in-divi/) 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](https://divicake.com/go/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. Learn More: [Top 9 Divi Number and Bar Counters](https://divicake.com/blog/divi-number-and-bar-counter/) ## Written by Divi Cake Divi 5 tutorials, layouts and fixes from the team that builds Divi sites every week. - [About Divi Cake](https://divicake.com/about/) ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Resources [ Best affiliate programs for Divi blogs Resources5 min read ### Best Affiliate Programs for Divi Blogs Nine affiliate programs a Divi blog can actually earn from, what each one pays, and three WordPress plugins for managing the links. 7 October 2026](https://divicake.com/blog/best-affiliate-programs-for-divi-blogs/) [ Best Custom Divi Modules Resources3 min read ### Best Custom Divi Modules Six custom module plugins that still exist and are still sold, and what each one adds to the Divi Builder. 5 October 2026](https://divicake.com/blog/12-best-custom-divi-modules/) [ 10 Best SEO Plugins for WordPress (and Divi) Resources9 min read ### 10 Best SEO Plugins for WordPress (and Divi) Ten SEO plugins for WordPress and Divi that are all still maintained, what each one is good at, and a handful of SEO fixes that need no plugin at all. 27 September 2026](https://divicake.com/blog/best-seo-plugins-for-wordpress-and-divi/)