> ## 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). # Section, Container and Element # Getting Started **Sections** and **containers** are like the building blocks of a website, and **elements** are the main parts. This article will explain everything about sections, containers, and elements in simple terms. # Section Sections are the main base block of building anything. Sections contain all other containers and elements inside them. A section needs to be added first to make any design. **Here is how you can add a new section:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_6ujaa0.png) ## Add a section to a new page: If you create a new page on your site, you will see the option to add a new section automatically, **Here is what it should look like:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-21_1ldpcr0.gif) ## Add a section to a pre-built page If a page already has sections, here is how you can add a new section and container within it and customize it. **Refer to the GIF below:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-11_1xmp4yd.gif) ## Pre Designed Sections You can choose a vast range of pre-designed sections from the `Section Library` option to your page, from Navbars to contact forms, pricing lists, footers and other blocks. __Adding a Pre-Designed section:__ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/ezgif-3-de1ae15cf6_686vab.gif) ## Saving Sections 💾 You can save as many sections as you want on your website as a **Symbol** or **Collection** with a few small steps. Saving sections can keep you from reproducing the same section over and over; instead, you can use a saved all over your website. Follow the **GIFs** below to see the demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-11_9r3os4.gif) | ⚠️ Make sure you right-click on the section bar to open the options ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-11_364in5.gif) **To know more about Save as Symbol & Collection, refer to the doc below:** [Save as Symbol](/en/article/save-as-symbol-j03ucw/) [Save as Collection](/en/article/save-as-collection-1hdsfx1/) --- # Container Containers are resizable element holders that sit inside a section and root container to design any layout without breaking the layout. Multiple containers can be added inside a section in multiple lines. Containers come with a new section automatically. To learn how to add a new container and how it works, refer to the Picture and GIF below ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-12-at-21_im8j8s.gif) 🔷 **To know more details about Container, refer to the doc below:** [Container](/en/article/container-160w0k3/) | 💡 When you take a section, there comes a Root Container, which basically acts as a Row, and a Child Container inside it, which acts like a column. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_ucpftg.png) ### Adding an Empty Container When you add a new section, it includes a container by default. You can also add more containers within a container by clicking the plus button (➕). ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-11_172jlt9.gif) ### Adding an element within a container To add an element within a container, just click the plus button **(+)** inside the container. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-11_7fszf6.gif) ### Saving Containers 💾 You can save as many containers as you want on your website by saving them as a **Symbol** or **Collection**. Saving containers allows you to reuse them in different places on your site or on any other site. Follow the **GIFs** below to see the demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-12_nthk4p.gif) | ⚠️ Make sure you right-click on the container bar to open the options ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-12_4hy4dp.gif) --- # Elements There are various types of elements that you can add to an empty section or container on your website. Each element has its own use cases. There are four types of elements: - **General Elements** - **Layout** - **Airtable Elements** - **CMS Elements (**only works on CMS Row with Column**)** To learn **how to add an element to your website,** you may follow the steps below: ## Adding an Element - Click on the **Plus icon** **(+)** on an empty container on your website - Choose any element from the panel. - The selected element will appear on your website! You can refer to the **GIF below** for an example: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-10_79ep6y.gif) ## Drag and Drop Element You can easily drag and drop elements into a blank container or a container directly from the Element Library. ![In a blank container](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-13_m43ll1.gif) ![If the container has elements](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-11_1resthc.gif) ## Saving Elements 💾 Once you've customized an element, you can save it for reuse on different parts of your site or on other sites by saving it as a **Symbol** or **Collection**. Follow the **GIFs** below to see the demonstration: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-15_7p9h31.gif) | ⚠️ Make sure you right-click on the container bar to open the options ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-20-at-20_1kg57xx.gif) --- --- # Related articles [Container](/en/article/container-160w0k3/) [Ecwid Integration (E-Commerce)](/en/article/ecwid-integration-e-commerce-8cycz/)