Using the Page Designer

  1. Home
  2. Support
  3. Using the Page Designer
  4. Working With Rows Using The Page Designer

Working With Rows Using The Page Designer

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.

Link

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.

Background

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.

Admin Label

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.

Design Tab

Alignment

Choose whether you want your column to be aligned along the left margin, the center or the right one.

Sizing

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.

Spacing

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.

Border

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.

Box Shadow

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.

Filters

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.

Animation

If you prefer a little bit of movement, select one animation style and customize features like the speed and delay.

Advanced Tab

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.

Custom CSS

Include custom CSS to any part of the row.

Visibility

Disable the visibility of the element on the phone, tablet or desktop.

Transitions

Customize the transitions when you hover over a module.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?