25 awesome free Divi resources just for you!
Subscribe to receive regular emails packed with tips, tricks, tutorials, freebies, product info and promotional offers, and get instant access to 25 completely free awesome Divi resources!
We take your privacy seriously, and you can opt-out at any time.
I woke up far too early this morning as I was so excited about taking the new Divi 3.18 backend editing experience for a test drive. I have to say, I am really impressed! I use the backend builder the majority of the time, but I also use the Visual Builder and...
If you are creating a one page website in Divi, chances are you are going to be using anchor links in your primary menu to enable the user to navigate between different areas of the page. The problem with this is that currently, Divi doesn't provide any functionality...
This one has been a long time coming but I finally put the time aside, and as it’s a visual effect, this recipe is in video format! So if you wanted to add the awesome SVG shape dividers from the Divi section settings anywhere else other than a section, here is how to do it.
Recipe #23 - How to Create a Scrolling Image Carousel in Divi is by far our most popular tutorial, and it has gone through a few interations, both to make it more user friendly if you want to customise it, and also to keep up with Divi updates. Rather than update that...
This recipe was inspired by a question in the Divi Soupies Facebook group. A group member wanted to know how they could make a call to action button in the menu work better on phones and tablets. As you know, our beautiful menu buttons look great on desktops, but are...
The Divi portfolio tabs/filters are shown in ascending order by default, but what if you want them in a completely custom order, neither ascending or descending? Fear not, we can do this with some creative thinking and a little jQuery.
In this Divi recipe I will show you how to display a default styled menu along with a hamburger menu at the same time. If you need to create a site that utilises two menus, this solution using the built in Divi options, minimal code and no plugins is for you.
In this Divi tutorial I will show you how to display the title and caption from the media library when hovering over an image using the gallery module. We will also be changing the dimensions of the gallery image thumbnails (optional).
In today’s recipe I will show you how to add a little CSS so that you can control the height of your header and slider modules, regardless of the amount of content, and position that content at the top, middle or bottom.
Today’s recipe is the result of MANY questions asking how I created the boxed layout on the redesign of Divi Soup.
Today I am going to show you how to use CSS Grid with Divi’s feed modules so you can display your blog, gallery and portfolio items in any number of columns with very minimal CSS.
Ever wanted to easily create a layout and define exactly where each module is placed based on the device dimensions? CSS Grid is the new kid on the block that lets you do exactly that!
Didn’t think displaying a random header image was a functionality built into Divi? It is, well kind of 😉 In Recipe #31 I show you how to display a random header image each time the page is loaded.
In Recipe #30 I am going to show you how to create a hidden content area that slides in from the top of the screen on click, using only the native Divi Toggle Module and a relatively small amount of CSS.
In Recipe #29 I am going to show you how to add the author avatar image to your Divi blog module and single posts layout using a combination of CSS and PHP.
For Recipe #28 I am going to show you how to create an animated App showcase using the Divi Blurb and Image modules, then a tablet and mobile alternative using the Slider module.
The filterable portfolio is 4 columns by default, in Recipe #27 I show you how to have as many columns as you want and change the image size to fit your content
Recipe #26 was inspired by another Divi community member. I had been meaning to write a new recipe on the tabs module for quite a while and the question in the Facebook group gave me some inspiration on what to create.
Recipe #25 – How to create a 2, 3 or 4 column square blog layout in Divi answers a couple of questions I have been asked by the Divi community lately.
In Recipe #24 I show you two methods to add a transparent image overlay to a background video in Divi using the fullwidth header module and minimal CSS
Recipe #23 How to Create a Scrolling Image Carousel in Divi using only the image module and CSS. Now there’s no need for another plugin!
Recipe #22 How to Add Links to the Divi Gallery Module and Show Captions on Hover. Add on-hover captions to the gallery module and make the images open a URL instead of a modal window.
In recipe #21 I show you how to add the popular Ken Burns zoom and pan effect to the Divi fullwidth header module. No plugin, no JS and no PHP, just CSS 🙂
Recipe #20 How to Create a Fullwidth Alternating Blog Layout in Divi. This recipe uses the odd & even CSS pseudo classes to create a unique Divi blog layout.
Recipe #19 How to Create a Sticky Button in Divi. The first of hopefully many tutorials requested by the Divi community. This one comes from Wendy Lovatt
Recipe #18 follows on from the blog layout theme of recent recipes, but I have decided this week to show you how to change the excerpt length of Divi blog posts.
Recipe #17 is the third of the blog layout series, how to create a large thumbnail style blog layout. This one is nice and clean and really simple to implement.
In Recipe #16 I am going to show you how to create a clean and stylish two column blog layout with Divi. The Letterbox style blog layout, enjoy!
Receipt #15 is one for the Pinners, how to create a Pinterest Style blog layout using the Divi blog grid layout, some CSS and a little PHP.
In Recipe #14 I’m going to show you how to create a sleek horizontal submenu with Divi rather than the usual vertical submenus that come as default.
Perhaps you do not know, but with CSS3 you can apply changes to images without using Photoshop or any other graphic tool. In this article, in fact, you’ll discover how easy it is to apply filters to your images using only CSS.
Recipe #12 is a variation on Recipe #8 where I showed you how to align the fullwidth slider text to the left or right. I have been asked a few times now how to align the text to the left on one slide, then to the right on the next slide, so this recipe shows you how.
Recipe #11 is Four More Linkable Image Hover Effects. As Recipe #7 has been one of my most popular posts, I thought I would whip up some more for you!
Recipe #10 is a set of five subtle menu hover effects to make your Divi menus look a little less Divi-ish! In this recipe I will show you how to apply the effects to both the primary menu and fullwidth menu module.
Recipe #9 is a cool accordion image slider menu you can use to link to galleries, portfolios, projects or even blog categories.
Recipe #8 Aligning the fullwidth slider text left or right is something a lot of people seem to be struggling with. So here’s a recipe to show you how.
Recipe #7 is again something I have seen asked in the Facebook groups quite frequently lately. Four linkable image hover effects which show descriptions for use in your Divi projects.
Recipe #6 is by VERY popular demand! I created this custom blurb module layout to help out Terry Smith from the Divi Theme Users Facebook group.
For Recipe #5 I have decided to create quite a simple and short tutorial but something I have seen asked in the Divi Facebook groups several times.
I am currently working on a new child theme and I wanted to incorporate a really eye catching header that could deliver some key messages.
Sometimes 4 columns just aren’t enough! So for recipe #3 I’m going to show you how to create a responsive six column blurb style layout with linkable images (and text if you wish).
For our next recipe I’m going to show you how to create a Boxed Testimonial Slider like the one below which looks great on all screen sizes.
For the first tutorial from Divi Soup I’m going to show you how to create a Super Slim Bloom Optin Form just like the one above this post.
I have seen a fair few questions lately about how to change the text of the read more and pagination links in blog posts. There are some solutions around, but the main issue I have seen with these is that they don't work now the blog module uses ajax to load the next...
Sometimes you want your navigation items in a different order. Maybe you want your social links to align right, or you want the secondary menu on the left. Perhaps you want to split your main menu into two sections. All this can be done quite easily with flex, and in this quick snack I show you how.
Replacing the Divi search button with an icon gives a much sleeker look. In this tutorial I am going to show you how to do just that for both the Divi Search module and the default WordPress search widget.
If you are creating long pages or posts it can get really tedious to have to keep scrolling back to the top each time you want to preview or publish. This little snippet puts an end to that tedium.
Let’s bypass all the complex coding and use a purely CSS way to limit your excerpts in the Divi blog module!
Ever wanted two lines of text in your toggles and buttons in Divi? Whilst the title fields don’t support HTML, there is a workaround using pseudo elements.
I've been meaning to work on this one for quite some time. I've seen so many questions about getting the submenus to stay visible for longer, not least in the comments on my own post How to Create Slim Horizontal Submenus, but no solutions. So this quick snack is to...
I have seen quite a few questions lately about how to style specific sections of text, either with a different colour, font or font weight etc. There are a number of way to do this, probably the most popular by using the tag, and that solution is fine. However, as...
As you probably know, there is an option in the Divi Theme Customiser Settings to change the active menu item colour, however for one reason or another this sometimes doesn’t work, so we need to force the issue.
This one has been on the ‘to do’ list for quite some time and I know it’s something lots of you want to know how to do, so today I am going to show you how to move the default Divi Slide-In menu from the right hand side of the page to the left.
My good friend and fellow Divier, Randy A Brown was recently looking for a tutorial on how to style the category widget so he could colour code his categories for a new project.
Bloom doesn’t have transparency settings in its colour pickers. Not to worry, this Divi Soup Quick Snack will get you transparent forms in a few minutes.
The Social Media Follow module is a handy one for when you want to add more social media network links to a website than allowed in the Divi Theme options, but those little guys can be a bugger to centrally align and there is no option for it in the module itself.
In this Divi Soup Quick Snack I’m going to show you how to vertically center any content without using padding, margin or media queries.
In this Divi Soup Quick Snack I’m going to show you a quick fix to make the logo bigger on mobiles and tablets, something people seem to struggle with.
In this quick snack I’m going to show you a quick fix for getting the centered inline logo truly centered in Divi no matter how many menu items you have.
In this quick snack I am going to show you how to easily add subtitles to the primary menu in Divi
Sometimes you want to use the boxed layout in Divi but you still want the menu to be fullwidth which isn’t currently possible, here’s how to fake it!
Here is a another Quick snack for you, making the specialty section fullwidth. I love the specialty section and think it is really underused.
Recently quite a few people have been having issues adding custom fonts with css to their Divi website instead of using a plugin.
Here is the first of the Divi Soup Quick Snacks – Styling the back to top button and including an image.
There are a number of ways you can use anchor links in Divi to help your visitors quickly navigate between relevant content, today I will show you 3 of those ways.
If you are adding custom styling to Divi, sometimes you may notice that you get a horizontal scrollbar across the bottom of your browser window, let’s fix that!
On occasion you may have the need to make a single menu item look slightly different to the rest to draw attention to it, this Divi Soup Entrée will show you how.
Entrée #2 will show you how to open your Divi menu links in a new tab. This is actually a Wordpress feature so will work on any theme.
Top 10 Free Plugins I Install on Every Divi Site is the first in a series of posts dedicated to helping you with your web design business.
Hybrid Scroll Free Divi Layout I had a request for this layout from our Facebook Community. Using the awesome ScrollMagic and GSAP jQuery libraries, the layout allows you to define a group of sections to scroll horizontally, whilst the rest of the content scrolls...
Fixed Slide-In Contact Form Free Divi Layout I had some requests for this layout from our Academy Club Members, but thought I would make it free to everyone 🙂 You can choose left or right alignment and the form will stick to the bottom on mobile. This layout uses the...
This clean and modern blog page layout uses CSS Grid and flex for variable column widths and to keep posts the same height across screensizes, no matter how much your content length varies. It also makes use of the wonderful feature that is CSS Variables (custom properties), making it super easy to edit for your needs.
This is a free layout for Divi which changes the standard filterable portfolio module into a masonry layout, allowing you to display your portfolio items of varying sizes in a clean and responsive masonry layout.
This free Divi layout is great for agencies but could be modified for a number of industries. It features 11 fully styled sections with full page scroll effect you can disable if you choose. Use this free Divi layout to get your new site online in record time.
This free Divi layout uses the native Divi slider module with customised dot navigation to look like tabs. The content is much easier for your clients to update than tabs as the layout utilises all the standard fields you find in the slider module.
This free Divi layout provides 8 new shapes for your native Divi blurb module icons. All shapes are created using CSS alone so no need to upload background images, simply use the built in icons and the CSS from the layout to display the shape you want.
This free Divi layout uses the native Divi fullwidth slider and blurb modules in a very unique way. Completely restyling and repositioning the slider dot navigation so it sits over the blurb module and changes opacity when the relevant slide is active.
This free Divi CSS snippets swipe file contains a ton of custom CSS snippets for Divi, Woo and WordPress in general as well as fixes for some annoying little Divi quirks. Simply copy the snippet you want and paste it into your child theme stylesheet.
This free Divi PHP snippets swipe file contains a ton of custom functions for Divi, Woo and WordPress in general. Simply copy the function you want and paste it into your child theme functions.php file.
This free Divi layout uses the native Divi blog module and custom CSS to display posts in a unique alternating layout of two different sizes, with gradient overlay and excerpt reveal on hover.
This free Divi layout is great for a one page site for coaches and consultants but could be modified for almost any industry. Featuring 9 custom sections, it is clean and professional and will allow you to get your site up and running in record time.
This free Divi resource restyles the default main menu to a customised non-Divi look. It includes both customiser and theme options .json files to import, with all the CSS and and JS automatically added to your theme options dashboard.
This free Divi layout uses the native Divi post slider module, customised to display the post info across half of the image, with vertical navigation and a two tone colour effect on both the navigation and the section background.
This free Divi layout includes a custom header.php file to add to your child theme, along with a library layout and CSS to hide the default header and style and show your new header across all your sites’ pages and posts.
This free Divi resource includes custom archive.php and search.php files to add to your child theme, along with some extra snippets to get your archive and search results pages looking much better. This resource can be used in conjunction with the free Custom Single Post Layout to create a completely unified design across your archive pages.
This free Divi layout uses the native Divi blurb and button module to create an equal height layout with overlapping icon, hover effect and bottom aligned button no matter the length of the content.
This free Divi layout uses the native Divi Blog module and the date element to create a verticle, alternating timeline of your blog posts with excerpt reveal on hover.
This free Divi layout was created to elegantly display restaurant menus. Developed using the native Divi text modules, it’s easy to edit and add more content.
This free Divi layout uses the native Divi blog module with horizontal individual posts using the published date element to show a vertical timeline with colour change on hover.
This free Divi layout uses the native Divi post slider module, modified to show the excerpt on the right and the dot navigation on the left and rotated.
This free Divi resource consists of a single.php file to add to your child theme along with some additional code snippets. Together these add an author box, post navigation and related posts section to your single posts as well as styling for the sidebar.
This free Divi layout uses the native Divi image and text modules with absolute positioning to show or hide text or swap the image for another on hover.
This free Divi layout uses the native Divi tabs module along with library layouts containing blog modules displaying different categories to show a filterable module similar to what you see in the Extra theme.
This free Divi layout uses the native Divi optin module to create a slim optin form with icons next to the name and email fields.
This free Divi layout uses the native Divi gallery module and the title and excerpt of the image from the media library to show a split effect when hovering over the gallery images.
This free Divi layout uses the native Divi fullwidth header module but with some cool modifications to animate each of the text and button elements so they slide in individually on page load.
This free Divi layout is great as an alternative to the standard Divi blog grid. It showcases your blog images in a fullwidth grid layout with no gutters, whilst still allowing the user to view the excerpt on hover.
Two Tone Post Slider Module Free Divi Layout. This free Divi layout uses the native Divi post slider module, customised to display the post info across half of the image, with vertical navigation and a two tone colour effect on both the navigation and the section...
Slim Optin Form Layout for the native Divi Optin Module Download this layout from the Divi Soupies Facebook Group Import into a new page (not the library), copy the CSS between the style tags in the fullwidth code module to your child theme stylesheet and...
Diagonal Parallax Page Layout Scroll down for instructions ↓ DIAGONAL PARALLAX 1. Download the layout from the files section of the Divi Soupies Facebook Group 2. Import into a new page (not the library) DIAGONAL PARALLAX 3. Copy the CSS between the tags (not the tags...
Image Caption Hover Layout for Divi – Divi Soupies Groupies Exclusive
Vertical Tabs Demo You can download this layout from the files section of the Divi Soupies Facebook Group if you are a member. On downloading the file, import it into a new page (not the library) copy the CSS from the code module to your stylesheet and then delete the...
Blurb & Pricing Module Ribbons Download the ZIP file, unzip and import the .json file into a new page (not the library), then add the CSS to your child theme stylesheet, Divi theme options custom CSS box or the page specific CSS box. [sdm_download id="26346" fancy="0"...
Bottom Aligned Buttons Demo Unzip and import the layout into a page (not the library). All CSS is in the modules' Custom CSS tab. Column 1 Vestibulum ac diam sit amet quam vehicula elementum sed...
Diamond Images Section Layout Image Title Image Title Image Title Image Title Image Title Image Title Image Title Image Title Image Title Image...
Team Section Layout Download & unzip. Open a new page and import the .json file. Open the CSS file and copy the contents to your child theme stylesheet, Divi theme options custom CSS box or the page custom CSS box. Enjoy! Our...