Why Choose Us Check Marks
August 13, 2024
- When customizing the "Why Choose Us" section for certain templates / PBNs, it's important to replace the default frog icon with a check mark.
Why Use Check Marks?
Check marks are clear and easily recognizable, even at smaller sizes. In contrast, non-check mark icons can be difficult to identify due to their reduced size, which may lead to confusion for users.
How to Select the Right Check Mark
- Open the List Icons Widget: Navigate to the Content tab.
- Choose Icon: Select the "Choose Icon" option.
- Search: Enter "check mark" (without quotes) in the search bar.
You'll find a wide variety of check marks available. Here's how to select the best one:
- Opt for Simplicity: Choose check marks that are straightforward and easily identifiable. This includes simple check marks or those contained within a circle, shield, starburst, square, or similar shapes.
- Avoid Complex Icons: Steer clear of check marks that are overly complicated or integrated into other elements, such as a clipboard, home, car, or tool (like a wrench). These can be harder to recognize.
Keep It Varied
When updating a site that features the "Why Choose Us" section, it's essential to vary the check marks used. Avoid using the same check mark repeatedly—mix it up to keep the design fresh and engaging.
By following these guidelines, you'll ensure that the "Why Choose Us" section is both visually appealing and user-friendly, helping to clearly communicate the key motivating factors to our client's audience.
Acceptable
etc.
Unacceptable
etc.
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.