Global Style
Global Styles Basics
Getting Started Global Styles lets you set default styles and parameters for your entire site. The features in Global Styles enhance users’ control over site aesthetics and layouts. With this feature, a user can:- Set the default background color Set Body/Paragraph typographies Change the heading typography Tune the container width and default column gap Set link colors Finding the Global Style feature Click on the Global Styles optSome readersFonts | Global Styles
Getting Started You can use various kinds of fonts on your website. There are mainly three types of fonts that you can use: Google Fonts, Custom Fonts, and Typekit Fonts. You will find the option to set or upload your fonts by going to Global StylesFonts Finding the Fonts Option To find the feature, click on the Global Styles option from left panel of the site dashboard, then navigate to Fonts. Follow the steps in the Screenshot & GIF below: (https://storaFew readersGlobal Colors | Global Styles
Getting Started Global Styles lets you set Global or primary Colors for your entire site. The features in Global Styles enhance users’ control over site colors and easiness. How to find Global Color option? Go to the Global Styles option in the left panel of the site dashboard, then select Colors from the Global Styles modal. How to add Global Colors? You can add SoliFew readers
CMS
Category template
Getting Started This article will show you how to add and stylize the Category Page on your CMS Site. Category templates are useful if you want your visitors to easily find the topics they are looking for. For example, if a visitor is looking for your latest blogs, they can visit the category template page and find what they are looking for. Category Template You can customize the preview page for each blog post category in the Category Template section of the CMS webFew readersPost template
Getting Started To view and edit your blog posts from your website builder, post template is used. Here you can preview and edit your blog post. Learn more in the article. Post Template You can customize a blog post preview page on the Post Template page of the CMS website builder. To find the Post Template option: 1️⃣ Clicking on Pages(📄) on the left-hand panel of the website dasFew readersPost Pagination Settings
Getting Started Post pagination settings let you select the number of Blog posts in a particular section. You can set the number of posts that will load or appear initially when a person visits that section on your site. You can add a Load More button or make your posts slide horizontally. Post Pagination Settings 💡 In your CMS Row, you can set the number of items you want to display using the Items Per Page option from the pagination settings, as shown in the pictureFew readers
Classic
This section contains no articles.
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 lPopularSection, 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/helpdSome readersResponsive Settings
Getting Started Responsive refers to the modern web design approach that allows websites and pages to render (or display) on all devices and screen sizes by automatically adapting to the screen based on its content. Whether it’s a desktop, laptop, tablet, or smartphone, the arrangement will be stable and standard. On your builder, every component is almost automatically responsive, yet you can adjust or change them according to your preference on different devices. Adjusting ResponsivSome readersAdd Custom Code
Getting Started This article will cover how you can add custom code to your website. You can add HTML, CSS, and Javascript to your website in the form of a Header or Footer code. Follow the information provided in the sections to understand how to use Custom Code on your website. Adding Custom Code on a Page Follow the steps below to use Custom Code on a particular page on your website. Go to Page Settings Click on the Advanced tab Start adding ySome readersUpdate favicon and social media image
Updating Favicon and Social Media Image To update your site’s favicon and how it will look on any social media from your builder, follow the steps given below: Go to Site Settings Expand the Favicon and Social Media Image option Update your preferred settings Click on Publish Below are the above steps visualized ⬇️ Go to Site Settings Expand the FaviconFew readersVersion History
Getting Started Version History helps you access previous versions of your web pages by manually or automatically saving page versions. This article covers how you can access and use version control on your website builder; follow all given instructions accordingly. Accessing Version History To access and start using Version Control, follow the steps written below: Log in to your website Click on the Pages(📄) on the left panel of your site dashboard. You wiFew readersSave as Collection
Getting Started Saving as a collection allows a user to copy any section, container, row, column, or element and use it on the same website or multiple others under the same account. This article will describe how saving a collection works in more detail. How to Save as a Collection To save a Section, Row, Column, or Element as a Collection, follow the steps given below: Hover over the edit tab on any element, container, row, column, or section on your website Right-click on itFew readersNavigator
Getting Started The navigation tree on your website builder allows you to quickly navigate to any specific Section, Container, Row, Column, or Element on your web page. This also helps you keep track of the structure and keep count of the existing items on your webpage Using Navigator To use the Navigation Tree, follow the steps below: On your website builder, move your cursor to the left panel and click on the Navigator option below Global Styles. (https://storage.crisp.chaFew readersPages
Getting Started The Pages option on your builder lets you make changes to your existing pages, hover and view those pages, and add new pages. In this article, you will learn how to use these settings for your website. How to add a new page To add a new page to your website, follow the steps given below: Once you are in your site dashboard, click on 📑 Pages from the left panel. After clicking Pages, a sidebar will appear To add a new page, press + icon labelled asFew readersHow to Change a Site Name
Getting Started This article will guide you through the process of changing the name of your site. Follow all steps accordingly. Changing Site Name To change a website name, follow the steps given below: Login to Dorik Dashboard. From the Sites tab, scroll down to the site to which you want to edit the name. (https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc009110Few readersAdvanced 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: Fonts and Typography FlexItem Styling Animation on scroll HTML Selectors Hover Transition Visibility and Position Custom Style 1. Fonts and Typography FromFew readersSave as Symbol
Getting Started Saving an element, row, column, container, or section on your website as a Symbol allows you to use that same item on other pages of the same website. This article will cover the steps and how Saving as a Symbol works on your CMS Site. Saving and Unlinking as a Symbol To save something as a Symbol on your site, follow the steps below: Hover over the edit tab on any element, row, column, container, or section on your website Right-click on itFew readersSave, Preview, and Publish
Getting Started Saving, Previewing, and Publishing are three features with separate functionalities. Saving lets you save your work in progress without publishing it to the site. Preview takes you to your website and lets you view it externally. Save, Preview, and Publish When you are on the builder, always remember to save your work. To save and publish your website, you should press the Save and Publish buttons, respectively.Few readersSite Settings
Getting Started This article guides you on changing the default site settings, including language, favicon, analytics, payment and chatbot platform integration, SEO, adding custom code, and more. Site Settings Site Settings is where you can change the following settings: General Integrations Advanced The Images below show the whole process being demonstrated visually ⬇️ 1. General Site Language: Set the site Language and direction here. Favicon & SocFew readersPage Settings
Getting Started In this article, you will learn about where you will get the Page Settings and its edit options. Page settings here is where you will find the Page Settings option — Go to your website builder. Click on Wrench(🔧) icon labeled as Page settings from the top left corner of your site dashboard. Refer to the Image below — Page Settings Editor Modal PaFew readersHow to update SEO Meta?
Getting Started This article will cover how you can update the SEO meta of your webpage. This feature falls under the Page Meta tab under the Page Settings option. Refer to the link below to learn more about Page Settings: Page Settings Update SEO Meta To update your webpage’s SEO meta from your builder, refer to the steps below: Click on the Wrench(🔧) icon labeled as Page Settings on the top nav of your site dashboard.Few readersEmpty Block on Builder
Getting Started The empty block feature enhances a user’s site building experience. If a user has an element with no content in it, the section will appear as an empty block on the builder. This helps a user keep track and plan out the site building process. This article will cover how this works and list the elements on which the empty blocks will appear. How it works An empty block appears when an element does not have any content. It will not appear if you publish your site, it will onFew readersAdding New Rows and Columns inside a Section
Getting Started You can add new rows and columns inside a section of your website to achieve the website design you are looking for. This article will cover how you can add new rows and columns inside a section of your website. Add New Columns inside any section You can add a new column inside a section of your website by clicking on the + icon over the existing column; here is what it looks like: (https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image1rnuxhc.pnFew readersChanging page language | Page Settings
Getting Started In this article, you will learn how to change Page language under Page settings. To know the process, follow the instructions below. Page Settings Page Settings let you set important things that your page can have. To learn the details about page settings, refer to the article below — ↗️ Page Settings Change your page language ➡️ Go to Page Settings (🔧) from the top nav of your site dashboard ➡️ From theFew readersHow to update Social Media meta?
Getting Started This article will cover how you can update the Social media meta of your website. This feature falls under the Page Meta tab under the Page Settings option. Refer to the link below to learn more about Page Settings: Page Settings Updating Social Media Meta To update your social media meta from your builder, refer to the steps below: Go to Page Settings(🔧) Click on the Page Meta tab Expand the Social MeFew readersChanging Site language
Getting Started This article will feature all the steps required for you to change a site’s language. Follow the steps in this article accordingly to use this setting. What is Site Settings? To know about Site Settings features, refer to the documentation below: ↗️ Site Settings Changing Site Language Follow the steps given below to change your site’s language: Go to Site Settings(⚙️) from the left panel of the site dashboardFew readersStyles tab in Editor
Getting Started You will find the Styles tab in almost every setting in your builder. This article will cover all the settings inside the Styles tab. Here is the list of settings you will find inside the styles tab: Margin and Padding Border Radius/Rounded Corner Box Shadow Transform Margin and Padding The margin and padding option let you change and tinker with the margin and padding of any row, section, column, or element. Here is what it looks like: (https://storage.criFew readersAdvanced Gradient Color Picker
Getting Started You can add custom gradients on the background of any section, row, or column of your website. The default gradient color picker lets you choose two colors, while the Advanced Gradient Color picker lets you choose multiple colors and use various types of gradients. This article will cover how to add and use an Advanced Gradient Color picker with an example. How to use Advanced Gradient To use the Advanced Gradient color picker, follow the steps listed below: From your CFew readersSave Page as Draft
Getting Started Saving a page as a draft can help you catch up with your work progress. Your page will not be published which means the draft content on that page will not be publicly visible, but you can access it anytime in your CMS to resume your work. This article will cover the process of saving a page as a draft on your CMS site. Save Page as Draft To save your page as a draft, follow the steps listed below: Login to your CMS site Dashboard Click on the Pages(📄) menu onFew readersNested CMS Row with Column
Getting Started You can add nested CMS Row inside any CMS Row with Columns on your website. This article covers how this can be done with steps and examples. Adding a Nested CMS Row and Populating it To add a nested CMS Row, refer to the steps listed below: In your website builder, add a new CMS Row with Columns Connect to a Database (Post or Custom Collection) Add a new element and populate it with Data from Posts or Custom Collections. Click on the + icon on the element, anFew readersResponsive Column Stacking
Getting Started This article will cover how you can enable responsive column stacking on a row and also adjust the column sizes on different devices. Follow all the instructions given in the sections below. How to use Responsive Column Stacking Follow the steps below to use responsive column stacking on a row: Click on any row and press Edit In the Row/Container option, enable the Reverse Column Stacking (Responsive) setting. Refer to the GIF below to know how toFew readersSidebar and Modal Editor
Getting Started This article will cover the aspects of two types of editors in your builder. Follow all the instructions and steps in this article to learn more about using Sidebar and Modal Editor. Sidebar Editor When you click on any component to Edit it, the sidebar will come up; if not, then the Modal editor will come up. You can shift from Modal to Sidebar through the following steps: Refer to the GIF below to see how to switch from Modal to Sidebar ⬇️ (https://storaFew readersLoad More and Next Prev buttons
Getting Started Load More and Next Previous buttons are used to navigate or load more items in a section in your website where you showcase CMS items after populating them into any element. This article will cover the topic in detail. ‘Load More’ and ‘Next Previous’ Buttons Add Load More button 1️⃣ Load More: To add this button, select the Load More option from Button Type.Few readersBuilder device types
Getting Started The Builder has three device types. You can preview what your site would look like on these devices as you click on them and make changes accordingly for each device type. Builder Device Types Desktop Size : 100%, default container: 1140px Tab Size : 768px to 1024px Mobile Size : 420px Related articles Hide Components/Elements on DiffFew readersMedia Library
Getting Started This guide will help you start using the Media Library, where you store all your site's images and videos. Learn how to upload files or generate images with AI to easily manage and add media to your website. How to access the Media Library? Click on the Media Library icon in the left panel of the site dashboard. A modal will open, as shown below 👇🏼 (https://storFew readersNested Page (Sub Page)
Getting Started Nested pages, like subpages, help you organize your website pages neatly. It makes easier for people to add pages under another webpage. Learn how to use them in our this article for a website. How to Find the Nested Page Option? Go to Pages (📄) on the left panel of your site dashboard. Hover over the webpages and click the three dots next to the pageFew readers