Documentation

Volare - Trekking and Sailing Site Template

Thank you so much for purchasing our item from Themeforest.

If you have any questions that are beyond the scope of this help file, Please contact us via Support Tab.

Installation

Follow the steps below to setup your site template:

1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server (that support PHP) using FTP (suggested FTP client Filezilla) or localhost in order to use it on your website and of course after your edits.
2. Below is the folder structure of each version and needs to be uploaded to your website or localhost root directory:
   • html - Contains all of the assets referenced
     • css - Stylesheet files
     • fontello - Icon font library
     • img - Images files
     • js - Javacript files
     • phpmailer - Php files for the forms
     • sass - Sass files
     • video - Video files
   • html/index.html - Homepage

CSS Structure

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css or play with the scss files included.
We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply.
Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Animations title
- 1.3 Buttons
- 1.4 Structure
2. CONTENT
- 2.1 Home
- 2.2 Carousel Home Page
- 2.3 About
- 2.4 Detail page
- 2.5 Gallery
- 2.6 Blog
3. COMMON
- 3.1 Map info box
- 3.2 Misc
- 3.3 Forms
- 3.4 Sapcing
- 3.5 Pagination

Javascript Structure

This theme use these Javascript (minified versions included). We have included the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder).

js/common_scripts_min.js content:

• jQuery Library
• Boostrap.js
• Superfish Menu
• Jarallax
• Jarallax Video extension
• Owl Carousel
• Vegas Kenburns Slider
• ScrollCue.js
• Date picker
• Isotope
• Input Range Slider
• Fullscreen Lightbox

Sass

We have added SASS .scss files in template. If you know how to use SASS you can change sass files and compile the css as well. You can find sass file here - html/sass

Open the sass/_variables.scss and Edit the values according to your needs. If you need more Advanced Setup then you can Edit the Respective Files yourself which have been branched inside the same Folder.

Common settings/edits

If you need a little help editing the template, check out Tuts+ tutorial How to Customize an HTML Template.

Change the logo

To change the logo, simply use your PNG24 file (suggested logo height is 36/45px) or better SVG format. Below how is coded:

<img src="img/logo.png" width="122" height="26" alt="">

Control the opacity of the header images

You can control the opacity of the header images via data attribute as the example below:

<div class="opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">

Animation Scroll Cue

Show elements by scrolling. Animation types available:

• fadeIn
• slideInLeft
• slideInRight
• slideInDown
• slideInUp
• zoomIn
• zoomOut
• rotateIn
• bounceIn
• bounceInLeft
• bounceInRight
• bounceInDown
• bounceInUp
• flipInX
• flipInY

Please read the full documentation here.

Jarallax Parallax Images and Videos (full documentation here)

Example of Parallax Background Image:

<div data-jarallax data-speed="0.2" class="jarallax">
  <img class="jarallax-img" src="<background_image_url_here>" alt="">
  Your content here...
</div>"

Example of Parallax Video Background:

<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">
Your content here...
</div>
          
<!-- Background Vimeo Parallax -->
<div class="jarallax" data-jarallax data-video-src="https://vimeo.com/110138539">
Your content here...
</div>
<!-- Background Self-Hosted Video Parallax -->
<div class="jarallax" data-jarallax data-video-src="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
</div>

Change the address of Google map in contact page

Open mapmarker_func.js and change with your latitude and longitude + your full address (below and example). You can change also your map marker (that has to be png24).

//set up markers 
    var myMarkers = {"markers": [
       {"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
      ]
   };
    
    //set up map options
    $("#map").mapmarker({
     zoom  : 14,
     center  : 'Covent Garden London', //YOUR FULL ADDRESS 
      markers : myMarkers
   });

Then replace at the bottom of the page, this line:

<script src="http://maps.googleapis.com/maps/api/js"></script>
WITH YOUR API KEY
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Itineraries Map Config

You need to add your API key. Edit those files js/map_func.js + js/map_func_itineraries_points.js following the comments on code.

Common Issues on Google Map
( Google map works localy in demo mode but does not works once the site will be online)

Google requires an api key for the Google map. They require a credit card for a new api..don't worry there cost is very low and the quantity of views for free are very high: https://cloud.google.com/maps-platform/pricing/sheet/

You can create your own "Standard api key" here and follow the steps. https://developers.google.com/maps/documentation/javascript/get-api-key#key

Here some additional info on how to create an API KEY https://setcompass.com/How-to-Get-Google-Maps-API-Key-Guide.htm

Noteif you apply an api key, the map locally does not load. You must upload your site to your host.

Change date format in Date picker (full documentation here)

Open js/functions.js (

//Datepicker
	var nowTemp = new Date();
	var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
		$('#date_quote, #date_booking, #date_quick_booking').datepicker({
		autoclose: true,
		format: "dd/mm/yyyy",
		todayHighlight: true
	});

PHP files

You can change the method by using another php file in phpmailer folder. Below a short explanation of the different methods and common settings:

PHPmailer text/html: This version send an email with basic html support on text (for example contact.php).

PHPmailer with html template: This version is without SMTP and send the message inside an HTML template, (template-email.html) for the main message and for the confirmation page sent to the use who fill the form (confirm.html). For example contact_template_email.php (default).

PHPmailer with html template SMTP: This version is like above but with SMTP Authentication (for example contact_template_email_smtp.php).

Common settings (edit recipients) for the 3 forms: reservation, contacts and newsletter.

$mail->setFrom('info@volare.com', 'Message from Volare); // Email Address and Name FROM
$mail->addAddress('jhon@volare.com', 'Jhon Doe'); // Email Address and Name TO - Name is optional
$mail->addReplyTo('noreply@volare.com', Message from Volare); // Email Address and Name NOREPLY
$mail->Subject = Message from Volare;  // Email Subject   

SMTP settings (contact your hosting provider, usually need only Host, Username and Password)

$mail->Host       = 'hostname'; // Set the SMTP server to send through
$mail->Username   = 'username'; // SMTP username
$mail->Password   = 'password'; // SMTP password
$mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS; // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
$mail->Port       = 587; // TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above  

NOTE ABOUT THE HTML EMAIL TEMPLATE
The email template has been tested on various email clients (desktop and mobiles). But, maybe you know, it's quite impossible to provide an email template that looks equal on all email clients due they have different supports. The email template degrade nicely to maxime the compatibility. Email Template design it's beyond the scope of this item and support, you can implement with your own or drive to a most simple method to send the email (without email template).

Edit the email template with your images
Put your logo in the images folder. To reduce spam issue and email weight, images must be upload on your online site/server and the html looks like the example below:
<img src="http://www.yourdomain/phpmailer/images/logo.png" border="0" width="54" height="60" alt="" />

Source & Credits

For the js listed below, you can find more documentation on the relative sites.

• Bootstrap
• Date picker
• Jquery
• Owl carousel
• Scroll Cue js
• PHPMailer
• Full Screen Lightbox
• Jquery Isotope
• Jarallax Parallax

Images are not included.

Support

If this documentation doesn't answer your questions, post via Item Support Tab

We are located in GMT +1 time zone and we answer all questions within 24-48 hours working days. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Don’t forget to Rate this template

More Templates

Checkout Our Below Premium Templates

Our Portfolio