Counselor is a website template for counselors, therapists and counseling practices, built on Bootstrap 5. The layout is responsive and mobile-ready, the menu stays at the top of the screen as you scroll, and the photo backgrounds have a parallax effect. There are eight pages: home, about, counselors, services, pricing, blog, blog post and contact.
The home page has a hero with a video, three highlights, a how-it-works section, an about block, tabs for six counseling services, a testimonials slider, pricing plans, an appointment form and recent blog posts. The inner pages add an about page with counters, testimonials and the appointment form, a counselors page with the team and pricing, a services page with the steps and the six services, a pricing page with the plans and the appointment form, a blog, a blog post with comments, a comment form and a sidebar, and a contact page with a working contact form and a map that loads on click. Counselor gives you a ready-made site for a counseling or therapy practice.
What’s new in 3.0
Bootstrap 5.3.8 (the earlier release used Bootstrap 4.2.1 and jQuery 3.2.1), compiled from Sass together with the theme and the Bootstrap 4 proportions the design was drawn with, and plain JavaScript with no jQuery. Swiper 14 replaces Owl Carousel on the testimonials slider, a built-in video dialog replaces Magnific Popup, Jarallax replaces Stellar on the parallax backgrounds, small built-in modules replace Waypoints, animate.css and the number counter plugin, and the unused Scrollax and easing scripts are gone. Lucide SVG icons and a 1.2 KB social-logo subset replace Font Awesome 4.7 and Flaticon (the Twitter bird is now the X logo). npm run build (Dart Sass and esbuild) compiles one minified stylesheet and one script.
Lighter pages: the home page went from 3.0 MB and 38 requests to 1.1 MB and 24 requests, and the contact page from 2.1 MB and 36 requests to 465 KB and 12 requests. Every photo has an AVIF version with the JPEG as the fallback, the hero photo is preloaded, the blog post photos have real dimensions and lazy loading below the first screen, and the full-page preloader is gone. The download is now 5.3 MB (it was 4.6 MB) because it now includes the Sass sources and the build tools.
No third-party requests: Roboto is self-hosted, the contact page map is an OpenStreetMap map that loads only when a visitor clicks “Show map”, the play buttons open a stock clip from YouTube’s privacy-enhanced player only after a click, and a Google Analytics 4 snippet stays commented out until you add your own ID. Before, every page loaded Font Awesome from a CDN, its web fonts from Google Fonts and the Google Maps script, which showed only an error panel on the contact page.
Working forms: the appointment form on the home, about and pricing pages, the contact form and the blog comment form send through includes/send-email.php and includes/comment.php, with validation, a spam trap and an in-page message, and the sidebar search opens the blog. Before, the appointment form had no field names and posted nowhere, the contact form had no action and the comment fields had no names, so nothing could be sent.
Accessibility: a skip link and a main landmark on every page, one h1 per page with headings in order, a labelled menu button that closes with Esc, labelled form fields, names on icon-only links and the play buttons, visible focus rings, reduced-motion support and WCAG AA text contrast: a darker, readable green (white text on the old green was 3.7:1), darker body and meta greys, darker green overlays behind the white headings on the testimonial and appointment photos, a light shade behind the home hero text on phones, and dark logos on the counselors’ teal social circles.
Fixed: the menu button shows its hamburger icon again (its icon font was never loaded, so only the word “Menu” showed); the service cards on the services page stack on phones instead of squeezing the text into a narrow column; the open phone menu no longer leaves a gap above the hero photo; ten quote icons and three blog titles had broken markup; the footer address icon is a map pin again instead of a folded map; and footer, post and button links that pointed to “#” now go to the matching pages.
Demo content: counseling copy instead of lorem ipsum, six named services, eight counselors with fictional names and their own bios (the names were duplicated and did not match the photos), five different testimonials (all five were the same), nine blog posts with their own titles, one fictional address, phone and email (there were three phone numbers), a stock clip for the play buttons, no links to the closed Google+ network, and a book cover, a magazine masthead and lettering on a glass wall blurred in three photos.