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!

To add a digital clock and date to your Webflow site and style its text, you’ll need to combine custom code with Webflow styling tools.

1. Add a Div Block for the Clock

• Drag a Div Block onto your canvas where you want the clock and date to appear.
• Give it a clear class name, like clock-wrapper.
• Inside this Div, add an HTML Embed element (from Add Panel > Components > Embed).

2. Insert Custom JavaScript in Embed

• In the HTML Embed, paste the following:
• A container element like <div id="clock"></div>.
• JavaScript to update time and date using setInterval.
• For example:

<div id="clock"></div><script>  function updateClock() {    const now = new Date();    const time = now.toLocaleTimeString();    const date = now.toLocaleDateString();    document.getElementById("clock").innerText = `${date} — ${time}`;  }  updateClock();  setInterval(updateClock, 1000);</script>

• Remember: Don’t place scripts in the body if you're pasting into Page Settings. For this type, it works best inside an Embed element on the canvas.

3. Style the Clock Text

• Go back to the Designer.
• Select the clock-wrapper or give an ID/Class to the <div id="clock"> so you can apply styling directly.
• Use Webflow styling controls to set:
• Font size (e.g., 24px or larger for visibility).
• Font family (to match your branding).
• Color, alignment, or padding/margin.

4. Ensure Published Site Loads JavaScript

• Publish your site and test on the live (not preview) version.
• Custom scripts inside embeds only work on the published site, not in Webflow Preview.

Summary

To add a styled digital clock and date: insert a Div Block, place an HTML Embed inside it with basic JavaScript, and apply Webflow styles to the container or text for visual customization. Always check the final result on the published site.