Minimalistic Blog GridAdvent Calendar - Day 8
Subscribe to our email list to download a Divi gift every day from 1st – 25th December.
Click the button below and you’ll find the link to subscribe in the post for this gift.
Today I am going to show you how to replace the Divi search button with an icon in the search module in such a way that if you later decide you want to use the button instead, you can just activate it in the module without having to change any of the CSS
Anchor links are used to navigate to specific content on a page rather than simply between pages themselves, and mastering anchor links in Divi is actually very simple. In this tutorial, I’m going to show you three ways to use anchor links.
The Divi Gallery module allows you to display image titles and captions when using the grid layout, but not when using the slider. There is a very simple way to grab your titles and display them over your images while still allowing the lightbox feature to function. In this tutorial I’m going to show you how.
Want a responsive Divi post carousel without fighting to customise the post slider module or using a plugin? Here is a free downloadable template.
Each section in this long form sales page is clearly defined using colours and the built in section divider options. The template also uses the same script font I use on my own site design, which will import along with the layout. All the design is in the sections, rows and modules, with only a tiny bit of custom CSS!
This layout uses the native Divi slider module on the right, a few text modules and a button module on the left, and some custom CSS. You can have as many or as few images in the slider as you like, the controllers will adjust to fit the width automagically.
Today’s gift can be imported into a Theme Builder layout to act as a fullscreen sticky menu that slides down from the top. The design is easily editable, you can change it up however you want. All the styling is in the modules, it’s the functionality that’s the important part with this layout ?
Slick.js is my preferred method for any type of slider. It’s so versatile you can slide just about anything, but today I used it to create a nice simple multi-image gallery slider. You can adjust the number of slides shown, whether it auto plays, and how fast is moves from within the jQuery. The arrows and dots are styled with some simple CSS.
Divi has great built in hover functionality, but one thing you can’t do is affect the items NOT being hovered. Using the gallery item parent container and the :not pseudo element, I’ve faded out the non-active images and displayed the image title so the focus is on the image being hovered.
I saw a question in a Divi Facebook group about this type of pricing table design and thought it would make a nice advent gift. I took it one step further and created a toggle using jQuery, so you can show different tables at the flick of a switch.
This minimal blog layout uses both CSS Grid & Flexbox to layout the posts, plus background gradients and an image scale effect on hover.
This Divi payment progress bar is made up of two sections consisting of three blurb modules, so you can edit the text easily if you wish. There is some jQuery which will dynamically change colours on the order confirmation page, and also remove the section if the basket is empty.