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:
- Click on the WIDGETS button in the Website Editor Toolbar.
- 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
- 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
- Add content to the Row Widget as desired.
- Click OK to save the changes.
- 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:
- Mouse over the Row Widget.
The Row Widget's controls will be displayed.
- Click on the down arrow beside the Row Widget icon.
- Choose the Row Settings item from the drop-down menu.
The Row Settings popup will be displayed with the Column Settings tab selected.
- Choose the number of columns you want from the Number of fluid columns dropdown list.
- 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.
- Click OK, once you have finished configuring the settings.
- 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.
- Mouse over the widget.
The widget's controls will be displayed.
- Click on the down arrow beside the widget icon.
- Choose the Settings item from the drop-down menu.
The widget Settings popup will be displayed.
- Click on the Responsive Properties tab.
- Set the widget's Responsive Properties on each supported device size:
- Wide Monitor
- Monitor
- Tablet
- Mobile
- 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.
- Optionally, tick the Advanced Mode checkbox to enable the advanced column layout settings.
- 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.
- Tick/untick the visibility checkbox and select an option from the dropdown list for each column and device as needed.
- Untick the Same as Page Layout checkbox to manually configure the column layout for wide monitor devices.
- Click OK, once you have finished configuring the settings.
- Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.
Comments
0 comments
Please sign in to leave a comment.