In the Editor 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 Editor, hover on the row you want to modify and the yellow Row label will appear in the top right corner of the row. Hover over the label and a number of settings appear in the dropdown.
Clicking on any of the items under Design and Settings in the dropdown will bring up the Row Settings menu.
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.
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.
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.
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:
Looking for more inspiration?
Read this article for downloadable overlays and more tips on creating your own.
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). Read more about spacing here.
Drag row to add more spacing
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.
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.
See the section Fluid/fixed row below for a visual representation of what a fluid vs. a fixed row look like.
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.
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.
Example of "normal" header and header with Place row behind header enabled:
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 Editor building your website.
Adding anchors allows visitors to "jump" to a specific row on a page from either the main navigation or a button. Read this article to learn more about row anchors.
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. Read the dedicated article on Row Sliders here.
With this option it is possible to equalize the width of the columns in the row. Bear in mind that since the Editor 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 an animation which trigger once the visitor views the row in their browser. Read much more about animations here.
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.
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, navigate to Duplicate/Copy and 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 select Duplicate/Copy > Paste.
You can delete a row by selecting Delete from the Row dropdown. Remember, you can undo the action by using the Editor's rollback function.