Responsive Settings. How to create more flexible layouts with Row Breaks?

Compatibility:

WebSite X5 Pro

When creating a Responsive Website, you may need to adjust not only the order and visibility of the contents, but also the way Objects are arranged when the available space decreases.

With WebSite X5 Pro, in addition to defining the Object order and choosing which contents to show or hide, you can use Row Breaks to control the page layout more precisely at lower resolutions and decide where Objects should wrap onto a new row.

What are Row Breaks

A Row Break lets you force one or more Objects, or entire Object Blocks, to move onto a new row when the website switches to lower breakpoints.

In practice, it is a controlled “line break” that allows you to:

• improve readability;
• avoid overly compressed layouts;
• distribute contents more effectively;
• make the responsive structure more orderly;
• further customize the arrangement of elements.

Row Breaks are particularly useful when the automatically calculated arrangement does not produce the result you want.

Sections and Row Breaks: what is the difference?

Sections and Row Breaks may seem similar because both introduce a separation in the arrangement of contents, but they perform different functions.

Sections organize the structure of the Layout Grid. For example, they allow you to use a different number or width of columns in different parts of the Page.

Row Breaks, on the other hand, are part of the Responsive Settings and are used to define where Objects should wrap onto a new row in the subsequent Views. They do not change the basic structure of the Page.

#tip - For more information about Sections, see Page Sections. How do you create layouts with different structures?

How to set Row Breaks

To insert a Row Break:

1. Open the Responsive Settings

• Go to Step 4 - Pages.
• Open the desired page.
• Click the Responsive button to open the Responsive Settings window.

2. Select the starting View

Use the Responsive Bar to select the View you want to work on.

Remember that the Row Breaks you set do not change the currently selected View, but determine how the Objects will be arranged in the immediately following View.

3. Activate Row Break mode

• Click the Row Breaks button.
• Gray dashed lines appear in the Grid at the points where a new break can be inserted.

4. Insert or remove breaks

• Click a gray dashed line to insert a break: the line turns red.
• Click a red line again to remove it.

5. Confirm

• Click the Row Break button again to save and exit the mode.

You can repeat the operation in the subsequent Views, inserting new Row Breaks where necessary.

Image 1. The Grid in Row Break mode

How Row Breaks work across breakpoints

Row Breaks do not change the layout of the currently selected View, but determine how the Page should be reorganized in the immediately following View.

For example, if you insert a Row Break while the Desktop View is selected, the Desktop layout does not change: the effect will be visible in the following View.

In this process:

• the Object order remains unchanged;
• Objects set as hidden remain excluded;
• the Object arrangement is redefined according to the Row Breaks you inserted.

As you move toward lower resolutions, you can add new Row Breaks to adapt the layout further.

In the Smartphone View, there is no need to add any more: the Objects that remain visible are completely linearized and arranged one below the other according to the defined order.

Practical example

To better understand how it works, consider a Page where two Row Breaks have been inserted in the Desktop View: one before Object 3 and one after Object 7.

Image 2. Structure for the Desktop breakpoint

The Row Break symbol takes the defined ordering into account. In the example, this makes it possible to understand that Object 7 will be positioned above the Block formed by Objects 8, 9 and 10, because the ordering in that part of the Page proceeds from right to left.

Taking into account the defined ordering, the inserted Row Breaks, and the fact that Object 2 has been hidden, the Page takes on this structure in the following View:

Image 3. Structure for the breakpoint following the Desktop breakpoint

Object 2 is no longer present, but this does not change the ordering of the other Objects. 

The Row Break forces Objects 3 and 4 to be arranged in row 2 of the Grid, allowing Object 1 to occupy row 1 completely. Without the Row Break, Objects 1, 3 and 4 would have remained side by side in row 1, each occupying 1/3 of the available width.

Similarly, the second Row Break causes Objects 8, 9 and 10 to no longer be part of a single Block and to be arranged on new rows below Object 7.

This way, you can change the layout without changing the logical order of the contents.

How Row Breaks behave on a Page with multiple Sections

If the Page is divided into multiple Sections, WebSite X5 manages responsive behavior separately for each of them.

Row Breaks therefore continue to be used to control how the Objects in a Section should be arranged in the subsequent Views.

They do not create, delete, or modify Sections: they only affect the responsive arrangement of the Objects.

Managing proportions

When an Object spans multiple columns, WebSite X5 automatically maintains its width proportion at the subsequent breakpoints as well.

For example, if an Object occupies 3 out of 4 columns in the Desktop View, it uses 75% of the available space on the Row.

When the arrangement changes in the next View, WebSite X5 keeps this proportion as far as possible, even if the other Objects are no longer positioned side by side in the same way.

This helps preserve a better balance in the arrangement of the contents while the layout adapts to the different resolutions.

Practical tips

To use Row Breaks effectively:

• insert them when you want to control exactly where Objects should wrap onto a new row;
• avoid adding them when the automatic arrangement already produces a good result;
• proceed from the Desktop View toward the narrower Views;
• always consider the combined effect of Row Breaks and Objects set as hidden;
• use Row Breaks to simplify the arrangement without unnecessarily fragmenting the layout;
• always check the result in the subsequent Views and in Preview.

In summary

Row Breaks are an advanced but very useful tool for fine-tuning the responsive behavior of pages.

With WebSite X5 Pro, you can visually manage even the more detailed aspects of content arrangement, improving structure, readability, and layout control without manually editing the code.

When used correctly, Row Breaks allow you to create more orderly, professional, and effective responsive pages on any device.