How to Use Dynamic Color Feature in Elementor

Color is a crucial element of a design, including a web design. The selection of color determines whether your design is good enough or not. On top of that, color can also be a determinant of brand identity. Elementor gives you a freedom to play with colors whereby you can set a color of any element. From text, button, icon, and so on. Not just a static color, Elementor also allows you to set a dynamic color for a certain element. This post will show you how to use dynamic color feature in Elementor.

Dynamic color itself was introduced in Elementor Pro 2.9, along with full-site editing. It allows you to set different colors on a certain element. For instance, you can set different colors of blog post titles as well as the background as you can see below.

That’s just an example. There are tons of other scenarios to use the dynamic color feature of Elementor. Your creativity is the limit.

Dynamic color can be implemented on a theme builder template (single post template, single page template, archive template, and so on). To add the dynamic color itself you can use ACF. At the time of writing (June 16, 2021), Elementor dynamic color doesn’t work on Pods.

How to Use Dynamic Color in Elementor

Step 1: Create a Custom Field Using ACF

To be able to use dynamic color in Elementor, first, you need to install ACF. It’s a free plugin, available on the plugin directory of WordPress.

Once the ACF plugin is installed and activated, you can start to create a custom fields group. Go to Custom Fields -> Add New on your WordPress dashboard. Add your fields group a name. Click the Add Field button to start adding a custom field.

Give your custom field a label and a name and select the field type on the Field Type option. Since you want to add dynamic color, you can select Color Picker on this option.

Switch to the Location block to set where the custom fields group to be assigned to. If you want to assign the fields group to posts, you can set following rule:

Post Type is equal to Post

Once done adding the custom fields, you can click the Publish button to publish the custom fields.

You can read this article to learn more about how to create custom fields in WordPress using ACF.

Step 2: Edit the Single Post Template

Once done creating the custom fields, you can edit the single post template (or any custom template you want to apply the dynamic color to). If you are new to Elementor and haven’t created a custom template before, you can read this article to learn more. In this post, we will go straight to editing the custom template. The element we want to apply the dynamic color to is post title.

On the Elementor, click the Post Title widget to customize it. Next, open the Style tab on the settings panel. On the Text Color option, click the color picker. Instead of picking a color, you can click the dynamic icon and select ACF Color Picker Field.

Click the wrench icon and select the custom field (key) you have just created on step one above.

Update your custom template to apply the changes.

Step 3: Add a Color to a Post

Once the custom template is updated, you can update the content associated with it (blog post in this case) to add the dynamic color. You can pick the color on the custom field block within the WordPress editor.

The Bottom Line

As we stated in the opening section, color is a key element in web design. Elementor makes it easy for you to implement a color to a certain element. Be it text, button, background, icon, or even box shadow. Not just a static color, Elementor also allows you to add a dynamic color to a custom template. The ability to add dynamic color is what makes Elementor one step ahead its competitors. You can unleash your creativity in designing a custom template with the Elementor dynamic color feature.