How To Create A Dynamic Call To Action Section For Your Page and Post Templates
We often need to create dynamic sections in our posts and pages that can be edited by our clients without the need to create and edit new templates with Elementor. By using ACF and the new dynamic options in Pro 2.9, we can accomplish this goal.
Step One: Create The Custom Fields
Here I have created all the custom fields I need for my authors to customize their Call To Action Widgets. For this demo, I did not create a field for the ribbons or every option available, just the primary ones needed.
Step Two: Create A New Post With The Fields Populated
I now need to create a post in order to properly populate my new templates. I will fill out my new custom fields now.
Step Four: Create A New CTA Template
Now we will create a new template. From our Elementor Saved Templates Section, create a new template and drag a CTA widget onto the page.
Step Five: Making It Dynamic
Five One
I now need to pull the data from my dynamic fields. We will start with the image. Here I am selecting my dynamic field for the image.
Five Two
Next, we need the title, description text. button text and link URL. I will choose the proper dynamic fields for these.
Five Three
We now need to style the colors. I have chosen all the dynamic fields in my content color section.
Five Four
Button styling will repeat the steps above using our dynamic color picker options.
Step Six: Adding The Section To Our Post Template
We now can add this new dynamic call to action into our single post template. I have chosen to create a sidebar area and placed the new template below my Table Of Contents. I will publish this template and set the display conditions as needed.
Step Seven: Creating And Editing New Posts
The client or authors can now edit the call to action for each post. They can pick the appropriate colors and featured image needed to promote their goal.
Finish
We now have a completely dynamic CTA widget in our posts without the need for our clients and authors to edit the templates.