Is there a way to add images to a numbered list in Webflow's CMS rich text block without restarting the numbering?

Published on
September 22, 2023

Yes, there is a way to add images to a numbered list in Webflow's CMS rich text block without restarting the numbering. You can achieve this by using a combination of custom code and CSS.

Here's the process to follow:

  1. Add a custom class to the rich text block: First, select the rich text block that contains the numbered list. In the "Settings" tab of the right sidebar, enter a unique class name in the "Class" field. For example, let's say you name it "custom-rich-text."

  2. Insert your numbered list with images: In the rich text editor, create your numbered list as usual. To add images, you can use the "Insert Image" or drag and drop images into the editor. It's crucial to make sure the images are placed between list items, not inside them.

  3. Add custom code to preserve numbering: Go to the page settings or the site settings (if it applies to all pages). In the "Custom Code" section, click on the "Head Code" tab and insert the following CSS code:

.custom-rich-text ol {  counter-reset: item;  list-style-type: none;}.custom-rich-text ol li::before {  content: counter(item) ".";  counter-increment: item;  display: inline-block;  padding-right: 10px;}.custom-rich-text ol li {  margin-bottom: 10px;}.custom-rich-text ol li img {  vertical-align: middle;  margin-right: 10px;}
  1. Publish your site: After adding the custom code, make sure to save and publish your site for the changes to take effect.

By following these steps, you can add images to a numbered list in Webflow's CMS rich text block without restarting the numbering. The custom code forces the numbering to continue correctly and adds suitable spacing between list items with images.

Additional Questions:

  1. How do I add images to a numbered list in Webflow's CMS rich text block?
  2. Can I customize the styling of a numbered list in Webflow's CMS rich text block?
  3. Is it possible to change the numbering style in a numbered list with images in Webflow's CMS rich text block?