{"id":2013,"date":"2020-09-16T10:57:54","date_gmt":"2020-09-16T10:57:54","guid":{"rendered":"https:\/\/dentalia.orionthemes.com\/documentation\/?page_id=2013"},"modified":"2021-01-12T10:40:49","modified_gmt":"2021-01-12T10:40:49","slug":"widget-styles","status":"publish","type":"page","link":"https:\/\/dentalia.orionthemes.com\/documentation\/page-builder\/widget-styles\/","title":{"rendered":"Widget Styles"},"content":{"rendered":"<div id=\"pl-2013\"  class=\"panel-layout\" ><div id=\"pg-2013-0\"  class=\"panel-grid panel-has-style\" ><div class=\"siteorigin-panels-stretch divider-no-animation tablet-1-in-row mobile-default desktop-default text-dark bg-altsitebg panel-row-style panel-row-style-for-2013-0\" data-stretch-type=\"full\" ><div id=\"pgc-2013-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2013-0-0-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"0\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-0-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:6px;\">\r\n\t\t<div class=\"col-md-12   text-left style-display-2 style-primary-color\">\r\n\t\t\t<h1 class=\"primary-color text-uppercase display-2\">\r\n\t\t\t\tWidget Styles\t\t\t<\/h1>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-2013-0-0-1\" class=\"so-panel widget widget_sow-editor\" data-index=\"1\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-0-0-1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<p class=\"lead\">Besides the standard SiteOrigin widget style options, we added some additional settings to improve the layout, style, and behavior of the widgets.<\/p>\n<p class=\"lead\"><strong>Widget Style settings<\/strong> are located in the right-side panels when editing widgets inside Page Builder.<\/p>\n<\/div>\n<\/div><\/div><\/div><div id=\"panel-2013-0-0-2\" class=\"so-panel widget widget_orion_button_w panel-last-child\" data-index=\"2\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-0-0-2\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_button_w so-widget-orion_button_w-base\"\n\t\t\t\n\t\t>\r\n\t\t\t<a class=\"btn btn-c1 btn-flat btn-md\"  href=\"https:\/\/dentalia.orionthemes.com\/documentation\/widgets\/\">\r\n\t\t\tOrion Widget Collection\t\t\r\n\t\t<\/a>\r\n\t\r\n\r\n\r\n\r\n<\/div><\/div><\/div><\/div><div id=\"pgc-2013-0-1\"  class=\"panel-grid-cell\" ><div id=\"panel-2013-0-1-0\" class=\"so-panel widget widget_orion_image_w panel-first-child panel-last-child\" data-index=\"3\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-0-1-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_image_w so-widget-orion_image_w-base\"\n\t\t\t\n\t\t>\r\n<div class=\"image-w relative  img-frame shadow-4\">\r\n\r\n\t\t\t\t\t\t\t\t\t\t<a rel=\"orion-images\" class=\" overlay-none overlay-hover-none\" href=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-pagebuilder-widgetstyles.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-pagebuilder-widgetstyles.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"960\" height=\"717\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-pagebuilder-widgetstyles.jpg\" class=\"attachment- size-\" alt=\"\" loading=\"lazy\" \/>\t\t\t<div class=\"overlay\"><\/div>\r\n\t\t\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\r\n\t\r\n\t<div class=\"absolute\">\r\n\t\t<div class=\"hover-desc table-wrap\">\r\n\t\t\t<div class=\"cell-wrap\">\r\n\t\t\t\t<h4 class=\"text-light\"><\/h4>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\t\t\t\t\t\r\n<\/div>\r\n\r\n<\/div><\/div><\/div><\/div><\/div><\/div><div id=\"pg-2013-1\"  class=\"panel-grid panel-has-style\" ><div class=\"siteorigin-panels-stretch divider-no-animation tablet-2-in-row mobile-1-in-row desktop-default clear panel-row-style panel-row-style-for-2013-1\" data-stretch-type=\"full\" ><div id=\"pgc-2013-1-0\"  class=\"panel-grid-cell\" ><div class=\"clear panel-cell-style panel-cell-style-for-2013-1-0\" ><div id=\"panel-2013-1-0-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"4\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:12px;\">\r\n\t\t<div class=\"col-md-12   text-left style-h2 style-primary-color\">\r\n\t\t\t<h2 class=\"primary-color text-uppercase\">\r\n\t\t\t\t<span class=\"mark mark-doc\">1<\/span> Desktop Layout\t\t\t<\/h2>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-2013-1-0-1\" class=\"so-panel widget widget_sow-editor\" data-index=\"5\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-0-1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<ul class=\"list-arrow lead-list\">\n<li><strong>Overlap row<br \/>\n<\/strong>You can make the widget overlap the row below or above.<br \/>\n(Works best with the <strong>button<\/strong> widget)<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><div id=\"panel-2013-1-0-2\" class=\"so-panel widget widget_orion_dividers_w\" data-index=\"6\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-0-2\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_dividers_w so-widget-orion_dividers_w-base\"\n\t\t\t\n\t\t>\t<hr style=\"border-top-width:2px; border-top-color:rgba(0,0,0,0.05); border-style: dashed; width: 100%;  margin-top:11px; margin-bottom:47px;\"><\/div><\/div><\/div><div id=\"panel-2013-1-0-3\" class=\"so-panel widget widget_orion_heading_w\" data-index=\"7\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-0-3\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:12px;\">\r\n\t\t<div class=\"col-md-12   text-left style-h2 style-primary-color\">\r\n\t\t\t<h2 class=\"primary-color text-uppercase\">\r\n\t\t\t\t<span class=\"mark mark-doc\">2<\/span> Tablet Layout\t\t\t<\/h2>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-2013-1-0-4\" class=\"so-panel widget widget_sow-editor\" data-index=\"8\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-0-4\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<ul class=\"list-arrow lead-list\">\n<li><strong>Center on tablet<br \/>\n<\/strong>Checking this will center the text and buttons on tablets.<br \/>\n(May not work with all widgets)<\/li>\n<li><strong>Stretch on tablet<br \/>\n<\/strong>Checking this removes the side margins of the widget.<\/li>\n<li><strong>Hide on tablet<br \/>\n<\/strong>Checking this will hide the widget on tablets.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><div id=\"panel-2013-1-0-5\" class=\"so-panel widget widget_orion_dividers_w\" data-index=\"9\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-0-5\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_dividers_w so-widget-orion_dividers_w-base\"\n\t\t\t\n\t\t>\t<hr style=\"border-top-width:2px; border-top-color:rgba(0,0,0,0.05); border-style: dashed; width: 100%;  margin-top:11px; margin-bottom:47px;\"><\/div><\/div><\/div><div id=\"panel-2013-1-0-6\" class=\"so-panel widget widget_orion_heading_w\" data-index=\"10\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-0-6\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:12px;\">\r\n\t\t<div class=\"col-md-12   text-left style-h2 style-primary-color\">\r\n\t\t\t<h2 class=\"primary-color text-uppercase\">\r\n\t\t\t\t<span class=\"mark mark-doc\">3<\/span> Mobile Layout\t\t\t<\/h2>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-2013-1-0-7\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"11\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-0-7\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<ul class=\"list-arrow lead-list\">\n<li><strong>Center on mobile<br \/>\n<\/strong>Checking this will center the text and buttons on mobile.<br \/>\n(May not work with all widgets)<\/li>\n<li><strong>Stretch on mobile<br \/>\n<\/strong>Checking this removes the side margins of the widget.<\/li>\n<li><strong>Hide on mobile<br \/>\n<\/strong>Checking this will hide the widget on mobile devices.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><div id=\"pgc-2013-1-1\"  class=\"panel-grid-cell\" ><div id=\"panel-2013-1-1-0\" class=\"so-panel widget widget_orion_image_w panel-first-child\" data-index=\"12\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-1-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_image_w so-widget-orion_image_w-base\"\n\t\t\t\n\t\t>\r\n<div class=\"image-w relative  img-frame shadow-4\">\r\n\r\n\t\t\t\t\t\t\t\t\t\t<a rel=\"orion-images\" class=\" overlay-none overlay-hover-none\" href=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-layout.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-layout.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"580\" height=\"776\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-layout.jpg\" class=\"attachment- size-\" alt=\"\" loading=\"lazy\" \/>\t\t\t<div class=\"overlay\"><\/div>\r\n\t\t\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\r\n\t\r\n\t<div class=\"absolute\">\r\n\t\t<div class=\"hover-desc table-wrap\">\r\n\t\t\t<div class=\"cell-wrap\">\r\n\t\t\t\t<h4 class=\"text-light\"><\/h4>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\t\t\t\t\t\r\n<\/div>\r\n\r\n<\/div><\/div><\/div><div id=\"panel-2013-1-1-1\" class=\"so-panel widget widget_orion_empty_space_w\" data-index=\"13\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-1-1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_empty_space_w so-widget-orion_empty_space_w-base\"\n\t\t\t\n\t\t>\t<div class=\"row empty-space visible-lg visible-md visible-sm visible-xs\" style=\"height:30px;\">\r\n\t<\/div><\/div><\/div><\/div><div id=\"panel-2013-1-1-2\" class=\"so-panel widget widget_orion_image_w\" data-index=\"14\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-1-2\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_image_w so-widget-orion_image_w-base\"\n\t\t\t\n\t\t>\r\n<div class=\"image-w relative  img-frame shadow-4\">\r\n\r\n\t\t\t\t\t\t\t\t\t\t<a rel=\"orion-images\" class=\" overlay-none overlay-hover-none\" href=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-tablet-layout.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-tablet-layout.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"582\" height=\"578\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-tablet-layout.jpg\" class=\"attachment- size-\" alt=\"\" loading=\"lazy\" \/>\t\t\t<div class=\"overlay\"><\/div>\r\n\t\t\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\r\n\t\r\n\t<div class=\"absolute\">\r\n\t\t<div class=\"hover-desc table-wrap\">\r\n\t\t\t<div class=\"cell-wrap\">\r\n\t\t\t\t<h4 class=\"text-light\"><\/h4>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\t\t\t\t\t\r\n<\/div>\r\n\r\n<\/div><\/div><\/div><div id=\"panel-2013-1-1-3\" class=\"so-panel widget widget_orion_empty_space_w panel-last-child\" data-index=\"15\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-1-3\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_empty_space_w so-widget-orion_empty_space_w-base\"\n\t\t\t\n\t\t>\t<div class=\"row empty-space visible-sm visible-xs\" style=\"height:30px;\">\r\n\t<\/div><\/div><\/div><\/div><\/div><div id=\"pgc-2013-1-2\"  class=\"panel-grid-cell\" ><div id=\"panel-2013-1-2-0\" class=\"so-panel widget widget_orion_image_w panel-first-child panel-last-child\" data-index=\"16\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-1-2-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_image_w so-widget-orion_image_w-base\"\n\t\t\t\n\t\t>\r\n<div class=\"image-w relative  img-frame shadow-4\">\r\n\r\n\t\t\t\t\t\t\t\t\t\t<a rel=\"orion-images\" class=\" overlay-none overlay-hover-none\" href=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-mobile-layout.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-mobile-layout.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"582\" height=\"834\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2021\/01\/dentalia-widgetstyles-mobile-layout.jpg\" class=\"attachment- size-\" alt=\"\" loading=\"lazy\" \/>\t\t\t<div class=\"overlay\"><\/div>\r\n\t\t\r\n\t\t\t\t\t<\/a>\r\n\t\t\t\r\n\t\r\n\t<div class=\"absolute\">\r\n\t\t<div class=\"hover-desc table-wrap\">\r\n\t\t\t<div class=\"cell-wrap\">\r\n\t\t\t\t<h4 class=\"text-light\"><\/h4>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\t\t\t\t\t\r\n<\/div>\r\n\r\n<\/div><\/div><\/div><\/div><\/div><\/div><div id=\"pg-2013-2\"  class=\"panel-grid panel-has-style\" ><div class=\"siteorigin-panels-stretch divider-no-animation tablet-2-in-row mobile-1-in-row desktop-default bg-altsitebg panel-row-style panel-row-style-for-2013-2\" data-stretch-type=\"full\" ><div id=\"pgc-2013-2-0\"  class=\"panel-grid-cell\" ><div class=\"clear panel-cell-style panel-cell-style-for-2013-2-0\" ><div id=\"panel-2013-2-0-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"17\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-2-0-0\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_heading_w so-widget-orion_heading_w-base\"\n\t\t\t\n\t\t> \r\n\t\t\t<div class=\"row orion-heading\" style=\"margin-bottom:12px;\">\r\n\t\t<div class=\"col-md-12   text-left style-h2 style-primary-color\">\r\n\t\t\t<h2 class=\"primary-color text-uppercase\">\r\n\t\t\t\t<span class=\"mark mark-doc\">4<\/span> Design\t\t\t<\/h2>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-2013-2-0-1\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"18\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2013-2-0-1\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-sow-editor so-widget-sow-editor-base\"\n\t\t\t\n\t\t>\n<div class=\"siteorigin-widget-tinymce textwidget\">\n\t<ul class=\"list-arrow lead-list\">\n<li><strong>Background Color <\/strong>(Dentalia 2.0+)<br \/>\nYou can pick and instantly apply theme colors to the widget background. To use a custom color, click the Rainbow \ud83c\udf08 and add your color in the color picker filed.<\/li>\n<li><strong>Background opacity<\/strong> (requires custom color background)<br \/>\nSets the opacity of the widget background (1 is almost transparent and 100 is opaque).<\/li>\n<li><strong>Border radius <\/strong>(requires widget background or border)<br \/>\nSets the border radius of the widget background or border.<\/li>\n<li><strong>Overlay<br \/>\n<\/strong>Adds a color overlay over the row background. The colors and gradients are defined by the general theme colors set in the Theme Options.<\/li>\n<li><strong>Text color<br \/>\n<\/strong>Sets the text color of the widget to light or dark.<\/li>\n<li><strong>Drop shadow effect<\/strong><br \/>\nAdds a shadow effect to the widget background.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Besides the standard SiteOrigin widget style options, we added some additional settings to improve the layout, style, and behavior of the widgets. Widget Style settings are located in the right-side panels when editing widgets inside Page Builder. Overlap row You can make the widget overlap the row below or above. (Works best with the button<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1947,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/2013"}],"collection":[{"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=2013"}],"version-history":[{"count":31,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/2013\/revisions"}],"predecessor-version":[{"id":3163,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/2013\/revisions\/3163"}],"up":[{"embeddable":true,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/1947"}],"wp:attachment":[{"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=2013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}