Dividers and Spacers
Last updated
Was this helpful?
Last updated
Was this helpful?
Dividers and spacers serve similar purposes in design: they create breaks between different elements. However, their functionalities differ, and so does the control you have over them in the sidebar. Depending on your design needs, you might opt for one over the other. Here's a breakdown:
The Divider content block inserts a physical line into your design, segmenting different parts visually.
Transparency Option: If you prefer no visible line, simply toggle on the Transparent option.
Line Settings: Customize the line's appearance using sidebar settings for line style (solid, dotted, dashed), height, and color.
Width and Alignment: You can set the width as a percentage of the container column and align the divider to the left, center, or right.
Padding: Padding options are available, just like with other content blocks. Note that maximum padding on any side is 60px.
Spacers are essentially transparent dividers, creating an empty space rather than a visible line.
Height Control: The only sidebar option for a Spacer is its height, offering granular control over the amount of blank space in your design.
In summary, Dividers offer more customization options and visual cues, whereas Spacers are simpler and focus solely on creating empty space. Choose based on what fits your design goals best.
This section outlines and describes the accessibility keys currently available for navigating the Dividers and Spaces content blocks. In this section, you'll learn about which keys to use to set your focus, customize properties, exit your design, and save your changes.
We are still working on developing our application's accessibility, and you may notice that some actions aren't available yet. Additional accessibility features are coming soon.
Take the following steps to set your focus:
Locate the Block: Navigate through the builder using ArrowUp or ArrowDown to locate either the Divider or Spacer block in the sidebar. A high-contrast border will appear, indicating that the block is in focus.
Activate the Block: Press Enter to select the highlighted block. This action, however, does not insert the block but rather prepares it for property modification through the sidebar.
Take the following steps to customize your properties:
Adjusting Settings: With the block selected, use Tab to navigate through the sidebar properties. To navigate the properties in reverse order, use Shift + Tab. The Divider block allows adjustments for transparency, line style (solid, dotted, dashed), height, width, alignment, and color. Spacers, in contrast, offer only height adjustment as their main customization feature.
Setting Width and Alignment for Dividers: For Dividers, you can set the width as a percentage of the container column and choose to align the divider to the left, center, or right using sidebar controls.
Applying Padding: Both blocks permit padding adjustments up to 60px on any side, providing flexibility in spacing within your designs.
Use the following key to exit and save your changes.
Use Esc to deselect the block and save changes. This will return focus to the general navigation within the builder.
