How to Configure a Row of Content on a Page

Designing your website layout in DecoNetwork is simple once you understand how content is structured. Pages are built using rows and columns, allowing you to organize content into clean, flexible sections – just like a newspaper layout.

In this article

• Prerequisites
• Why rows and columns matter
• Step 1: Add a row to your page
• Step 2: Choose your column layout
• Step 3: Add content using widgets
• Step 4: Optimize layout for different screen sizes
• Best-practice tips
• Troubleshooting
• FAQs
• Additional resources

Prerequisites

Why rows and columns matter

Rows and columns are the foundation of your website layout. Every page is built from horizontal rows, and each row can contain one or more columns that hold your content.

• Structure your content: Break your page into clear sections
• Create flexible layouts: Use multiple columns for grids and groupings
• Control responsiveness: Adjust how content behaves on mobile and tablet devices
• Design visually: Combine images, buttons, and listings in organized layouts

Once you understand rows and columns, building pages becomes a simple drag-and-drop process.

Step 1: Add a row to your page

1. Open the page you want to edit.
2. Go to Widgets.
3. Drag the Row / Column widget onto the page.

This creates a new horizontal section where you can place and organize content.

Step 2: Choose your column layout

1. After adding the row, open the row settings.
2. Choose how many columns you want from the Number of fluid columns dropdown (e.g., 1, 2, 3, 4, 5, or 6 columns).

Each column acts as a container for content. For example:

• 1 column → full-width content
• 2–4 columns → grid-style layouts

Step 3: Add content using widgets

1. Go back to the Widgets panel.
2. Drag widgets into each column.
3. Configure each widget as needed.

You can combine different types of content in a single row, such as:

• Buttons for calls to action
• Design listings to showcase artwork
• Images for visual appeal
• Links for navigation

This flexibility allows you to build rich, engaging sections on your page.

Step 4: Optimize layout for different screen sizes

1. Select the row you added.
2. Open the row settings.
3. Adjust how content behaves on smaller devices.

You can choose how content responds:

• Wrap: Columns move onto new lines as the screen shrinks
• Stack: Columns display vertically (ideal for mobile)

Best-practice tips

• Start simple – use 1–2 rows before building more complex layouts
• Keep content balanced across columns for a clean design
• Use consistent spacing and alignment
• Always preview your page on smaller screen sizes
• Group related content within the same row for better readability

Troubleshooting

• Content looks cramped on mobile:
  Enable stacking or wrapping in row settings.
• Columns not displaying correctly:
  Check the selected column layout and adjust widths if needed.
• Widgets not aligning as expected:
  Ensure they are placed inside the correct column container.

FAQs

• What is a row?
  A row is a horizontal section of your page that contains content.
• What is a column?
  A column is a container within a row used to organize content side-by-side.
• Can I change the number of columns later?
  Yes, you can edit the row settings to adjust the layout.
• Why does my layout change on mobile?
  Responsive settings adjust your layout to ensure it displays properly on smaller screens.

Additional resources

• Row Widget
• Editing Your Page Layout