{"id":5662,"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=5662"},"modified":"2022-03-18T10:00:55","modified_gmt":"2022-03-18T10:00:55","slug":"all-about-the-text-widgets-in-the-website-builder","status":"publish","type":"ht_kb","link":"https:\/\/chemicloud.com\/kb\/article\/all-about-the-text-widgets-in-the-website-builder\/","title":{"rendered":"All About The Text 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 Text 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-text-widgets-in-the-website-builder\">All About The Text Widgets in the Website Builder<\/h2>\n<p>There are eight Text Widgets. They are as follows:<\/p>\n<ul>\n<li>Title<\/li>\n<li>Rich Text<\/li>\n<li>Quote<\/li>\n<li>List<\/li>\n<li>Icon<\/li>\n<li>Badge<\/li>\n<li>Tooltip<\/li>\n<li>Animated Heading<\/li>\n<\/ul>\n<p>Let&#8217;s explore what each of these widgets do.<\/p>\n<h3 id=\"title-widget\">Title Widget<\/h3>\n<p>The Title Widget allows you to add Headline Text to a section of your web page. This is used to call attention to the beginning of a story or section of a story.<\/p>\n<p>When added to a page, it looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5676\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2.png\" alt=\"\" width=\"1916\" height=\"976\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2.png 1916w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2-300x153.png 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2-783x399.png 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2-768x391.png 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2-50x25.png 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2-1536x782.png 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2-60x31.png 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-2-100x51.png 100w\" sizes=\"auto, (max-width: 1916px) 100vw, 1916px\" \/><\/a><\/p>\n<h3 id=\"title-widget-settings\">Title Widget Settings<\/h3>\n<p>You have a few options on the left side when it comes to editing the Heading Text:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5677\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-2.png\" alt=\"\" width=\"386\" height=\"686\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-2.png 386w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-2-169x300.png 169w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-2-28x50.png 28w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-2-34x60.png 34w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-2-56x100.png 56w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><\/a><\/p>\n<p>The editor at the top allows you to edit the text here, if you wish, instead of on the page preview to the right side (not pictured).<\/p>\n<p>You can also make the Title Text a link, which is super handy if the title is to a Blog post and you like to link the full URL of the blog post to the Title of the post so people can open the post in it&#8217;s own page.<\/p>\n<p>With the alignment feature, you can adjust the alignment of the Title text to best suit your design needs.<\/p>\n<h4 id=\"title-widget-options\">Title Widget Options<\/h4>\n<p>Beneath Edit Title, 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=\"rich-text-widget\">Rich Text Widget<\/h3>\n<p>The Rich Text Widget allows you to enter text that is formatted any way you like. The term &#8220;rich&#8221; comes from the ability to use features like Bold, Italic, and Underline, to make the text &#8220;pop on the page&#8221;.<\/p>\n<p>When inserted into a page, the Rich Text Widget looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5679\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25.jpg\" alt=\"\" width=\"1918\" height=\"1086\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25.jpg 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25-300x170.jpg 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25-783x443.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25-768x435.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25-50x28.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25-1536x870.jpg 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25-60x34.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/1-25-100x57.jpg 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<p>You have many options when it comes to editing the text. Below is the Rich Text editor:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-27.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5680\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-27.jpg\" alt=\"\" width=\"396\" height=\"1008\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-27.jpg 396w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-27-118x300.jpg 118w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-27-308x783.jpg 308w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-27-20x50.jpg 20w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-27-24x60.jpg 24w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/2-27-39x100.jpg 39w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/><\/a><\/p>\n<h4 id=\"rich-text-widget-settings\">Rich Text Widget Settings<\/h4>\n<p>As you can see from the options above, the Website Builder is quite capable of giving you the option to personalize the text on your website.<\/p>\n<h4 id=\"rich-text-widget-options\">Rich Text Widget Options<\/h4>\n<p>Beneath Edit Rich Text, 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=\"quote-widget\">Quote Widget<\/h3>\n<p>The Quote Widget is really handy for adding testimonial text to your website. If you are selling a product or service, testimonials can be an important part of convincing your website.<\/p>\n<p>When added to a Website, the Quote Widget looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5681\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19.jpg\" alt=\"\" width=\"1918\" height=\"1108\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19.jpg 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19-300x173.jpg 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19-783x452.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19-768x444.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19-50x29.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19-1536x887.jpg 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19-60x35.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/3-19-100x58.jpg 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<h4 id=\"quote-widget-settings\">Quote Widget Settings<\/h4>\n<p>There are a few Quote Widget Settings to call out:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-12.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5682\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-12.jpg\" alt=\"\" width=\"404\" height=\"898\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-12.jpg 404w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-12-135x300.jpg 135w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-12-352x783.jpg 352w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-12-22x50.jpg 22w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-12-27x60.jpg 27w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/4-12-45x100.jpg 45w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/p>\n<ul>\n<li>At the top of the Editor is the Quote section where you can enter the text of your quote. You can do this on the page as well, if you prefer.<\/li>\n<li>You can adjust other settings such as the color of the text, the background color, and the space between the other widget on the page, plus the font that is used.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-11.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5683\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-11.jpg\" alt=\"\" width=\"403\" height=\"764\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-11.jpg 403w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-11-158x300.jpg 158w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-11-26x50.jpg 26w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-11-32x60.jpg 32w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/5-11-53x100.jpg 53w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/a><\/p>\n<ul>\n<li>With the Quote Style settings, you can change the quotation type from:\n<ul>\n<li>Default<\/li>\n<li>Quotation<\/li>\n<li>Double Quotation<\/li>\n<\/ul>\n<\/li>\n<li>Adjust the position of your Quote Widget by using the Positioning tool.<\/li>\n<li>With Size, you can make the Quote smaller or larger.<\/li>\n<li>Change the color of the Quotes if you wish using the color picker.<\/li>\n<li>Align your quote from left, center, or right using the Alignment feature.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-8.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5685\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-8.jpg\" alt=\"\" width=\"405\" height=\"910\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-8.jpg 405w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-8-134x300.jpg 134w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-8-348x783.jpg 348w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-8-22x50.jpg 22w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-8-27x60.jpg 27w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/6-8-45x100.jpg 45w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><\/a><\/p>\n<ul>\n<li>Make sure your quote citation is present using the Cite Settings where you can set a Name for the Author of the quote.<\/li>\n<li>If you wish, you can also apply a hyperlink to the quote, if you are linking the author of the quote to their blog, for example.<\/li>\n<li>You can also adjust additional settings, such as the alignment and typography settings of the citation.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/7-5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5686\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/7-5.jpg\" alt=\"\" width=\"401\" height=\"706\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/7-5.jpg 401w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/7-5-170x300.jpg 170w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/7-5-28x50.jpg 28w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/7-5-34x60.jpg 34w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/7-5-57x100.jpg 57w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/a><\/p>\n<ul>\n<li>The Left Border settings let you control the tiny area that is to the left of the Quote and Citation. The left border is a design element.<\/li>\n<li>With the Width setting, you can adjust how wide the border is.<\/li>\n<li>You can adjust the color of the border fill, and set it to a color that goes with your theme.<\/li>\n<li>You can adjust how much space is in between the border and the citation text using the Left spacing.<\/li>\n<li>With the Top Bottom spacing, you can adjust the space between the top bottom.<\/li>\n<\/ul>\n<h4 id=\"quote-widget-options\">Quote Widget Options<\/h4>\n<p>Beneath Edit Quote, 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=\"list-widget\">List Widget<\/h3>\n<p>The List Widget is useful when you need to add items to your site in a listed format. You can choose from hundreds of icon options to lead your list as bullet styles, as well.<\/p>\n<p>When inserted onto a page, the List Widget looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5691\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3.jpg\" alt=\"\" width=\"1918\" height=\"1123\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3.jpg 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3-300x176.jpg 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3-783x458.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3-768x450.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3-50x29.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3-1536x899.jpg 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3-60x35.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/8-3-100x59.jpg 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<h3 id=\"list-widget-settings\">List Widget Settings<\/h3>\n<p>Let&#8217;s review the List Widget Settings!<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/9-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5692\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/9-1.jpg\" alt=\"\" width=\"404\" height=\"993\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/9-1.jpg 404w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/9-1-122x300.jpg 122w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/9-1-319x783.jpg 319w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/9-1-20x50.jpg 20w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/9-1-24x60.jpg 24w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/9-1-41x100.jpg 41w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/p>\n<ul>\n<li>At the very top you have the List Item Editor. This is where you would add and remove items from your list.<\/li>\n<li>Using the hamburger menu that is on the left of the List Item, you can rearrange them as you wish.<\/li>\n<li>The clone icon to the right of the List Item allows you to duplicate that item.<\/li>\n<li>Beneath it, you can click the Add Item to add an item to the list.<\/li>\n<li>There are a number of list styles you can choose from:<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/10-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5693\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/10-1.jpg\" alt=\"\" width=\"229\" height=\"675\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/10-1.jpg 229w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/10-1-102x300.jpg 102w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/10-1-17x50.jpg 17w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/10-1-20x60.jpg 20w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/10-1-34x100.jpg 34w\" sizes=\"auto, (max-width: 229px) 100vw, 229px\" \/><\/a><\/p>\n<p>In addition to different styles (above) you can adjust the space between the different items on the list and the icon on the left.<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/11.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5694\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/11.jpg\" alt=\"\" width=\"403\" height=\"720\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/11.jpg 403w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/11-168x300.jpg 168w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/11-28x50.jpg 28w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/11-34x60.jpg 34w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/11-56x100.jpg 56w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/a><\/p>\n<p>Let&#8217;s look at the Text Styles:<\/p>\n<ul>\n<li>State allows you to set whether the styles appear when they are Normal or Hovered over.<\/li>\n<li>You can also change the color of the list items text, or the background color of the list container.<\/li>\n<li>With the typography setting, you can change the fonts used.<\/li>\n<li>Using the Intent feature, you can change how far inward the list items appear from the edge margin of the page.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/12.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5695\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/12.jpg\" alt=\"\" width=\"406\" height=\"706\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/12.jpg 406w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/12-173x300.jpg 173w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/12-29x50.jpg 29w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/12-35x60.jpg 35w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/12-58x100.jpg 58w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/p>\n<p>Taking a look at the Icon Style settings:<\/p>\n<ul>\n<li>With the State feature, you can change the color of the icons as they are (static) or only when they&#8217;re hovered over.<\/li>\n<li>The Color feature allows you to adjust the color of the icons.<\/li>\n<li>Size allows you to increase or decrease the overall size of the icons.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/13.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5696\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/13.jpg\" alt=\"\" width=\"396\" height=\"668\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/13.jpg 396w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/13-178x300.jpg 178w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/13-30x50.jpg 30w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/13-36x60.jpg 36w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/05\/13-59x100.jpg 59w\" sizes=\"auto, (max-width: 396px) 100vw, 396px\" \/><\/a><\/p>\n<p>Let&#8217;s peek at the Divider settings:<\/p>\n<ul>\n<li>The divider is the line between different items on the list.<\/li>\n<li>You can change the type from:\n<ul>\n<li>None<\/li>\n<li>Solid<\/li>\n<li>Double<\/li>\n<li>Dotted<\/li>\n<li>Dashed<\/li>\n<li>Groove<\/li>\n<\/ul>\n<\/li>\n<li>You can adjust the color of the divider.<\/li>\n<li>And you can set the width of the divider in pixels.<\/li>\n<\/ul>\n<h4 id=\"list-widget-options\">List Widget Options<\/h4>\n<p>Beneath Edit List, 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=\"icon-widget\">Icon Widget<\/h3>\n<p>The Website Builder incorporates the icon set from <a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener nofollow\">Font Awesome<\/a> which gives you access to hundreds of different icons. Using the Icon Widget allows you to place one of these icons on your website.<\/p>\n<p>When inserted into a page, the icon widget looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5866\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9.jpg\" alt=\"\" width=\"1918\" height=\"845\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9.jpg 1918w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9-300x132.jpg 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9-783x345.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9-768x338.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9-50x22.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9-1536x677.jpg 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9-60x26.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-9-100x44.jpg 100w\" sizes=\"auto, (max-width: 1918px) 100vw, 1918px\" \/><\/a><\/p>\n<h4 id=\"icon-widget-settings\">Icon Widget Settings<\/h4>\n<p>There are several settings for the Icon Widget you should be aware of:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-10.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5867\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-10.jpg\" alt=\"\" width=\"406\" height=\"791\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-10.jpg 406w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-10-154x300.jpg 154w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-10-402x783.jpg 402w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-10-26x50.jpg 26w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-10-31x60.jpg 31w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-10-51x100.jpg 51w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/p>\n<ul>\n<li>The Icon selector allows you to choose from hundreds of icons.<\/li>\n<li>If you are inserting multiple icons, you can control the spacing between them with the Background Spacing options.<\/li>\n<li>With Link, you can hyperlink the Icon itself to another URL on the internet.<\/li>\n<li>Using the Alignment feature, you can change the alignment of the icon.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-6.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5868\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-6.jpg\" alt=\"\" width=\"398\" height=\"713\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-6.jpg 398w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-6-167x300.jpg 167w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-6-28x50.jpg 28w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-6-33x60.jpg 33w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-6-56x100.jpg 56w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/a><\/p>\n<ul>\n<li>In the Style and Hover Effects, you can set a Hover or Normal effect for the Icon.<\/li>\n<li>You can also change the color of the icon fill here.<\/li>\n<li>If you want a shape to appear in the background, you can choose one from the list.<\/li>\n<li>You can also choose the size of the icon using the drop down next to Size.<\/li>\n<li>You can enter a rotation, if you wish, for the icon, as well.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-7.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5869\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-7.jpg\" alt=\"\" width=\"398\" height=\"498\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-7.jpg 398w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-7-240x300.jpg 240w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-7-40x50.jpg 40w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-7-48x60.jpg 48w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-7-80x100.jpg 80w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/a><\/p>\n<ul>\n<li>For Border Effects, you can choose a border to appear all the time or when the icon is hovered over.<\/li>\n<li>For Border type, you can choose from border styles, such as solid line, dotted line, dashed lines, etc.<\/li>\n<\/ul>\n<h4 id=\"icon-widget-options\">Icon Widget Options<\/h4>\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=\"badge-widget\">Badge Widget<\/h3>\n<p>The Badge widget allows you to add a colored label adjacent to title text. This can be used for sorting content, or adding warning or notation tags (badges) to certain texts.<\/p>\n<p>When inserted into a page, the widget looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5870\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6.jpg\" alt=\"\" width=\"1916\" height=\"971\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6.jpg 1916w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6-300x152.jpg 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6-783x397.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6-768x389.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6-50x25.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6-1536x778.jpg 1536w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6-60x30.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-6-100x51.jpg 100w\" sizes=\"auto, (max-width: 1916px) 100vw, 1916px\" \/><\/a><\/p>\n<h4 id=\"badge-widget-settings\">Badge Widget Settings<\/h4>\n<p>There are several settings for the badge widget you should be aware of:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5871\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-5.jpg\" alt=\"\" width=\"405\" height=\"865\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-5.jpg 405w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-5-140x300.jpg 140w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-5-367x783.jpg 367w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-5-23x50.jpg 23w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-5-28x60.jpg 28w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-5-47x100.jpg 47w\" sizes=\"auto, (max-width: 405px) 100vw, 405px\" \/><\/a><\/p>\n<ul>\n<li>The Client Areael option allows you to change the text that is displayed inside the badge. The default is Badge, but you can make it say anything.<\/li>\n<li>URL allows you to hyperlink the badge to another site on the Internet.<\/li>\n<li>The Type option allows you to select from a drop down preset looks for the Badge. You can choose from:\n<ul>\n<li>Primary<\/li>\n<li>Secondary<\/li>\n<li>Success<\/li>\n<li>Warning<\/li>\n<li>Danger<\/li>\n<li>Info<\/li>\n<li>Light<\/li>\n<li>Dark<\/li>\n<li>Custom<\/li>\n<\/ul>\n<\/li>\n<li>Badge Style allows you to change the shape of the badge from Normal (or rectangular) or Pill shaped.<\/li>\n<li>You can also change the vertical alignment of the Badge to Top or Bottom for appearance purposes.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/7-4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5872\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/7-4.jpg\" alt=\"\" width=\"410\" height=\"783\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/7-4.jpg 410w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/7-4-157x300.jpg 157w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/7-4-26x50.jpg 26w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/7-4-31x60.jpg 31w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/7-4-52x100.jpg 52w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<p>The Text options allow you to change the text that is adjacent to the Badge and the way it looks. You can choose from these settings:<\/p>\n<ul>\n<li>Where it says &#8220;your custom text&#8221; you can change the text inside the box adjacent to the badge.<\/li>\n<li>Using State, you can change the way the text appears when it is hovered over or static.<\/li>\n<li>You can change the color of the text using the color picker.<\/li>\n<li>Using typography, you can change the font that is used in the text box.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/8-3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5873\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/8-3.jpg\" alt=\"\" width=\"415\" height=\"826\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/8-3.jpg 415w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/8-3-151x300.jpg 151w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/8-3-393x783.jpg 393w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/8-3-25x50.jpg 25w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/8-3-30x60.jpg 30w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/8-3-50x100.jpg 50w\" sizes=\"auto, (max-width: 415px) 100vw, 415px\" \/><\/a><\/p>\n<p>The Badge Style settings allow you to change a few of the appearance settings for the Badge Widget:<\/p>\n<ul>\n<li>Using the Space Between slider, you can adjust the space between the Badge and the text to the left of the Badge.<\/li>\n<li>Using Top Bottom spacing, you can adjust the spacing between the top and bottom lines containing the Badge.<\/li>\n<li>Using Left Right spacing, you can adjust the spacing between the left and the right of the cell containing the Badge.<\/li>\n<li>With Typography, you can adjust the Font that is used in the Badge.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/9-3.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5874\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/9-3.jpg\" alt=\"\" width=\"400\" height=\"491\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/9-3.jpg 400w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/9-3-244x300.jpg 244w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/9-3-41x50.jpg 41w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/9-3-49x60.jpg 49w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/9-3-81x100.jpg 81w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/a><\/p>\n<p>The Button Badge allows you to turn the text (to the left of the badge) + the badge itself into a web button, i.e. the kind that looks like it&#8217;s from an old fashioned website.<\/p>\n<p>When enabled, the button looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5876\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10.jpg\" alt=\"\" width=\"364\" height=\"362\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10.jpg 828w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10-783x780.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10-150x150.jpg 150w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10-768x765.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10-50x50.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10-80x80.jpg 80w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10-60x60.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-10-100x100.jpg 100w\" sizes=\"auto, (max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<h3 id=\"tool-tip-widget\">Tool Tip Widget<\/h3>\n<p>The Tool Tip Widget allows you to insert text, which when hovered over by the user, will show a tool tip with additional information.<\/p>\n<p>When inserted into a page, this is what the widget looks like:<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2021-06-30_15-26-59.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5877\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2021-06-30_15-26-59.gif\" alt=\"\" width=\"792\" height=\"390\" \/><\/a><\/p>\n<h4 id=\"tool-tip-widget-settings\">Tool Tip Widget Settings<\/h4>\n<p>The Tool Tip Widget is a feature-rich widget and has many functions you should be aware of. Let&#8217;s take a look:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-11.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5878\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-11.jpg\" alt=\"\" width=\"286\" height=\"772\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-11.jpg 398w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-11-111x300.jpg 111w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-11-290x783.jpg 290w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-11-19x50.jpg 19w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-11-22x60.jpg 22w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-11-37x100.jpg 37w\" sizes=\"auto, (max-width: 286px) 100vw, 286px\" \/><\/a><\/p>\n<ul>\n<li>The &#8220;Text&#8221; field is where you edit the text that appears all the time, i.e. not the text that appears when the user hovers over the text.<\/li>\n<li>The content area is where you will find a fully functioning rich text editor. You can use these options to insert media, change font and paragraph settings, and more.<\/li>\n<li>At the very bottom is the text editor where you will enter the text that shows when the tooltip is activated (when the user hovers over the text).<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-7.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5879\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-7.jpg\" alt=\"\" width=\"398\" height=\"490\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-7.jpg 398w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-7-244x300.jpg 244w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-7-41x50.jpg 41w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-7-49x60.jpg 49w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-7-81x100.jpg 81w\" sizes=\"auto, (max-width: 398px) 100vw, 398px\" \/><\/a><\/p>\n<p>The Icon option allows you to insert an icon next to the tool tip widget text. You can choose from hundreds of icons.<\/p>\n<p>When enabled, the icon looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5880\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8.jpg\" alt=\"\" width=\"1328\" height=\"796\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8.jpg 1328w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8-300x180.jpg 300w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8-783x469.jpg 783w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8-768x460.jpg 768w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8-50x30.jpg 50w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8-60x36.jpg 60w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/4-8-100x60.jpg 100w\" sizes=\"auto, (max-width: 1328px) 100vw, 1328px\" \/><\/a><\/p>\n<p>You can also choose the color of the Icon, as well as it&#8217;s spacing between it and the text.<\/p>\n<p>Additionally you can choose the alignment of the Icon to be either on the left side of the text, or the right, as depicted above.<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-7.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5881\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-7.jpg\" alt=\"\" width=\"412\" height=\"433\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-7.jpg 412w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-7-285x300.jpg 285w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-7-48x50.jpg 48w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-7-57x60.jpg 57w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/5-7-95x100.jpg 95w\" sizes=\"auto, (max-width: 412px) 100vw, 412px\" \/><\/a><\/p>\n<p>The Text Style options allow you to change numerous settings related to the text that shows outside of the tool tip widget.<\/p>\n<p>You can change the following settings:<\/p>\n<ul>\n<li>The alignment of the text.<\/li>\n<li>The color of the text.<\/li>\n<li>Which font is used.<\/li>\n<li>And if the text should have a shadow beneath it.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-6.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5882\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-6.jpg\" alt=\"\" width=\"410\" height=\"647\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-6.jpg 410w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-6-190x300.jpg 190w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-6-32x50.jpg 32w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-6-38x60.jpg 38w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/6-6-63x100.jpg 63w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/a><\/p>\n<p>The Tooltip Style settings allow you to change settings related to the text that is inside the tooltip. I.e. the text which appears when the user hovers over the widget.<\/p>\n<p>You can change the following settings:<\/p>\n<ul>\n<li>The position of the tool tip itself, and where it pops out from.<\/li>\n<li>The widget width.<\/li>\n<li>The inner space in the widget, making it bigger or smaller.<\/li>\n<li>The background color.<\/li>\n<li>The color of the widget itself.<\/li>\n<li>Which font is used.<\/li>\n<li>And if the widget should have a shadow around the box.<\/li>\n<\/ul>\n<h3 id=\"animated-heading-widget\">Animated Heading Widget<\/h3>\n<p>The Animated Heading Widget allows you to add a heading which features an animation.<\/p>\n<p>When inserted into a page, the default animation looks like this:<\/p>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2021-06-30_19-07-05.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5884\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2021-06-30_19-07-05.gif\" alt=\"\" width=\"582\" height=\"362\" \/><\/a><\/p>\n<p>Please note, there are various effects to choose from.<\/p>\n<h4 id=\"animated-heading-settings\">Animated Heading Settings<\/h4>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5885\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-1.png\" alt=\"\" width=\"402\" height=\"603\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-1.png 402w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-1-200x300.png 200w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-1-33x50.png 33w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-1-40x60.png 40w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/1-1-67x100.png 67w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/a><\/p>\n<p>The Animated Heading settings allow you to control various settings including;<\/p>\n<ul>\n<li>The type of effect you want to use.<\/li>\n<li>Which effect you want to use.<\/li>\n<li>And the alignment of the heading widget itself.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5886\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-1.png\" alt=\"\" width=\"404\" height=\"691\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-1.png 404w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-1-175x300.png 175w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-1-29x50.png 29w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-1-35x60.png 35w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/2-1-58x100.png 58w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/p>\n<p>The Title Style settings allow you to adjust settings related to the text that is displayed as part of the heading, including:<\/p>\n<ul>\n<li>The text of the heading.<\/li>\n<li>Which font is used.<\/li>\n<li>Whether you want to use a solid color or a gradient as the font color.<\/li>\n<li>And the color of the font.<\/li>\n<\/ul>\n<p><a href=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5887\" src=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-1.png\" alt=\"\" width=\"406\" height=\"838\" srcset=\"https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-1.png 406w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-1-145x300.png 145w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-1-379x783.png 379w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-1-24x50.png 24w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-1-29x60.png 29w, https:\/\/chemicloud.com\/kb\/wp-content\/uploads\/2021\/06\/3-1-48x100.png 48w\" sizes=\"auto, (max-width: 406px) 100vw, 406px\" \/><\/a><\/p>\n<p>The Miscellaneous setting allows you to adjust settings related to the effect. In the image above, you can see I have the ability to choose the colors of the blobs that are animated onto the heading. This is because I have Blobs as the chosen effect.<\/p>\n<p>Your settings here will vary depending on the effect you choose.<\/p>\n<h4 id=\"animated-heading-widget-options\">Animated Heading Widget Options<\/h4>\n<p>The Animated Heading Widget has a lot of different settings, 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-5662","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\/5662","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=5662"}],"version-history":[{"count":15,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/5662\/revisions"}],"predecessor-version":[{"id":7167,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb\/5662\/revisions\/7167"}],"wp:attachment":[{"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/media?parent=5662"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-category?post=5662"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/chemicloud.com\/kb\/wp-json\/wp\/v2\/ht-kb-tag?post=5662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}