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.
This is actually three sections, designed for use with the theme builder. You need to scroll to see the effect of this one. The menu is aligned to the bottom of the screen, and sticks and changes colour when it gets to the top.
Design brands for clients? Why not show off your beautiful creations right inside Divi. You can use this layout to present to clients, or on project pages to showcase a design portfolio.
Learn how to create Divi Child Themes that sellDivi child theme course - Reloaded!
- Use your existing industry knowledge to define and harness your niche
- Productise your business with affordable website solutions for clients
- Add a new revenue stream to your business that pays while you sleep