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  

Screen_Shot_2019-10-21_at_11.32.16__2_.png

Clicking on any of the items under Design and Settings in the dropdown will bring up the Row Settings menu.

 

Design

Background color and image

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 select a picture from your File Library or if you want to upload a new one directly. You can adjust how you want the image to repeat within the row, its size and position 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 enabled, the image moves at a slower rate than the foreground when scrolling down, adding a touch of depth to your website.  

 

Background video

Enable background video 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.

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

manage_row1.png

 

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:

2_-Design-p2.jpg

 

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

  Drag row to add more spacing 

A more visual way of adjusting margin 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. 

manage_row3.gif 

 

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

  

Fluid/fixed row

A row can be set to either fluid or fixed. A fixed row ensures that the content is always centered in a fixed width even if the screen is wider than the content; a fluid row allows the content to stretch to the entire width of the browser, independently from the size of the screen. It is possible to have rows with different settings on the same page.

Example of fixed rows:

4_-Fluid-row-p1.jpg

Example of fluid row:

4_-Fluid-row-p2.jpg

  

Add animation

Add one of four animation types to a row which trigger once the visitor views the row in their browser. 

Type 1: Fade in left

fade-in-left.gif

 

Type 2: Fade in right

fade-in-right.gif

 

Type 3: Zoom in

zoom-in.gif

 

Type 4: Bounce in

bounce-in.gif

 

Duplicate or copy row

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

 

Delete a row

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.  

Was this article helpful?
0 out of 0 found this helpful