Row Widget

A key element of website design is the row widget, which helps you organize and structure your content effectively. This tutorial will guide you through adding and configuring the row widget in DecoNetwork's Website Editor. Whether you're creating a simple layout or a complex, multi-section design, learning how to use the row widget will provide you with the flexibility and control you need. We'll cover how to add the widget to your page, how to adjust columns in the row widget, and how to configure its responsive settings to enhance your site's design. Watch the video below for a quick overview of using Row Widgets, and read on for detailed instructions and information on settings.

In this article, you will learn how...

• To add a Row Widget to your website
• To configure the column settings of a row widget
• To configure the responsive properties of a row widget:

To add a Row Widget to your website:

1. Click on the WIDGETS button in the Website Editor Toolbar.
2. Browse the Widgets tab to locate the Row Widget you want in the BASICS section.
   

   You can choose from three row widgets, each with a preset number of columns:

   • 1 Column
   • 2 Columns
   • 3 Columns

   After adding the widget, you can adjust the number of columns in the Row Settings.

3. Click and drag the Row Widget onto your website page.

   Allowable areas the widget can be inserted into include:

   • Within rows existing rows
   • Within columns existing rows
   • Above or below existing rows
   • Above or below existing widgets
   • Between existing widgets
4. Add content to the Row Widget as desired.
5. Click OK to save the changes.
6. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure the column settings of a row widget:

1. Mouse over the Row Widget.

   The Row Widget's controls will be displayed.

2. Click on the down arrow beside the Row Widget icon.
3. Choose the Row Settings item from the drop-down menu.
   

   The Row Settings popup will be displayed with the Column Settings tab selected.

   

   You can also double-click on the Row Widget to open the Row Settings popup.

4. Choose the number of columns you want from the Number of fluid columns dropdown list.

   You can configure the row to have up to 6 columns. These columns will be fluid, meaning they will resize as the window size is changed. Multiple columns will be of equal width.

5. Optionally, choose whether you want to add a fixed width column from the Add Fixed Width Column dropdown list.

   If you choose Yes, the Fixed Column Position field will be displayed. Choose an option:

   • Left of Fluid Columns: adds a fixed-width column to the left of the fluid columns.
   • Right of Fluid Columns: adds a fixed-width column to the right of the fluid columns.

   You can adjust the width of the column by dragging its sizing handle.

   
6. Click OK, once you have finished configuring the settings.
7. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure the responsive properties of a row widget:

Responsive properties are crucial for ensuring that your website looks great and functions well on all devices, from desktops to smartphones. The responsive properties settings for the row widget let you adjust the layout so that the content adapts smoothly to various device dimensions.

1. Mouse over the widget.

   The widget's controls will be displayed.

2. Click on the down arrow beside the widget icon.
3. Choose the Settings item from the drop-down menu.
   

   The widget Settings popup will be displayed.

   

   You can also double-click on the widget to open the widget Settings popup (excludes Text, Page Title, and Heading Widgets).

4. Click on the Responsive Properties tab.
   
5. Set the widget's Responsive Properties on each supported device size:
   • Wide Monitor
   • Monitor
   • Tablet
   • Mobile
   For each device you can choose a layout option for the columns display:
   • Inline: arranges all columns side by side in a single row with each column having equal width.
     
   • Semi-stacked: arranges columns initially side by side in a single row. When the available width of the row container becomes limited due to screen size, the columns start to stack vertically.
     
   • Stacked: arranges all columns stacked on top of one another. Each column expands to fill the entire width of the row container and is placed below the previous one.
     

   You can enable Advanced Mode to manually configure the layout for the columns.

6. Optionally, tick the Advanced Mode checkbox to enable the advanced column layout settings.
   
   1. Untick the Same as Page Layout checkbox to manually configure the column layout for wide monitor devices.
      

      For all other devices, select Manual from the dropdown list.

      

      This will enable the Column options. From there, you can adjust the visibility of each column and choose the number of grids it spans.

      
      

      The row widget adheres to a 12-column responsive grid layout system. A "span" refers to the number of grid columns a column occupies within the grid system. So if you choose "Span6", the column will take up half the available width (6 out of 12 columns or 50%) of the row container.

   2. Tick/untick the visibility checkbox and select an option from the dropdown list for each column and device as needed.
7. Click OK, once you have finished configuring the settings.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.