CMS-Driven Bullet List

A step-by-step guide on implementing CMS based bullet list in Webflow using a single rich-text field, with a script.

Script

Copy
// Function to extract and append list items
function extractAndAppendListItems() {
  const sourceDiv = document.querySelector('[list-script="source"]');
  const parentContainer = document.querySelector('[list-script="container"]');
  const itemTemplate = document.querySelector('[list-script="item"]');

  if (sourceDiv && parentContainer && itemTemplate) {
    sourceDiv.querySelectorAll("ol li").forEach((listItem, index) => {
      const newItem = itemTemplate.cloneNode(true);
      newItem.querySelector('[list-script="text"]').textContent =
        listItem.textContent;
      parentContainer.appendChild(newItem);

      // Add 'last' class to the last item
      if (index === sourceDiv.querySelectorAll("ol li").length - 1) {
        newItem.classList.add("last");
      }

      newItem.style.display = "flex";
    });
  }
}

// Call the function on page load
window.addEventListener("load", extractAndAppendListItems);

Documentation

Are you struggling with the limitations of Webflow when it comes to creating CMS-driven bullet points using a single field? Fret not! We've got you covered with a unique attribute-based script that allows you to add bullets with a custom design seamlessly. In this step-by-step guide, we'll walk you through the process, empowering you to enhance your website's content presentation effortlessly.

‍

Step 1: Set Up Your CMS Collection

Begin by creating a rich text field in a CMS collection. This is where you'll input and manage your bullet points. Once you've added your content, your work on the collection side is complete. It's as simple as that – you're done!

‍

‍

Step 2: Design Structure in Webflow

Now, let's delve into the design structure within Webflow. To achieve the desired result, you'll need to incorporate four essential elements.

‍

‍

1. Source Element:

  • Add a rich text field element to your design.
  • Connect it with the rich text field of your CMS.
  • Apply the attribute <span class="code">list-script="source"</span> to this element.
    ‍

2. Custom Bullet Design:

  • Craft a custom bullet design that aligns with your aesthetic preferences.
  • Attribute its parent with <span class="code">list-script="item"</span> to establish its role.
    ‍

3. Empty Div Block for Bullet List:

  • Generate an empty div block that will serve as the container for your custom CMS-based bullet list.
  • Assign the attribute <span class="code">list-script="container"</span> to this div block.
    ‍

4. Text Element Inside the Bullet:

  • Specify the text within the bullet point, which will be dynamically updated based on your CMS content.
  • Apply the attribute <span class="code">list-script="text"</span> to this text element.

‍

Step 3: Special Styling for the Last Bullet

If you wish to give a unique style to the last bullet, simply create a specific design by applying a combo class <span class="code">.last</span> to it. This signals the script to recognize and implement the designated style for the final bullet.

‍

Step 4: Publish

Congratulations, you're almost there! Hit publish, refresh your published page, and voilà – witness the magic unfold. Your CMS-driven bullet points with a custom design are now seamlessly integrated into your Webflow site.

‍

‍

In conclusion, this attribute-based script provides a workaround for the limitations in Webflow, offering you greater flexibility and control over your content presentation. Elevate your website's design and user experience with this simple yet effective solution. Happy designing!