Full Site Editing and Dynamic Colors

hile at zip web designer and lead
educator here at elemental for this
tutorial I’ve gone ahead and built this
awesome events website so you can see
how elementals full site editing feature
dynamic colors and semantic HTML tags
not only help speed up your workflow but
also improve your web presence really
making your site standout let’s dive in
and see how it works okay so let’s say
you’re editing this single post
templates for the events on your site
and you want to make a quick change to
the header increasing a columns width
for example instead of exiting to your
dashboard and opening the header
template via the theme builder just to
edit it simply hover over the header and
click the orange edit header label
indicating you can edit this side pod
same goes for your single post template
the page or post content and footer
enabling you to quickly switch between
the different side pods and know exactly
which area you’re editing according to
the blue activated editing area saving
you tons of time and a lot of redundant
clicks another great feature that will
improve your workflow is dynamic colors
as you can see we have a couple of event
posts that get the same single post
template design wouldn’t it be cool to
have the color of some elements
dynamically change based on the event
you see such as this sections background
color and the posts navigation error
elementals dynamic color option can do
exactly that embed dynamic color values
in any widget that has a color field to
do so let’s first go to our event posts
I’ll open this one as you can see this
post already has some content and at the
bottom we can choose a color for this
post I added this color picker option
for posts via ACF
let’s go to custom fields so you can see
I added a custom field group called
events and inside it I added a field
called event color and set the fuel type
to color picker
I also added a rule to determine which
edit screens will get this custom color
picker field in our case we wanted to
show on the posts we create so I set
this field group to show if post type is
equal to post
to our post and change the color
make sure to update
I’ll open another post and give it a
different color
I’ll do the same one last time
now all that’s left to do is go back to
the single post template and use
elemental dynamic color feature to link
up these post specific colors to the
elements we want let’s start with this
sections background color simply click
the dynamic tags option and choose ACF
color picker then click on the wrench to
enter its settings and set the key to
the field we added before
elementos dynamic color control supports
ACF caliphates
as well as custom field keys
let’s update and preview
as you can see the background color
changes dynamically based on the post
colors we added I’ll go back and do the
same to the post navigation error
and you know what let’s jump on over to
our header
and give it the dynamic background color
as well
let’s preview again
cool these dynamic colors instantly make
the website stand out this can also come
in handy if you want to give someone
access to change the color of certain
elements dynamically but don’t want them
playing around with your designs in the
editor now last but not least let’s add
a credit section to the footer
I’ll go ahead and click the edit footer
level then enter the library and in my
templates I’ll insert this pre-designed
section so it appears below my original
footer great now I want the entire
footer to get the HTML footer tag in
order to improve accessibility HTML
semantics as well as the on-page SEO so
I’ll go to the site pod settings screen
by clicking the settings cog over here
and simply change the HTML tag to footer
you can assign these semantic HTML tags
to all of your side pods such as the
header tag to your entire header and the
main tag to your entire content area
giving you total design freedom while at
the same time improving you ser really
making your site stand out well that’s
it now you know how to use elementals
full site editing feature dynamic colors
and semantic HTML tags to speed up your
workflow and improve your web presence
don’t forget to have fun while creating
and subscribe to our youtube channel for
more tips and tutorials ciao for now