Soul Focus Website

Soul Focus’s needs

Soul Focus is a local wellness center that had outgrown their website. They were looking to merge their separate sites into one cohesive design. They needed a way to feature their extensive list of services. It was important to be able to organize them based on their department.

About the website

The Soul Focus website is responsive and keeps everything organized for their visitors. It is also easy to update. There are sections for services, team members, and testimonials. Each section is available to use in different ways throughout the site.

The company wanted to use a red and black combination for the color scheme. The design aimed to use those two strong, bold colors in a way that was still clean and user-friendly. There is also advanced browser compatibility all the way back to Internet Explorer.

Soul Focus style guide

Soul Focus now has full control over the site, but follow this link to interact with the live site’s features and see the design elements.

Website specifics

The website admin is able to choose a sidebar for each page, or choose no sidebar at all. The services have a sidebar with related services from the same category. This sidebar can be hidden if the admin wants. The admin can also choose a what footer to show for each page, or opt to show custom content. Each page can display team members, testimonials, and services based on a selected category. There is also an option for a popup to display based on the settings. Besides content, the admin can choose how often the popup displays.

The front page has sections which the admin can reorder. There are two different services sections and a flexible content area. There is the option to display team members, testimonials, latest posts, and events. To incorporate all possibilities, there is a customizable slider with an option for a shortcode replacement.

Hover effects, shown in the graphic above, are used to add some personality to the website. There are two types of service boxes with hover effects. There is also the about team member photos, navigation, and site buttons. In order to keep the personality for mobile devices, the team hover effect happens automatically at random on mobile screen sizes.