{"id":1845,"date":"2021-06-20T13:20:27","date_gmt":"2021-06-20T13:20:27","guid":{"rendered":"https:\/\/elementor.com\/academy\/?p=1845"},"modified":"2023-02-22T09:34:53","modified_gmt":"2023-02-22T09:34:53","slug":"full-site-editing-and-dynamic-colors-in-elementor","status":"publish","type":"post","link":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/","title":{"rendered":"Full Site Editing and Dynamic Colors"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1845\" class=\"elementor elementor-1845\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-10c877ac elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"10c877ac\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-396f97ab\" data-id=\"396f97ab\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-69295980 elementor-widget elementor-widget-video\" data-id=\"69295980\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/www.youtube.com\\\/watch?v=orPp5hrHBKw&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-49f5a3d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"49f5a3d\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4ba89489\" data-id=\"4ba89489\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7af95712 elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"7af95712\" data-element_type=\"widget\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2061\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2061\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-2062\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2062\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-2061\" aria-expanded=\"false\">Overview<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2061\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2061\" tabindex=\"0\" hidden=\"false\"><p>Learn how Elementor\u2019s Full Site Editing feature, Dynamic Colors and Semantic HTML Tags can speed up your workflow and improve your web presence.<\/p><p>In this video, you&#8217;ll learn how to:<br \/>\u2713 Build faster with Full Site Editing<br \/>\u2713 Embed Dynamic Color values in any widget that has a color field<br \/>\u2713 Add a colour picker field for posts via ACF<br \/>\u2713 Define Site Parts with Semantic HTML Tags to improve accessibility, HTML semantics, as well as on page SEO.<br \/>\u2713 And much more!<\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-2062\" aria-expanded=\"false\">Transcript<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-2062\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-2062\" tabindex=\"0\" hidden=\"hidden\"><p>hile at zip web designer and lead<br \/>educator here at elemental for this<br \/>tutorial I&#8217;ve gone ahead and built this<br \/>awesome events website so you can see<br \/>how elementals full site editing feature<br \/>dynamic colors and semantic HTML tags<br \/>not only help speed up your workflow but<br \/>also improve your web presence really<br \/>making your site standout let&#8217;s dive in<br \/>and see how it works okay so let&#8217;s say<br \/>you&#8217;re editing this single post<br \/>templates for the events on your site<br \/>and you want to make a quick change to<br \/>the header increasing a columns width<br \/>for example instead of exiting to your<br \/>dashboard and opening the header<br \/>template via the theme builder just to<br \/>edit it simply hover over the header and<br \/>click the orange edit header label<br \/>indicating you can edit this side pod<br \/>same goes for your single post template<br \/>the page or post content and footer<br \/>enabling you to quickly switch between<br \/>the different side pods and know exactly<br \/>which area you&#8217;re editing according to<br \/>the blue activated editing area saving<br \/>you tons of time and a lot of redundant<br \/>clicks another great feature that will<br \/>improve your workflow is dynamic colors<br \/>as you can see we have a couple of event<br \/>posts that get the same single post<br \/>template design wouldn&#8217;t it be cool to<br \/>have the color of some elements<br \/>dynamically change based on the event<br \/>you see such as this sections background<br \/>color and the posts navigation error<br \/>elementals dynamic color option can do<br \/>exactly that embed dynamic color values<br \/>in any widget that has a color field to<br \/>do so let&#8217;s first go to our event posts<br \/>I&#8217;ll open this one as you can see this<br \/>post already has some content and at the<br \/>bottom we can choose a color for this<br \/>post I added this color picker option<br \/>for posts via ACF<br \/>let&#8217;s go to custom fields so you can see<br \/>I added a custom field group called<br \/>events and inside it I added a field<br \/>called event color and set the fuel type<br \/>to color picker<br \/>I also added a rule to determine which<br \/>edit screens will get this custom color<br \/>picker field in our case we wanted to<br \/>show on the posts we create so I set<br \/>this field group to show if post type is<br \/>equal to post<br \/>to our post and change the color<br \/>make sure to update<br \/>I&#8217;ll open another post and give it a<br \/>different color<br \/>I&#8217;ll do the same one last time<br \/>now all that&#8217;s left to do is go back to<br \/>the single post template and use<br \/>elemental dynamic color feature to link<br \/>up these post specific colors to the<br \/>elements we want let&#8217;s start with this<br \/>sections background color simply click<br \/>the dynamic tags option and choose ACF<br \/>color picker then click on the wrench to<br \/>enter its settings and set the key to<br \/>the field we added before<br \/>elementos dynamic color control supports<br \/>ACF caliphates<br \/>as well as custom field keys<br \/>let&#8217;s update and preview<br \/>as you can see the background color<br \/>changes dynamically based on the post<br \/>colors we added I&#8217;ll go back and do the<br \/>same to the post navigation error<br \/>and you know what let&#8217;s jump on over to<br \/>our header<br \/>and give it the dynamic background color<br \/>as well<br \/>let&#8217;s preview again<br \/>cool these dynamic colors instantly make<br \/>the website stand out this can also come<br \/>in handy if you want to give someone<br \/>access to change the color of certain<br \/>elements dynamically but don&#8217;t want them<br \/>playing around with your designs in the<br \/>editor now last but not least let&#8217;s add<br \/>a credit section to the footer<br \/>I&#8217;ll go ahead and click the edit footer<br \/>level then enter the library and in my<br \/>templates I&#8217;ll insert this pre-designed<br \/>section so it appears below my original<br \/>footer great now I want the entire<br \/>footer to get the HTML footer tag in<br \/>order to improve accessibility HTML<br \/>semantics as well as the on-page SEO so<br \/>I&#8217;ll go to the site pod settings screen<br \/>by clicking the settings cog over here<br \/>and simply change the HTML tag to footer<br \/>you can assign these semantic HTML tags<br \/>to all of your side pods such as the<br \/>header tag to your entire header and the<br \/>main tag to your entire content area<br \/>giving you total design freedom while at<br \/>the same time improving you ser really<br \/>making your site stand out well that&#8217;s<br \/>it now you know how to use elementals<br \/>full site editing feature dynamic colors<br \/>and semantic HTML tags to speed up your<br \/>workflow and improve your web presence<br \/>don&#8217;t forget to have fun while creating<br \/>and subscribe to our youtube channel for<br \/>more tips and tutorials ciao for now<\/p><\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Overview Transcript Overview Learn how Elementor\u2019s Full Site Editing feature, Dynamic Colors and Semantic HTML Tags can speed up your workflow and improve your web presence. In this video, you\u2019ll learn how to: \u2713 Build faster with Full Site Editing \u2713 Embed Dynamic Color values in any widget that has a color field \u2713 Add [&hellip;]<\/p>\n","protected":false},"author":8,"featured_media":4119,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[41],"class_list":["post-1845","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamic-design","tag-guides-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Full Site Editing and Dynamic Colors - Academy<\/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:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Full Site Editing and Dynamic Colors - Academy\" \/>\n<meta property=\"og:description\" content=\"Overview Transcript Overview Learn how Elementor\u2019s Full Site Editing feature, Dynamic Colors and Semantic HTML Tags can speed up your workflow and improve your web presence. In this video, you\u2019ll learn how to: \u2713 Build faster with Full Site Editing \u2713 Embed Dynamic Color values in any widget that has a color field \u2713 Add [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Academy\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-20T13:20:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-22T09:34:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Full-Site-Editing-Dynamic-Colors-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1921\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hodaya\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hodaya\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Full Site Editing and Dynamic Colors - Academy","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:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/","og_locale":"en_US","og_type":"article","og_title":"Full Site Editing and Dynamic Colors - Academy","og_description":"Overview Transcript Overview Learn how Elementor\u2019s Full Site Editing feature, Dynamic Colors and Semantic HTML Tags can speed up your workflow and improve your web presence. In this video, you\u2019ll learn how to: \u2713 Build faster with Full Site Editing \u2713 Embed Dynamic Color values in any widget that has a color field \u2713 Add [&hellip;]","og_url":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/","og_site_name":"Academy","article_published_time":"2021-06-20T13:20:27+00:00","article_modified_time":"2023-02-22T09:34:53+00:00","og_image":[{"width":1921,"height":1080,"url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Full-Site-Editing-Dynamic-Colors-1.jpg","type":"image\/jpeg"}],"author":"Hodaya","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Hodaya","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/"},"author":{"name":"Hodaya","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c"},"headline":"Full Site Editing and Dynamic Colors","datePublished":"2021-06-20T13:20:27+00:00","dateModified":"2023-02-22T09:34:53+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/"},"wordCount":913,"publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"image":{"@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Full-Site-Editing-Dynamic-Colors-1.jpg","keywords":["Guides and Tutorials"],"articleSection":["Dynamic Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/","url":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/","name":"Full Site Editing and Dynamic Colors - Academy","isPartOf":{"@id":"https:\/\/elementor.com\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Full-Site-Editing-Dynamic-Colors-1.jpg","datePublished":"2021-06-20T13:20:27+00:00","dateModified":"2023-02-22T09:34:53+00:00","breadcrumb":{"@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/#primaryimage","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Full-Site-Editing-Dynamic-Colors-1.jpg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/06\/Full-Site-Editing-Dynamic-Colors-1.jpg","width":1921,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/academy\/full-site-editing-and-dynamic-colors-in-elementor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Elementor","item":"https:\/\/elementor.com\/"},{"@type":"ListItem","position":2,"name":"Academy","item":"https:\/\/elementor.com\/academy\/"},{"@type":"ListItem","position":3,"name":"Dynamic Design","item":"https:\/\/elementor.com\/academy\/dynamic-design\/"},{"@type":"ListItem","position":4,"name":"Full Site Editing and Dynamic Colors"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/academy\/#website","url":"https:\/\/elementor.com\/academy\/","name":"Elementor Academy","description":"Page Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/academy\/#organization"},"alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/academy\/#organization","name":"Elementor Academy","alternateName":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2021\/02\/Elementor-Logo.png","url":"https:\/\/elementor.com\/academy\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","contentUrl":"https:\/\/elementor.com\/academy\/wp-content\/uploads\/2022\/11\/e-logo.svg","width":490,"height":85,"caption":"Elementor Academy"},"image":{"@id":"https:\/\/elementor.com\/academy\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/ff9f2661f3df53ae5842a9ad15853d1c","name":"Hodaya","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/324f2d5cff44331b747d766f10e31793b1e29ad4f98f129d409760191f88ccc5?s=96&d=mm&r=g","caption":"Hodaya"},"url":"https:\/\/elementor.com\/academy\/author\/hodaya\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/comments?post=1845"}],"version-history":[{"count":1,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1845\/revisions"}],"predecessor-version":[{"id":9560,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/posts\/1845\/revisions\/9560"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media\/4119"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/media?parent=1845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/categories?post=1845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/academy\/wp-json\/wp\/v2\/tags?post=1845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}