{"title":"Phlox Button","id":37235,"link":"https:\/\/env.averta.net\/en\/step\/phlox-button\/","parent":[37224],"content":"<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37313 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/buttons-1-e1481013841252.png\" alt=\"buttons\" width=\"315\" height=\"206\" \/>A?<strong>Button<\/strong> <strong>Widget<\/strong>?can be added to any post or page on your website. You are able to create different kinds of buttons and customize the?button size, shape, style, etc.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>One more way to add a button to the posts or pages, is adding a shortcode.?Read <a href=\"https:\/\/env.averta.net\/en\/step\/adding-a-button-between-the-content\/?b=36965,36965\" title=\"Adding a Button between the Content\">this article<\/a> to find out more information.<\/p>\n<h3>Video Tutorial<\/h3>\n<div style=\"position: relative; height: 0; padding-bottom: 56.25%;\"><iframe loading=\"lazy\" width=\"560\" height=\"315\" style=\"position: absolute; width: 100%; height: 100%; left: 0; display: block;\" src=\"https:\/\/www.youtube.com\/embed\/DiiVuwhNwnU?rel=0\" frameborder=\"0\" encrypted-media=\"\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">?<\/span><\/iframe><\/div>\n<hr style=\"clear: both;\" \/>\n<h3>Access Button Options in Elementor Page Builder<\/h3>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top left hand of the WordPress text-box and find?<strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">Edit with Elementor<\/a><\/strong><strong>?<\/strong>button.<\/li>\n<li>Check out?<strong>Elements<\/strong><\/li>\n<li>Scroll down to?<strong>PHLOX &#8211; General?<\/strong>section<\/li>\n<li>Choose <b>Button<\/b><\/li>\n<\/ol>\n<p>After adding a button to your content, you are able to customize it by available options:<\/p>\n<ul>\n<li>\n<h3>Content<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/content-button.png\"><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-55636 alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/content-button.png\" alt=\"\" width=\"301\" height=\"305\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/content-button.png 301w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/content-button-296x300.png 296w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/content-button-60x60.png 60w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/content-button-171x173.png 171w\" sizes=\"(max-width: 301px) 100vw, 301px\" \/><\/a><\/h3>\n<\/li>\n<\/ul>\n<h4>Button<\/h4>\n<p>Write a name for your button on <strong>Button label<\/strong>.<\/p>\n<h4>Link<\/h4>\n<p>You can add a link to your button.<\/p>\n<div style=\"clear: both;\"><\/div>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-55637 size-full alignleft\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button-style-elementor.jpg\" alt=\"\" width=\"300\" height=\"1355\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button-style-elementor.jpg 300w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button-style-elementor-227x1024.jpg 227w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button-style-elementor-38x173.jpg 38w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<ul>\n<li>\n<h3>Style<\/h3>\n<\/li>\n<\/ul>\n<h4>General<\/h4>\n<p>Button widget has some general options. You can change the?<strong>Color of button?<\/strong>or its <strong>Size.<\/strong><\/p>\n<p>Also, there are three available <strong>shapes:?Box, Round,?<\/strong>and?<strong>Curve?<\/strong> and three <strong>styles<\/strong>\ud83d\ude15<strong>Normal, 3D,?<\/strong>and?<strong>Outline<\/strong><\/p>\n<h4>Icon<\/h4>\n<p>In this section, you are able to select an icon for your button. The <strong>alignment<\/strong> of the selected icon can be set to?<strong>Left<\/strong>, <strong>Right<\/strong>, <strong>Over<\/strong>,?and?<strong>Animate from Left<\/strong> <strong>or<\/strong> <strong>Right<\/strong>.?The?<strong>Color?<\/strong>is customizable, too.?<strong>Padding<\/strong> properties are used to generate space around<strong>?<\/strong>the icon and?you can set different paddings on mobile and tablet.<\/p>\n<h4>Text<\/h4>\n<p>The button text is editable and you can change its?<strong>Color?<\/strong>and?<strong>Typography<\/strong>. Also, you can change its?<strong>Padding<\/strong>.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>Check out <a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-elementor-page-builder\/?b=55475,55475\" title=\"Getting Started with Elementor Page Builder\">this article<\/a> to know more about Advanced tab and start working with Elementor.<\/p>\n<hr style=\"clear: both;\" \/>\n<h3>Access Button Options in SiteOrigin Page Builder<\/h3>\n<p>Follow below steps to add <strong>Button<\/strong>?<strong>Widget<\/strong>?in your posts and pages content:<\/p>\n<ol>\n<li>Go to your <strong>WordPress Admin Panel<\/strong><\/li>\n<li>Click the <b>Pages?<\/b>on the <b>Dashboard<\/b><\/li>\n<li>Click the <b>Add New<\/b><\/li>\n<li>Navigate to the top right hand of the WordPress editor and find <strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Page Builder<\/a><\/strong>, beside text tab<\/li>\n<li>Click?the?<strong>Add Widget<\/strong><\/li>\n<li>Click the?<strong>Phlox?<\/strong>and choose?<strong>[Phlox]?Button<\/strong><\/li>\n<li>Click the?<strong>Edit?<\/strong>on the right side of the widget on?<strong>Page Builder<\/strong><\/li>\n<\/ol>\n<p>After adding a button to your content, you are able to customize it by available options:<\/p>\n<h4>Button Label<a href=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-48137 size-full alignright\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button.jpg\" alt=\"\" width=\"304\" height=\"1098\" srcset=\"https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button.jpg 304w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button-83x300.jpg 83w, https:\/\/env.averta.net\/en\/wp-content\/uploads\/phlox-button-48x173.jpg 48w\" sizes=\"(max-width: 304px) 100vw, 304px\" \/><\/a><\/h4>\n<p>In this field, you can add a label for your button.<\/p>\n<h4>Button Size<\/h4>\n<p>Each button can have different sizes: Ex-large, Large, Medium, Small, Tiny<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37062\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/exlarge.png\" alt=\"exlarge\" width=\"142\" height=\"49\" \/>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37063\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/large.png\" alt=\"large\" width=\"110\" height=\"45\" \/>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37064\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/medium.png\" alt=\"medium\" width=\"83\" height=\"31\" \/>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37065\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/small.png\" alt=\"small\" width=\"76\" height=\"27\" \/>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37066\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/tiny.png\" alt=\"tiny\" width=\"71\" height=\"24\" \/><\/p>\n<h4>Button Shape Style<\/h4>\n<p>The shape of the button can be changed to Box, Round, Curve<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37067\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/box.png\" alt=\"box\" width=\"83\" height=\"31\" \/>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37068\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/round-e1480242097575.png\" alt=\"round\" width=\"84\" height=\"32\" \/>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-38027\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/button-1.png\" alt=\"\" width=\"85\" height=\"33\" \/><\/p>\n<h4>Button Style<\/h4>\n<p>Buttons can appear in three styles: Normal, 3D, Outline<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-37078\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/normal.png\" alt=\"normal\" width=\"83\" height=\"31\" \/>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-37079 size-full\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/3d-e1480247184428.png\" alt=\"3d\" width=\"84\" height=\"38\" \/>?<img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-37080 size-full\" style=\"padding: 0;\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/outline-e1480247214453.png\" alt=\"outline\" width=\"86\" height=\"34\" \/><\/p>\n<h4>Uppercase Label<\/h4>\n<p>To uppercase all the label&#8217;s characters, switch this on.<\/p>\n<h4>Darken the Label<\/h4>\n<p>In the case of a light colored button, like white, you can switch on this option to darken the label of button.<\/p>\n<h4>Icon for Button<\/h4>\n<p>There are almost a thousand available icons to use on the button.<\/p>\n<h4>Icon Alignment<\/h4>\n<p>You are able to align the button icon to:<\/p>\n<table width=\"100%;\">\n<tbody>\n<tr>\n<th style=\"text-align: center;\">?Icon Alignment<\/th>\n<th style=\"text-align: center;\">?Icon Alignment Preview<\/th>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?Left<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37073 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/left-icon.png\" alt=\"left-icon\" width=\"169\" height=\"56\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?Right<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37074 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/right-icon.png\" alt=\"right-icon\" width=\"169\" height=\"56\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?Over<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37075 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/animate-over.gif\" alt=\"animate-over\" width=\"153\" height=\"47\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?Animate from Left<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37077 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/animate-left.gif\" alt=\"animate-left\" width=\"182\" height=\"56\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: center;\">?Animate from Right<\/td>\n<td>?<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-37076 aligncenter\" src=\"http:\/\/env.averta.net\/en\/wp-content\/uploads\/animate-right.gif\" alt=\"animate-right\" width=\"181\" height=\"55\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Color of Button<\/h4>\n<p>This option specifies the color of the button. To see all available colors for Phlox button, check out <a href=\"https:\/\/env.averta.net\/en\/step\/available-colors-in-phlox\/?b=36954,36954\" title=\"Available Colors in Phlox\">this page<\/a>.<\/p>\n<h4>Link<\/h4>\n<p>If you want to link your button to another page, you can write the URL in this field.<\/p>\n<h4>Open Link in<\/h4>\n<p>You can either open the link in the current page or in the new page.<\/p>\n<p class=\"aswi-text-box box-recommend\"><strong>Recommended: <\/strong>To see the buttons demos, check out <a href=\"http:\/\/averta.net\/phlox\/wordpress-theme\/demo\/default\/button\/\">this link<\/a>.<\/p>\n<p class=\"aswi-text-box box-info\"><strong>Note: <\/strong><a href=\"https:\/\/env.averta.net\/en\/step\/getting-started-with-siteorigin-page-builder\/?b=36079,36079\" title=\"Getting Started with SiteOrigin Page Builder\">Here<\/a> you can find the common?styles of widgets in Page Builder.<\/p>\n","type":"solution"}