What Is Divider Element?
The Divider Element of Dotcom lets you create a neat UI where it is easy for visitors to distinguish between different sections, groups, or parts. Divider acts as a division that separates two different sections of content. This helps users from navigating to the section they are looking for.
Steps to use the Divider element on Dotcom
- Go to the Dotcom dashboard and select the page you want to insert the Divider element.
- Drag and drop the Divider element to the preferred location from the Elements tab.
- On hovering over the dropped element, you can edit three sections:
- Divider Element
- Container Row
- Container Column
1. How to customize the Divider element on Dotcom?
- Click the Edit icon to start customizing your Divider element.
- The Customization panel loads on the right side of the screen. It contains three tabs:
- Content
- Style
- Advanced
How to edit the content of the Divider element on Dotcom?
- Choose the style as Solid, Dashed, or Dotted from the dropdown menu.
- Adjust the Width of the Divider using the range slider. Choose the screen type as Desktop, Tablet, and mobile followed by choosing a unit - px, %, em, or rem. Set the value using the range slider. Repeat this for the other screen types.
- Now, let’s adjust the Alignment. Select the screen type as desktop, tablet, or mobile from the dropdown and adjust the Alignment to left-aligned, center-aligned, or right-aligned for each screen type.
How to customize the style of the Divider element on Dotcom?
- Adjust the Color of the divider. Click the Globe icon to choose from the Global Colors. If you want to use any other color, click on the color box and pick a color of your choice from the color picker tool.
- Next, adjust the Divider Weight using the range slider.
- Alter the Gap of the divider for different screens - Desktop, Tablet, and Mobile. Choose a screen type and adjust the gap using the range slider.
- The next step is to customize the Advanced section.
2. How to edit the Divider container column on Dotcom?
- Hover over the added Divider element and click on the edit icon for the container column. The Customization panel loads on the right side. It contains three tabs:
- Content
- Style
- Advanced
- You can make the necessary customizations through these three sections.
3. How to edit the Divider container row on Dotcom?
- Click Edit on the container row. The Customization panel loads on the right side with three tabs.
- Content
- Style
- Advanced
- Alter each section to build a personalized visual for the container row.
Along with the above configurations, you can also make general customizations.
That ends our tutorial on how to use the Divider element on Dotcom.
If you have any queries or concerns, we suggest reaching out to our implementation specialist or contacting our support team for further assistance.
To check the pricing plans for Dotcom, we encourage you to visit our pricing page, where you can explore the different options available. If you would like to discover the complete range of features and benefits offered by Dotcom, we invite you to schedule a demo with our team.