Unit 2: Creating and setting pages

2.3 Managing rows

Managing Rows

A row is a horizontal section on your page that has been prefilled with content. Inside a row you can have up to 12 columns for organizing your content. You can always add more content to the row, or rearrange and delete existing content.

In the Editor you can add various types of backgrounds and effects to a row as well as modify its general settings and functionality.

How do I modify a row

When working in the Editor, hover on the row you want to modify and the yellow Rowlabel will appear in the top right corner of the row. Hover over the label and a number of settings appear in the dropdown

1)-Create-a-new-page

Design

Background

A row background can have various elements added to it.

Background color: Add a single color as the row background. You can adjust the degree of transparency if you wish.

Background image: Add an image as the row background. You can choose whether you want to use your cover image from Global Data or upload a new one directly on the row. You can adjust how you want the image to repeat within the row, its size and positioning to make sure you find the best way of displaying the image to your visitors.

Apart from the standard image settings, you can also determine how the background image should behave within the row when a visitor scrolls down the page. If you enable Fixed position, the image won't move when a visitor scrolls down. With Parallax scrolling effect enabled, the image moves at a slower rate than the foreground when scrolling down, adding a touch of depth to your website.


Video Background

Enable video background and paste your video URL in the field. The video will play automatically when a visitor opens the page where the row is located.
The Editor supports the following video extensions and sources for row background videos: MP4, WEBM, OGG, YouTube and Vimeo.


Background Filter

Add a background filter on top of your row background color, image or video in order to dim down very colorful images or images with sharp contrasts. It's also a good way of making sure that any text you have on the row is easy for visitors to read. Remember you can also adjust the degree of transparency on your background filter.

See example below of a background with filter and the one with not

backgrounfd filter

If you're familiar with image editing software, you can also add a background image as a filter. Uploading transparent overlays created with an image editing software enables the creation of multi-colored or pixel pattern overlays that add vibrance and complexity to your image.

Below are a few examples of image overlays created in image editing software and uploaded to the Editor as a background filter image:

backgrounfd filter

Border

Add a border to the row and adjust the border style, color, thickness and radius.

Spacing

Adjust the margin (amount of space outside the row) and padding (amount of space between row content and the frame of the row). 

A more visual way of adjusting padding is to drag the bottom edge of the row to create space between it and the row below. Hover on the row and drag on the blue bar that appears at the bottom. 

row-drag

Container

A container is an area within the row with padding added on all sides. All row content is bound within this "frame". With a container, you can be sure that your content doesn't span the full width of the viewport which might otherwise have made it difficult for visitors to read or overview.

Rows in the Editor have a container added to them by default. You can make it span the entire width of the row by enabling the Full-width container setting. Additionally, you can set border radius and padding on the container.

Settings

General

Desktop column stacking

Enabling Desktop columns stacking makes it possible to stack columns in a single row so that they go on top of each other. By default, this setting is automatically enabled on the tablet and mobile viewports, given that this is their normal row behaviour.

Desktop column stacking is useful if you, for example, want a number of modules to appear on top of each other instead of next to each other, which is the default behavior in the Editor's grid system. With desktop column stacking you can achieve this without having to add multiple new rows after each other.

In the example below, we're stacking a number of modules within a column.

3) Desktop-column-stacking