This Divi Machine code snippet introduces a dynamic way to reverse the column order in loop layouts at specified intervals. This allows for flexible column arrangement changes in the Divi Machine Archive Loop module using simple CSS. Ideal for enhancing your website’s layout with a touch of creativity.
Description:
This CSS will reverse the columns. Just add the class .de-reverse-columns to the row that contains your Archive Loop module.
Language: CSS
Where to add: Divi Theme Options
/* Divi Engine Reverse Every nth Loop Columns in Divi Machine */
.de-reverse-columns .divi-filter-archive-loop .dmach-grid-item:nth-child(2n) .et_pb_row { /* This will reverse every 2nd loop, change 2n to 3n for every 3rd loop etc */
display: flex; /* Sets column layout to flex */
flex-direction: row-reverse; /* This reverses the columns */
}
Description:
If you have margin added to your columns that are uneven, this code will reverse that uneven margin also.
Language: CSS
Where to add: Divi Code Module
/* If you are using columns that have margins, we need to reverse these too */
.de-reverse-columns .divi-filter-archive-loop .dmach-grid-item:nth-child(2n) .et_pb_row .et_pb_column:nth-child(1) {
margin-right: 0 !important;
}
.de-reverse-columns .divi-filter-archive-loop .dmach-grid-item:nth-child(2n) .et_pb_row .et_pb_column:last-child {
margin-right: 5.5% !important;
}
Easy | CSS
Aug 27 2024
Easy | CSSJavascript
Jul 10 2024
Easy | CSS
Feb 29 2024
Easy | CSS
Feb 21 2024
From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.
Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.
A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.
Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.
Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active
Filter WooCommerce, Posts & Custom Posts without reloading the page.
Divi Mobile helps you create beautiful looking mobile menus without having to code.
Give your Divi website that extra boost of speed with our Divi Nitro plugin to enhance your customer's experience.
Password protect the content of your Divi website with our Divi Protect plugin. Keep unwanted eyes out!
Improve the user experience of your Divi website with our Divi Mega Menu plugin by creating dynamic menus using the Divi Builder.
