Numerical Indexing for Repeated Fields in the Divi Machine Repeater Module

Easy

CSS

Machine

Details

Elevate the organization of your Divi Machine grids with our practical CSS snippet that introduces numerical indexing to each item. This ingenious piece of code automatically numbers your grid items, enhancing the readability and navigability of your content. Perfect for galleries, listings, or any repeated group of fields, the snippet ensures your users can follow along effortlessly. Implement this feature to maintain a sleek and professional appearance on your Divi-powered website, making your content not only more accessible but also more engaging. With this addition, keeping track of items in a dynamic grid layout becomes a breeze, providing a polished look and feel for your Divi Machine elements.

Snippets Demo

Code

1

Description:
This code will display numbers for each increment of a repeater group of fields in Divi Machine.

NOTE: Depending on the structure of your loop layout, you might need to make some changes. This snippet is for a layout or section layout in your Divi library. If you have a row for example, remove .et_pb_section from the selector.

Language: CSS

Where to add: Divi Theme Options

                        /* Set a counter to keep track of the grid items */
.grid-posts {
  counter-reset: dmach-item-counter;
}

/* Target the first child row of the grid item within .grid-posts to display the counter before it */
.grid-posts > .dmach-grid-item > .et_pb_section > .et_pb_row:nth-child(1)::before {
  /* Increment the counter for each grid item */
  counter-increment: dmach-item-counter;
  /* Display the counter number */
  content: counter(dmach-item-counter) "";
  /* Position the counter at the top left of the grid item */
  position: absolute;
  left: 10px; /* If you want this on the right, change it here */
  top: 10px;
  /* Style the counter with a background, size, and center the text */
  background-color: #fff4e1; /* Light orange background */
  width: 40px; /* Width of the circle */
  height: 40px; /* Height of the circle */
  /* Flexbox properties to center the content */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Make the counter a rounded circle */
  border-radius: 100px;
}

Related Snippets

Easy | CSS

How to Align the Search Button in Divi Engine Filter: A Simple CSS Snippet

Aug 27 2024

Machine BodyCommerce Ajax Filter

Easy | CSSJavascript

Implementing a Lightbox for ACF Images in Your WordPress Site

Jul 10 2024

Machine

Easy | CSS

Change the Google Map Cluster Icon in Divi Machine Multi-Pin Maps

Mar 19 2024

Machine

Easy | CSS

Make Your Divi Ajax Filter Sticky on Mobile Devices

Feb 21 2024

Machine BodyCommerce Ajax Filter

Intermediate | CSS

Reverse Loop Layout Columns

Jan 22 2024

Machine

Explore more from Divi Engine

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Find out more

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Find out more

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Find out more

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Find out more

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active