> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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 ⬇️

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_c3qhzg.png)


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

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_10n4thn.png)


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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_175bj70.png)


|| 💡 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**


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_18hfjq7.png)



⬇️ 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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1glv7j3.png)


---


# Adding Dynamic Content on the Tab element

⬇️ Add the **Tab** element to your CMSRow


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1k2qo4o.png)


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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_11a9wun.png)


1. **Add CMS Fields**: To add CMS Fields, click on this button. You can add multiple things, as you can see on the list.
2. **Post Title**: Add your post title to the Tab element.
3. **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**


${youtube}[Populating elements with CMS content](viNCIsEhLuc)

---


# Adding CMS Fields on the Button element

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

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1qoalq2.png)


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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_mno94k.png)


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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_r4sqdg.png)

---

# Adding CMS Fields on the Custom Code element

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

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1xcz0l6.png)




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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2023-06-04-at-11_1dci1za.gif)


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


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-1-a8ac6afa40_v3cqyx.gif)

---

---

# Related articles


[Difference between Classic & CMS](/en/article/difference-between-classic-cms-qoxnsz/)

[Populating elements with CMS content](/en/article/populating-elements-with-cms-content-11uco9w/)