Getting Started

Welcome

Thank you for purchasing The Gorgan HTML5 Template For Travel Bloggers. If you have any questions that are beyond the scope of this help file, please feel free to email – oleh.lavrik@gmail.com or contact us on our Dedicated Docs Platform. Thanks so much! The HTML code is 100% responsive and adaptive to different devices. The code is valid and cross browser on each modern browsers. It used the HTML5 and CSS3 technics.

In this user guide you will find all required information to get your site up and running: starting from Template installation and setup, to usage of different post types, page templates and shortcodes.

In Gorgan we use mobile first approach it means CSS3 styles for mobile devices loading faster then for tablet and desktop devices.

Information about Updates and New Themes are always announced on Twitter and Facebook. Twitter updates are usually more up to date, Facebook updates are more detailed and easier to follow :)

• Online Documentation - http://html.superbcode.net/docs/gorgan
• Twitter - https://twitter.com/superbcode
• FaceBook - https://www.facebook.com/superbcode

Short introduction

This template has built on HTML 5, CSS3/SASS technologies. Basically, we used Bootstrap 4.2 as a framework, all HTML files located in the src directory. Also we use JavaScript, Jquery as JavaScript framework, NodeJs, NPM & Bower packages. This Template is a responsive layout with one columns. The general template structure is the same throughout the template.

All pages have preloading placeholder. All content will be shown, after total page loading. We use Google Maps in Contact Us page, you can change your own position on the map. Also, we have possibility to send Ajax mail from Contact page, just setup your mail server.

In demo version our team use best images service Unsplash all images belong to that service we just use it for demonstration goal. We give Template with images placeholders with sizes instead of images, we respect image rights.

Project Structure

Project separated into application and distribution sides:

• You can find side for developers in src folder
• Distribution side, located in dist folder
• src folder contain all sources for your work (HTML5, SASS, CSS3, JS, PHP, Video, fonts, images)
  • assets
    • fonts - contains general fonts Roboto, Arctic, FontAwesome icons.
    • i - contains general images for project.
      • favicon - contains icons for favicon.
    • js - contains all general JavaScript scripts.
      • main.js main JavaScript file.
      • libs - contains JavaScript libraries which are not included NPM or Bower.
    • php - contains all php functions.
      • mailer.php function for sending mail message.
    • sass - contains all sass styles which will be translated into css.
      • blocks - contains all basic blocks sass styles.
        • header - contains project header sass styles.
        • modal - contains project modal sass styles.
      • elements - contains all basic elements sass styles.
      • fontawesome - contains all fontawesome sass styles.
      • pages - contains all sass styles for each of particular page.
      • _blocks.sass - included all sass files from folder blocks.
      • _default.sass - contain all default sass styles.
      • _elements.sass - included all sass files from folder elements.
      • _helpers.sass - contain all helpers sass styles.
      • _mixins.sass - contain all sass mixins for project.
      • _mixins.sass - contain all sass mixins for project.
      • _theme1.sass - contain all sass styles for overwriting/adding bootstrap theme.
      • _vars.sass - contain all sass variables.
      • style.sass - general sass file which collect all sass files which name starts from underscore.
    • templates - general template for all project pages.
      • header - collect all html templates which included into header.
      • modal - collect all modal windows html templates.
      • _comments.html - template for comments.
      • _footer.html - template for footer.
      • _header-picture.html - template for full size header with picture.
      • _header-slider.html - template for full size header with slider.
      • _header-video.html - template for full size header with video.
      • _instagram-line.html - template for instagram feed.
      • _our-team.html - template for our team.
      • _preloader.html - template for preloader.
      • _related-posts.html - template for related-posts.
      • _subscribe-block.html - template for subscribe form.
    • video - collect all video files
      • video-walking.mov video background.
  • about-us.html template for page About us.
  • blog-gallery.html template for page Blog Gallery.
  • blog-post.html template for page Blog Post.
  • contacts.html template for page Contacts.
  • index.html template for page Home with full size header slider.
  • index-picture.html template for page Home with full size header with picture.
  • index-video.html template for page Home with full size header with video background.
• dist folder contain all compiled and production ready files (HTML5, CSS3, JS, fonts, PHP, Video, images)
  • assets
    • css - all css styles
      • style.css
      • style.min.css
      • style.min.css.map
    • fonts - contains general fonts Roboto, Arctic, FontAwesome icons.
    • i - contains general images for project.
      • favicon - contains icons for favicon.
    • js - contains all general JavaScript scripts.
      • main.js main JavaScript file.
      • main.min.js main JavaScript file.
      • libs - contains JavaScript libraries which are not included NPM or Bower.
    • php - contains all php functions.
      • mailer.php function for sending mail message.
    • video - collect all video files
      • video-walking.mov video background.
  • about-us.html template for page About us.
  • blog-gallery.html template for page Blog Gallery.
  • blog-post.html template for page Blog Post.
  • contacts.html template for page Contacts.
  • index.html template for page Home with full size header slider.
  • index-picture.html template for page Home with full size header with picture.
  • index-video.html template for page Home with full size header with video background.
• root directory folder contain all files for developing Template (JS, JSON, .gitignore, .md)
  • package.json describes basic dependencies of project.
  • gulpfile.js contains js tasks for fast front-end developing.
  • bower.json contains library dependencies.

Steam & Grill use additional technologies:

• NodeJS
• NPM
• Bower
• GulpJS

Edit template (for developers)

First of all you'll need to install all npm dependencies.

1. Install NodeJs on your local machine.
2. Open project root directory in prompt (command line)
3. Tap in prompt next command npm install
   All npm dependencies will be installed.

Note! All npm dependencies contains in package.json file.

Next thing you will need to do is install bower like package manager

1. Open project root directory in prompt
2. Tap in prompt next commandnpm install -g bower
   Bower will be installed globally.
3. Install all bower dependencies, in order to do it, tap in prompt next command bower install

Note! All bower dependencies contains in bower.json file.

For fast developing we use Gulp
To start developing process run in prompt next command gulp in project root dir.

If you want to edit some html, SASS, JavaScript files, best way to use sources in src folder.

Gulp (gulpfile.js) has next tasks:

• webserver task for creating developers environment.
• html:build task for building html files in distribution folder.
• css:build task for building css from sass files in distribution folder.
• js:build task for building js file in distribution folder.
• fonts:build task for building fonts files in distribution folder.
• image:build task for moving and optimization images in distribution folder.
• json:build task for building json files in distribution folder.
• video:build task for building video files in distribution folder.
• php:build task for building php files in distribution folder.
• clean task for cleaning distribution folder.
• build main task for task with mask :build, shortly that task build distribution version of project.
• watch task for watching all developers files from src folder.
• default another name is gulp task for starting developing process.

More information about tasks you'll find in gulpfile.js

Edit template (for users)

Better way to use sources in src folder, but if you don't know all technologies you can simply edit dist files

• Change some CSS styles. Open *.html which you need, for example index.html find head block, then find CSS styles comment next string like link href="stylesheet" .. etc, will be including CSS file. You have to change href="path/file.min.css" to href="path/file.css" in order to include normal CSS3 file style.

  For example: href="./css/index.min.css" to href="./css/index.css" for including unminified version of CSS3 file.

  Then you can open CSS file which you need for example dist/css/index.css and modify it.

  Note! Gorgan project includes normal and minified CSS3 versions of files Like dist/css/index.min.css and dist/css/index.css You can switch if you need it. For what it is required? Minified version of files need for faster loading project, it is difficult to modify it, Normal CSS version good for modification but slower for loading

• Change brand name. Open *.html which you need, for example index.html find header block with class="header-brand" next find link class="logo-link" and change brand image. We strongly recommended use img in SVG for best image quality for all device views. Also we use next dimensions for three views

  • Desktop: 180px x 60px
  • Tablet: 150px x 50px
  • Mobile: 134px x 45px

  You can change it styles in main.css just find next CSS3 class #header-media .header-top-line .h-center-col .center-block .header-brand .logo Below you'll find brand dimensions for desktop and tablet. By default 134px x 45px for mobile devices, we use mobile first approach.

• Change slide in header slider. Upload your image to dist/assets/i folder. Open index.html find section with id="header-slider" then find block with class="owl-slide". There are slides for content slider, find style="" attribute and change background-image path to yours.

• Change video background at header. Upload your image to dist/assets/video folder. Open index-video.html find section with class="v-header" then find block video, inside you'll find block source just change src attribute insert your path to video. For example ./assets/video/video-walking.mov

• Change image background at header. Upload your image to dist/assets/i folder. Open index-picture.html find section with class="v-header" then find block with classfullscreen-video-wrap inside you'll find img HTML tag, just change src attribute insert your path to picture. For example ./assets/i/your-image-name.jpg

• Add new item to main menu. Open any *.html file. At Gorgan project in top header we use two menu left and right, between located brand name. If you want edit some items of menu, just find ul with id header-left-menu or header-right-menu and do what you would like. Also you can add sub menu to yours new menu item, just add ul tag with class dropdown-menu with sub element items, inside your new item menu li You should look how to build sub menu in other items sub menu All texts and images you can change in .html files.

Gorgan Google Maps

In the project at page contact.html we use Google Maps API

• To change size map you can find block with id="contact-map" also you can change some styles in style.css by finding selector with contact-map

• In order to change point at the map, you have to find next string var var uluru = {lat: 49.019332, lng: 25.796666}; in tag script at contact.html then change your position on Google Map.

  You can get coordinate from Google maps like 49.018948, 25.793922 first part of value to comma (49.018948) it's lat value and second value (25.793922) after comma it's lng.
  Just change var uluru = {lat: xxxx, lng: xxxx}; to yours.

  In order to change location on Google Maps you should do (For Developers)

  1. Open src/js/main.js and find
  2. Find function initMap() function
  3. Change var uluru = {lat: xxxx, lng: xxxx};
  4. Inside your project folder in prompt run next commandGulp for building new build of the project.

  In order to change location on Google Maps you should do (For Users)

  1. Open dist/js/main.js and find
  2. Find function initMap() function
  3. Change var uluru = {lat: xxxx, lng: xxxx};
  4. Save changes and open project in your browser.

Ajax email sending

You can send an email from page contact.html by Ajax method.

1. For sending an email you have to have configured mail server, because php can not send an email. It's responsibility a mail server.
2. To change receiver you have to open dist/assets/php/mailer.php (for users) or src/assets/php/mailer.php (for developers) next find $recipient variable and change it to yours mail address.

Change header slider items

In order to change anything in header slider you need:

• Change Image background: (developers)
  • For Developers
    1. In your project folder start next command Gulp in prompt.
    2. Upload new image cover into src/i directory.
    3. Open file scr/assets/templates/_header-slider.html in IDE or Notepad++.
    4. Find owl-slide html class and change background-imagepath to file in attribute style.
       For example: background-image: url('./assets/i/image-name.jpg').
    5. We strongly recommend use full size image cover 1920px x 1080px.
  • For Users
    1. Upload new image cover into dist/i directory.
    2. Open file dist/index.html in IDE or Notepad++.
    3. Find owl-slide html class and change background-imagepath to file in attribute style.
       For example: background-image: url('./assets/i/image-name.jpg').
    4. Save changes and open page in your browser.
    5. We strongly recommend use full size image cover 1920px x 1080px.
• Change slide title:
  • For Developers
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-slider.html in IDE or Notepad++.
    3. Find owl-slide-title html class and change text inside tag a.
  • For Users
    1. Open file dist/index.html in IDE or Notepade++.
    2. Find owl-slide-title html class and change text inside tag a.
    3. Save changes and open page in your browser.
• Change slide sub title:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-slider.html.
    3. Find owl-slide-subtitle html class and change text in it.
  • For Users
    • Open file dist/index.html in IDE or Notepade++.
    • Find v-subtitle html class and change text in it.
• Change slide short text:
  • For developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-slider.html
    3. Find owl-slide-text html class and change text in it.
    4. We strongly recommend use short text description.
  • For Users:
    • Open file dist/index.html in IDE or Notepade++.
    • Find owl-slide-text html class and change text in it.
    • We strongly recommend use short text description.
• Change slide link "Read more" text:
  • For developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-slider.html
    3. Find owl-slide-rm html class and change text in it to yours.
  • For Users:
    • Open file dist/index.html
    • Find owl-slide-rm html class and change text in it to yours.

Change header video background

In order to change anything in header with video background you need:

• Change video background:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Upload new video into src/assets/video directory
    3. Open file scr/templates/_header-video.html
    4. Find fullscreen-video-wrap html class and change source tag path to file in attribute src.
       For example: src="./assets/video/video-walking.mov"
    5. We strongly recommend use files .mov
  • For Users:
    1. Upload new video into dist/assets/video directory
    2. Open file dist/index-video.html
    3. Find fullscreen-video-wrap html class and change source tag path to file in attribute src.
       For example: src="./assets/video/video-walking.mov"
    4. We strongly recommend use files .mov
• Change slide title:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-video.html
    3. Find v-title html class and change text inside tag a.
  • For Users:
    1. Open file dist/index-video.html
    2. Find v-title html class and change text inside tag a.
• Change slide sub title:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-video.html
    3. Find v-subtitle html class and change text in it.
  • For Users:
    1. Open file dist/index-video.html
    2. Find v-subtitle html class and change text in it.
• Change slide short text:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/templates/_header-video.html
    3. Find v-text html class and change text in it.
    4. We strongly recommend use short text description.
  • For Users:
    1. Open file dist/index-video.html
    2. Find v-text html class and change text in it.
    3. We strongly recommend use short text description.
• Change slide button "More information" text:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-video.html
    3. Find more-info-btn html class and change text in it to yours.
  • For Users:
    1. Open file dist/index-video.html
    2. Find more-info-btn html class and change text in it to yours.

Change header picture background

In order to change anything in header with picture background you need:

• Change picture background:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Upload new picture into src/assets/i directory
    3. Open file scr/assets/templates/_header-picture.html
    4. Find fullscreen-video-wrap html class and change img path to file in attribute src.
       For example: src="./assets/i/picture-name.jpg"
    5. We strongly recommend use full size picture 1920px x 1080px
  • For Users:
    1. Upload new picture into src/assets/i directory
    2. Open file dist/index-picture.html
    3. Find fullscreen-video-wrap html class and change img path to file in attribute src.
       For example: src="./assets/i/picture-name.jpg"
    4. We strongly recommend use full size picture 1920px x 1080px
• Change slide title:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-picture.html
    3. Find v-title html class and change text inside tag a.
  • For Users:
    1. Open file dist/index-picture.html
    2. Find v-title html class and change text inside tag a.
• Change slide sub title:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-picture.html
    3. Find v-subtitle html class and change text in it.
  • For Users:
    1. Open file dist/index-picture.html
    2. Find v-subtitle html class and change text in it.
• Change slide short text:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-picture.html
    3. Find v-text html class and change text in it.
    4. We strongly recommend use short text description.
  • For Users:
    1. Open file dist/index-picture.html
    2. Find v-text html class and change text in it.
    3. We strongly recommend use short text description.
• Change slide button "More information" text:
  • For Developers:
    1. In your project folder start next command Gulp in prompt.
    2. Open file scr/assets/templates/_header-picture.html
    3. Find more-info-btn html class and change text in it to yours.
  • For Users:
    1. Open file dist/index-picture.html
    2. Find more-info-btn html class and change text in it to yours.

Images in Gogran project

Important! Template not include images which you see in demo! All images belong to Unsplash

You have got Gorgan Theme For Travellers with images placeholders with sizes instead of images, we respect image rights. Just change images to yours.

Bower packages

List of all Bower packages you'll find at bower.json all of it located in bower_components folder.
Note! bower_components folder appear after installation bower as package manager.

NPM packages

List of all NPM packages you'll find at package.json all of it located in node_modules folder.
Note! node_modules folder appear after installation npmjs as package manager.

Any questions?

Also, our team will gladly answer all your questions that you could not find in this documentation. Just send message to oleh.lavrik@gmail.com Thank you for purchasing our product.