{"id":660,"date":"2017-05-01T18:09:17","date_gmt":"2017-05-02T01:09:17","guid":{"rendered":"https:\/\/www.elegantthemes.com\/documentation\/?p=660"},"modified":"2017-12-20T12:34:15","modified_gmt":"2017-12-20T19:34:15","slug":"advanced-design-settings","status":"publish","type":"post","link":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/","title":{"rendered":"Divi Design Settings &#038; Advanced Module Settings"},"content":{"rendered":"<p><iframe loading=\"lazy\" class=\"youtube-player\" type=\"text\/html\"  width=\"920\" height=\"518\" src=\"https:\/\/www.youtube.com\/embed\/1iqjhnHVA9Y?feature=oembed\" frameborder=\"0\" gesture=\"media\" allow=\"encrypted-media\" allowfullscreen><\/iframe><\/p>\n<p>Whenever you edit a module, row or section, you will notice three tabs in the settings popup: Content, Design, and Advanced. Everything you need to create awesome Divi Layouts and take full advantage of each module can be found in the Content tab. However, if you want even more control over the appearance of the module then you can venture into the Design tab. If you are a developer and you want to use your own CSS instead of using the design controls in the Design tab, then you can venture further into the Advanced tab. When combined, there is nothing that can&#8217;t be customized.<\/p>\n<h2>Design Settings<\/h2>\n<p>The Design settings vary from module to module. For each, we have added all the possible design settings that you could ever want into the Design tab. Due to the sheer breadth of design settings available for certain modules, we have separated them into labeled dropdowns that toggle each group of design settings.  There is also a convenient Search Options box above all options to make finding a specific design option that much easier. <\/p>\n<p>To locate and use the Design Settings, simply edit an existing module, row or section (or create a new one) to open up the settings popup. Next click on the Design tab to reveal the design options.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings.png\" alt=\"\" width=\"673\" height=\"643\" class=\"aligncenter size-full wp-image-1441\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings.png 673w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings-300x287.png 300w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/p>\n<p>From within this tab you can do just about anything. Settings will vary depending on the type of module you are editing. Typically you will find options to adjust typography (such as text size, letter spacing, line height, etc), spacing adjustments (such as custom padding and margin values), color options (such as text color, overlay color, column background colors) as well as a slew of unique settings for certain elements. Utilizing these design options can create some truly unique.<\/p>\n<h2>Advanced Settings<\/h2>\n<p>In the Design tab, we have created so many options that you can do just about anything that can be done with CSS (without touching a line of code). If you are a developer, however, you might prefer to write your own code instead of using our custom design controls. In this case you can use the Advanced tab, which can be found right next to the Design tab in the modal settings window for modules, rows and sections.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/advanced-settings.png\" alt=\"\" width=\"677\" height=\"571\" class=\"aligncenter size-full wp-image-1440\" srcset=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/advanced-settings.png 677w, https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/advanced-settings-300x253.png 300w\" sizes=\"auto, (max-width: 677px) 100vw, 677px\" \/><\/p>\n<p>In this tab you can add a custom CSS ID or CSS Class in order to target and apply your own CSS from your child theme&#8217;s style.css file.<\/p>\n<p>If you want to remove the need and the hassle of creating Child Themes, you can easily target CSS to individual modules on individual pages by utilizing the options in the Custom CSS dropdown. Here we have broken down all of the structural elements of the module, and given you text area fields where you can type in your own CSS. Using this panel you can apply CSS to individual parts of the module. For example, you could apply custom CSS directly to a Blurb Icon, or create your own :after pseudo element right from the Divi Builder. <\/p>\n<p>And finally, in the visibility dropdown, you are able to adjust the visibility of your module on phones, tablets, and desktops.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can customize absolutely everything about any module using the advanced design settings.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,2,11],"tags":[],"class_list":["post-660","post","type-post","status-publish","format-standard","hentry","category-divi-builder","category-divi","category-builder"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Elegant Themes Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Divi Design Settings &amp; Advanced Module Settings - Elegant Themes Documentation\" \/>\n<meta property=\"og:description\" content=\"You can customize absolutely everything about any module using the advanced design settings.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/\" \/>\n<meta property=\"og:site_name\" content=\"Elegant Themes Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-02T01:09:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-20T19:34:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings.png\" \/>\n<meta name=\"author\" content=\"admindocumentation\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admindocumentation\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/\"},\"author\":{\"name\":\"admindocumentation\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\"},\"headline\":\"Divi Design Settings &#038; Advanced Module Settings\",\"datePublished\":\"2017-05-02T01:09:17+00:00\",\"dateModified\":\"2017-12-20T19:34:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/\"},\"wordCount\":539,\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/design-settings.png\",\"articleSection\":[\"Divi Builder Plugin Documentation\",\"Divi Theme Documentation\",\"Using The Builder\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/\",\"name\":\"Divi Design Settings & Advanced Module Settings - Elegant Themes Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/design-settings.png\",\"datePublished\":\"2017-05-02T01:09:17+00:00\",\"dateModified\":\"2017-12-20T19:34:15+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/design-settings.png\",\"contentUrl\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/design-settings.png\",\"width\":673,\"height\":643},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/divi\\\/advanced-design-settings\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Divi Design Settings &#038; Advanced Module Settings\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/\",\"name\":\"Elegant Themes Documentation\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.elegantthemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/1a5d1f17110e347e68b57af08f2b5268\",\"name\":\"admindocumentation\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g\",\"caption\":\"admindocumentation\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Elegant Themes Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/","og_locale":"en_US","og_type":"article","og_title":"Divi Design Settings & Advanced Module Settings - Elegant Themes Documentation","og_description":"You can customize absolutely everything about any module using the advanced design settings.","og_url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/","og_site_name":"Elegant Themes Documentation","article_published_time":"2017-05-02T01:09:17+00:00","article_modified_time":"2017-12-20T19:34:15+00:00","og_image":[{"url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings.png","type":"","width":"","height":""}],"author":"admindocumentation","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admindocumentation","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/#article","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/"},"author":{"name":"admindocumentation","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268"},"headline":"Divi Design Settings &#038; Advanced Module Settings","datePublished":"2017-05-02T01:09:17+00:00","dateModified":"2017-12-20T19:34:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/"},"wordCount":539,"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings.png","articleSection":["Divi Builder Plugin Documentation","Divi Theme Documentation","Using The Builder"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/","url":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/","name":"Divi Design Settings & Advanced Module Settings - Elegant Themes Documentation","isPartOf":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/#primaryimage"},"image":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/#primaryimage"},"thumbnailUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings.png","datePublished":"2017-05-02T01:09:17+00:00","dateModified":"2017-12-20T19:34:15+00:00","author":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268"},"breadcrumb":{"@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/#primaryimage","url":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings.png","contentUrl":"https:\/\/www.elegantthemes.com\/documentation\/wp-content\/uploads\/2017\/05\/design-settings.png","width":673,"height":643},{"@type":"BreadcrumbList","@id":"https:\/\/www.elegantthemes.com\/documentation\/divi\/advanced-design-settings\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.elegantthemes.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Divi Design Settings &#038; Advanced Module Settings"}]},{"@type":"WebSite","@id":"https:\/\/www.elegantthemes.com\/documentation\/#website","url":"https:\/\/www.elegantthemes.com\/documentation\/","name":"Elegant Themes Documentation","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.elegantthemes.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.elegantthemes.com\/documentation\/#\/schema\/person\/1a5d1f17110e347e68b57af08f2b5268","name":"admindocumentation","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/93f87460348373787f0caa24e173bcefb6261f6bd8e78555d580cf9c0070eccc?s=96&d=mm&r=g","caption":"admindocumentation"}}]}},"_links":{"self":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/660","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=660"}],"version-history":[{"count":9,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/660\/revisions"}],"predecessor-version":[{"id":2398,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/posts\/660\/revisions\/2398"}],"wp:attachment":[{"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=660"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/categories?post=660"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elegantthemes.com\/documentation\/wp-json\/wp\/v2\/tags?post=660"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}