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...
R43: How to Highlight Active Links on Scroll and Click for One Page Divi Websites
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...
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...
R39: How to Set a Custom Tab Order in the Divi Filterable Portfolio Module
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.
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.
R37: How to Show the Gallery Image Title and Caption on Hover
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).
R36: How to Control the Divi Header and Slider Height and Content Position
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.
R35: How I Created the Divi Soup Redesign Boxed Layout
Today’s recipe is the result of MANY questions asking how I created the boxed layout on the redesign of Divi Soup.
R34: How to use CSS Grid with Divi’s Feed Modules
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.
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!
R32: How to add Social Sharing to the Divi Blog Module
R31: How to create a Random Header Image using the Divi Gallery Module
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.
R30: How to create a Hidden Slide In Section using the Divi Toggle Module
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.
R29: How to add the Author Avatar to your Divi Blog
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.
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.
R27: How to Change Columns and Image Sizes in the Filterable Portfolio
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
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.
R25: How to create a 2, 3 or 4 column square blog layout
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.
R24: How to add a transparent image overlay to a background video in Divi
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
R23: How to Create a Scrolling Image Carousel in Divi
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!
R22: How to Add Links to the Divi Gallery Module and Show Captions on Hover
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.
R21: How to add the Ken Burns Effect to the Divi Fullwidth Header
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 🙂
R20: How to Create a Fullwidth Alternating Blog Layout
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.
R19: How to Create a Sticky Button in Divi
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
R18: How to Change the Excerpt Length of Divi Blog Posts
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.
R17: How to Create a Large Thumbnail Style Blog Layout
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.
R16: How to Create a Letterbox Style Blog Layout
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!
R15: How to Create a Pinterest Style Blog Layout
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.
R14: How to Create Slim Horizontal Submenus
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.
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.
R11: Four More Linkable Image Hover Effects
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!
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.
R8: Aligning The Fullwidth Slider Text Left or Right
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.
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.
R5: Equalising the tabs in the tabs module
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.
R4: Fullwidth Header with Changing Words
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.
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.
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.
Q18: Floating Publish Button in Divi without a Plugin
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.
Q17: Limit the Excerpt Length in Divi with CSS
Let’s bypass all the complex coding and use a purely CSS way to limit your excerpts in the Divi blog module!
Q16: Two Line Toggles and Buttons in Divi
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.
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.
Q8: Vertically center any content in Divi
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.
Q7: Make The Logo Bigger on Mobiles & Tablets
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.
Q6: Centering the Centered Inline Logo
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.
Q5: Adding Subtitles to the Primary Menu
In this quick snack I am going to show you how to easily add subtitles to the primary menu in Divi
Q4: Faking the Boxed Layout with Fullwidth Menu
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!
Q3: Making The Specialty Section Fullwidth
Here is a another Quick snack for you, making the specialty section fullwidth. I love the specialty section and think it is really underused.
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.
Q1: Styling the Back to Top Button
Here is the first of the Divi Soup Quick Snacks – Styling the back to top button and including an image.
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.
E2: Open Divi Menu Links in a New Tab
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.
E1: Top 10 Free Plugins I Install on Every Divi Site
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.
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.
F18: One Half and Two Quarter Alternating Blog Layout
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.
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.
F16: A Better Divi Main Menu
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.
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.
F11: Alternating Vertical Timeline Blog Module
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.
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.
F6: Three Easy to Edit Image Hover Effects
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.
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.
F4: Slim Divi Optin with Field Icons
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.
F3: Gallery Title & Caption Split Reveal on Hover
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.
F2: Fullscreen Split Hero Section with Animated Content
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.
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...
Image Caption Hover
Image Caption Hover Layout for Divi – Divi Soupies Groupies Exclusive
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...