Follow us

Divi Tutorials: Divi Soup Recipe and Tutorial Repository | Divi Soup

Cook Book

The cook book is a quick reference for all Divi Soup recipes, quick snacks and free layouts. Think of it like a website glossary.

Recipes

R44: An Overview of Divi 3.18 and WordPress 5.0

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...

R42: How to Add Shape Dividers to Any Row, Column or Module

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.

R41: How to Create a Scrolling Module Carousel in Divi

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...

R40: How to Make a Call to Action Bar for Mobile Devices

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...

R38: How to Show a Default and Hamburger Menu at the Same Time

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.

R33: How to use CSS Grid in Divi

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!

R28: How to Create an Animated App Showcase

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.

R26: How to use the tabs module for content navigation

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.

R13: How to use CSS3 filters to create captivating images

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.

R12: Alternating Left and Right Aligned Fullwidth Slider

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.

R10: Five Subtle Menu Hover Effects

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.

R9: Accordion Image Slider Menu

Recipe #9 is a cool accordion image slider menu you can use to link to galleries, portfolios, projects or even blog categories.

R7: Four Linkable Image Hover Effects

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.

R6: Custom Blurb Module

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.

R3: Six Column Blurb Style Layout

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).

R2: Boxed Testimonial Slider

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.

R1 – Super Slim Bloom Optin Form

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.

Quick Snacks

Q21: Change the Read More Text and Other Elements in Divi

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...

Q20: Rearrange Navigation Items with Flex

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.

Q19: Replace the Divi Search Button with an Icon

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.

Q15: Make your submenus visible for longer

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...

Q14: How to Style Specific Sections of Text

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...

Q13: Change the Divi Active Menu Item Colour

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.

Q12: Move the Divi Slide-In Menu to the Left

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.

Q11: Colour Code the Category Widget

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.

Q10: Create a Transparent Bloom Optin

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.

Q9: Center Align the Icons in the Social Media Follow Module

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.

Q2: Adding Custom Fonts with CSS

Recently quite a few people have been having issues adding custom fonts with css to their Divi website instead of using a plugin.

Entrées

E5: 3 Ways to use Anchor Links in Divi

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.

E4: Remove Horizontal Scrollbars in Divi

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!

E3: Style a Single Divi Menu item

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.

Free Layouts

F31: Gradient Snakeline Timeline Infographic

Gradient Snakeline Timeline Infographic Free Divi Layout I've often seen this type of layout and also Divi users asking for it so I thought I would have a play around. As it turns out, it was pretty simple using Divi's gradient background settings on rows, with some...

F29: Hybrid Scroll Layout

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...

F28: Fixed Slide-In Contact Form

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...

F27: CSS Grid Blog Layout

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.

F26: Masonry Filterable Portfolio Layout

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.

F25: One Page Agency 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.

F24: Elegant Blog Page Layout

This free Divi layout includes beautiful and elegant custom styling for your website’s blog page and sidebar. Using the native Divi modules, custom CSS and JavaScript to style and reposition elements, this layout will give your blog a truly unique look.

F23: Space Saving Slider That Works Like Tabs

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.

F22: Eight New Shapes for Your Blurb Icons

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.

F21: Combined Slider & Blurbs with Navigation

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.

F20: All Our Favourite CSS Snippets Swipe File

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.

F19: All Our Favourite PHP Snippets Swipe File

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.

F17: One Page Coaching & Consulting Layout

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.

F15: Two Tone Post Slider Module

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.

F14: Custom Header with Font Awesome Icons

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.

F13: Archive & Search Results Page Styling

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.

F12: Pixel Perfect Blurb Modules

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.

F10: Responsive Restaurant Menu Layout

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.

F9: Vertical Timeline Blog Module

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.

F8: Custom Post Slider Module

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.

F7: Custom Single Post Layout

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.

F5: Filterable Blog Module

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.

F1: Excerpt Reveal on Hover Fullwidth Blog Grid

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.

F15: Two Tone Post Slider Module

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

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

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...

Vertical Tabs Layout

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

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 Layout

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 Image Section Layout

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

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...

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest