Oleksii Aleksieiev

Webflow Expert

I am an experienced Webflow developer with hands-on experience since 2011. My specialization includes website development on Webflow platform, as well as design transfer from Figma. During my work I have accumulated more than 10,000 hours of experience in creating websites of different complexity. Thanks to this experience, I easily integrate various services and provide customized CMS solutions of any complexity. Let's create an awesome website together!

Dynamic Content in Rich Text

Dynamic Content in Rich Text

A simple solution to dynamically replace text placeholders with content from other elements on your page (works perfectly with CMS or Rich Text).

Copy the Script and Paste it into the <head> of your page

To enable the dynamic content replacement functionality, copy the script below and paste it into the <head> section of your HTML or just before the closing </body> tag:

<!-- [Dynamic Content in Rich Text] -->
<script src="https://cdn.jsdelivr.net/gh/AdirDiz/SA-static@main/static-mini.js"></script>

Apply Attributes to Elements on Your Page

To use this functionality, you'll need to apply the sa-static attribute to the elements you want to dynamically replace. You'll also need to include text placeholders in your content (like CMS content, rich text fields, etc.) with matching markers.

Required for minimal customization

sa-static = item-1- These are the items that will be moved when a suitable placeholder is found in the text.

Example:

[sa-item-1] - These are placeholders such as [sa-item-1], [sa-item-2].... that will be replaced with the appropriate items in your HTML.‍

Example:

How It Works

The script works in the following way:

  1. It scans the page for elements with the sa-static attribute and stores them in memory.
  2. It then looks for placeholders like [sa-...] in the text of elements (e.g., <p> tags) on the page.
  3. If a matching sa-static element is found, it replaces the placeholder with the corresponding element from the page.
  4. If no matching sa-static element is found, the placeholder remains unchanged in the text.

You can add as many sa-static elements as needed, and placeholders in the text will be replaced accordingly.

If no matching [sa-...] element is found on the page, an element with the attribute sa-static = “none” that has no pair will not be displayed.

Conclusion

This setup allows you to easily manage dynamic content replacement in rich text fields on your website. Just add the script, apply the sa-static attribute to your elements, and use placeholders like [sa-...] in your text. The script will automatically handle the replacement, making it ideal for CMS systems, rich text fields, or any other content areas on your site.