A row is the basic element for horizontally structuring content on your website. It serves as a container for columns and modules. With the ChurchDesk editor, you can flexibly design rows, add backgrounds, and customize the layout to present your content optimally. This article shows you how to edit a row and what design and settings options are available to you.

What is a row? A row is a horizontal section on your page. Within a row, you can have up to 12 columns to organize your content. You can always add more content to the row or rearrange or delete existing content. Read more about rows, columns, and modules in this article.

On this page:

• How can I edit a row?
• Local design
• Settings

How can I edit a row?

When you're working in the editor, click on the row you want to change. A quick menu will appear with the most frequently used tools: Edit, Duplicate, More, and Delete:

1. Click on More to access additional options.
2. Click the pencil icon to open the menu for the subsequent row settings.

Local design

1. Background

A row background can be a solid color, an image, or even a video:

• Background color: Add a single color as the row background. You can set the degree of transparency if you wish.
• Background image: Add an image as the row background. You can choose whether to use your header image from Global Data or upload a new image directly to the row. You can set how the image should repeat within the row, its size, and positioning to ensure you can display the image optimally for your visitors.

In addition to the standard image settings, you can also determine how the background image should behave within the row when a visitor scrolls down the page:

• Fixed Position: The image remains in its position when scrolling, while the content slides over it.
• Parallax Scrolling: The image moves slower than the foreground when scrolling, which creates a depth effect.

2. Video Background

Activate the video background and paste your video URL into the field. The video will automatically play when a visitor opens the page where the row is located.

3. Background Filter

Add a background filter over your row's background color, image, or video to soften very colorful images or images with strong contrasts. This is also a good way to ensure that the text in the row is easy for visitors to read. Remember that you can also adjust the degree of transparency of your background filter.

Example of a background filter used over an image:

4. Borders and Spacing

• Shadow: Add a shadow for more depth.
• Border: Add a border to the row and adjust the border's style, color, thickness, and radius. Adjust the margin (space outside the row) and padding (space between the row content and the row border).
• Spacing: With the margin and padding options, you create space around and within your elements. Targeted spacing design ensures a clear, tidy structure and better readability.
• Container: A container is an area within the row that is padded on all sides. All row content is bound within this "frame." With a container, you can be sure that your content does not span the entire width of the viewport, which could otherwise make reading or an overview difficult for visitors. Rows in the editor are provided with a container by default. You can expand it to the full width of the row by activating the "Container full width" setting. You can also set the border radius and padding of the container.
• Animation: Activate animations that are triggered as soon as the visitor sees the row or element in their browser. Animations make your website more dynamic and help draw attention to important content.

Settings

1. Column Stacking

Activating Stacking Columns allows columns in a single row to be stacked so they are one above the other. By default, this setting is automatically enabled in tablet and mobile viewports, as this is their normal row behavior.

Desktop column stacking is useful if you want multiple modules to be displayed one above the other instead of side-by-side, which is the standard behavior in the editor's grid system. With Stacking Columns, you can achieve this without having to add multiple new rows consecutively. You can also activate this function directly via the three dots.

2. Place Row Behind Header

This feature allows you to push the top row on any page behind your header, creating a transparency effect that makes your header seamlessly blend into the overall style of your website.

When you activate 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 has a solid (non-transparent) color, the "Place behind header" setting will not be visible on your website. You can only activate this feature for the topmost row or the row slider of a page.

3. Full-screen row

The row height is adjusted to the height of the browser window. This only applies to the desktop viewport. You can also activate this function directly via the three dots.

4. Row Anchors

By adding anchors, visitors can "jump" from the main navigation or a button to a specific row on the same page. You can find more information on this topic here.

How to set up an anchor:

1. Hover your mouse over the row -> click the pencil icon -> Settings -> Row Anchor
2. Activate the anchor -> Add an anchor label, e.g., contact (Attention: Please use all lowercase and no spaces!)
3. Option 1 - Hide anchor from navigation: The anchor is not displayed in the main navigation.
4. Option 2 - Anchor on the same level as the page in the navigation: Let the anchor appear separately in the main navigation and not as a subpage.
5. Save with the green checkmark.
6. Insert a button or a text field.
7. Open the edit mode of the respective module.
8. Insert a link -> select "External URL" -> enter the entire page URL with /#contact

More Options

1. Show on Device

Choose in which of the three viewports the row should be visible when visitors view your website. More about this can be found here.

2. Fluid Row

A row can be set to either fluid or fixed. If you click on Fluid Row in the row's dropdown menu, a checkmark will appear next to the row. If you click on it again, the checkmark disappears, which means 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 and has a fixed width, even if the screen is wider than the content.

Fluid Row: A fluid row allows the content to extend across the entire width of the browser, regardless of the screen size.

Example of a fixed row:

Example of a fluid row:

3. Equalize Columns

This option makes it possible to equalize the width of the columns in a row. To select this option, go to More in the quick menu and select Equalize Columns. Note that the editor uses a 12-column grid system. For the columns to have exactly the same size, the number of columns must be evenly divisible into 12 - for example, 2 columns become 6 units each, 3 columns become 4 units each, etc. Note that the equalize option resets the column sizes for all viewports.

For numbers that don't divide evenly into 12, see the examples for column splitting below:

4. Add Animation

Add an animation that is triggered as soon as the visitor sees the row in their browser.

5. Add Slider (Studio AddOn only)

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

Read more about how to create and manage a Slider.

6. Copy/Paste

If you want to reuse a row elsewhere on your website, you can either duplicate or copy it.

Duplicating a row creates a copy of the row and inserts it directly below the original row. To do this, click the Duplicate icon in the quick menu.

When you use the copy function, you can paste the row anywhere on our website (even on pages other than the one you are currently working on). To copy a row and paste it elsewhere, click More in the menu and then select Copy.

Go to the page where you want to insert the row, hover your mouse over the row below which the new row should appear, and select More > Paste from the menu.

7. Delete

You can delete a row by selecting "Delete" from the quick menu. Remember that you can undo the operation with the editor's Rollback function.

Keywords: Edit rows, Row design, Web design, Website layout, Row background, Video background, Parallax effect, Row settings, Stack columns, Row anchors, Full-screen row, Fluid row, Fixed row, Equalize columns, Copy/Paste, ChurchDesk.

Updated on: 08/08/2025