{"id":5914,"date":"2021-08-26T09:04:36","date_gmt":"2021-08-26T09:04:36","guid":{"rendered":"https:\/\/chemicloud.com\/kb\/?post_type=ht_kb&#038;p=5914"},"modified":"2022-03-18T10:27:22","modified_gmt":"2022-03-18T10:27:22","slug":"all-about-the-button-widgets-in-the-website-builder","status":"publish","type":"ht_kb","link":"https:\/\/chemicloud.com\/kb\/article\/all-about-the-button-widgets-in-the-website-builder\/","title":{"rendered":"All About The Button 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 Button 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-button-widgets-in-the-website-builder\">All About The Button Widgets In The Website Builder<\/h2>\n<p>There are 5 button widgets. They are as follows:<\/p>\n<ul>\n<li>Button<\/li>\n<li>Social Profile<\/li>\n<li>Button Group<\/li>\n<li>Social Share<\/li>\n<li>Download Button<\/li>\n<\/ul>\n<p>Let&#8217;s explore what each of these widgets do.<\/p>\n<h3 id=\"button-widget\">Button Widget<\/h3>\n<p>The button widget allows you to insert a simple button onto your website. You can use this button for just about anything you want.<\/p>\n<p>When inserted into a page, the button widget looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5922\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3.png\" alt=\"\" width=\"1918\" height=\"984\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3.png 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3-300x154.png 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3-783x402.png 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3-768x394.png 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3-50x26.png 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3-1536x788.png 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3-60x31.png 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-3-100x51.png 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<h4 id=\"button-widget-settings\">Button Widget Settings<\/h4>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5923\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-3.png\" alt=\"\" width=\"407\" height=\"1205\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-3.png 407w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-3-101x300.png 101w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-3-264x783.png 264w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-3-17x50.png 17w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-3-20x60.png 20w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-3-34x100.png 34w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<p>The button widget has a lot of different settings for you to personalize the widget. Let&#8217;s review the settings:<\/p>\n<ul>\n<li>The Button Text option lets you control what text is displayed within the button.<\/li>\n<li>With the Link option, you can set the button to be a link to another destination on the internet.<\/li>\n<li>Using Stretch, you can have the buttons span the page.<\/li>\n<li>With Typography, you can change the font that is used in the button.<\/li>\n<li>With the Alignment settings, you can set the button to be aligned to the left, center, or right of your webpage.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5924\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-3.png\" alt=\"\" width=\"407\" height=\"771\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-3.png 407w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-3-158x300.png 158w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-3-26x50.png 26w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-3-32x60.png 32w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-3-53x100.png 53w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<ul>\n<li>The Button Style Type lets you control what kind of button is inserted. You can choose from different styles of buttons.<\/li>\n<li>Control the size of your button with the Size option.<\/li>\n<li>With Shadow or Shadow on Hover, you can change the shadow option for the button, whether you want it there all the time or only when a visitor to your site hovers over the button.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5925\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-3.png\" alt=\"\" width=\"403\" height=\"561\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-3.png 403w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-3-216x300.png 216w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-3-36x50.png 36w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-3-43x60.png 43w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-3-72x100.png 72w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/a><\/p>\n<p>The icon option allows you to insert an icon into the Button. You can choose from hundreds of different icons.<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5926\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-3.png\" alt=\"\" width=\"406\" height=\"674\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-3.png 406w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-3-181x300.png 181w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-3-30x50.png 30w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-3-36x60.png 36w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-3-60x100.png 60w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/p>\n<ul>\n<li>The border options let you set one that is static (i.e. on all the time) or only on when a visitor to your site hovers over it.<\/li>\n<li>With Border Type, you can choose from a different border, such as solid, dashed, dotted, etc.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5927\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-1.png\" alt=\"\" width=\"406\" height=\"561\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-1.png 406w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-1-217x300.png 217w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-1-36x50.png 36w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-1-43x60.png 43w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-1-72x100.png 72w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/p>\n<p>Scroll to element enables you to set this button to jump to content further down the same page. This can be helpful if you are using this button in a FAQ-style page.<\/p>\n<h4 id=\"button-widget-options\">Button Widget Options<\/h4>\n<p>There are many options you should know about, including:<\/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=\"social-profile-widget\">Social Profile Widget<\/h3>\n<p>The Social Profile Widget allows you to insert links to your social media profiles.<\/p>\n<p>When inserted onto a page, it looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5929\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1.png\" alt=\"\" width=\"1918\" height=\"812\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1.png 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1-300x127.png 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1-783x331.png 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1-768x325.png 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1-50x21.png 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1-1536x650.png 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1-60x25.png 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-1-100x42.png 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<h4 id=\"social-profile-widget-settings\">Social Profile Widget Settings<\/h4>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5930\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-1.png\" alt=\"\" width=\"402\" height=\"693\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-1.png 402w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-1-174x300.png 174w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-1-29x50.png 29w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-1-35x60.png 35w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-1-58x100.png 58w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/p>\n<p>There are a few settings which go along with this widget which you should be familiar with, including:<\/p>\n<ul>\n<li>The Social Section lets you add\/remove different social networks. By default, three Facebooks are added, but you can remove them and add others, such as Twitter, Instagram, and LinkedIn.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5931\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-1.png\" alt=\"\" width=\"401\" height=\"712\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-1.png 401w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-1-169x300.png 169w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-1-28x50.png 28w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-1-34x60.png 34w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-1-56x100.png 56w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/a><\/p>\n<ul>\n<li>The Background Shape option lets you choose whether you want a background shape behind the Social Media platform icon.<\/li>\n<li>You can align the social icon widget to the left, center, or right, with the Alignment setting.<\/li>\n<li>With Layout, you can set the buttons to be laid out in a horizontal or vertical line.<\/li>\n<li>The Space Between option lets you choose how many pixels are in between each social media platform icon.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5932\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-1.png\" alt=\"\" width=\"404\" height=\"676\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-1.png 404w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-1-179x300.png 179w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-1-30x50.png 30w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-1-36x60.png 36w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-1-60x100.png 60w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/p>\n<p>With the Icon settings, you can choose:<\/p>\n<ul>\n<li>The size of the social media icons.<\/li>\n<li>The colors of them.<\/li>\n<li>Whether you want a &#8220;state&#8221; applied to them, such a one that&#8217;s always on, or one that only activates when the user hovers over the icon.<\/li>\n<li>And you can choose from the border type, such as solid, dotted, dashed, none, etc.<\/li>\n<\/ul>\n<h4 id=\"social-profile-widget-options\">Social Profile Widget Options<\/h4>\n<p>There are a lot of different options for this widget, including:<\/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=\"button-group-widget\">Button Group Widget<\/h3>\n<p>The button group widget allows you to insert groups of buttons, each of which can have their own function.<\/p>\n<p>When inserted onto a page, it looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5937\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4.png\" alt=\"\" width=\"1918\" height=\"831\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4.png 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4-300x130.png 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4-783x339.png 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4-768x333.png 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4-50x22.png 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4-1536x665.png 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4-60x26.png 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/1-4-100x43.png 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<h4 id=\"button-widget-settings-2\">Button Widget Settings<\/h4>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5938\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-4.png\" alt=\"\" width=\"402\" height=\"810\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-4.png 402w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-4-149x300.png 149w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-4-389x783.png 389w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-4-25x50.png 25w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-4-30x60.png 30w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/2-4-50x100.png 50w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/p>\n<p>The button widget has several settings you should be aware of, including:<\/p>\n<ul>\n<li>The ability to add and remove buttons. You can also rename them to suit your purpose for adding them.<\/li>\n<li>You can set the alignment of the buttons from left, center, and right.<\/li>\n<li>You can also change the layout of the buttons from a horizontal layout, or vertical layout.<\/li>\n<li>You can also adjust the space between the buttons in pixels, if you wish.<\/li>\n<\/ul>\n<h4 id=\"button-widget-settings-3\">Button Widget Settings<\/h4>\n<p>There are many button widget settings you should be aware of, including:<\/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<p>Social Share Widget<\/p>\n<p>The social share widget lets you create buttons that allows visitors to your website to share your content in their social media feeds.<\/p>\n<p>When inserted onto a page, it looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5939\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4.png\" alt=\"\" width=\"1918\" height=\"803\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4.png 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4-300x126.png 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4-783x328.png 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4-768x322.png 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4-50x21.png 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4-1536x643.png 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4-60x25.png 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/3-4-100x42.png 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<h4 id=\"social-share-widget-settings\">Social Share Widget Settings<\/h4>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-4.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5941\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-4.png\" alt=\"\" width=\"407\" height=\"794\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-4.png 407w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-4-154x300.png 154w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-4-401x783.png 401w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-4-26x50.png 26w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-4-31x60.png 31w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/4-4-51x100.png 51w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<p>There are several settings you should know about, including:<\/p>\n<ul>\n<li>The option to add more buttons.<\/li>\n<li>The option to arrange the buttons how you wish.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-5.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5945\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-5.png\" alt=\"\" width=\"406\" height=\"1078\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-5.png 406w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-5-113x300.png 113w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-5-295x783.png 295w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-5-19x50.png 19w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-5-23x60.png 23w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/5-5-38x100.png 38w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/p>\n<ul>\n<li>You can choose your Icon-Client Areael, i.e. which will show the social media icon + the network name, just the name, or just their logo.<\/li>\n<li>You can show how many icons you want on a single line.<\/li>\n<li>You can change the background shape, as well as the alignment.<\/li>\n<li>You can also change the space between (vertical) and space between (horizontal) of the icons.<\/li>\n<li>The height of the social media row is also adjustable.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5946\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-3.png\" alt=\"\" width=\"407\" height=\"843\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-3.png 407w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-3-145x300.png 145w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-3-378x783.png 378w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-3-24x50.png 24w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-3-29x60.png 29w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/6-3-48x100.png 48w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<p>The icon style settings allow you to adjust the following:<\/p>\n<ul>\n<li>The size of the icons.<\/li>\n<li>The space around the icons.<\/li>\n<li>The color theme of the icons.<\/li>\n<li>Their state, if they are static, or if something should happen to them when a visitor hovers over them.<\/li>\n<li>And you can set the border type, solid, dotted, dashed, etc.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5947\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-2.png\" alt=\"\" width=\"407\" height=\"595\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-2.png 407w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-2-205x300.png 205w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-2-34x50.png 34w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-2-41x60.png 41w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/7-2-68x100.png 68w\" sizes=\"auto, (max-width: 407px) 100vw, 407px\" \/><\/a><\/p>\n<p>The label style settings let you control the following:<\/p>\n<ul>\n<li>If you want the social network name to show on the button.<\/li>\n<li>And which fonts are used.<\/li>\n<\/ul>\n<h4 id=\"social-share-widget-options\">Social Share Widget Options<\/h4>\n<p>There are many options you should be aware of:<\/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=\"download-button-widget\">Download Button Widget<\/h3>\n<p>The download button widget lets you insert a download button so your visitors can download files from your website.<\/p>\n<p>When inserted onto a page, the widget looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5948\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2.png\" alt=\"\" width=\"1918\" height=\"813\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2.png 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2-300x127.png 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2-783x332.png 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2-768x326.png 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2-50x21.png 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2-1536x651.png 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2-60x25.png 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/8-2-100x42.png 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<h4 id=\"download-widget-settings\">Download Widget Settings<\/h4>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5949\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-2.png\" alt=\"\" width=\"402\" height=\"1058\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-2.png 402w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-2-114x300.png 114w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-2-298x783.png 298w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-2-19x50.png 19w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-2-23x60.png 23w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/9-2-38x100.png 38w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/p>\n<p>There are many settings for the Download widget, including:<\/p>\n<ul>\n<li>The option to set what text you want to display on the button.<\/li>\n<li>The choice of file you want to download.<\/li>\n<li>Whether you want the button to stretch the width of the page.<\/li>\n<li>The alignment of the button.<\/li>\n<li>And the typography used.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5950\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-2.png\" alt=\"\" width=\"398\" height=\"550\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-2.png 398w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-2-217x300.png 217w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-2-36x50.png 36w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-2-43x60.png 43w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/10-2-72x100.png 72w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/a><\/p>\n<p>The button style settings allow you to:<\/p>\n<ul>\n<li>Set the button type.<\/li>\n<li>And the button size.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/11-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5952\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/11-1.png\" alt=\"\" width=\"405\" height=\"712\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/11-1.png 405w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/11-1-171x300.png 171w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/11-1-28x50.png 28w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/11-1-34x60.png 34w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/11-1-57x100.png 57w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><\/a><\/p>\n<p>The Icon Style lettings let you set:<\/p>\n<ul>\n<li>The icon used on the button.<\/li>\n<li>The alignment of the text.<\/li>\n<li>The space between the buttons, if you choose to add extra ones.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/12-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5953\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/12-1.png\" alt=\"\" width=\"404\" height=\"604\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/12-1.png 404w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/12-1-201x300.png 201w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/12-1-33x50.png 33w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/12-1-40x60.png 40w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/07\/12-1-67x100.png 67w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/p>\n<p>The Border settings let you:<\/p>\n<ul>\n<li>Set a state for the icon, whether it&#8217;s static or the border appears when a visitor hovers over the icon.<\/li>\n<li>And the border type, such as solid, dotted, dashed, etc.<\/li>\n<\/ul>\n<h4 id=\"download-widget-options\">Download Widget Options<\/h4>\n<p>There are a lot of options for this widget, including:<\/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-5914","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\/5914","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=5914"}],"version-history":[{"count":7,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/5914\/revisions"}],"predecessor-version":[{"id":7190,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/5914\/revisions\/7190"}],"wp:attachment":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/media?parent=5914"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=5914"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=5914"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}