> ## 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). # Builder Basic # Getting Started The Dorik website builder is your go-to toolkit for the perfect website presence. From AI capabilities to pre-built UI blocks, drag-and-drop functionality, diverse website elements, and seamless integrations, Dorik offers advanced tools for website customization without any hassle. --- # Builder Interface Within the site editor, there are three primary editorial models: the top navigation, the sidebar, and the main website interface. The main website interface is visible live and allows for design customization. **Refer to the screenshot below:** ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled_1eglyaa.png) ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-1_b38nvp.png) --- ## Top Nav This section includes options for Page settings, version history, regenerate page with AI option, responsive device settings, undo-redo functionality, save feature, as well as preview and publish site options. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-2_1r9ey9n.png) --- ### Page Settings, Version History, Regenerate Page On the left side of the Top Nav there have three options- Page Name & Settings, Version History, Regenerate Page & AI version history. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-3_m2ugxc.png) 1️⃣ **Page Name:** This shows the current page name you are editing. 2️⃣ **Page Settings:** This section allows you to configure fundamental page settings such as title, description, language, pop-up settings, meta settings, and custom code settings. 3️⃣ **Version History:** This feature automatically saves the version history of your site's pages, enabling you to review the saved history. Also, you have the option to manually save any version as needed. 4️⃣ **Regenerate Page:** This function allows you to regenerate the entire page using AI, using prompt instructions. 5️⃣ **AI Version History:** This section stores the versions generated by the AI for the page. --- ### Preview on Different Devices With this feature, you can see how your website will look on different devices like computers, tablets, and phones. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-4_14igvy3.png) --- ### Undo-Redo The Undo button lets you go back and undo changes for a little while. The Redo button lets you put those changes back. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-5_io5gnq.png) --- ### Preview, Save and Publish site `Preview`: By clicking the Preview button, you will view your website externally before publishing. `Save`: By clicking the Save button, you can save your work progress as a draft. `Publish`: By clicking the Publish button, you make the changes visible to the site visitors and make the site live. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-6_3r3ijo.png) --- ### Hamburger Button When you press the Hamburger icon on the top-right corner of your site dashboard, you will have the option to **Export Files, Import JSON, and Export as JSON**. `Export Files`: This option allows you to export your website's HTML, CSS, and JavaScript files together. `Import JSON`: This option allows you to import a JSON file to your existing site. `Export as JSON`: This option enables you to export your website's JSON file, which can be used for backup purposes or incorporated into another website. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-7_1xzzxof.png) --- ## Left Sidebar The left sidebar includes options for Add Elements, Components Library, Pages, Global Style, Navigation, Media Library, Site Settings, AI Quick Style, Language, Documentation, and Back to Dashboard option. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-8_1ia006r.png) --- ### Add New Element This option displays all available elements with layout and allows you to drag and drop them onto your site. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-9_1lczdap.png) --- ### Component Library Here, you can access saved collections, symbols, and pre-built sections to easily incorporate them anywhere on your site. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-10_53wcrj.png) --- ### Pages Here, you'll find all your website's pages. You can add pages manually or with AI, and customize them as needed. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-11_6fteng.png) --- ### Global Styles This option lets you set Global styles, colors, and fonts for your website. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/nnnn_1u6kqg4.png) --- ### Navigation This option displays all the section layers of the current page of your site. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-12_1fvw6za.png) --- ### Media Library Here, you'll find all the images and videos used on your site, whether generated, uploaded, or sourced elsewhere. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-13_16zc9ef.png) --- ### Site Settings This option enables you to configure the general settings of your website, perform necessary integrations, and add custom code to the header or footer. ![](https://storage.crisp.chat/users/helpdesk/website/-/c/f/1/f/cf1fc9cc00911000/untitled-design_7qbp95.png) --- ### AI Quick Style In this feature, AI suggests various color palettes and typography options for your site, which you can select with a click and preview the changes on your site. You can regenerate the color palette and typography from here. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-14_18sjhit.png) --- ### Language In this section, you can select the language for your builder interface. This choice does not affect your site's language; it only changes the language of the dashboard. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-15_12oq28y.png) --- ### Documentation By clicking it, you will be redirected to the Dorik helpdesk. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-16_1i06xl8.png) --- ### Back to Dashboard By clicking this, you will be redirected to your Dorik dashboard. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-18-at-15_11j8759.gif) --- ## Additional Customisation This is where you customize your site design. You can experiment with different designs and perform customizations here. ### Section Control Panel The Section control panel tooltip offers 5 features: **1️⃣ Drag and Move Section:** Use this icon to drag and drop any section to different positions on your site. **2️⃣ Edit Section Style:** Click this icon to open the section editor modal for style customization. **3️⃣ Delete Section:** Delete a section by clicking this icon. **4️⃣ Add New Section Below:** Add a section below the current one with this icon. **5️⃣ Regenerate Section/Content:** Click this icon to regenerate either the entire section or just its content using AI. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitled-17_akf0bb.png) --- ### Regenerate Section and Content You can regenerate or change an existing section by clicking and adding a prompt on the `Regenerate Section` option. **Refer to the GIF below**: ![Regenerate Section](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-18-at-23_bty1u3.gif) Clicking on `Regenerate Content` allows you to modify the content of an entire section. **Refer to the GIF below:** ![Regenerate Content](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-18-at-24_6d66w7.gif) --- ### How to edit an Element? When hovering over an element, you'll see its control panel tooltip. Clicking on the edit icon within this tooltip provides access to the editing options for that element. Refer to the GIF below for a visual guide: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-19-at-93_3u9cx0.gif) --- ### Editing Text Inline To edit a Text or Title element inline, simply select the text. This will bring up a control panel for inline text editing. Refer to the GIF below for a visual demonstration. ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-19-at-93_1pu5tyq.gif) --- ### Generate Images with AI To create images with AI, click the **Sparkle** icon in the Image editor. Describe your desired image, specify its size and style (real photo or illustration), then generate it. Insert the image directly into the element or save it to the library. Refer to the GIF below: ![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-02-19-at-93_1wxi5ob.gif) --- ## Related Article [Container](/en/article/container-160w0k3/)