Update the Date Automatically on Your Webflow Website
Most footer’s have the year in the copyright section of the website. It is easy to forget to make the change at the beginning of the year. Instead of adding one more item to our to-do list, we can have it update each year automatically.
Here is what you need to do in your Webflow project.
For starters, my Footer is a component. If you aren’t using components, you need to do use them. Components will save you so much time, especially when you need to make a change, like changing the date to reflect the new year.
I’m assuming your footer has been turned into a component. If it is not, you can click on the section, then click create component. Name it something descriptive, like footer. It doesn’t have to be revolutionary. It just needs to be something you can remember.
Once you have your footer turned into a component follow these steps. Here is a scribe I made. More instructions are to follow below the scribe as well as the code you need to paste in.
Instructions written out
NOTE:These are the same as above, but more detailed
(1) Click on footer in the navigator. Then in the right hand panel, click edit component. This step is crucial, so that you are editing the actual component and not just a field in the component.
(2) Click the plus icon on the left side bar or type “A” to open the Add panel. Scroll down to the advanced section and click on embed. This will put an embed element in your footer. The custom code section will pull up.
What this code does, is it updates any div with a class of year to the current year.
(4) Save and close the embed. Make sure the embed is at the bottom of the hierarchy in the navigator. It won’t affect the code and whether it works or not, but it will make the next step easier so that you can see the actual date since the back to instance bar opens at the bottom and gets in the way. At least it does in my project.
(5) Find the date in your footer.
(6) Highlight just the date you want to change.
(7) A menu will popup.
(8) Click the span icon to create a text span.
(9) Add the class of ‘year’ to the span using the style’s panel.
NOTE: The date won’t change. That doesn’t mean something is broken. The date is only going to change on the published site since it is a script.
(10) Publish your site.
(11) View the published site.
The date should have changed to the current year!
Want to 2x Your Leads and Conversions?
Join the exclusive community receiving our 5-Minute SEO and Web Design Tips.
Every week, we deliver expert insights straight to your inbox, designed to propel your business to the top of Google rankings, resulting in more website visits and more sales.
With years of proven experience, our tips are concise, actionable, and tailored to fit your busy schedule.
Transform your website into a lead-generating powerhouse without spending hours on research.
We design custom Webflow websites that are unique, SEO optimized, and designed to convert.
Gain peace of mind knowing that a Webflow Professional Partner is maintaining your website.
We develop custom Webflow websites that are robust, secure, and easy to update.
SEO services that help you rank on Google and get found by your ideal clients.
Position Your Business for Success Today!
Book your FREE website consultation to get started.