> ## 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). # Advanced tab in Editor # Getting Started The **Advanced tab** in the editor lets you make changes to any **section**, **container, row,** **column or element** and almost anything in your **website builder**. This article will cover **everything** inside the Advanced tab. Here are the **main options** inside an **Advanced** tab: 1. Fonts and Typography 2. FlexItem Styling 3. Animation on scroll 4. HTML Selectors 5. Hover Transition 6. Visibility and Position 7. Custom Style --- # 1. Fonts and Typography From here, you can change the font family and set its weight. ⬇️ The **GIF** below demonstrates what all the options do: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-34_1fuv4o0.gif) --- # 2. FlexItem Styling You can set an element’s alignment styling here using these options `Align Self` , `Order` & `Flex Grow` . ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1hvtr00.png) 1️⃣ **Align Self**: Through this you can align any specific content according to your preference. **Refer to the GIF below:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-30_xhzlr2.gif) 2️⃣ **Order**: If you have multiple element inside a container you can set the order of specific element using it. **Refer to the GIF below**: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-31_6rg3st.gif) 3️⃣ **Flex Grow**: It determines how a element(flex items) grow relative to each other to fill available space. A higher value means more growth compared to other items. It basically need when we have multiple element inside a container. **Refer to the GIF below:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-31_1cgoxjz.gif) --- # 3. Animation on Scroll You can use various animation types on any element, row, or column. There are various animation types for you to choose from, from setting a delay, duration, offset, and many more settings. ⬇️ The **GIFs** below demonstrate what all the options do: ![How to set Animation On Scroll?](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-31_1kywyie.gif) ![Animation Preview](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-31_xnjvg6.gif) --- # 4. HTML Selector The **HTML Selector** option lets you add an HTML ID and a Data Attribute to any row, column, section, or element. Let us see the breakdown below. 1. HTML ID 2. HTML Class 3. Data Attribute ## HTML ID This option allows you to assign an **HTML ID** to any **section**, **container**, **column**, **row**, or **element**. This is handy when you want a link or button to take your visitor to a section on your website. **Below are the steps demonstrating how to use an HTML ID to link a button to a section.** * Let us say we want to link this button… ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1l03dg3.png) * …to this section on our website ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_127p17z.png) * Write down the HTML ID on this section ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-32_6azffi.gif) * Go back to the button, change the button link type to section & write down the HTML ID ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-32_11k0j8h.gif) * Publish your site and visit to check how it works ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-32_1wivbhm.gif) | ⚠️ Only one HTML ID can only be used for one element, section, row, or column --- ## HTML Class This option allows you to assign an **HTML Class** to any **section, container, column, row, or element**. Adding a class option provides more control if you want to customize the default layouts. For example, adding custom CSS or JavaScript targeting the class element is handy. * Click on the Sectoin, Column, Row or Element where you want to add the class * Then go to the **Advanced** Tab, and Choose **HTML SELECTORS** ![HTML SELECTORS](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/screen-shot-2025-08-05-at-2475_1yayqp7.png) * Type you class name on the **HTML Class** field, and then hit **Enter** to add the class name. You can add multiple class names on a single field. ![Add Class Name](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_12t4j9y.png) * Once you have added a class name, simply **Publish** the website. That class name will be available in the website **HTML Markup**. ![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/image_12ax7c4.png) | ⚠️ You can add up to 5 class names. Avoid using reserved prefixes like: col-, close-btn-, dorik-code, ant-, dorik-container --- ## Data Attribute Data Attribute is used in adding Custom CSS, and one Data Attribute can be used for multiple elements, sections, rows, and columns. **Below are the steps for adding data attributes to an element ⬇️** * Add a data attribute as shown in the GIF & picture below- ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-32_14ewc68.gif) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_6azr0u.png) * Copy the data attribute and go to 🔧 **Page Settings** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1nor5i7.png) * Go to `Header Code` from the `Advanced` tab and write down your code ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1engtv0.png) * View the changes after you publish your site. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_ab79vb.png) --- # 5. Hover Transition When you activate a hover effect on any element, row, column, or section, the Hover Transition option lets you set the duration of the hover effect. **This is what the setting looks like:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_85otmh.png) --- # 6. Visibility and Position In this option, you can change the visibility of any section, row, column, or element on any device. You can also change the position of these objects using Overflow X and Overflow Y. **Let us take a look:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_1u9jxmj.png) ## Hiding any item on different devices: Refer to the **GIF** as we test out how to **hide an element** on **different devices** ⬇️ ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-30-at-33_4260gx.gif) --- # 7. Custom Style You can add a custom code to your site to make any customization according to your preferences. You can add: * General CSS * ‘Before’ CSS * ‘After’ CSS ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_dbzkxh.png) | 💡 The custom CSS option applies only to the specific section, container, or element you select. You cannot reference other elements within it. --- --- ## Related Articles [How to update SEO Meta?](/en/article/how-to-update-seo-meta-2f38w0/) [Save as Symbol](/en/article/save-as-symbol-j03ucw/)