Divider Widget: Dots, Dashes, Curves and More
June 7, 2024
Divider Widget
The Divider widget’s layout library has been reramped and it now includes 6 new and sleek design styles for you to choose from. Here they are:
Hibu designers are free to use the newly revamped Divider Widget -- even when the selected template design doesn't feature lines. Adding a divider can enhance a website's layout and readability when used appropriately. Here are some key points to consider:
When to Use a Divider
- Separating Sections: Use dividers to clearly distinguish between different sections of content, such as separating the header from the body or different topics within the body.
- Grouping Related Content: Dividers can help group related information together, making it easier for users to navigate and understand the content.
- Enhancing Visual Hierarchy: Dividers can be used to create a visual hierarchy, guiding the user's eye to the most important information first.
- Improving Readability: Adding a divider can break up dense text, making it more readable and less overwhelming for the user.
Dos and Don'ts
Dos:
- Keep It Subtle: Use thin lines and soft colors that complement the overall design without drawing too much attention.
- Consistent Style: Ensure the style of the divider matches the overall design theme of the website.
- Use Sparingly: Only use dividers where necessary to avoid cluttering the design.
- Responsive Design: Make sure dividers are responsive and look good on all screen sizes, including mobile devices.
Don'ts:
- Overuse: Avoid using too many dividers, as this can make the design look fragmented and disjointed.
- Bold and Overbearing Lines: Steer clear of thick or overly bold lines that dominate the design.
- Inconsistent Styles: Mixing different styles of dividers can make the design look unprofessional and chaotic.
- Ignoring Accessibility:
Ensure that dividers are accessible and do not hinder the readability or usability of the content for all users, including those with visual impairments.
By following these guidelines, designers can effectively use the Divider Widget to enhance their website designs, even in templates that do not originally feature lines.
In this section, you’ll learn how to control the size of elements using different types of units in Editor 2.0. We’ll break down how viewport width (vw) and height (vh) respond to the browser window, how the auto unit allows containers to resize based on their content, and how min/max values help you keep your elements within practical size limits. Together, these tools give you greater control over how your site adapts across devices—without relying on fixed pixel values.
Flexbox is the foundation for how columns behave in Editor 2.0. It controls how elements stack, align, and space themselves inside containers, giving you full control over layout across different screen sizes. By adjusting properties like stacking direction, content alignment, and wrap, you can create clean, organized designs that adapt smoothly to any device. These features help prevent layout issues, make better use of space, and simplify how you manage rows and individual elements. Learning how to use Flexbox effectively leads to faster builds and more consistent, responsive websites.
Understanding layout elements and the Layers Panel is key to building clean, responsive websites. Layout elements help you control structure—how widgets are grouped, how content stacks, and how different parts of the page respond across breakpoints. The Layers Panel gives you a clear view of that structure, making it easier to manage complex sections, find hidden elements, and keep your layout organized. Together, these tools let you build with more precision, troubleshoot faster, and maintain consistency across the entire site.
Breakpoints are specific screen widths where your website layout shifts to fit different devices, like phones, tablets, and desktops. They’re a key part of responsive design, allowing you to adjust styles so your site looks and works well on any screen. In the editor, you can see how styles behave at each breakpoint, apply universal styles, and override them when needed. You can also preview your site at different screen sizes to make sure everything looks right.