Pixel Perfect

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.

Editor 2.0 gives you powerful tools to build and manage your website with more control, flexibility, and ease. Before you dive into editing, it helps to understand how the interface is structured and what each part of the editor does.

What to Know Before You Submit / Upload a Photo Images can make or break a small business website. Whether you’re a contractor, hairstylist, dentist, or restaurant owner, the photos you upload should build trust, highlight your work, and make your business look professional. Most business owners aren’t photographers. They're using iPhones or Androids, often snapping pictures during the workday. That’s fine — as long as you follow a few simple best practices. This guide covers what you need to know before you add images to your site, including: The right image sizes and formats for web What types of images help convert leads How to take better photos of your team and your work Tips for lighting, composition, naming, and consistency When to not use images at all The tips here work for any type of business — we’ve just included examples from home service contractors since they make up a large number of Hibu sites. Let’s get everything in frame.

Pixel vs. Percentage Units: Why They Matter in Responsive Web Design When you're building websites that need to work across all screen sizes—from wide desktop monitors to narrow mobile phones—how you size elements matters. At Hibu, we design for everyone. That means every element must display correctly on every device. If your content is misaligned, crammed, or floating awkwardly, users won’t stick around—and they won’t convert. One of the most important layout choices you’ll make is whether to use pixel or percentage units for sizing.

How to Use the Contrast Checker Text needs to be easy to read—on every device, for every visitor. At Hibu, we aim to make every website as easy to read as possible. The HWP Contrast Checker helps with that by showing whether your text color has enough contrast against the background. You’ll find it inside the color picker whenever you're selecting a text color.

Training Overview: Initial Build Setup vs. Editor 2.0 & Collection Site We're moving from the current initial build setup to a new approach with Editor 2.0 and the Collection Site . This transition is more than just switching editors—it changes how we structure content, manage data, and ensure consistency across sites.

Overview For these steps, assume you are building a residential general contractor website . You need to add stock images for the hero sections of the following pages: Homepage (general home-related image) Roofing page Siding page Gutter page Additionally, the hero images from all core pages (roofing, siding, gutters) will also be displayed as the homepage copy block image . These steps will guide you through finding, downloading, renaming, and uploading stock images to the website.

Ensuring all production teams follow a consistent method for determining countable pages on a client’s website is crucial. This standardization helps accurately manage workloads and turnaround times. It's important to distinguish this "page count" from the client's allotted page count, as some pages, while not counted against the client's limit, still require time and expertise to create.

Site Link Audit Tool

Guidelines for Using White and Black with Recent Colors When designing a site, it’s essential to make strategic use of theme colors for consistent, quick, and efficient design updates. To maximize the flexibility of your site's color palette, we recommend leveraging the locked Recent Colors pure white (#FFFFFF) and pure black (#000000) for foundational design elements, such as text, backgrounds, icons, and other structural components.

Discover how to boost engagement with two key website tools: callouts and coupons. Built with the Swiss Army Widget, these elements help you highlight key information and drive conversions through strategic promotions. Learn the essential differences and best practices for maximizing their impact on your site.

As digital marketing evolves, state privacy laws are becoming increasingly stringent. For businesses working with third-party marketing services, having an up-to-date, compliant privacy policy isn't just good practice—it's essential. Our streamlined process helps clients implement custom privacy policies that meet these requirements while maintaining their website's professional appearance.

A new pre-designed "Left Logo" header section is now available to make it easier to accommodate client requests for left-aligned logos. No need to start from scratch—this ready-made section ensures consistent, high-quality design for desktop views.

Hibu has developed a streamlined process for converting RevLocal microsites to Hibu one-page websites. Their guide covers essential steps including image management, color adaptation, content transfer, and quality assurance. This efficient approach maintains the client's brand identity while leveraging Hibu's platform strengths, ensuring a seamless transition for clients

We've added new forms to make your work easier, including enhanced contact forms and job application fields. Plus, we'll walk you through how to replace your old forms with the new ones in just a few steps.

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.

We're excited to announce a major improvement to our video splash widget. We've replaced the static PNG play icon with a versatile SVG icon. This simple change opens up a world of customization possibilities for your video splash. Why This Matters Flexible Design: Easily adapt the play icon's color, size, and even its overall style to seamlessly integrate with your website's look and feel. Crisp on Any Screen: SVGs are resolution-independent, meaning your play icon will look sharp and clear on everything from high-resolution displays to mobile devices. Brand Consistency: Make sure your video previews reinforce your brand identity by using a play icon that complements your other visual elements. Updating Your Widget: A Quick Guide If you're updating an existing video splash widget, you might encounter a broken link for the old play icon. Click Choose Icon and search for a new "play" icon. Choose an icon that is clear, recognizable, and conveys the action of "play." Remember , the primary goal of a play icon is to signal that your visitors can click to start a video. Choose an icon that's instantly recognizable. Avoid overly complex designs that might confuse your audience.

This post is part of our Website Update Wrap-Up series, showcasing a collection of recent small product and feature improvements.

As a website designer - which includes copy writers offshore designers, DPS , ensuring that a website is polished and professional before handing it off to QA or a client is crucial. Here's a comprehensive checklist to help make sure all essential elements are in place and functioning correctly:

Vibrant Gradients In 2024, vibrant gradients will be a major trend in website design. Gradients are color transitions where one color slowly changes into another. Think of a sunset where the sky shifts from orange to pink. They can make websites look more interesting and lively. Why are gradients so popular? Bright, bold colors are in style right now, and gradients use these colors in creative ways. They can make any website feel deeper and more dynamic. What's great about gradients is that they can fit any brand. You can mix and match colors to create endless combinations. Whether your brand is fun and energetic or elegant and sophisticated, there's a gradient that will work for you. So, if you want your website to look modern and stand out, try using vibrant gradients in your next design project. They can give your site a fresh and stylish look that grabs attention.

Blog Bio Page Build Instructions If Bio page already exists, use that and supplement or update content if necessary (ie - if length is short) If no Bio page exists, follow the steps below: Click on the Pages icon on the left hand side of the platform Click on arrow next to "About" to expand the menu items below Click on the gear icon next to "First Last" (this is the Bio page template) and select "Rename" Rename: Enter the owner's first and last name, along with any relevant titles or prefixes, using the title case format of site (ie - if other pages are all caps in nav, make owner's name all caps) Example - Dr. Regina Phalange, MD

Adding Third-Party Code to Your Website Adding third-party code to your website can enhance its functionality with features such as tracking, chat, and other customizations. This guide will walk you through the steps to safely and effectively add this code to your site without requiring any coding knowledge. Steps to Add Third-Party Code Before making any changes, it is a good idea to use the Site Backup Feature to create a backup of your current site. This ensures you can easily revert to the original version if something goes wrong. Adding code to the Header HTML Header HTML () or Body End HTML () In the left panel of your website editor, click on Settings . Select Head HTML from the options. There are two main sections where you can add the code: Body End HTML : This section is for adding custom HTML or JavaScript just before the closing tag of each page on your site. NOTE: Unless specifically instructed otherwise , all third-party code should be added to the Body End HTML section. This practice is recommended because: Improves Page Load Speed: The main content of the page loads first, enhancing the user experience. Reduces Rendering Delays: Ensures the page's content is visible sooner. Better Browser Performance: Avoids issues like flickering or layout shifts during the page load. Fewer Script Conflicts: Minimizes conflicts with other scripts or styles. NOTE: Don't be concerned if the code doesn't appear to work immediately after you add it. Often, the code will function only after you republish. Head HTML : This section is for adding content to the head section of your site. It's uncommon to add code to this section. Always add it to Body End first. If the code still doesn't work after republishing, then add it to Head HTML.  Once you've added the code, click Save . Adding Comment Tags When adding third-party code, it is helpful to include comment tags to indicate where the code starts and ends. This improves readability and makes future maintenance easier. An HTML comment tag consists of three components: Opening tag:3rd-party code Closing tag:Here’s how to do it: In Head HTML or Body End HTML add empty rows betweenand the code that immediately follows it. Enter(ex) On next line enter the code On next line enter(ex) NOTE: It it's necessary to add comment tags when adding code via the HTML Widget.

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: 

Why "Learn More" May Not Be Your Best Option Buttons play a crucial role in guiding users through a website, serving as key touch points for interaction and engagement. In the context of callout or copy block buttons, their purpose extends beyond mere navigation—they act as invitations to explore, discover, and take action. The button text must therefore be carefully crafted to align with the surrounding content and the user's expectations. “While "Learn More" is a common choice and often the most logical option when the copy block or call-out is specific to a product or service , it can sometimes fall short in providing the specific guidance and motivation needed to drive deeper engagement – especially for out or norm pages.” Here’s why "Learn More" may not always be the best option and what to consider instead: Menu Information: "View Menu" Contact Page: "Contact Us" Event Registration: "Register Now" Request a Free Estimate: "Request Now" Product Features: "Explore Features" Case Studies: "Read Case Study" Testimonials: "Read Testimonials" Career Opportunities: "View Job Openings" Blog Posts: "Read Article(s)" Special Offers: "View Offers/Specials/Discounts, etc" Membership Information: "Join Now" Course Enrollment: "Enroll Today" Demo Request : "Request Demo" Newsletter Signup: "Subscribe Now" Downloadable Content: "Download Guide" Project Gallery: "View Projects" Virtual Tour: "Take a Tour" FAQs: "Read FAQs" These alternatives are merely suggestions that can provide clearer, more specific calls to action, aligning better with the user's intentions and the context of the surrounding content. Implementing these suggestions can enhance both usability and engagement.

Overview The Before/After image widget allows you to present two images in a dynamic and interactive manner, using a customizable slider to seamlessly transition between the two. This can create a compelling visual comparison that engages users. Why You Might Not Want to Use the Before/After Image Widget: Mismatch in Image Quality or Angles: If the "Before" and "After" pictures were not taken from the same angle, or if there's a significant difference in lighting, quality, or resolution between the two images, the slider effect might emphasize these inconsistencies rather than the intended changes. Text Labels in Images: If the images already have "Before" and "After" labels or other text overlays, using a slider can create visual clutter and make it difficult for users to focus on the actual differences. If the images are well-matched and free of text, the designer is free to use the widget to create an engaging visual comparison.

Icon Widget Library The Icon Widget Library has been upgraded and now includes over 5 million icons! This means designers can find icons for virtually anything they think of, thus eliminating the need to search for and convert vector files into SVG format. If designers can't find the desired icon, they can upload their own icon SVG files and easily access and reuse these icons throughout the site-building process. Uploaded icons are categorized as either Site Icons or Free Icons, distinguishing between assets uploaded by users and those already available in the library. Icons typically come in two main styles: outlined or filled. Consistency is crucial, so designers should refrain from mixing outlined icons with filled-in ones. It's best to use only one style of icons throughout the entire site. If designers choose filled-in icons, they should make sure that template sections and widget default icons are adjusted accordingly to maintain consistency. Furthermore, designers are encouraged to replace template and widget placeholder icons with those that align with the vertical, callout, or offer. For example, using a coupon icon solely because it's a coupon may not be necessary—choose icons that best reflect the content or function they represent.

Tabs Widget The Tabs widget serves as a valuable tool for organizing and presenting content efficiently on websites. With Tabs, visitors can seamlessly navigate between different sections of related content by clicking on designated tabs, streamlining the browsing experience without the need for extensive scrolling. Tabs offer an elegant solution for showcasing various types of content such as Services, Plans, or Team members, presenting information in neatly organized sections while conserving space and maintaining a clean layout. While the product preference leans towards displaying content through copy blocks or unique rows for improved accessibility and SEO, there may be specific scenarios where the Tabs widget proves beneficial. In instances where clients insist on integrating a Tabs widget into their Hibu Site, a set of instructions, rules, guidelines, and considerations have been outlined to ensure its effective utilization.

Sections → Icons / Logos Many clients wish to display a row or grid of brand logos or accreditation / affiliation badges on their website. This guide will provide instructions and tips on how to integrate the hWP "icons-logos" section to achieve this. Begin by inserting the section into the preferred area on the page, usually positioned above the footer, following the usual procedure. You can find these sections conveniently located in the Sections→Brand Logos/Awards/Badges folder. Designers have the flexibility to replace the PBN logo row with any of the six pre-designed sections available. Furthermore, they have the liberty to customize background colors as per their preference.

Optimizing Logo Design When dealing with a transparent header where you have the freedom to incorporate a text-based logo, executing it with a white version for the main header and a colored version for internal pages is a fantastic strategy. This approach ensures consistency and enhances the visual appeal of your website. Similarly, if you happen to receive multiple versions of a logo, including one in all white, you can definitely apply the same principle. Utilize the white version for the transparent header to maintain a clean and elegant look, while employing the colored version for internal pages to inject vibrancy and personality into your design. By adopting this approach, you not only maintain a cohesive branding identity but also ensure flexibility and versatility in your website's visual presentation. It's a win-win solution that enhances both aesthetics and functionality, catering to the needs of both your design and branding requirements.

Elements to Bold for Enhanced Web Design Headlines that are two or three lines deep can create a tricky problem -- line breaks, or the place where one line ends and another begins. Avoid bad breaks caused by dangling verbs, adjectives or propositions. Review all heads and subheads and to make manual line "breaks for sense." Breaking for sense means breaking a line where one might logically pause when reading it aloud. When breaking for sense, strive to: Keep important phrases together Avoid hyphenations Break a line after punctuation Pair adjectives with their nouns Keep proper names together  Group color and typestyles together

When Too Much White Space is Too Much White space, often referred to as negative space, plays a crucial role in website design for several reasons. It's not just empty, unused space; it's a powerful element that helps to create a more refined and professional look. Here's why white space is beneficial: Clarity and Readability: White space makes content more legible by reducing visual clutter. This helps users to focus on the text, making it easier to read and understand. Think of it as giving your content room to breathe, which in turn makes the visitor's experience more pleasant. Attention and Focus: By strategically using white space around important elements such as call-to-action buttons or key messages, you can guide the viewer's attention to those areas. This selective use of space can significantly improve the effectiveness of your website's communication. Overall Aesthetic: A clean and uncluttered layout conveys a sense of professionalism and elegance. Websites that effectively utilize white space often appear more thoughtful and deliberate in their design, which reflects positively on the brand's image. However, like all good things, too much white space can have its drawbacks. Overuse of white space might: Create a Disconnect: Excessive space between elements can disrupt the flow of information, making it harder for users to navigate the site or understand how elements relate to each other. Appear Unfinished: An overly sparse design might give the impression that the website is incomplete or lacking in content, which can undermine the trust and confidence of visitors. Reduce Engagement: If users have to scroll excessively or can't easily find what they're looking for due to the vastness of the layout, they may become frustrated and leave the site. The key is finding a balance. Effective web design uses white space to enhance usability and aesthetics without compromising the site's functionality or the user's experience. A seasoned designer knows how to strike this balance, creating spaces that are both beautiful and functional.

Text Span Width on Desktop For optimal readability on desktop screens, it's generally recommended that the maximum width text should span is about 60 to 75 characters per line, including spaces and punctuation. This guideline is rooted in typographic research, which suggests that lines of this length are most comfortable for the human eye to follow without straining. When translated into web design terms, this typically equates to a width of around 900 pixels, depending on the font size and typeface used. To effortlessly alter the width of your text on the screen, you can adjust the text container directly . Just click on the text box and drag the handle at the bottom right corner to modify the width. As you make adjustments, keep an eye on the height and width indicators. Aim for a width of approximately 900 pixels, though a variation of plus or minus 10 pixels is perfectly fine. This method offers a simple way to ensure your text spans an optimal width for readability.