The Website Builder includes over one hundred Widgets for you to use when customizing your website. As they are fully featured and able to do many things, they can be overwhelming to those who first start using them.
A Widget in the Website Builder is something you add to your page that does something, such as display text, an image, a spreadsheet table, or a video, for example.
The Widgets are broken down into groups, such as Grid, Text, Image, Button, Media, and others.
This Knowledgebase Article covers the Grid Widgets in the Website Builder.
Creating your website doesn’t have to be a hassle. Our website builder makes it easy to create a beautiful website in minutes without coding or design skills.
All About the Grid Widgets in the Website Builder
There are three Grid Widgets. They are as follows:
- Row Widget
- Column Widget
- Inner Row Widget
Let’s explore what each of these widgets do.
Row Widget
Adding a new Row Widget creates a blank row on the page it’s added into, so you can add other widgets into it, such as formatted text or images. The Row widget allows you to add content that spans the page.
Below is an image of a blank page with no widgets:
Note the three sections.
At the top is the Page Header which contains the “Title” and denotes which page you’re on.
In the middle is where you’ll add your page content.
At the bottom is the Page Footer.
This page contains no content, but if I add a row to the page, it will look like this:
Note a section has appeared which says “Empty column please Drag Widgets”. This is an empty Row, despite it being called a column.
Row Widget Settings
Every Widget has it’s own various settings. Let’s take a look at the settings available to the Row Widget:
The Row Settings are as follows:
- Container Width allows you to set the width of the widget container. You can set this to:
- Auto
- Full
- Fixed
- Columns Gap allows you to define in pixels the gap distance between the widget above it.
- Content Width allows you to change the width of the content in the widget container. This can be set to:
- Auto
- Fixed
- Full
- Height allows you to adjust the height of the widget container. You can set it to:
- Default
- Fit Screen
- Min Height
- Content V Align allows you to adjust the vertical alignment of the content in the widget container. You can set it to:
- Default
- Top
- Center
- Bottom
The Background Settings are as follows:
- Background type:
- None
- Video
- Parallax
- Slider
The Background Overlay settings are as follows:
- Overlay – normal or hover. This will show the chosen overlay either all the time (normal) or when the space is hovered over (hover).
- Background Type – You can choose the way the overlay looks by selecting:
- None
- Color
- Image
- Gradient
The Shape Styles settings are as follows:
- Position:
- Top
- Bottom
Row Widget Options
Beneath Edit Column, the “Options” tab allows you to control the following settings:
- Background Style
- This is a setting that is specific to the page layout. You can change the whether the background appears as a normal background or if you want the background to change when you hover over it.
- Background Type – This setting allows you to choose from the following settings:
- None – There will not be a background. This means the background of the page will be white, unless otherwise stated in Custom CSS.
- Color – You can specify a custom color for the background.
- Gradient – You can specify a custom gradient. A gradient is a smooth transition between 2 or more colors, which can give a cool effect.
- Image – You can upload a custom image to use as your background.
- Box Style – This setting allows you to adjust the padding and margin for the box that contains your blog post.
- Border Style – This setting allows you to control the following settings:
- Normal – You can have a normal border which is always there.
- Hover – You can have a border that only appears when the area it contains is hovered over.
- Border Type – You can choose from the following border types:
- Solid
- Double
- Dotted
- Dashed
- Grooved
- Border Radius – You can adjust the radius of the border around the box it contains to give it rounder or sharper corners.
- Font Style – This setting allows you to control the following settings:
- Font Family – This setting will allow you to change the font used on the entire page.
- Font Size – This setting allows you to change the size of the text used on the page.
- Font Style – This setting allows you to choose from the following font styles:
- Normal
- Italic
- Oblique
- What is Oblique? Oblique type is a form of a type which slants slightly to the right. It is similar to Italic, but it does not use different glyph (individual letter) shapes.
- Font Weight – This allows you to change the weight of the fonts used on the page.
- Font Variant – If the font you have selected has a variant, you can select it with this setting.
- Typical variants include, Small Caps and Big Caps.
- Animation – With this setting, you can configure number
- Attributes – With this setting, you can apply custom attributes using code.
- Custom CSS – if you want to change certain elements on the page using CSS, you can paste in the code to do that here.
Column Widget
The Column Widget is similar to the row widget, but instead of allowing you to add content that spans the page, it creates an invisible line down that section of the page allowing you to insert widgets on the left side, and the right side.
Below is an image of a blank page with no widgets:
Below is a page with the Column Widget added:
Note how the container is split down the middle and you can add a widget on the left and right side.
Columns Widget Settings
The Column Settings are as follows:
- Content V-Align allows you to change the vertical alignment of the column to:
- Top
- Center
- Bottom
- Default
- Widgets Space allows you to adjust in pixels the space between the widget next to it.
- Column Width allows you to change the width of the column to:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- Custom
The Background Settings are as follows:
Background type – You can choose the type of background that appears in this widget. The choices are:
- None
- Video
- Parallax
- Slider
The Background Overlay settings are as follows:
- Overlay – normal or hover. This will show the chosen overlay either all the time (normal) or when the space is hovered over (hover).
- Background Type – You can choose the way the overlay looks by selecting:
- None
- Color
- Image
- Gradient
Column Widget Options
Beneath Edit Post Settings, the “Options” tab allows you to control the following settings:
- Background Style
- This is a setting that is specific to the page layout. You can change the whether the background appears as a normal background or if you want the background to change when you hover over it.
- Background Type – This setting allows you to choose from the following settings:
- None – There will not be a background. This means the background of the page will be white, unless otherwise stated in Custom CSS.
- Color – You can specify a custom color for the background.
- Gradient – You can specify a custom gradient. A gradient is a smooth transition between 2 or more colors, which can give a cool effect.
- Image – You can upload a custom image to use as your background.
- Box Style – This setting allows you to adjust the padding and margin for the box that contains your blog post.
- Border Style – This setting allows you to control the following settings:
- Normal – You can have a normal border which is always there.
- Hover – You can have a border that only appears when the area it contains is hovered over.
- Border Type – You can choose from the following border types:
- Solid
- Double
- Dotted
- Dashed
- Grooved
- Border Radius – You can adjust the radius of the border around the box it contains to give it rounder or sharper corners.
- Font Style – This setting allows you to control the following settings:
- Font Family – This setting will allow you to change the font used on the entire page.
- Font Size – This setting allows you to change the size of the text used on the page.
- Font Style – This setting allows you to choose from the following font styles:
- Normal
- Italic
- Oblique
- What is Oblique? Oblique type is a form of a type which slants slightly to the right. It is similar to Italic, but it does not use different glyph (individual letter) shapes.
- Font Weight – This allows you to change the weight of the fonts used on the page.
- Font Variant – If the font you have selected has a variant, you can select it with this setting.
- Typical variants include, Small Caps and Big Caps.
- Animation – With this setting, you can configure number
- Attributes – With this setting, you can apply custom attributes using code.
- Custom CSS – if you want to change certain elements on the page using CSS, you can paste in the code to do that here.
Inner Row Widget
The Inner Row Widget lets you further subdivide a row inside of a row.
Below is an image of a blank page with no widgets:
Below is a page with the Inner Row Widget added:
You can use this space to insert additional widgets, giving you further control over the appearance of the page.
Inner Row Widget Settings
Beneath Edit Inner Row, the “Settings” tab allows you to control the following settings:
- Container Width – This adjusts the width of the container itself. You can set this to:
- Auto
- Full
- Fixed
- Columns Gap – because this is an inner row widget, you can adjust the gap between the row holding it and the inner row widget in pixels.
- Content Width – with this, you can set the width of the content you add into the widget. You can set it to:
- Auto
- Fixed
- Full
- Height – you can adjust the height of the widget to the following settings:
- Default
- Fit Screen
- Min Height
- Content V Align allows you to adjust the vertical alignment of the content you add into the widget. You can choose from:
- Default
- Top
- Center
- Bottom
- Background Type – You can choose from different background types, such as:
- None
- Video
- Parallax
- Slider
- Background overlay – allows you to insert an overlay that is either there all the time or appears when the cursor hovers over the widget. You can choose from:
- None
- Color
- Image
- Gradient
- Shape Styles – You can position the shape in the following positions:
- Top
- Bottom
Inner Row Widget Options
Beneath Edit Inner Row, the “Options” tab allows you to control the following settings:
- Background Style
- This is a setting that is specific to the page layout. You can change the whether the background appears as a normal background or if you want the background to change when you hover over it.
- Background Type – This setting allows you to choose from the following settings:
- None – There will not be a background. This means the background of the page will be white, unless otherwise stated in Custom CSS.
- Color – You can specify a custom color for the background.
- Gradient – You can specify a custom gradient. A gradient is a smooth transition between 2 or more colors, which can give a cool effect.
- Image – You can upload a custom image to use as your background.
- Box Style – This setting allows you to adjust the padding and margin for the box that contains your blog post.
- Border Style – This setting allows you to control the following settings:
- Normal – You can have a normal border which is always there.
- Hover – You can have a border that only appears when the area it contains is hovered over.
- Border Type – You can choose from the following border types:
- Solid
- Double
- Dotted
- Dashed
- Grooved
- Border Radius – You can adjust the radius of the border around the box it contains to give it rounder or sharper corners.
- Font Style – This setting allows you to control the following settings:
- Font Family – This setting will allow you to change the font used on the entire page.
- Font Size – This setting allows you to change the size of the text used on the page.
- Font Style – This setting allows you to choose from the following font styles:
- Normal
- Italic
- Oblique
- What is Oblique? Oblique type is a form of a type which slants slightly to the right. It is similar to Italic, but it does not use different glyph (individual letter) shapes.
- Font Weight – This allows you to change the weight of the fonts used on the page.
- Font Variant – If the font you have selected has a variant, you can select it with this setting.
- Typical variants include, Small Caps and Big Caps.
- Animation – With this setting, you can configure number
- Attributes – With this setting, you can apply custom attributes using code.
- Custom CSS – if you want to change certain elements on the page using CSS, you can paste in the code to do that here.