Most WordPress themes come with the setting options to allow you to customize the elements of the single post (blog post). From the font of the post title, font of the post body, to the color of the post title. You can make all these settings via theme customizer (Appearance -> Customize). All settings available on theme customizer are meant to entire website. If you set the text color of the blog post title, for instance, the setting will be applied to all blog posts — be it the existing blog posts or upcoming blog posts.
Is there a way to set a custom color for individual blog post title? You can achieve it with Elementor Pro.
Elementor Pro has two useful features that you can use to set custom color for individual blog posts: Dynamic Color and Theme Builder. Here is how to use these features to set custom color for individual blog posts on your WordPress site.
Step 1: Create the Custom Field for Dynamic Color
First, you need to create a custom field to select the color of the post title. You can use a custom fields plugin that supports color picker field. In this example, we use ACF. If you want to use ACF too, install the plugin and activate it right away once installed.
Once the ACF plugin installed, create a new custom fields group by going to Custom Fields -> Add New on your WordPress dashboard. Give your custom fields group a name and add a custom field by clicking the Add Field button.
Give your custom field a label and name. On the Field Type option, set to Color Picker. You can set the default color on the Default Value option.
You only need one custom field for this purpose. So, once done adding the custom field for the color picker, go to the Location section to assign the custom fields group. Make sure to assign the custom fields group to blog posts (just leave it default to assign the custom fields to blog posts). Click the Publish button to publish the custom fields group.
Step 2: Create the Custom Template for Blog Posts
The pro version of Elementor comes with a Theme Builder feature which you can use to create custom templates for your theme parts like header, footer, and single post. You can make use of this feature to create a custom template for blog posts. Elementor Theme Builder allows you to add dynamic elements, including dynamic color pulled from ACF which you have just created above.
To start creating a custom template in Elementor, go to Templates -> Theme Builder on your WordPress dashboard. On the Theme Builder page, hover your mouse over the Single Post tab and click the plus icon to add a new custom template.
You will be presented with a number pre-made custom templates on the template library. Simply select the one you like. Or, you can simply close the template library if you want to create the custom template from scratch. In this example, we use a pre-made template. You can click the INSERT button on a particular pre-made template if you want to use a pre-made template too.
Once the template is imported, select the Post Title widget to customize it.
With the Post Title widget selected, go to the Style tab on the settings panel and click the color picker on Text Color.
Click Dynamic Tags (the database icon) and select ACF Color Picker Field.
Click the wrench icon on the ACF Color Picker field and select the key (custom field) you have just created on step one above.
You have done with the dynamic post title color. You can edit other elements on your template if you want it. Once you are done, click the PUBLISH button on the bottom side of the settings panel. On the appearing dialog, you will be asked to add a display condition to set where the custom template to be assigned to. Simply click the ADD CONDITION button to add a display condition. If you want to apply the custom template to all blog posts, you can simply select Posts on the Post block. Click the SAVE & CLOSE button to publish the template.
If you are new to Elementor and have never created a custom template before, you can read our previous article for detailed instructions on how to create a custom single post template.
Step 3: Create a New Blog Post
Once the custom template for blog posts is created, the next step is to create a new blog post (or edit an existing one). To create a new blog post, go to Posts -> Add New just like usual. Give your blog post a title and write the content. Once done writing the blog post, go to the custom field section beneath the editor to select a custom color for the post title.
Once done selecting the custom color, publish/update your blog post.
The Bottom Line
You can use Elementor for free, but there are so many perks you will get by upgrading to the pro version. You can access its Theme Builder and dynamic color features. The Theme Builder of Elementor offers limitless customization options thanks to the ability to create custom templates for theme parts like single post, header, and footer. While its dynamic color allows you to add dynamic color to a certain element on your blog post or other content type.
