This tutorial will show you how to change the background color of the header for each page by using Advanced Custom Field (ACF) on Elementor Website.
Go to Plugins >> Add new >> typing “ACF”.
You also can download the plugin by clicking here.
Create Custom Field for page
After you install and activate the plugin, you will see the “Custom Fields” tab in the left sidebar on the backend of the website.
1. Click “Add new” >> name title
2. In the section Location >> Rules >> Choose Post Type is equal to “Page”
3. Click “Add Field”
- Name Field
- Field Type: Select Color Picker
- Add instruction
- Select color default
- Then Update
Setup Header
Visit Elementor >> Theme Builder >> Select your header
- Select background header then select “database icon” >> select ACF color picker field
- Click the icon setting then select the name color picker that you named in ACF.
- Save and exit.
- After that you can change the color on the edit page then the background header will be changed.
That’s it:
I hope you like this tutorial and can use it as a source to make a beautiful website.
