This week's design tip is about the use of the "Full Bleed Row" toggle when designing your sections in Duda. While turning this option "on" is a preferable formatting choice for most of our standard content, there are definitely times when NOT using it yields superior results. Examples of these situations include sections with extremely brief text and those with a vertically aligned photo.

Using the "Full Bleed Row" option causes section elements to stretch across the screen, which reduces negative space and "stretches" out text and images. With very little text and/or a vertical image added to this equation, the chances of the focal point of the image becoming distorted or hidden are very high. This is something you want to AVOID, so toggling "off" the "Full Bleed Row" option could help to solve this issue, as it did with the example site below:

The banner section is one of the first things users see on a site, making it essential to get right from the start. A common mistake when building these sections is using vertical images instead of horizontal ones.

While vertical images may work well in other contexts, they tend to fall short in hero sections because they don’t fully utilize the horizontal space. This often leads to awkward cropping or obscuring of the image's focal point, disrupting the visual flow and balance of the design, as you can see in the example below.

To avoid this, consider using our image database when selecting photos for banner sections. These images are handpicked by your dev leads to ensure they’re the correct size and layout and free of any content issues, making the check-off process much smoother and more efficient for all!

ICONS! To integrate icons into a section, think of them as visual shortcuts that highlight key features of your client's business. Just like a gallery uses images to show off services, icons use simple, recognizable symbols to represent qualities.

Start by identifying 3-4 key traits that set your business apart. Then, pair each trait with a brief description and a matching icon to help visually communicate what makes your company unique. (NOTE: When choosing icons, try to choose ones that are similarly stylized for better cohesion.) There are various ways to design this section, so below, I’ve provided several examples to help you implement icons effectively on your site.

A huge thanks to the developers who helped with this week’s tip!