Manage rows

On this page:

How do I modify a row?
Design
Settings
Fluid row
Add Row Slider
Equalize columns
Show on device
Add animation
Duplicate / Copy
Delete

Manage rows

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

What is a row? 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. Read more about rows, columns and modules in this article.

How do I modify a row?

When working in the Designer, click on the row you want to modify. A quick menu, including the most commonly used tools, will appear: Edit, Duplicate, More and Delete.



Click on Edit to bring up the Row Settings menu.





Click on More to bring up additional options.

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 Designer 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 colourful 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.

Example of background filter in use on top of an image:




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.

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

Border and Spacing

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



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



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 Designer 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.

See the section Fluid/fixed row below for a visual representation of what a fluid vs. a fixed row look like.

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 Designer's grid system. With desktop column stacking you can achieve this without having to add multiple new rows after each other.


Place row behind header

With this feature you're able to push the top row on each page up behind your header, creating a transparency effect that makes your header seamlessly blend in with the overall style of your website.

By enabling this feature, your background image or color in the top row of a page will become visible behind the header, if you have made your header transparent. If your header is a solid (non-transparent) color, the Place row behind header-setting will not be visible on your website. You can only enable the feature on the top row or row slider of a page.



To enable this feature, edit the top row on a page, click the Settings tab, and tick Place row behind header.

Note on visibility: The row will only be visible behind the header in the preview and published versions of the website. You will not be able to see the change while you are in the Designer building your website.

Row anchor

Adding anchors allows visitors to "jump" to a specific row on a page from either the main navigation or a button.

Fluid row

A row can be set to either fluid or fixed. By clicking on Fluid row on the row dropdown, a check mark will appear in front of it. Click on it again and the check mark will disappear, meaning the row is set to fixed. It is possible to have rows with different settings on the same page.

Fixed row: a fixed row ensures that the content is always centered with a fixed width even if the screen is wider than the content.
Fluid row: a fluid row allows the content to stretch the entire width of the browser, independently from the size of the screen.

Example of fixed row:



Example of fluid row:

Add Row Slider

Create a "carousel" effect by adding more slides (rows) and enable visitors to switch between them on the website.

Equalize columns

With this option it is possible to equalize the width of the columns in the row. To select this option, go to More in the quick menu and select Equalize Columns. Bear in mind that since the Designer uses a 12-column grid system, for the columns to be the exact same size, the number of columns need to go into 12 evenly - e.g., 2 columns will become 6 units each, 3 columns will become 4 units each, etc. Note that the equalize-option will reset the column sizes for all the viewports.

For numbers that don't go into 12, see the column-split examples below:

Show on device

Select which of the three viewports you want the row to be visible on when visitors browse your website.

Add animation

Add an animation which trigger once the visitor views the row in their browser.

Duplicate/Copy

If you want to re-use a row somewhere else on your website, you can either duplicate or copy it.

Duplicating a row means taking a copy of the row and inserting it immediately under the original one. To do so, click the Duplicate icon in the quick menu.



If you use the copy function, you can paste the row anywhere on our website (also on other pages than the one you are currently working on). To copy a row and paste it somewhere else, click More from the menu and then select Copy.



Head to the page where you want to paste the row, hover on the row that you want the new row to appear under, and from the menu, select More > Paste.

Delete

You can delete a row by selecting Delete from the menu. Remember, you can undo the action by using the Designer's rollback function.

Updated on: 21/09/2023