{"id":5656,"date":"2021-08-26T09:04:37","date_gmt":"2021-08-26T09:04:37","guid":{"rendered":"https:\/\/chemicloud.com\/kb\/?post_type=ht_kb&#038;p=5656"},"modified":"2022-03-18T10:18:03","modified_gmt":"2022-03-18T10:18:03","slug":"all-about-the-grid-widgets-in-the-website-buidler","status":"publish","type":"ht_kb","link":"https:\/\/chemicloud.com\/kb\/article\/all-about-the-grid-widgets-in-the-website-buidler\/","title":{"rendered":"All About the Grid Widgets in the Website Builder"},"content":{"rendered":"<p>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.<\/p>\n<p>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.<\/p>\n<p>The Widgets are broken down into groups, such as Grid, Text, Image, Button, Media, and others.<\/p>\n<p>This Knowledgebase Article covers the Grid Widgets in the Website Builder.<\/p>\n    \t\t<div class=\"hts-messages hts-messages--info   hts-messages--withicon \"   >\r\n    \t\t\t    \t\t\t    \t\t\t\t<p>\r\n    \t\t\t\t\tCreating your website doesn\u2019t have to be a hassle. Our <a href=\"https:\/\/chemicloud.com\/website-builder\/#60b65e4e63b58\" target=\"_blank\" rel=\"noopener\">website builder<\/a> makes it easy to create a beautiful website in minutes without coding or design skills.     \t\t\t\t<\/p>\r\n    \t\t\t    \t\t\t\r\n    \t\t<\/div><!-- \/.ht-shortcodes-messages -->\r\n    \t\t\n<h2 id=\"all-about-the-grid-widgets-in-the-website-builder\">All About the Grid Widgets in the Website Builder<\/h2>\n<p>There are three Grid Widgets. They are as follows:<\/p>\n<ul>\n<li>Row Widget<\/li>\n<li>Column Widget<\/li>\n<li>Inner Row Widget<\/li>\n<\/ul>\n<p>Let&#8217;s explore what each of these widgets do.<\/p>\n<h3 id=\"row-widget\">Row Widget<\/h3>\n<p>Adding a new Row Widget creates a blank row on the page it&#8217;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.<\/p>\n<p>Below is an image of a blank page with no widgets:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5657\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg\" alt=\"\" width=\"1919\" height=\"1932\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg 1919w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-298x300.jpg 298w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-778x783.jpg 778w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-150x150.jpg 150w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-768x773.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-50x50.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-1526x1536.jpg 1526w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-80x80.jpg 80w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-60x60.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-100x100.jpg 100w\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" \/><\/a><\/p>\n<p>Note the three sections.<\/p>\n<p>At the top is the Page Header which contains the &#8220;Title&#8221; and denotes which page you&#8217;re on.<\/p>\n<p>In the middle is where you&#8217;ll add your page content.<\/p>\n<p>At the bottom is the Page Footer.<\/p>\n<p>This page contains no content, but if I add a row to the page, it will look like this:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5658 size-full\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321.jpg\" alt=\"\" width=\"1511\" height=\"1622\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321.jpg 1511w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321-279x300.jpg 279w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321-729x783.jpg 729w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321-768x824.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321-47x50.jpg 47w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321-1431x1536.jpg 1431w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321-56x60.jpg 56w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-26-e1621551064321-93x100.jpg 93w\" sizes=\"auto, (max-width: 1511px) 100vw, 1511px\" \/>Note a section has appeared which says &#8220;Empty column please Drag Widgets&#8221;. This is an empty Row, despite it being called a column.<\/p>\n<h4 id=\"row-widget-settings\">Row Widget Settings<\/h4>\n<p>Every Widget has it&#8217;s own various settings. Let&#8217;s take a look at the settings available to the Row Widget:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-10.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5664\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-10.jpg\" alt=\"\" width=\"405\" height=\"858\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-10.jpg 405w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-10-142x300.jpg 142w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-10-370x783.jpg 370w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-10-24x50.jpg 24w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-10-28x60.jpg 28w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-10-47x100.jpg 47w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><\/a><\/p>\n<p>The <strong>Row Settings<\/strong> are as follows:<\/p>\n<ul>\n<li><strong>Container<\/strong> <strong>Width<\/strong> allows you to set the width of the widget container. You can set this to:\n<ul>\n<li>Auto<\/li>\n<li>Full<\/li>\n<li>Fixed<\/li>\n<\/ul>\n<\/li>\n<li><strong>Columns<\/strong> <strong>Gap<\/strong> allows you to define in pixels the gap distance between the widget above it.<\/li>\n<li><strong>Content<\/strong> <strong>Width<\/strong> allows you to change the width of the content in the widget container. This can be set to:\n<ul>\n<li>Auto<\/li>\n<li>Fixed<\/li>\n<li>Full<\/li>\n<\/ul>\n<\/li>\n<li><strong>Height<\/strong> allows you to adjust the height of the widget container. You can set it to:\n<ul>\n<li>Default<\/li>\n<li>Fit Screen<\/li>\n<li>Min Height<\/li>\n<\/ul>\n<\/li>\n<li><strong>Content<\/strong> <strong>V Align<\/strong> allows you to adjust the vertical alignment of the content in the widget container. You can set it to:\n<ul>\n<li>Default<\/li>\n<li>Top<\/li>\n<li>Center<\/li>\n<li>Bottom<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>The <strong>Background Settings<\/strong> are as follows:<\/p>\n<ul>\n<li><strong>Background<\/strong> <strong>type<\/strong>:\n<ul>\n<li>None<\/li>\n<li>Video<\/li>\n<li>Parallax<\/li>\n<li>Slider<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>The <strong>Background Overlay<\/strong> settings are as follows:<\/p>\n<ul>\n<li><strong>Overlay<\/strong> &#8211; normal or hover. This will show the chosen overlay either all the time (normal) or when the space is hovered over (hover).<\/li>\n<li><strong>Background Type <\/strong>&#8211;\u00a0You can choose the way the overlay looks by selecting:\n<ul>\n<li>None<\/li>\n<li>Color<\/li>\n<li>Image<\/li>\n<li>Gradient<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>The <strong>Shape Styles<\/strong> settings are as follows:<\/p>\n<ul>\n<li><strong>Position<\/strong>:\n<ul>\n<li>Top<\/li>\n<li>Bottom<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"row-widget-options\">Row Widget Options<\/h4>\n<p>Beneath Edit Column, the &#8220;Options&#8221; tab allows you to control the following settings:<\/p>\n<ul>\n<li><strong>Background Style<\/strong>\n<ul>\n<li>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.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Background Type &#8211;\u00a0This setting allows you to choose from the following settings:<\/strong>\n<ul>\n<li><strong>None<\/strong> &#8211; There will not be a background. This means the background of the page will be white, unless otherwise stated in Custom CSS.<\/li>\n<li><strong>Color<\/strong> &#8211; You can specify a custom color for the background.<\/li>\n<li><strong>Gradient<\/strong> &#8211; You can specify a custom gradient. A gradient is a smooth transition between 2 or more colors, which can give a cool effect.<\/li>\n<li><strong>Image<\/strong> &#8211; You can upload a custom image to use as your background.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Box Style &#8211;<\/strong> This setting allows you to adjust the padding and margin for the box that contains your blog post.<\/li>\n<li><strong>Border Style &#8211; This setting allows you to control the following settings:<\/strong>\n<ul>\n<li><strong>Normal<\/strong> &#8211; You can have a normal border which is always there.<\/li>\n<li><strong>Hover<\/strong> &#8211; You can have a border that only appears when the area it contains is hovered over.<\/li>\n<li><strong>Border<\/strong> <strong>Type<\/strong> &#8211; You can choose from the following border types:\n<ul>\n<li>Solid<\/li>\n<li>Double<\/li>\n<li>Dotted<\/li>\n<li>Dashed<\/li>\n<li>Grooved<\/li>\n<\/ul>\n<\/li>\n<li><strong>Border<\/strong> <strong>Radius<\/strong> &#8211; You can adjust the radius of the border around the box it contains to give it rounder or sharper corners.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Font Style &#8211;<\/strong> This setting allows you to control the following settings:\n<ul>\n<li><strong>Font<\/strong> <strong>Family<\/strong> &#8211; This setting will allow you to change the font used on the entire page.<\/li>\n<li><strong>Font Size<\/strong> &#8211; This setting allows you to change the size of the text used on the page.<\/li>\n<li><strong>Font<\/strong> <strong>Style<\/strong> &#8211; This setting allows you to choose from the following font styles:\n<ul>\n<li><strong>Normal<\/strong><\/li>\n<li><strong>Italic<\/strong><\/li>\n<li><strong>Oblique<\/strong>\n<ul>\n<li><strong>What<\/strong> <strong>is Oblique<\/strong>? 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.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Font Weight &#8211;<\/strong> This allows you to change the weight of the fonts used on the page.<\/li>\n<li><strong>Font Variant &#8211;<\/strong> If the font you have selected has a variant, you can select it with this setting.\n<ul>\n<li>Typical variants include, Small Caps and Big Caps.<\/li>\n<\/ul>\n<\/li>\n<li><b>Animation &#8211;\u00a0<\/b>With this setting, you can configure number<\/li>\n<li><strong>Attributes &#8211;<\/strong> With this setting, you can apply custom attributes using code.<\/li>\n<li><strong>Custom CSS &#8211;<\/strong> if you want to change certain elements on the page using CSS, you can paste in the code to do that here.<\/li>\n<\/ul>\n<h3 id=\"column-widget\">Column Widget<\/h3>\n<p>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.<\/p>\n<p>Below is an image of a blank page with no widgets:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5657\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg\" alt=\"\" width=\"1919\" height=\"1932\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg 1919w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-298x300.jpg 298w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-778x783.jpg 778w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-150x150.jpg 150w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-768x773.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-50x50.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-1526x1536.jpg 1526w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-80x80.jpg 80w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-60x60.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-100x100.jpg 100w\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" \/><\/a><\/p>\n<p>Below is a page with the Column Widget added:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5659\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18.jpg\" alt=\"\" width=\"1918\" height=\"1616\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18.jpg 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18-300x253.jpg 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18-783x660.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18-768x647.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18-50x42.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18-1536x1294.jpg 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18-60x51.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-18-100x84.jpg 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<p>Note how the container is split down the middle and you can add a widget on the left and right side.<\/p>\n<h4 id=\"columns-widget-settings\">Columns Widget Settings<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5665\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-7.jpg\" alt=\"\" width=\"401\" height=\"555\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-7.jpg 401w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-7-217x300.jpg 217w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-7-36x50.jpg 36w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-7-43x60.jpg 43w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-7-72x100.jpg 72w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/p>\n<p>The <strong>Column<\/strong> <strong>Settings<\/strong> are as follows:<\/p>\n<ul>\n<li><strong>Content V-Align<\/strong> allows you to change the vertical alignment of the column to:\n<ul>\n<li>Top<\/li>\n<li>Center<\/li>\n<li>Bottom<\/li>\n<li>Default<\/li>\n<\/ul>\n<\/li>\n<li><strong>Widgets Space<\/strong> allows you to adjust in pixels the space between the widget next to it.<\/li>\n<li><strong>Column Width<\/strong> allows you to change the width of the column to:\n<ul>\n<li>1<\/li>\n<li>2<\/li>\n<li>3<\/li>\n<li>4<\/li>\n<li>5<\/li>\n<li>6<\/li>\n<li>7<\/li>\n<li>8<\/li>\n<li>9<\/li>\n<li>10<\/li>\n<li>11<\/li>\n<li>12<\/li>\n<li>Custom<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>The <strong>Background Settings<\/strong> are as follows:<\/p>\n<p>Background type &#8211; You can choose the type of background that appears in this widget. The choices are:<\/p>\n<ul>\n<li>None<\/li>\n<li>Video<\/li>\n<li>Parallax<\/li>\n<li>Slider<\/li>\n<\/ul>\n<p>The <strong>Background Overlay<\/strong> settings are as follows:<\/p>\n<ul>\n<li><strong>Overlay<\/strong> &#8211; normal or hover. This will show the chosen overlay either all the time (normal) or when the space is hovered over (hover).<\/li>\n<li><strong>Background Type <\/strong>&#8211;\u00a0You can choose the way the overlay looks by selecting:\n<ul>\n<li>None<\/li>\n<li>Color<\/li>\n<li>Image<\/li>\n<li>Gradient<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"column-widget-options\">Column Widget Options<\/h4>\n<p>Beneath Edit Post Settings, the &#8220;Options&#8221; tab allows you to control the following settings:<\/p>\n<ul>\n<li><strong>Background Style<\/strong>\n<ul>\n<li>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.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Background Type &#8211;\u00a0This setting allows you to choose from the following settings:<\/strong>\n<ul>\n<li><strong>None<\/strong> &#8211; There will not be a background. This means the background of the page will be white, unless otherwise stated in Custom CSS.<\/li>\n<li><strong>Color<\/strong> &#8211; You can specify a custom color for the background.<\/li>\n<li><strong>Gradient<\/strong> &#8211; You can specify a custom gradient. A gradient is a smooth transition between 2 or more colors, which can give a cool effect.<\/li>\n<li><strong>Image<\/strong> &#8211; You can upload a custom image to use as your background.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Box Style &#8211;<\/strong> This setting allows you to adjust the padding and margin for the box that contains your blog post.<\/li>\n<li><strong>Border Style &#8211; This setting allows you to control the following settings:<\/strong>\n<ul>\n<li><strong>Normal<\/strong> &#8211; You can have a normal border which is always there.<\/li>\n<li><strong>Hover<\/strong> &#8211; You can have a border that only appears when the area it contains is hovered over.<\/li>\n<li><strong>Border<\/strong> <strong>Type<\/strong> &#8211; You can choose from the following border types:\n<ul>\n<li>Solid<\/li>\n<li>Double<\/li>\n<li>Dotted<\/li>\n<li>Dashed<\/li>\n<li>Grooved<\/li>\n<\/ul>\n<\/li>\n<li><strong>Border<\/strong> <strong>Radius<\/strong> &#8211; You can adjust the radius of the border around the box it contains to give it rounder or sharper corners.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Font Style &#8211;<\/strong> This setting allows you to control the following settings:\n<ul>\n<li><strong>Font<\/strong> <strong>Family<\/strong> &#8211; This setting will allow you to change the font used on the entire page.<\/li>\n<li><strong>Font Size<\/strong> &#8211; This setting allows you to change the size of the text used on the page.<\/li>\n<li><strong>Font<\/strong> <strong>Style<\/strong> &#8211; This setting allows you to choose from the following font styles:\n<ul>\n<li><strong>Normal<\/strong><\/li>\n<li><strong>Italic<\/strong><\/li>\n<li><strong>Oblique<\/strong>\n<ul>\n<li><strong>What<\/strong> <strong>is Oblique<\/strong>? 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.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Font Weight &#8211;<\/strong> This allows you to change the weight of the fonts used on the page.<\/li>\n<li><strong>Font Variant &#8211;<\/strong> If the font you have selected has a variant, you can select it with this setting.\n<ul>\n<li>Typical variants include, Small Caps and Big Caps.<\/li>\n<\/ul>\n<\/li>\n<li><b>Animation &#8211;\u00a0<\/b>With this setting, you can configure number<\/li>\n<li><strong>Attributes &#8211;<\/strong> With this setting, you can apply custom attributes using code.<\/li>\n<li><strong>Custom CSS &#8211;<\/strong> if you want to change certain elements on the page using CSS, you can paste in the code to do that here.<\/li>\n<\/ul>\n<h3 id=\"inner-row-widget\">Inner Row Widget<\/h3>\n<p>The Inner Row Widget lets you further subdivide a row inside of a row.<\/p>\n<p>Below is an image of a blank page with no widgets:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5657\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg\" alt=\"\" width=\"1919\" height=\"1932\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24.jpg 1919w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-298x300.jpg 298w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-778x783.jpg 778w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-150x150.jpg 150w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-768x773.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-50x50.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-1526x1536.jpg 1526w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-80x80.jpg 80w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-60x60.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-24-100x100.jpg 100w\" sizes=\"auto, (max-width: 1919px) 100vw, 1919px\" \/><\/a><\/p>\n<p>Below is a page with the Inner Row Widget added:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5660\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11.jpg\" alt=\"\" width=\"1516\" height=\"1504\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11.jpg 1516w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11-300x298.jpg 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11-783x777.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11-150x150.jpg 150w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11-768x762.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11-50x50.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11-80x80.jpg 80w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11-60x60.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-11-100x100.jpg 100w\" sizes=\"auto, (max-width: 1516px) 100vw, 1516px\" \/><\/a><\/p>\n<p>You can use this space to insert additional widgets, giving you further control over the appearance of the page.<\/p>\n<h4 id=\"inner-row-widget-settings\">Inner Row Widget Settings<\/h4>\n<p>Beneath Edit Inner Row, the &#8220;Settings&#8221; tab allows you to control the following settings:<\/p>\n<ul>\n<li><strong>Container Width &#8211;<\/strong> This adjusts the width of the container itself. You can set this to:\n<ul>\n<li>Auto<\/li>\n<li>Full<\/li>\n<li>Fixed<\/li>\n<\/ul>\n<\/li>\n<li><strong>Columns Gap &#8211;<\/strong> because this is an inner row widget, you can adjust the gap between the row holding it and the inner row widget in pixels.<\/li>\n<li><strong>Content Width &#8211;<\/strong> with this, you can set the width of the content you add into the widget. You can set it to:\n<ul>\n<li>Auto<\/li>\n<li>Fixed<\/li>\n<li>Full<\/li>\n<\/ul>\n<\/li>\n<li><strong>Height &#8211;<\/strong> you can adjust the height of the widget to the following settings:\n<ul>\n<li>Default<\/li>\n<li>Fit Screen<\/li>\n<li>Min Height<\/li>\n<\/ul>\n<\/li>\n<li><strong>Content V Align<\/strong> allows you to adjust the vertical alignment of the content you add into the widget. You can choose from:\n<ul>\n<li>Default<\/li>\n<li>Top<\/li>\n<li>Center<\/li>\n<li>Bottom<\/li>\n<\/ul>\n<\/li>\n<li><strong>Background Type &#8211;<\/strong> You can choose from different background types, such as:\n<ul>\n<li>None<\/li>\n<li>Video<\/li>\n<li>Parallax<\/li>\n<li>Slider<\/li>\n<\/ul>\n<\/li>\n<li><strong>Background overlay &#8211;<\/strong> 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:\n<ul>\n<li>None<\/li>\n<li>Color<\/li>\n<li>Image<\/li>\n<li>Gradient<\/li>\n<\/ul>\n<\/li>\n<li><strong>Shape Styles &#8211;<\/strong> You can position the shape in the following positions:\n<ul>\n<li>Top<\/li>\n<li>Bottom<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h4 id=\"inner-row-widget-options\">Inner Row Widget Options<\/h4>\n<p>Beneath Edit Inner Row, the &#8220;Options&#8221; tab allows you to control the following settings:<\/p>\n<ul>\n<li><strong>Background Style<\/strong>\n<ul>\n<li>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.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Background Type &#8211;\u00a0This setting allows you to choose from the following settings:<\/strong>\n<ul>\n<li><strong>None<\/strong> &#8211; There will not be a background. This means the background of the page will be white, unless otherwise stated in Custom CSS.<\/li>\n<li><strong>Color<\/strong> &#8211; You can specify a custom color for the background.<\/li>\n<li><strong>Gradient<\/strong> &#8211; You can specify a custom gradient. A gradient is a smooth transition between 2 or more colors, which can give a cool effect.<\/li>\n<li><strong>Image<\/strong> &#8211; You can upload a custom image to use as your background.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Box Style &#8211;<\/strong> This setting allows you to adjust the padding and margin for the box that contains your blog post.<\/li>\n<li><strong>Border Style &#8211; This setting allows you to control the following settings:<\/strong>\n<ul>\n<li><strong>Normal<\/strong> &#8211; You can have a normal border which is always there.<\/li>\n<li><strong>Hover<\/strong> &#8211; You can have a border that only appears when the area it contains is hovered over.<\/li>\n<li><strong>Border<\/strong> <strong>Type<\/strong> &#8211; You can choose from the following border types:\n<ul>\n<li>Solid<\/li>\n<li>Double<\/li>\n<li>Dotted<\/li>\n<li>Dashed<\/li>\n<li>Grooved<\/li>\n<\/ul>\n<\/li>\n<li><strong>Border<\/strong> <strong>Radius<\/strong> &#8211; You can adjust the radius of the border around the box it contains to give it rounder or sharper corners.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Font Style &#8211;<\/strong> This setting allows you to control the following settings:\n<ul>\n<li><strong>Font<\/strong> <strong>Family<\/strong> &#8211; This setting will allow you to change the font used on the entire page.<\/li>\n<li><strong>Font Size<\/strong> &#8211; This setting allows you to change the size of the text used on the page.<\/li>\n<li><strong>Font<\/strong> <strong>Style<\/strong> &#8211; This setting allows you to choose from the following font styles:\n<ul>\n<li><strong>Normal<\/strong><\/li>\n<li><strong>Italic<\/strong><\/li>\n<li><strong>Oblique<\/strong>\n<ul>\n<li><strong>What<\/strong> <strong>is Oblique<\/strong>? 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.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li><strong>Font Weight &#8211;<\/strong> This allows you to change the weight of the fonts used on the page.<\/li>\n<li><strong>Font Variant &#8211;<\/strong> If the font you have selected has a variant, you can select it with this setting.\n<ul>\n<li>Typical variants include, Small Caps and Big Caps.<\/li>\n<\/ul>\n<\/li>\n<li><b>Animation &#8211;\u00a0<\/b>With this setting, you can configure number<\/li>\n<li><strong>Attributes &#8211;<\/strong> With this setting, you can apply custom attributes using code.<\/li>\n<li><strong>Custom CSS &#8211;<\/strong> if you want to change certain elements on the page using CSS, you can paste in the code to do that here.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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&#8230;<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"ht-kb-category":[225],"ht-kb-tag":[],"class_list":["post-5656","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-website-builder-getting-started"],"_links":{"self":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/5656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/comments?post=5656"}],"version-history":[{"count":12,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/5656\/revisions"}],"predecessor-version":[{"id":7171,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/5656\/revisions\/7171"}],"wp:attachment":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/media?parent=5656"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=5656"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=5656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}