One of the elements of the page designer are the Rows. Rows can include one or multiple columns inside. They can be placed inside sections and can contain modules inside each column. To design them according to your preferences, select the settings icon on the top left of the row.
Include a URL in the row that will open once the visitor clicks anywhere inside the row area. You can also decide if the link opens in a new window or the same tab.
Pick the background color for the row. You can choose different colors for each of its columns, in case there is more than one.
It’s also possible to select a different background color to appear when you hover over the row.
Change the label of the row in the page designer to make it easy to identify for yourself, or possibly other users who will be editing your page or layout.
Choose whether you want your column to be aligned along the left margin, the center or the right one.
You can make the row fullwidth by sliding the first option to Yes. If you prefer, you may also pick the custom width option and define it for the row.
You can also define the gutter width, to adjust the space between each column of the row.
If you include different modules inside the columns of the row, you might also want to equalize the column heights, by enabling the last option.
Define the number of pixels for margins and padding of the row. You also have the option to input different values for the desktop, tablet, and phone views.
If you leave these fields blank, the default options will be applied.
For the borders, you can round the corners of the row. If you click on the link icon in the middle, all four corners are adjusted to the same value at once.
It’s also possible to assign different styles to each edge of the border and also to adjust the borders’ width, color, and style.
If you would like your row to have a shadow, pick one of the available options and adjust the shadow position, color, blur, and spread. You can also choose from some of the preconfigured shadow options as a starting point for your design.
Have fun changing all the colors applied to the row, by adjusting the hue, saturation, brightness, and contrast. You can also play with the invert option, sepia, opacity, and blur options.
Finally, the Blend Mode lets you modify how the element blends with the layers beneath it. Notice that the row background is considered a lower level compared to the contents of your row, so you may choose how your row blends with the background image or color you chose for it.
If you prefer a little bit of movement, select one animation style and customize features like the speed and delay.
There is a whole guide on the Page Designer Advanced Settings, where you can learn more about how to use this tab in detail.
CSS ID & Classes
Choose an external CSS page to apply to the row.
Include custom CSS to any part of the row.
Disable the visibility of the element on the phone, tablet or desktop.
Customize the transitions when you hover over a module.