{"id":2249,"date":"2022-08-04T12:00:00","date_gmt":"2022-08-04T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=2249"},"modified":"2023-10-02T17:52:20","modified_gmt":"2023-10-02T14:52:20","slug":"dynamic-colors","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/dynamic-colors\/","title":{"rendered":"How do I use dynamic colors?"},"content":{"rendered":"\n

Elementor Pro’s  Dynamic Content<\/em> allows you to use content from custom fields and other sources, and dynamically display it on the page. This feature not only allows you to dynamically display data using text and numeric inputs, but also with any widget that has a color field, enabling you to dynamically style a widget’s color. The Dynamic Color<\/em> control supports ACF (Advanced Custom Fields) color fields as well as custom field keys. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Dynamic Color Example Use Case:<\/h3>\n\n\n\n

Here is an example of using an author’s favorite color for the post’s Title color. We will assume that a field called ” fave_color<\/em>” has been previously set up using Advanced Custom Fields<\/a>, and the post’s author has assigned her favorite color, purple, to the post. To display each post’s title in that post’s assigned favorite color, simply edit the Single Post template that you have created and do the following:<\/p>\n\n\n\n

    \n
  1. Edit the Post Title widget<\/em><\/li>\n\n\n\n
  2. Click the Style<\/strong> tab<\/li>\n\n\n\n
  3. Click the dynamic icon<\/strong> next to the Title’s Text Color field.<\/li>\n\n\n\n
  4. Choose the custom field<\/strong> to be used. In this example, Post > Post Custom Field<\/em> was chosen.<\/li>\n\n\n\n
  5. From the Dynamic Tag Settings<\/em>, select the custom field key<\/strong> to be used. In this example, the fave_color<\/em> key was chosen.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

    Learn how to dynamically display content from custom fields & other sources<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65ba35f142bc8d37f54b44f7"],"footnotes":""},"categories":[1440],"tags":[],"class_list":["post-2249","post","type-post","status-publish","format-standard","hentry","category-advanced-functionality"],"acf":[],"yoast_head":"\nHow do I use dynamic colors? | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about How do I use dynamic colors? in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\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\/help\/dynamic-colors\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do I use dynamic colors? | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about How do I use dynamic colors? in this article from Elementor's Knowledge Base. Get Elementor tips & more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/dynamic-colors\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-04T09:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-02T14:52:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"368\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"How do I use dynamic colors?\",\"datePublished\":\"2022-08-04T09:00:00+00:00\",\"dateModified\":\"2023-10-02T14:52:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/\"},\"wordCount\":244,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif\",\"articleSection\":[\"Advanced functionality\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/\",\"url\":\"https:\/\/elementor.com\/help\/dynamic-colors\/\",\"name\":\"How do I use dynamic colors? | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif\",\"datePublished\":\"2022-08-04T09:00:00+00:00\",\"dateModified\":\"2023-10-02T14:52:20+00:00\",\"description\":\"Learn everything about How do I use dynamic colors? in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/dynamic-colors\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif\",\"width\":1024,\"height\":368},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/dynamic-colors\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Widgets\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Advanced functionality\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"How do I use dynamic colors?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do I use dynamic colors? | Elementor","description":"Learn everything about How do I use dynamic colors? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","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\/help\/dynamic-colors\/","og_locale":"en_US","og_type":"article","og_title":"How do I use dynamic colors? | Elementor","og_description":"Learn everything about How do I use dynamic colors? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/dynamic-colors\/","og_site_name":"Help","article_published_time":"2022-08-04T09:00:00+00:00","article_modified_time":"2023-10-02T14:52:20+00:00","og_image":[{"width":1024,"height":368,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif","type":"image\/gif"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/dynamic-colors\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/dynamic-colors\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"How do I use dynamic colors?","datePublished":"2022-08-04T09:00:00+00:00","dateModified":"2023-10-02T14:52:20+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/dynamic-colors\/"},"wordCount":244,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/dynamic-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif","articleSection":["Advanced functionality"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/dynamic-colors\/","url":"https:\/\/elementor.com\/help\/dynamic-colors\/","name":"How do I use dynamic colors? | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/dynamic-colors\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/dynamic-colors\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif","datePublished":"2022-08-04T09:00:00+00:00","dateModified":"2023-10-02T14:52:20+00:00","description":"Learn everything about How do I use dynamic colors? in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/dynamic-colors\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/dynamic-colors\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/dynamic-colors\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2020\/04\/dynamiccolors.gif","width":1024,"height":368},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/dynamic-colors\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Widgets","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/"},{"@type":"ListItem","position":4,"name":"Advanced functionality","item":"https:\/\/elementor.com\/help\/elementor-editor\/widgets\/advanced-functionality\/"},{"@type":"ListItem","position":5,"name":"How do I use dynamic colors?"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/2249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=2249"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/2249\/revisions"}],"predecessor-version":[{"id":40617,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/2249\/revisions\/40617"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=2249"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=2249"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=2249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}