Global Style
Global Styles > Styles
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 Set global colors Add Google / Custom / Typekit fontsSome readersGlobal Styles
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. The Global Styles setting consists of the following tabs and options: 🖌️ Styles Tab: 🌐 Global Colors Tab: (https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitlFew readersGlobal Colors | Global Styles
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 Set global colors Add Google/Custom/Typekit fonts TheFew 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 find tFew 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 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 builder. 2️⃣ On thFew 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 CMSROW, 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 picture belowFew readers
Classic
This section contains no articles.
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/helpdSome 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 yFew readersVersion History
Version 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 Access Design and Pages under the Styles and SettingsFew readersHow to make a website Responsive in Dorik
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 ResponsivFew 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 readersNavigation Tree
Getting Started The navigation tree on your website builder allows you to quickly navigate to any specific Section, 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 Navigation Tree To use the Navigation Tree, follow the steps below: On your website builder, move your cursor to the left and click on the option below Site Settings A sidebar will appear displaying a tree-like structFew readersSave as Collection
Getting Started Saving as a collection allows a user to copy any section, 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, row, column, or section on your website Right-click on it Select 💾 Save as CFew readersMulti Slug in Regular Pages
Getting Started The Multi Slug feature allows you to put multi-part slug( eg: /en/regular-page-1 ) in your regular pages. This article covers how you can add multi-slug to your web pages. Add Multi-Slug to a Regular Page To add a multi-slug to a regular page, follow the steps listed below: From your CMS Dashboard, go to Design and Pages Click on the Pages option on the left-hand side of your builder Choose a page that you would like to add multi-slug into, or add a new pageFew 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, follow the steps in the GIF below: GoogleFew 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 readersSave as Symbol
Getting Started Saving an element, row, column, 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, or section on your website Right-click on it Select Save as SymbolFew 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: Click on Pages on the left-hand panel of your website builder Click on + Add New Page Start editing your page Follow the visual demonstration given below: ClickFew readersHow to update SEO meta
Update SEO Meta To update your webpage’s SEO meta from your builder, refer to the steps below: Go to Page Settings Click on the Page Meta tab Expand the SEO Meta option Update all preferred fields Click Publish Below is a visual demonstration of the whole process ⬇️ Go to Page Settings Click on the Page Meta tab and expand the SEO Meta option (https://storFew readersAdding Multiple Pages to your website
Getting Started This documentation will guide you through the steps to add multiple pages to your website using the Dorik website builder. Follow the steps below to learn about the details. How to add Multiple Pages to your website Follow all the steps below to learn how to add multiple pages to your site — Once you are in your website builder, click on 📑 Pages from the upper left corner After clicking Pages, a sidebar will appear To add a new page, press + AFew readersPage Settings
About Page Settings Page Settings consists of various tabs and options. Basic Tab: Adding Page Title Adding Page Description Change Page Language Adding or customizing Pop-Ups Page Meta: Social Media Meta SEO Meta Advanced: Page Access Header Code Footer Code Finding Page Settings Refer to the picture below to find the Page Settings option in your builder: (https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/untitlFew 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. ⚠️ Saving and Publishing are different features. OncFew readersAdvanced tab in Editor
Getting Started The Advanced tab in the editor lets you make changes to any row, column, section, 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 Animation on scroll HTML Selectors Hover Transition Visibility and Position Custom Style Fonts and Typography From here, you can change the font type and set its weight. ⬇Few readersSite Settings
About Site Settings Site Settings is from where you can change the following settings: Site Language Favicon and Social Media Image Integrations Analytics Header Code Footer Code Related articles: Changing Site language Update favicon and social media imageFew readersHow to update Social Media meta
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 Media Meta option Update or Fill all preferred fields Click Publish Below is a visual demonstration of the whole process ⬇️ Click on Page Settings Click on the Page Meta tab (https://storage.crispFew 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 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 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 in your CMS. Save Page as Draft To save your page as a draft, follow the steps listed below: Login to your CMS Dashboard Go to Design and Pages Click on the Pages menFew readersGlobal Link colors | Global Styles
Getting Started Global Styles lets you set default styles and parameters for your entire site. The features in Global Styles enhance user's 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 Set global colors Add Google / Custom / Typekit fontsFew 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 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. Changing Site Language Follow the steps given below to change your site’s language: Go to Site settings Expand the Site language setting under the General Tab Choose your preferred language Choose the direction of the language if required Click on Publish Below are the visual demonstration of the abovFew readersChanging page language | Page Settings
Getting Started Page Settings let you set important things that your page can have. Features like: Adding Page Title Adding Page Description Change Page Language Adding or customizing Pop-Ups and more! Change your page language ➡️ Go to Page Settings on your builder ➡️ Click on Page Language ➡️ Select your preferred language from the list. Refer to the video below for the demonstration (https://storage.crisp.chat/users/helpdesk/websiFew readersContainer and Column Settings | Global Styles
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 Set global colors Add Google / Custom / Typekit fontsFew 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 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 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 readersBuilder 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 lFew readers