An overview of the Vitality theme's features along with usage instructions for it's various components.
Vitality is a Bootstrap 4 based theme for building single page websites.
Thank you for choosing Vitality by Blackrock Digital! If you have any issues or questions regarding this theme, contact us directly at [email protected] and we will answer your questions as soon as possible!
You must purchase a license to use this theme, which you can do on WrapBootstrap!
When purchsing this theme, the download package will include a
/dist
directory which will contain the compiled theme. Within that folder, you will see an
index.html
file with the theme itself, along with supporting
/css,
/assets, and
/js
directories.
The theme package also includes a
/src
directory which includes all of the source files used to create the theme. The
/scripts
directory, which creates the development environment, and the
package.json
file in the root directory are development files used to build the theme, and should only be used by developers looking to work from the the theme's development files and recompile.
Vitality utilizes some powerful, third party plugins for certain components. They are:
Here is a comprehensive overview of how to use and modify the components included with the Vitality theme package.
There are a few things to note when using the Vitality navbar. It is built on top of the deafult Bootstrap navbar, and the markup is identical, with a few minor additions. The first addition you will see is the usage of the
#navbar-main
ID on the
nav
component. This sets the custom styling for the navbar, and should not be changed or removed.
.navbar-brand
imageNext, you will notice that we have replaced the text in the
.navbar-brand
element with an SVG image. The HTML appears as follows by default:
The easiest way to replace the navbar brand image is to replace and overwrite the
logo-navbar.svg
image in the
dist/img
directory with your own SVG image. Doing so would mean you don't have to change any of the HTML.
If you are using a different file type for the navbar brand image, then you will need to make sure the file path and the file type is correct. Let's say, for example, you have a new PNG image that you want to use for the navbar brand imagg; the markup would change from what you see in the box above to the following:
The above snippet assumes that you have a new image file called
logo-navbar.png
in the
dist/img
directory.
If you want to use text instead of an image, keep in mind you may have to restyle the text on your own. The best way to do this would be to create a new stylesheet and write your own custom CSS. Make sure to load this
after
your
theme-default.css
file (or whichever color scheme file you are choosing).
If your image isn't appearing, first make sure that the file extension of your image matches the file extension you're using in your HTML. After that, check to make sure that the file path is correct. Note: keep in mind that file extensions can be case sensitive (.jpg is different than .JPG)!
When you items in the
.navbar-nav
element, you'll see all of the default Bootstrap classes, along with the
.js-scroll-trigger
class. You'll also notice that the links for each
.nav-link
are set to an ID. This is how the one page scrolling system works.
Any time you want a navigation link to scroll to a position on the page, just set an ID on the element you wish to scroll to, make sure the link points to that target, and add the
.js-scroll-trigger
class to the link. For example, if you wanted to add a new item to the navbar, you would add the following list item within the
.navbar-nav:
From there, you would need a link target, so on the page somewhere in your HTML, you would have a section that has the ID
#new-link, like so:
.js-scroll-trigger
anywhere on the page!If you look at the first call to action section of the default page, you'll notice a
.js-scroll-trigger
on a button within the call to action. You can use scroll triggers anywhere on the page, just set the link target to the ID of the section you want to scroll to, and make sure the link has the
.js-scroll-trigger
class!
Vitality includes a few different masthead header options. You can have a full or partial page height header, and your header background can be either an image or a video.
.masthead-full to the masthead.
.masthead-partial to the masthead.
The best, and easiest way to change the header background image is to replace the image file within the
dist/assets/img
directory. You will see a file called
bg-header.jpg. Overwrite this file with your own image. We reccommend that you keep the image as a JPG.
If you want to change image formats, you will need to edit your theme's CSS file.
To do this, you will need to go into your theme's CSS file, and find the
.masthead
class, and modify the URL attached to the background rule. By default, it is set as follows:
If you are working from the theme's source files, you will want to replace the src/assets/img/bg-header.jpg file instead.
.masthead {
position: relative;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0.7))), url("../img/bg-masthead.jpg");
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7)), url("../img/bg-masthead.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}If you need to change the file name, path, or extension, simply edit the URL in both the normal background rule and the webkit background rule.
If you look at the CSS snippet above, before the URL you will see a linear gradient. You can change the RGBA color value (which is black by default) or the opacity of the gradient which will change the overlay of the background image!
The about section has no custom CSS classes added. There are, however, custom icons that are being used for the about section - which can be modified.
The about section icons are from Font Awesome's free library of icons. You will see four
i
elements within that section with the
.fas,
.fa-4x, and
.fa-fw
classes, along with another class that identifies which icon to use
.fa-*
(where the * is the name of the icon, for example,
.fa-code). You will need to change the
.fa-*
class to an icon. For a full list of icons, visit
http://fontawesome.com/icons
. This theme includes the free version of Font Awesome, but you can upgrade to a pro version to get access to the entire icon library.
By default, the team section has 5 team members which are organized on a carousel, using the Slick Carousel plugin. When modifying the team section, you can change the team member images, text content, and social links. You can also add or remove team members from the carousel.
The best and easiest way to change the image for a specific team member is by replacing the image file in the
dist/assets/img/team
directory. In that directory you will find the 5 default team member images. Replace these images with another JPG with the same name, and it will replace that team members portrait.
Change the images in the source files if you are working with the npm based development environment: src/assets/img/team
It is recommended that you use images that are 400x400 in pixels. If your team member images are different sizes, the sizes of the carousel items may appear asymmetrical.
Each team member has a variety of links for social profiles. You can add, remove, or modify the existing social links by using icons from the Font Awesome icon library. Each icon has a
.fab,
.fa-fw, and
.fa-*
class (where the * is the social icon being used, for example
.fa-facebook-f). To change these icons, you can go to
http://fontawesome.com/icons
and sort by their brand icons to see what is available. You will also want to set the link target for each of the link elements to your team member's social profile on your chosen network.
If you want to add or remove team members from the carousel, you need to do so at the
.carousel-team-item
level. Example markup for a single carousel item is:
To add items, copy the above snippet and paste it into the team carousel. Make sure to set a path for the team member image, and make sure to modify the social links, and add link targets, as needed.
To remove items, simply delete the entire
.carousel-team-item
element from the carousel.
The process section of the Vitality theme uses a few custom classes for positioning and spacing purposes. More importantly, if you need to change the icons in the process section, you can select the icons you want to use from the Font Awesome icon library.
In the process section, you will see three
i
elements with the
.fas
class and another
.fa-*
class (where the * indicates the icon being used, for example
.fa-heart). For a complete list of icons you can use, go to
http://fontawesome.com/icons. This theme includes the free version of the Font Awesome icon font, but you can also purcase the pro version to have access to all of the icons available.
The portfolio carousel utilizes the Slick Carousel plugin for slider functionality, along with Bootstrap modals for the individual item popup windows and the HTML5 device mockups plugin for device previews. There are a few things to consider when modifying the portfolio carousel.
Each portfolio carousel item has a background image, a preview image, and a modal window that is linked to, along with text content.
First, you will need to change the background image of the carousel item, and the preview image of the carousel item. The best and easiest way to do this is by replacing the default images in the
dist/assets/img/portfolio/carousel
directory. Make sure to replace the existing demo images with JPG files that have the
same name! Otherwise you will need to modify the theme's CSS.
To modify the content of the modal window, look at the
data-target
of the View Details button in each item, and find the corresponding modal, all of which are listed below the carousel.
For example, Portfolio Carousel - Item 1 has a View Details button with
data-target="portfolio-modal-1". Scrolling down the HTML, you will find a
div
with the class name
.portfolio-modal
and the ID
#portfolio-modal-1. This is where you can edit the contents of the popup modal for that specific item.
The theme includes 4 portfolio items by default, and you can edit each one by modifying the carousel item HTML along with it's corresponding modal window.
By default, all of the portfolio carousel items use a Macbook Pro as the device type being shown. You can change this in the HTML by modifying the data attribute on the
.device
element of each carousel item. For example, if you wanted to change from a MacBook Pro to an iPad, your markup would look like this:
For full documentation on available device options, visit the documentation page for the HTML5 Device Mockups plugin.
If you wish to add items to the portfolio carousel, you will need to do so in two steps. First, you will need to add an item to the portfolio carousel, and then you will need to link that item to a corresponding modal window.
The markup for a portfolio carousel item is as follows:
Add the above snippet as a child to the
.carousel-portfolio
element on the page. You will also need to make sure to set the
data-target
of the View Details button in your portfolio item to a modal window, and you will need to make sure the image path is correct in the preview. The background images for the portfolio items are set in the theme's CSS. If you are adding another item, you will need to set the background of the portfolio item using custom CSS. The markup for a new modal window is:
Make sure the ID of your modal window and the
data-target
of your portfolio carousel item match - otherwise, nothing will happen when the View Details button is clicked! For example, if you were going to add a fifth portfolio modal, the portfolio modal would have an ID of
#portfolio-modal-5, and the corresponding portfolio item's view details button would have a
data-target="portfolio-modal-5"
set.
The ideal dimensions for the preview images that are located inside of the device mockups is 1018x636 pixels. If you are using a different device, your images may need to be resized!
By default, the portfolio grid option includes six items, each of which have a hover effect, and when clicked, the open a gallery powered by the fancybox plugin.
Each grid item is contained within a Bootstrap column. To add more items, copy and paste the below snipped into the portfolio grid after the last item, and before the closing of the
.row
element.
Make sure to add a new image to the
dist/img/portfolio/grid
directory and set the to image paths in the snippet above to your image's location. If this isn't done, the image will not appear. You can use a smaller image for the preview image, and a larger image for the link target, but for demo purposes, the same image is used twice.
The testimonials carousel is also handled by slick carousel, and functions similarly to the team and carousel sliders. To add another item to the testmonials, simply add another
.caroursel-testimonials-item
to the carousel before the close of the
.carousel-testimonials
element.
You can use the below snippet to easily add more items to the testimonials carousel:
The contact form is a working PHP/AJAX form with validation. First and foremost, if you are testing the form it must have a mail server attached and PHP enabled on the server. For example, if you are just testing the form locally, the form will not work - it must be on a live web server, or on a testing server with PHP and a mail server.
To set up the form, open the
dist/assets/mail/contact.php
file and change the email address on line 18, which is set to
[email protected]
by default. Replace that email address with your own. You can also change the email address on line 21, which is set as
[email protected]. Since the form sends from the webserver, you don't need to reply to the webserver - but changing this is optional since the form is set up to auto reply to the email address the sender put in the email field of the form.
For advanced troubleshooting, see this post on StackOverflow, where a community user has provided comprehensive answers to why a PHP mailer might not be working properly. Special thanks to the user John Conde for providing this answer
The footer contains a few social links, which you may want to change. In order to do so, check out the brand icons availabe on Font Awesome.
There are two callouts sections that are included with Vitality: the full callout, and the email subscribe callout (which is set up to work with MailChimp).
The best and easiet way to change the background image on the full callout section is by replacing the
dist/assets/img/bg-callout.jpg
file with a new image (with an identical name and format). If your image has a different file format (for example, .gif, .png, etc.) you will need to change the file name in the theme's CSS file.
The signup/subscribe callout section is set up to work with MailChimp! In order to make the form subscribe users to your MailChimp mailing list, you will need to change the form action of the signup form. You will see the form section in the HTML laid out as follows:
The above form action will need to be replaced by a form action to use your form. To find this, login to your MailChimp account and do the following:
Vitality uses Node.js and npm to automate the development environment. To use the dev environment included with this them, you must first install Node.js. After node is installed, run the following commands in your terminal to make sure Node.js and npm are installed correctly.
node --version npm -v
After you have npm installed, you can install the proejects dependencies. Go to the root folder of the Vitality theme package, and run the following:
npm install
This will install the project's dependencies.
After you dependencies are installed run:
npm start
This will launch the build environment. A browser window will open that shows you a live preview of your project, and editing the files in the src/ directory will reload the browser window automatically.
Developing from the source files requires knowledge of Pug, which is used to render the HTML, and SASS, which is used to write the CSS.
All of the images included with this theme are from https://unsplash.com/.
Feel free to use the images included with the theme for your project. For more information about Unsplash's license and terms, visit https://unsplash.com/license!
If you have read through the documentation, and still have questions about working with the Vitality theme, send us an email at [email protected] and we will be in touch as soon as possible!
Thank you for choosing Vitality!