Articles on: CMS

Populating elements with CMS content

Getting Started



You can populate elements in the website builder; for example, elements like Image, Title, Tabs, and Button can be populated with CMS post contents. This article will show you the step by procedures on how you can populate different elements using CMS Contents.


Adding Dynamic Content on an Image element



After connecting to your CMS post database, you will see empty sections in your webpage like the one in the picture below ⬇️




⬇️ Click on Add Element and then select the Image element




⬇️ You can add the Banner/Thumbnail image of your CMS post after clicking on Add CMS Fields





💡 The Alt Text option will only work when no images are added as the post’s Thumbnail or Banner Image.

Adding Dynamic Text on Heading/Title Element



⬇️ Click on Add Element and select Heading/Title





⬇️ Upon clicking the Add CMS Fields button, you will have the option to add all these items shown under the red square in the picture above




Adding Dynamic Content on the Tab element



⬇️ Add the Tab element to your CMSRow





⬇️ Refer to the list below and the numbers on the picture




Add CMS Fields: To add CMS Fields, click on this button. You can add multiple things, as you can see on the list.
Post Title: Add your post title to the Tab element.
Text field: Your CMS Field will appear in double curly braces like this on the text editor; in this case, it is {{title}}


💡 The CMS Field will appear like this (with double curly braces_ on the builder, but if you visit your published website, it will show the content.


💡 You can also add different CMS Contents on multiple tabs; refer to the video below




Adding CMS Fields on the Button element



Select the Regular Button element from the Element library to add it to your CMS Row.




⬇️ You can add CMS Fields and display them over the Button element.




⬇️ For example, the CMS Field Post Title was added to the Button element.





Adding CMS Fields on the Custom Code element



Select the Custom Code element from the Element library to add it to your CMS Row.




⬇️ You can add CMS Fields and display them over the Custom Code element.





⬇️ For example, the CMS Field Post Title was added to the Custom Code element.






Related articles




Difference between Classic & CMS

Populating elements with CMS content

Updated on: 19/06/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!