Sections → Icons / Logos
May 2, 2024
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.
Rules and Guidelines
Following these rules and guidelines will make sure your images show up right and look the same on every page of your website.
Content Settings:
- Leave the title, description, and button fields blank and hidden.
- Apply appropriate Alt Text to each image.
Image Settings (apply to each image):
- Position should be set to middle/center.
Notes:
- Signing the Digital Content Release Agreement is not required for clients to incorporate their provided logos or retrieve logos from their current website.
- Should the client submit a low-quality brand logo, consider consulting our Resource Library for alternative options featuring higher quality.
- Logos may appear cropped/clipped within the widget but will display correctly on the webpage.
- Toggle the "Enable links on gallery images" option if you need to link images.
- Only activate the Zoom hover effect when there's a link attached.
- Avoid tightly cropped images to prevent clipping during the zoom hover effect.
- Maintain consistent sizing and cropping for images, leaving 15-20px of whitespace on all sides.
- When dealing with logos of varying sizes and dimensions (portrait, landscape, square), it's advisable to standardize their presentation for consistency. To achieve this, create a square white canvas and position each logo in the center. This method ensures that all logos are displayed uniformly across your website. Repeat this process for each logo to maintain a cohesive and professional appearance.
- If a client asks to add a logo but doesn't provide one, first, check our resource library. If it's not there, you can create and use a text-based logo. Just put it on a square white canvas and center it.
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.