Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
TL;DR
- Add a
<div>with a custom class inside an Embed element in Webflow Designer. - Insert JavaScript in the Custom Code section to display and update time/date.
- Style the clock using Webflow’s Style Panel with your custom class.
To add a digital clock and date in Webflow and style the text, you’ll use custom code for functionality combined with Webflow classes for styling.
1. Add a Placeholder Element
- Go to your Webflow Designer.
- Drag an Embed element into your page where you want the clock to appear.
- Inside this Embed element, add a simple
<div>with a class, for example: <div id="clock" class="digital-clock"></div>
2. Add the Clock JavaScript
- Go to your Page Settings or Site Settings → Custom Code tab.
- Paste the following inside the Before </body> tag area:
<script>
function updateClock() {
const now = new Date();
const time = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
const date = now.toLocaleDateString();
document.getElementById('clock').innerHTML = date + ' | ' + time;
}
updateClock();
setInterval(updateClock, 1000);
</script>
- This script updates the clock every second and formats the time and date.
3. Style the Clock Using Webflow Designer
- After adding the
digital-clockclass (or your custom class) to the<div>, go to the Style Panel in Webflow. - Customize the style:
- Font Family: Choose a digital or mono typeface (e.g., Roboto Mono).
- Font Size: Adjust for visibility (e.g., 24px or larger).
- Color: Change the text color for contrast.
- Text Align: Center or align as desired.
- Padding/Margin: Adjust spacing around the clock block.
4. Publish Your Site
- Click Publish and preview the site on the live domain.
- The clock should appear and update in real time, styled to match your design.
Summary
To add and style a digital clock and date in Webflow:
- Add a
<div>with a custom class inside an Embed element. - Insert a simple JavaScript snippet in the Custom Code section.
- Use Webflow’s Style Panel to visually style the clock text via your assigned class.
