1.2.3
In this short tutorial we’ll create dynamic color picker by using Advanced Custom Fields (referenced as ACF in this article) and Breakdance Builder. This tutorial will cover following parts:
We are going to create custom field:
| Properties | Values | *Mandatory value |
| Name | Dynamic color | optional value |
| Slug | dynamic_color | optional value |
| Field Type | Color picker | mandatory value |
This will be fully up to your setup. For location we have picked:
Page – is equal to – ACF Dynamic color example
When we open that page we’ll see custom color picker field. Here client could pick color which will style some elements on that particular page.
We are going to use custom attributes to pull dynamic data. For this part you will need to understand a bit of CSS, which could be explained in more details here:
In short, we could write CSS directly to HTML via Custom Attribute. There is special attribute named style where we could write valid CSS.
From CSS Variable scoping point we need to understand that value could be consumed by element where it is inlined (defined as inline CSS) or by its children. So paste value to the section element so all child elements could use it.
Tip: If you need to pass 3 colors you will need to add 2 divs inside section and place design inside div as you could pass only one color value by this method (if you want to pass like card color, background, and border-color).
| name | style | |
| value | { dynamic_color } | |
| value:click > advanced | prepend | –my-dynamic-color: |
That would result in following HTML, keep in mind –my-dynamic-color is to this point just slot where value is stored. We need to pass it as value to some element.
<section style="--my-dynamic-color: {dynamic_color}"></section>We could select for example heading or any element within section (including section itself) and set background value as var(–my-dynamic-color)
