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:

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.

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.




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.

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.

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.

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.

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.

Add New Element

This option displays all available elements with layout and allows you to drag and drop them onto your site.

Component Library

Here, you can access saved collections, symbols, and pre-built sections to easily incorporate them anywhere on your site.

Pages

Here, you'll find all your website's pages. You can add pages manually or with AI, and customize them as needed.

Global Styles

This option lets you set Global styles, colors, and fonts for your website.

Navigation

This option displays all the section layers of the current page of your site.

Media Library

Here, you'll find all the images and videos used on your site, whether generated, uploaded, or sourced elsewhere.

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.

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.

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.

Documentation

By clicking it, you will be redirected to the Dorik helpdesk.

Back to Dashboard

By clicking this, you will be redirected to your Dorik dashboard.

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.

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:




Clicking on Regenerate Content allows you to modify the content of an entire section. Refer to the GIF below:

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:

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.

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:

Related Article

Container

Updated on: 19/02/2024