When looking for a personal trainer website template, consider Zacson. Built on Bootstrap 5, it gives you what you need to present your training business online. With Zacson, you can promote your services, courses, pricing plans and anything else you would like to share. It comes with nine pages (home, about, courses, pricing, gallery, blog, blog post, contact and elements).
As far as the features go, you get a back to top button, a sticky menu, calls to action, a photo gallery, a video, social icons, a blog and a working contact form with a click-to-load map. The layout is mobile-ready and works in all modern browsers. Grow your personal training business with Zacson.
What’s new in 3.0
Bootstrap 5.3.8 (the 2020 release used Bootstrap 4.1.3), compiled from Sass with the original Bootstrap 4 proportions, and plain JavaScript with no jQuery: jQuery, Modernizr and twenty plugins are gone. PhotoSwipe 5 replaces Magnific Popup on the elements gallery, the video opens in a built-in dialog, the mobile menu is a built-in panel behind the same button, the selects are the browser’s own, and a small scroll-reveal module replaces WOW.js and animate.css. npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
Lighter pages: the nine pages together went from 38.9 MB and 562 requests to 4.4 MB and 223 requests, and the download from 22.4 MB to 2.8 MB. Photos saved as large PNGs are now JPEGs, every photo has an AVIF version with the JPEG or PNG as the fallback, with real dimensions and lazy loading below the first screen, and the full-screen preloader that hid each page until every image had loaded is gone.
No third-party requests: Oswald and Roboto Condensed are self-hosted, the Font Awesome 5, Themify and Flaticon icon fonts are replaced by Lucide SVG icons and a 1.3 KB social-logo subset, and the contact map is OpenStreetMap, loaded only when a visitor clicks “Show map”. Before, the contact page loaded a maps script with a sample API key. The play buttons now open a stock fitness clip (a personal travel timelapse before), loaded only after a click.
A working contact form: it sends through includes/send-email.php, with validation, a spam trap and an in-page message, without reloading the page. Before, the mail script sent every message to an outside address and put visitor input in the mail headers. The newsletter, comment and demo forms check their fields and say thank you.
Accessibility: a skip link, a main landmark and one h1 per page, names on icon-only links and buttons, labelled form fields, visible keyboard focus (the old CSS removed it), a Blog submenu and gallery overlays that also open from the keyboard, a white menu button on the red header, and WCAG AA text contrast, with a deeper red for red text and buttons on the white pages and darker greys.
Fixed: the back to top button showed at the top of the page before the first scroll, the contact page had no body tag, the elements page’s selects showed two arrows and its arrow buttons drew nothing, the elements page scrolled sideways on tablets, links to a services page that never shipped now go to the courses page, and “traning” typos are corrected.
Demo content that fits a gym: ten photos that showed brand logos are replaced with photos without logos, the blog headlines, categories and commenters are fictional and about fitness, and the contact details are placeholders (a real support inbox and a real street address before).