The Divi Kitchen
Welcome to the Divi Kitchen! This is where I cook up all my Divi recipes to help you develop quicker, smarter and better. Most of the time what I create is based on requests or questions from the Divi Community, but sometimes you may find some completely impractical effects just for the fun of it. Enjoy x
Latest Tutorials
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...
read more
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...
read more
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...
read moreRecipes
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...
read more
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.
read more
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.
read more
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).
read more
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!
read more
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.
read more
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...
read more
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...
read more
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.
read moreFreebies
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.
read more
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.
read more
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.
read more
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.
read moreLike us on Facebook
