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
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.
read more
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.
read more
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.
read moreRecipes
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.
read more
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.
read more
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.
read more
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!
read more
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.
read more
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.
read more
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.
read more
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.
read moreNo Results Found
The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.
Freebies
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.
read more
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.
read more
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.
read more
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.
read moreLike us on Facebook
