{"id":2032,"date":"2020-09-16T11:42:37","date_gmt":"2020-09-16T11:42:37","guid":{"rendered":"https:\/\/dentalia.orionthemes.com\/documentation\/?page_id=2032"},"modified":"2020-12-23T14:47:36","modified_gmt":"2020-12-23T14:47:36","slug":"cell-styles","status":"publish","type":"page","link":"https:\/\/dentalia.orionthemes.com\/documentation\/page-builder\/cell-styles\/","title":{"rendered":"Cell Styles"},"content":{"rendered":"<div id=\"pl-2032\"  class=\"panel-layout\" ><div id=\"pg-2032-0\"  class=\"panel-grid panel-has-style\" ><div class=\"siteorigin-panels-stretch divider-no-animation tablet-default mobile-1-in-row desktop-default bg-altsitebg panel-row-style panel-row-style-for-2032-0\" data-stretch-type=\"full\" ><div id=\"pgc-2032-0-0\"  class=\"panel-grid-cell\" ><div class=\"clear panel-cell-style panel-cell-style-for-2032-0-0\" ><div id=\"panel-2032-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-2032-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\tCell 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-2032-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-2032-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\">You can adjust the paddings of the cell, add a background image, and more.<\/p>\n<p class=\"lead\">Page Builder cell style settings are accessible by clicking the <strong>wrench icon<\/strong> above the row. After that, you need to <strong>click on the cell<\/strong> you want to edit.<\/p>\n<p class=\"lead\">The settings will appear in the<strong> right-side panels<\/strong>, below the Row styles.<\/p>\n<\/div>\n<\/div><\/div><\/div><div id=\"panel-2032-0-0-2\" class=\"so-panel widget widget_orion_button_group_w panel-last-child\" data-index=\"2\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-0-0-2\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_button_group_w so-widget-orion_button_group_w-base\"\n\t\t\t\n\t\t><div class=\"button-group align-default gutter-small\">\n\n\t\n\n\t\t\t\t\t<a class=\"btn btn-c1 btn-flat btn-md\" target=_blank href=\"\/documentation\/page-builder\/examples\/#cellstyles\">\n\t\t\t\tCell Design Examples\t\t\n\t\t\t<\/a>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><div id=\"pgc-2032-0-1\"  class=\"panel-grid-cell\" ><div id=\"panel-2032-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-2032-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-cellstyles.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-pagebuilder-cellstyles.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"960\" height=\"671\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/09\/dentalia-pagebuilder-cellstyles.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-2032-1\"  class=\"panel-grid panel-has-style\" ><div class=\"orion-collapse-right-top siteorigin-panels-stretch divider-no-animation tablet-2-in-row mobile-1-in-row desktop-default clear panel-row-style panel-row-style-for-2032-1\" data-stretch-type=\"full\" ><div id=\"pgc-2032-1-0\"  class=\"panel-grid-cell\" ><div class=\"clear panel-cell-style panel-cell-style-for-2032-1-0\" ><div id=\"panel-2032-1-0-0\" class=\"so-panel widget widget_orion_image_w panel-first-child panel-last-child\" data-index=\"4\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-1-0-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\/12\/dentalia-pagebuilder-cells-desktoplayout.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/12\/dentalia-pagebuilder-cells-desktoplayout.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"578\" height=\"704\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/12\/dentalia-pagebuilder-cells-desktoplayout.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 id=\"pgc-2032-1-1\"  class=\"panel-grid-cell\" ><div class=\"custom panel-cell-style panel-cell-style-for-2032-1-1\" ><div id=\"panel-2032-1-1-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"5\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-1-1-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:24px;\">\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> 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-2032-1-1-1\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"6\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-1-1-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>Padding<br \/>\n<\/strong>Cell paddings are a standard Page Builder feature.<\/li>\n<li><strong>Cell Position<\/strong><br \/>\nYou can push the cell up or down to overlap the row above or below.<br \/>\nThis will only be applied on desktop and tablets.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><div id=\"pg-2032-2\"  class=\"panel-grid panel-has-style\" ><div class=\"divider-no-animation tablet-default mobile-default desktop-default custom panel-row-style panel-row-style-for-2032-2\" ><div id=\"pgc-2032-2-0\"  class=\"panel-grid-cell\" ><div id=\"panel-2032-2-0-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"7\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-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:24px;\">\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 &amp; Mobile\t\t\t<\/h2>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\r\n\t<\/div><\/div><\/div><div id=\"panel-2032-2-0-1\" class=\"so-panel widget widget_sow-editor panel-last-child\" data-index=\"8\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-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>Tablet Padding<\/strong><br \/>\nSets the cell paddings on tablets.<\/li>\n<li><strong>Mobile Padding<\/strong><br \/>\nSets the cell paddings on mobile.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><\/div><div id=\"pgc-2032-2-1\"  class=\"panel-grid-cell\" ><div id=\"panel-2032-2-1-0\" class=\"so-panel widget widget_orion_image_w panel-first-child panel-last-child\" data-index=\"9\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-2-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\/12\/dentalia-pagebuilder-cells-mobilelayout-1.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/12\/dentalia-pagebuilder-cells-mobilelayout-1.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"577\" height=\"374\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/12\/dentalia-pagebuilder-cells-mobilelayout-1.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 id=\"pgc-2032-2-2\"  class=\"panel-grid-cell\" ><div id=\"panel-2032-2-2-0\" class=\"so-panel widget widget_orion_image_w panel-first-child panel-last-child\" data-index=\"10\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-2-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\/2020\/12\/dentalia-pagebuilder-cells-tabletlayout-1.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/12\/dentalia-pagebuilder-cells-tabletlayout-1.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"578\" height=\"374\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/12\/dentalia-pagebuilder-cells-tabletlayout-1.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-2032-3\"  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-2032-3\" data-stretch-type=\"full\" ><div id=\"pgc-2032-3-0\"  class=\"panel-grid-cell\" ><div class=\"clear panel-cell-style panel-cell-style-for-2032-3-0\" ><div id=\"panel-2032-3-0-0\" class=\"so-panel widget widget_orion_heading_w panel-first-child\" data-index=\"11\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-3-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:24px;\">\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> 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-2032-3-0-1\" class=\"so-panel widget widget_sow-editor\" data-index=\"12\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-3-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 cell background. To use a custom color, click the Rainbow \ud83c\udf08 and add your color in the color picker field.<\/li>\n<li><strong>Overlay<br \/>\n<\/strong>Add a color overlay over the cell background. The colors and gradients are defined by the general theme colors set in the Theme Options.<\/li>\n<\/ul>\n<\/div>\n<\/div><\/div><\/div><div id=\"panel-2032-3-0-2\" class=\"so-panel widget widget_orion_button_group_w panel-last-child\" data-index=\"13\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-3-0-2\" ><div\n\t\t\t\n\t\t\tclass=\"so-widget-orion_button_group_w so-widget-orion_button_group_w-base\"\n\t\t\t\n\t\t><div class=\"button-group align-default gutter-small\">\n\n\t\n\n\t\t\t\t\t<a class=\"btn btn-c1 btn-flat btn-md\" target=_blank href=\"\/documentation\/page-builder\/examples\/#cellstyles\">\n\t\t\t\tCell Design Examples\t\t\n\t\t\t<\/a>\n\t\t<\/div><\/div><\/div><\/div><\/div><\/div><div id=\"pgc-2032-3-1\"  class=\"panel-grid-cell\" ><div id=\"panel-2032-3-1-0\" class=\"so-panel widget widget_orion_image_w panel-first-child panel-last-child\" data-index=\"14\" ><div class=\"orion custom default panel-widget-style panel-widget-style-for-2032-3-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\/12\/dentalia-pagebuilder-cells-design.jpg\" title=\"\" data-caption=\"\" data-fancybox=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/12\/dentalia-pagebuilder-cells-design.jpg\">\r\n\t\t\r\n\t\t\t\t\t<img width=\"578\" height=\"874\" src=\"https:\/\/dentalia.orionthemes.com\/documentation\/wp-content\/uploads\/2020\/12\/dentalia-pagebuilder-cells-design.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>","protected":false},"excerpt":{"rendered":"<p>You can adjust the paddings of the cell, add a background image, and more. Page Builder cell style settings are accessible by clicking the wrench icon above the row. After that, you need to click on the cell you want to edit. The settings will appear in the right-side panels, below the Row styles. Padding<\/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\/2032"}],"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=2032"}],"version-history":[{"count":33,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/2032\/revisions"}],"predecessor-version":[{"id":2785,"href":"https:\/\/dentalia.orionthemes.com\/documentation\/wp-json\/wp\/v2\/pages\/2032\/revisions\/2785"}],"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=2032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}