Design touches

• HTML Design Reading progress bar on posts A thin bar at the top of single posts fills up as the visitor scrolls through the article.
• CSS Design Your brand colour for selected text Text that visitors select with the mouse is highlighted in your brand colour instead of the browser’s blue.
• CSS Design Tables that scroll on phones Wide tables in posts and pages scroll sideways on small screens instead of breaking the layout.
• JS Design “Copy” button on code blocks Code blocks in your posts get a small Copy button that copies the code to the clipboard. Great for tutorial sites.
• HTML Design Announcement bar at the top of the site A slim bar across the top of every page with your message and a link, for sales, opening hours or news. Visitors can close it, and it stays closed for them. Set up first
• HTML Design WhatsApp chat button A round WhatsApp button in the bottom corner that opens a chat with your number, with a message already typed. Set up first
• HTML Design Mark links to other sites Links in your posts that go to other websites get a small ↗ after them, so readers know they’re leaving your site.
• CSS Design Clear keyboard focus outlines Keyboard users see a clear outline around the link or button they’re on. Many themes hide it; it matters for accessibility.
• CSS Design Respect “reduce motion” settings Visitors who asked their device to reduce motion get no smooth scrolling, animations or transitions on your site.
• CSS Design Stop sticky headers covering headings When a link jumps to a heading on the page (a table of contents, for example), the heading lands below your sticky header instead of behind it.
• CSS Design Hide the page title on the home page Hides the big page title (like “Home”) on a static front page. Other pages keep their titles.

All packs and snippets