Introduction

Thank you for purchasing our template. The purpose of this documentation is to help you make the most of what this template has to offer. We've covered almost everything needed to start using our template, we tried to keep it as simple as possible. If you have any questions that are beyond the scope of this help file, please feel free to email us from our Profile Page. Please don’t forget to mention your purchase code in your message.

We would happily welcome feedback from you on how, if anywhere, you would like this documentation improved. If you would find anything a little bit easier and more helpful if we went into more detail, or explained something a little better - we'd be happy to hear it.

Basic Structures

Below are all the files included with the template:

  1. CSS
    • reset.css -> used for reseting default browser styles
    • styles.css -> Main styles stylesheet.
  2. Images -> contains all the images used in the template.
  3. Includes
    • Font -> "Cardo" the font used in template.
    • font_aweomse -> "FontAwesome" font icon files.
    • Mail Script -> contact form script reponsible for sending emails.
  4. JS
    • scripts -> main template JavaScript file
    • flexslider
    • locomotive
    • magnific popup
    • plyr
    • swiper
    • easing
    • fitvids
    • gsap
    • imagesloaded
    • isotope
    • jquery
    • modernizr
    • pixi
    • split text
    • transit
    • webfont
  5. And the HTML files.

HTML Structure

The layout system is based on 3 layouts: Fullscreen layout, Fullwidth layout, Sliced layout, and Standard layout

Fullsreen Layout

Fullscreen layout expand the container width and height to fill the page. It's mainly used for Portfolio Full Carousel, Portfolio Split Screen, Portfolio Strips Slider.

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

Here's an example of how to use the fullscreen layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US" class="fullscreen">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Point1</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body>

                            <!-- Begin Main -->
                            <main>
                                    <div class="portfolio strips-slider">
                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>
                    
                

Fullwidth Layout

Fullwidth layout expand the container width fill the page. It's mainly used for Portfolio Big Carousel layout and Portfolio Small Carousel layout.

Here's an example of how to use the fullwidth layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US" class="fullwidth">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Point1</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body>

                            <!-- Begin Main -->
                            <main>
                                    <div class="portfolio carousel-slider big">
                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>
                    
                

Sliced Layout

Sliced layout keeps the content contained in a 2 sections (Left & Right) container. It's mainly used for Page About Me.

Here's an example of how to use the boxed layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Point1</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body>

                            <!-- Begin Main -->
                            <main class="page page-sliced">
                                    <div class="first-half">

                                    </div>
                                    <div class="second-half has-background" style="background-image:url(‘images/img1.jpg‘);">
                                    
                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>
                    
                

Standard Layout

Standard layout is the normal layout for content creation. It's mainly used for Page About Us, Blog Cover, Portfolio Bold Text, and Project Sample 1.

Here's an example of how to use the boxed layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Point1</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body>

                            <!-- Begin Main -->
                            <main class="page">
                                    <div class="inner-container">
                                            <h1>Page Header</h1>
                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>
                    
                

CSS Structure

CSS styles are divided into 9 sections, for better handling and understanding. Down below is the basic css structure:

  1. Basics
  2. Header
  3. Footer
  4. Elements
  5. Portfolio
  6. Pages
  7. Blog
  8. Transitions
  9. Media Quieries

If you need to make some edits in the styling, just head to the section you want to edit, make your changes, and save.

JavaScript Structure

All the plugins needed in this template have been listed in files sturcture. The main template javascript file is "scripts.js", down below is the structure of the file.

  • Global section -> contains common functions used globally all over the template pages.
  • Events Section -> contains all the events which are called once, and doesn't depend on the main "draw" function.
  • Functions Section -> contains all the functions used to draw different layouts, including the main "draw" function which is responsible for drawing the layout, even when the window is resized.

Elements

This section explains most of the elements used in the template including:

  • Preloader
  • Home & Landing Pages
  • Portfolio layouts
  • Gallery layouts
  • Pages layouts
  • Blog layouts
  • Shortcodes

Preloader

The preloader is the loading screen which appears when you open any page in the template. It's used as a cover to hide any images which are being loaded, or any layout which are being drawn. It automatically disappears when all the loading are finished.

Here's a preview of how it is written:


                    <!-- Begin Loader -->
                    <div class="preloader">
                            <p>LOADING</p>
                            <span class="circle"></span>
                    </div>
                    <!-- End Loader -->
                

Home & Landing layouts

There are 6 types of home layouts used in this template:

  • Fullscreen Slideshow
  • Background Image
  • Background Video
  • Landing
    • Fullscreen Slideshow
    • Strips Slideshow
    • Strips Pages

Home - Fullscreen Slideshow

Here's a demo of the "Fullscreen Slideshow" layout used for "Home".

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

Here's an example of how the fullscreen slideshow is written:


                    <!-- Begin Main -->
                    <main>
                            <div class="flexslider full">

                                    <ul class="slides">
                                            <li style="background-image:url('images/f1.jpg');">
                                                    <span class="image-caption">Image 1 Caption</span>
                                            </li>
                                            <li style="background-image:url('images/f14.jpg');">
                                                    <span class="image-caption">Image 2 Caption</span>
                                            </li>
                                            <li style="background-image:url('images/f15.jpg');">
                                                    <span class="image-caption">Image 3 Caption</span>
                                            </li>
                                            <li style="background-image:url('images/f16.jpg');">
                                                    <span class="image-caption">Image 4 Caption</span>
                                            </li>
                                            <li style="background-image:url('images/f4.jpg');">
                                                    <span class="image-caption">Image 5 Caption</span>
                                            </li>
                                    </ul>

                                    <div class="nav">
                                            <span class="prev"></span>
                                            <span class="next"></span>
                                    </div>
                                
                            </div>
                    </main>
                    <!-- End Main -->
                

Home - Background Image

Here's a demo of the "Background Image" layout used for "Home".

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

Here's an example of how the Background Image layout is written:


                    <!-- Begin Main -->
                    <main class="has-background" style="background-image:url('images/f14.jpg');">
                    </main>
                    <!-- End Main -->
                

Home - Background Video

Here's a demo of the "Background Video" layout used for "Home".

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

To change the video URL, you'll find a property called "videoURL" in the iframe, just change its value to match your video URL.

Here's an example of how the Background Video layout is written:


                    <!-- Begin Main -->
                    <main>
                            <div class="bg-container yt-bgvideo">

                                    <div id="bgndVideo" class="player" data-property="{videoURL:'https://youtube.com/watch?v=F-1weFCiYBA',containment:'self'}"></div>

                            </div>
                    </main>
                    <!-- End Main -->
                

Landing - Fullscreen Slideshow

Here's a demo of the "Fullscreen Slideshow" layout used for "Landing".

The html tag and the body tag must have a 'landing-fullscreen' class in order for this layout to work.

Here's an example of how the Fullscreen Slideshow layout is written:


                    <!-- Begin Main -->
                    <div class="landing-page landing-slideshow">

                            <div class="logo-container">
                                    <a href="index.html">

                                            <img src="images/logo_dark.png" alt="">
                                            
                                            <div class="animate">
                                                    <img src="images/logo_dark.png" alt="">
                                            </div>

                                    </a>
                            </div>
                            
                            <div class="flexslider full">
                                
                                    <ul class="slides">
                                            <li style="background-image:url('images/f1.jpg');"></li>
                                            <li style="background-image:url('images/f14.jpg');"></li>
                                            <li style="background-image:url('images/f15.jpg');"></li>
                                            <li style="background-image:url('images/f16.jpg');"></li>
                                            <li style="background-image:url('images/f4.jpg');"></li>
                                    </ul>

                            </div>

                    </div>
                    <!-- End Main -->
                

Landing - Strips Slideshow

Here's a demo of the "Strips Slideshow" layout used for "Landing".

The html tag and the body tag must have a 'landing-fullscreen' class in order for this layout to work.

Here's an example of how the Strips Slideshow layout is written:


                    <!-- Begin Main -->
                    <div class="landing-page landing-strips landing-strips-slideshow">

                            <div class="logo-container">
                                    <a href="index.html">
                                            <img src="images/logo_dark.png" alt="">
                                    </a>
                            </div>

                            <!-- Begin Slides -->
                            <div class="strips three-columns">

                                    <div class="column flexslider">
                                            <ul class="slides">
                                                    <li style="background-image:url('images/h1.jpg');"></li>
                                                    <li style="background-image:url('images/h2.jpg');"></li>
                                                    <li style="background-image:url('images/h3.jpg');"></li>
                                            </ul>
                                    </div>

                                    <div class="column flexslider">
                                            <ul class="slides">
                                                    <li style="background-image:url('images/h4.jpg');"></li>
                                                    <li style="background-image:url('images/h5.jpg');"></li>
                                                    <li style="background-image:url('images/h6.jpg');"></li>
                                            </ul>
                                    </div>

                                    <div class="column flexslider">
                                            <ul class="slides">
                                                    <li style="background-image:url('images/h7.jpg');"></li>
                                                    <li style="background-image:url('images/h8.jpg');"></li>
                                                    <li style="background-image:url('images/h9.jpg');"></li>
                                            </ul>
                                    </div>

                            </div>
                            <!-- End Slides -->

                    </div>
                    <!-- End Main -->
                

Landing - Strips Pages

Here's a demo of the "Strips Pages" layout used for "Landing".

The html tag and the body tag must have a 'landing-fullscreen' class in order for this layout to work.

Here's an example of how the Strips Pages layout is written:


                    <!-- Begin Main -->
                    <div class="landing-page landing-strips landing-strips-pages">

                            <div class="logo-container">
                                    <a href="index.html">
                                            <img src="images/logo_dark.png" alt="">
                                    </a>
                            </div>

                            <!-- Begin Slides -->
                            <div class="strips three-columns">

                                    <div class="column" style="background-image:url('images/h1.jpg');">
                                            <a href="portfolio-horizontal-centered.html">Portfolio</a>
                                    </div>

                                    <div class="column" style="background-image:url('images/h2.jpg');">
                                            <a href="gallery-masonry-3columns.html">Gallery</a>
                                    </div>

                                    <div class="column" style="background-image:url('images/h3.jpg');">
                                            <a href="page-aboutus.html">About</a>
                                    </div>

                            </div>
                            <!-- End Slides -->

                    </div>
                    <!-- End Main -->
                

Portfolio

There are 16 types of portfolio layouts used in this template:

  • Horizontal
    • Horizontal Centered
    • Horizontal Scroll
    • Horizontal Fullscreen
  • Strips
    • Strips 2 Columns
    • Strips 3 Columns
    • Strips 4 Columns
  • Grid
    • Grid 2 Columns
    • Grid 3 Columns
    • Grid 4 Columns
    • Grid Opacity Filters
    • Grid Isotope Filters
  • Masonry
    • Masonry 2 Columns
    • Masonry 3 Columns
    • Masonry 4 Columns
    • Masonry Opacity Filters
    • Masonry Isotope Filters

Horizontal - Centered

Here's a demo of the "Horizontal Centered" layout used for "Portfolio".

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

Here's an example of how the Horizontal Centered slider is written:


                    <!-- Begin Main -->
                    <main>
                            <div class="portfolio horizontal-slider centered">
                                    <div class="swiper-container" id="swiper-centered-1">
                                            <div class="swiper-wrapper">

                                                    <!-- Begin First Article -->
                                                    <article class="swiper-slide">

                                                            <figure>
                                                                    <img src="images/h1.jpg" alt="">
                                                            </figure>

                                                            <a href="portfolio-single1.html" class="overlay">
                                                                    <h2 class="title">Green Housing</h2>

                                                                    <span class="categories">
                                                                            <span>Architecture</span>
                                                                    </span>
                                                            </a>

                                                    </article>
                                                    <!-- End First Article -->

                                                    <!-- Begin Second Article -->
                                                    <article class="swiper-slide">

                                                            <figure>
                                                                    <img src="images/h2.jpg" alt="">
                                                            </figure>

                                                            <a href="portfolio-single1.html" class="overlay">
                                                                    <h2 class="title">Central Paris</h2>

                                                                    <span class="categories">
                                                                            <span>Street</span>, 
                                                                            <span>People</span>
                                                                    </span>
                                                            </a>

                                                    </article>
                                                    <!-- End Second Article -->

                                            </div>
                                    </div>
                            </div>
                    </main>
                    <!-- End Main -->
                

Horizontal - Scroll

Here's a demo of the "Horizontal Scroll" layout used for "Portfolio".

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

Here's an example of how the Horizontal Scroll slider is written:


                    <!-- Begin Main -->
                    <main>
                            <div class="portfolio horizontal-slider scroll">
                                    <div class="articles-wrapper">

                                            <!-- Begin First Article -->
                                            <article>

                                                    <figure>
                                                            <img src="images/h1.jpg" alt="">
                                                    </figure>

                                                    <a href="portfolio-single1.html" class="overlay">
                                                            <h2 class="title">Green Housing</h2>

                                                            <span class="categories">
                                                                    <span>Architecture</span>
                                                            </span>
                                                    </a>

                                            </article>
                                            <!-- End First Article -->

                                            <!-- Begin Second Article -->
                                            <article>

                                                    <figure>
                                                            <img src="images/h2.jpg" alt="">
                                                    </figure>

                                                    <a href="portfolio-single1.html" class="overlay">
                                                            <h2 class="title">Central Paris</h2>

                                                            <span class="categories">
                                                                    <span>Street</span>, 
                                                                    <span>People</span>
                                                            </span>
                                                    </a>

                                            </article>
                                            <!-- End Second Article -->

                                    </div>
                            </div>
                    </main>
                    <!-- End Main -->
                

Horizontal - Fullscreen

Here's a demo of the "Horizontal Fullscreen" layout used for "Portfolio".

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

Here's an example of how the Horizontal Fullscreen slider is written:


                    <!-- Begin Main -->
                    <main>
                            <div class="portfolio horizontal-slider full">
                                    <div class="swiper-container" id="swiper-full-1">
                                            <div class="swiper-wrapper">

                                                    <!-- Begin First Article -->
                                                    <article class="swiper-slide active" style="background-image:url('images/f1.jpg');">

                                                            <a href="portfolio-single1.html" class="overlay">
                                                                    <h2 class="title">The Mountain</h2>

                                                                    <span class="categories">
                                                                            <span>Travel</span>
                                                                    </span>
                                                            </a>

                                                    </article>
                                                    <!-- End First Article -->

                                                    <!-- Begin Second Article -->
                                                    <article class="swiper-slide" style="background-image:url('images/f2.jpg');">

                                                            <a href="portfolio-single1.html" class="overlay">
                                                                    <h2 class="title">The Great Canyons</h2>

                                                                    <span class="categories">
                                                                            <span>Travel</span>, 
                                                                            <span>Outdoors</span>
                                                                    </span>
                                                            </a>

                                                    </article>
                                                    <!-- End Second Article -->

                                            </div>
                                    </div>
                            </div>
                    </main>
                    <!-- End Main -->
                

Strips

Here's a demo of the "Strips" layout used for "Portfolio".

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

To change the columns count, find the "data-columns" attribute and change the number between 2,3,4.

Here's an example of how the Strips slider is written:


                    <!-- Begin Main -->
                    <main>
                            <div class="portfolio horizontal-slider strips" data-columns="3">
                                    <div class="articles-wrapper">

                                            <!-- Begin First Article -->
                                            <article style="background-image:url('images/h1.jpg');">

                                                    <a href="portfolio-single1.html" class="overlay">
                                                            <h2 class="title">Green Housing</h2>

                                                            <span class="categories">
                                                                    <span>Architecture</span>
                                                            </span>
                                                    </a>

                                            </article>
                                            <!-- End First Article -->

                                            <!-- Begin Second Article -->
                                            <article style="background-image:url('images/h2.jpg');">

                                                    <a href="portfolio-single1.html" class="overlay">
                                                            <h2 class="title">Central Paris</h2>

                                                            <span class="categories">
                                                                    <span>Street</span>, 
                                                                    <span>People</span>
                                                            </span>
                                                    </a>

                                            </article>
                                            <!-- End Second Article -->

                                    </div>
                            </div>
                    </main>
                    <!-- End Main -->
                

Grid

Here's a demo of the "Grid" layout used for "Portfolio".

To change the columns count, add a "two-columns" or "three-columns" or "four-columns" class the container.

Here's an example of how the Grid layout is written:


                    <!-- Begin Main -->
                    <main>
                            <div class="portfolio grid two-columns">
                                    <div class="articles-wrapper">

                                            <!-- Begin First Article -->
                                            <article>
                                                    <div class="article-wrapper">
                                                            
                                                            <figure>
                                                                    <img src="images/g1.jpg" alt="">
                                                            </figure>

                                                            <a href="portfolio-single2.html" class="overlay">
                                                                    <h2 class="title">The train</h2>

                                                                    <span class="categories">
                                                                            <span>Outdoors</span>, 
                                                                            <span>Dark</span>
                                                                    </span>
                                                            </a>

                                                    </div>
                                            </article>
                                            <!-- End First Article -->

                                            <!-- Begin Second Article -->
                                            <article>
                                                    <div class="article-wrapper">
                                                            
                                                            <figure>
                                                                & lt;img src="images/g2.jpg" alt="">
                                                            </figure>

                                                            <a href="portfolio-single2.html" class="overlay">
                                                                    <h2 class="title">Hidden Caves</h2>

                                                                    <span class="categories">
                                                                            <span>Exploration</span>
                                                                    </span>
                                                            </a>
                                                    
                                                    </div>
                                            </article>
                                            <!-- End Second Article -->

                                    </div>
                            </div>
                    </main>
                    <!-- End Main -->
                

Masonry

Here's a demo of the "Masonry" layout used for "Portfolio".

To change the columns count, add a "two-columns" or "three-columns" or "four-columns" class the container.

There are 3 different sizes (regular, wide, tall) in which you can assign the article with. To change the article's size just add a class "size-regular" or "size-wide" or "size-tall".

Here's an example of how the Masonry layout is written:


                    <!-- Begin Main -->
                    <main>
                            <div class="portfolio grid masonry three-columns">
                                    <div class="articles-wrapper">

                                            <!-- Begin First Article -->
                                            <article class="size-regular">
                                                    <div class="article-wrapper">
                                                            
                                                            <figure>
                                                                    <img src="images/g1.jpg" alt="">
                                                            </figure>

                                                            <a href="portfolio-single2.html" class="overlay">
                                                                    <h2 class="title">The train</h2>

                                                                    <span class="categories">
                                                                            <span>Outdoors</span>, 
                                                                            <span>Dark</span>
                                                                    </span>
                                                            </a>

                                                    </div>
                                            </article>
                                            <!-- End First Article -->

                                            <!-- Begin Second Article -->
                                            <article class="size-wide">
                                                    <div class="article-wrapper">
                                                            
                                                            <figure>
                                                                    <img src="images/g6.jpg" alt="">
                                                            </figure>

                                                            <a href="portfolio-single2.html" class="overlay">
                                                                    <h2 class="title">Nevada Desert</h2>

                                                                    <span class="categories">
                                                                            <span>Outdoors</span>, 
                                                                            <span>Dark</span>
                                                                    </span>
                                                            </a>

                                                    </div>
                                            </article>
                                            <!-- End Second Article -->

                                    </div>
                            </div>
                    </main>
                    <!-- End Main -->
                

Pages

There are 2 types of page layouts used in this template:

  1. Boxed layout
  2. Small layout

Boxed Layout (Standard)

Boxed layout keeps the content contained in a '1100px wide' container. It's mainly used for normal pages and blog pages.

Here's an example of how to use the boxed layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Point1</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body>

                            <!-- Begin Main -->
                            <main class="page extra-padding">
                                    <div class="inner-container">
                                            <h1>About Us</h1>
                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>
                    
                

Small Layout

Small layout expand the container width and height fill the page. It's mainly used for About Me page.

The html tag and the body tag must have a 'fullscreen' class in order for this layout to work.

Here's an example of how to use the Small layout:


                    <!DOCTYPE HTML>
                    <html lang="en-US" class="fullscreen">

                    <!-- Begin Head -->
                    <head>
                            <meta charset="utf-8">
                            <title>Point1</title>
                    </head>
                    <!-- End Head -->

                    <!-- Begin Body -->
                    <body class="fullscreen">

                            <!-- Begin Main -->
                            <main class="page page-about-me has-background" style="background-image:url('images/about1.jpg');">
                                    <div class="wrapper">

                                            <p>Add content here</p>

                                    </div>
                            </main>
                            <!-- End Main -->

                    </body>
                    <!-- End Body -->
                    </html>
                    
                

Blog

There are 2 types of page layouts used in this template:

  1. Fullwidth layout
  2. Boxed layout with Sidebar

Fullwidth Layout

Fullwidth layout expand the container width fill the page.

Here's an example of how to use the fullwidth layout:


                    <!-- Begin Main -->
                    <main class="page blog extra-padding">
                            <div class="inner-container">

                                    <h1 class="page-header">Blog Fullwidth</h1>

                                    <div class="posts">
                                            
                                            <!-- Begin First Article -->
                                            <article>
                                                    <figure>
                                                            <a href="blog-single-standard.html">
                                                                    <img src="images/f1.jpg" alt="">
                                                            </a>
                                                    </figure>

                                                    <h2><a href="blog-single-standard.html">If I can see it, I can shoot it</a></h2>
                                                    <span class="categories">Travel, Shooting</span>

                                                    <p class="excerpt">Vestibulum tellus risus, pretium et.</p>

                                                    <a class="read-more" href="blog-single-standard.html">Read more</a>
                                            </article>
                                            <!-- End First Article -->
                                            
                                            <!-- Begin Second Article -->
                                            <article>
                                                    <figure>
                                                            <a href="blog-single-standard.html">
                                                                    <img src="images/f2.jpg" alt="">
                                                            </a>
                                                    </figure>

                                                    <h2><a href="blog-single-standard.html">Tips for an effective photoshoot</a></h2>
                                                    <span class="categories">Travel, Shooting</span>

                                                    <p class="excerpt">Vestibulum tellus risus, pretium et.</p>

                                                    <a class="read-more" href="blog-single-standard.html">Read more</a>
                                            </article>
                                            <!-- End Second Article -->
                                        
                                    </div>

                            </div>
                    </main>
                    <!-- End Main -->
                

Boxed layout with Sidebar

Boxed layout keeps the content contained in a '1100px wide' container.

Here's an example of how to use the boxed layout:


                    <!-- Begin Main -->
                    <main class="page blog has-sidebar extra-padding">
                            <div class="inner-container">

                                    <h1 class="page-header">Blog Sidebar</h1>

                                    <div class="posts">
                                            
                                            <article>
                                                    <figure>
                                                            <a href="blog-single-standard.html">
                                                                    <img src="images/f1.jpg" alt="">
                                                            </a>
                                                    </figure>

                                                    <h2><a href="blog-single-standard.html">If I can see it, I can shoot it</a></h2>
                                                    <span class="categories">Travel, Shooting</span>

                                                    <p class="excerpt">Vestibulum tellus risus, pretium et facilisis nec.</p>

                                                    <a class="read-more" href="blog-single-standard.html">Read more</a>
                                            </article>
                                            
                                            <article>
                                                    <figure>
                                                            <a href="blog-single-standard.html">
                                                                    <img src="images/f2.jpg" alt="">
                                                            </a>
                                                    </figure>

                                                    <h2><a href="blog-single-standard.html">Tips for an effective photoshoot</a></h2>
                                                    <span class="categories">Travel, Shooting</span>

                                                    <p class="excerpt">Vestibulum tellus risus, pretium et facilisis nec.</p>

                                                    <a class="read-more" href="blog-single-standard.html">Read more</a>
                                            </article>
                                       
                                    </div>

                                    <div class="sidebar">

                                            <div class="widget widget_search">
                                                    <form role="search" method="get" id="searchform" class="searchform" action="blog-sidebar.html">
                                                            <div>
                                                                    <input type="text" value="" name="s" id="s" placeholder="Search...">
                                                                    <input type="submit" id="searchsubmit" value="Search">
                                                            </div>
                                                    </form>
                                            </div>

                                            <div class="widget widget_categories">
                                                    <h3>Categories</h3>
                                                    <ul>
                                                            <li class="cat-item cat-item-2"><a href="#">Culture</a> (2)</li>
                                                            <li class="cat-item cat-item-3"><a href="#">History</a> (2)</li>
                                                            <li class="cat-item cat-item-1"><a href="#">Uncategorized</a> (1)</li>
                                                    </ul>
                                            </div>

                                    </div>

                            </div>
                    </main>
                    <!-- End Main -->
                

Help

All of our products include a 6 months support period and free lifetime template updates. Once the 6-month support period ends, you have an option to extend support coverage for an additional 6 or 12 months. If you choose to not extend your support, you will no longer be able to receive technical assistance, but you still have access to our online documentation.

Support is limited to questions regarding the template’s features or problems with the template. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your template, we suggest enlisting the help of a developer.

Our support covers template set up, template-related questions, and bugs or other issues that may occur when using the template. Customization can be any work you need done to the template that does not fall within the scope of our support agreement. In most cases, this is anything falling outside of the options the template offers. We do not provide customization services or freelance support to incorporate modifications in our themes.

What's included in item support?

During the product support period, the author is expected to be available to:

  • Answer specific technical questions about the features and functionality of the template.
  • Provide guidance on how the template is designed to function.
  • Help you with issues related to using the template and getting optimum value from its functionality.
  • Answer questions about third party plugin functionality as it relates to the template.
  • Product updates to fix bugs, ensure ongoing compatibility, and resolve security vulnerabilities.

What's Not included in item support?

During the product support period, the author is not expected to:

  • Modify or extend the template beyond the original features seen in the demo.
  • Install the template.
  • Address issues regarding your hosting or server environment; please check with your provider.
  • Address third party assets.

You will find a complete description of these support policies in ThemeForest's Support Policy.

Extra Customisations

Please follow this article if you are interested in extra customisations that are not part of the preset options of the Point1 template or extra freelance services.

According to the Envato license terms this Help-Center is running to support possible bug fixes and installation problems that may arise with our softwares. Help with template modifications is beyond the scope of this service and it's not part of the purchase package.

We are defining customisations all the variations that are not part of the preset options of the admin panels and any HTML, PHP, JavaScript and CSS files modifications which will alter the native look and functionalities of our products.

Updates & Fixes

Here you can view what has been changed/fixed after a template update:

Version 1.0

  • New: Launch.

Contact Us

If you have any questions that are beyond the scope of this help file, please feel free to email us from our Profile Page. Please don’t forget to mention your purchase code in your message.

Or

You can send a message to us via the Point1 Theme comments section on ThemeForest. At the bottom of the comments page you will find a "Add a comment" form to send a message.