Spacia Template Documentation


Hello & Welcome! Thank you for purchasing!

If you have any questions, feel free to contact us at spacia@bestlooker.pro

Updated: 6 April 2020

Template Features

  • One page navigation
  • 5 Home section versions (parallax photo, full width slider, pattern, gradient, video background)
  • 12 color schemes
  • Different menu alignment variants
  • White & Dark menu styles
  • Portfolio filtering
  • Easy to customize
  • Responsive design
  • Retina ready
  • Font Awesome 369+ icons
  • Simple Line 162 icons
  • Bootstrap grid
  • Parallax sections
  • Smooth animation
  • Worked Ajax contact form with HTML5 validation
  • Embed Google map
  • Blog page
  • 5 Posts variants (Text post, Image, Gallery, Video, Quote)
  • Powerful shortcodes
  • Responsive video (YouTube, Vimeo, Blip.tv, Viddler, Kickstarter)
  • Browser compatibility (IE9+, Chrome, Safari, Firefox, Opera)
  • Well documented
  • Clear & Neat design
  • Accurate HTML code with comments
  • Layered PSD files included
  • FAQ Included

Getting Started

Unzip the archive and find out the folder www. There are all the template files in this folder. You can open the following files for viewing in browser and edit files via HTML code editor.

  1. intro.html — The list if demo files.
  2. index.html — Home page with parallax image background.
  3. index-slider.html — Home page with full width slider.
  4. index-video.html — Home page with video background.
  5. index-pattern.html — Home page with pattern background.
  6. index-gradient.html — Home page with gradient background.
  7. shortcodes.html — the list of elements which you can use on your website.
  8. blog.html — Blog page.
  9. blog-post.html — Blog post.
  10. "works" folder — folder with portfolio pages.

Upload the template files (folder www) to server with the help of one of the FTP-clients (for example, Filezilla).

Note: for the correct operation of all functions of the template, including contact form, you must upload the template to web-server.

Logotype

To change logotype in navigation panel, find image images/logo-dark.png and replace it with your logo.

Note: to ensure Retina ready, the width and height of the image should be two times greater than the values specified in the attributes width and height. By default, the tag’s attributes logo size is set 86x27, but the actual size of the image is 172x54px.

To change logotype in navigation panel with dark mode, find image images/logo-white.png and replace it with your own logo.

Note: to ensure Retina ready, the width and height of the image should be two times greater than the values specified in the attributes width and height. By default, the tag’s attributes logo size is set 86x27, but the actual size of the image is 172x54px.

Navigation (Main menu)

HTML structure of the Main menu looks like this:

                        
                        
						

To add a new menu item, find element <ul class= "clearlist srollnav">, add the line into this item and change href & link text:

						
  • Contacts
  • If necessary, add appropriate section, its id will match href link address.

    Home Section

    You can choose one of several Home Section options.

    Header Parallax Image

    To substitute the background image, open file index.html and replace the value of background-image in style attribute of this construction:

                            
                            

    Header Full Width Slider

    To add or edit the slide, open file index-slider.html and find the following construction:

                            
                            
  • Made With Love for Great People

    We love innovation design

  • To change the background slide, edit style attribute and value of background-image tag of the slide.

    Header Pattern Background

    To change the background pattern, open file index-pattern.html and replace the value of style attribute and value of background-image in this construction:

                            
                            

    Header Video Background

    To change the background video, open file index-video.html and replace videoURL with the address of your Youtube video in this construction:

                            
                            

    Header Gradient Background

    HTML structure of file index-gradient.html is similar to HTML structure of file index.html, but differs by the presence of line (line 49):

    						

    Page Section

    The standard section has the following HTML structure:

                            
                            

    About us

    We’re branding & digital studio from New York

    Tincidunt orci in augue adipiscing interdum. Phasellus luctus commodo ullamcorper. Nullam ut tempor erat. Aenean mollis eleifend mauris, eu iaculis dui semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse hendrerit diam id pretium consectetur.

    Parallax Section

                            
                            
    ...

    Fun Facts Section

    HTML structure of a separate counter looks like this:

                            
                            
    73
    Projects

    To change the counter icon, edit the class of the element <i class="fa fa-briefcase"></i>. The list of classes of 369 icons, that you can use is here http://fontawesome.io/icons/

    Note: the markup of this block is based on Bootstrap grid. More information about the grid see here — http://getbootstrap.com/css/#grid

    Team Section

    HTML structure of a separate block of this section looks like this:

    						    
                                
    Photo of Mike Smith
    Mike Smith
    Creative Director

    Maecenas euismod nisi a dictum consequat. Vestibulum ut purus id est porta porta. Nunc volutpat ac lectus ut aliquet. Nulla a rutrum velit. Etiam at sem ut nisi porta pulvinar.

    Fusce quis vulputate ligula, eget aliquam nisl. Vivamus at neque sem. Sed scelerisque dictum vehicula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas ligula augue, condimentum rutrum quam id, ullamcorper luctus eros.

    Contacts
    spacia@lookandfeel.pro
    P: (123) 456-7890

    To add new blocks with employees of your company, just copy this code and change the path to photo, name and position of your employee.

    If don't want the detailed information to be open, when you click on the block, delete the class js-clickable in block's tag and also find and delete the following code:

                            
                            
    ...

    Services Section

    HTML structure of a separate block of this section looks like this:

    						    
                                
    Branding
    • Audit
    • Concept
    • Marketing
    • PR
    Vivamus ut tellus ut tortor posuere eleifend ac a massa. Vestibulum convallis leo nec diam ultrices, quis tempor tortor commodo.

    To change the icon of the service, edit the class of the element <span class="icon-cup"></span>. The list of classes of 162 icons, that you can use is here. To view full list of icons, you need to download zip file and open index.html.

    Note: the markup of this block is based on Bootstrap grid. More information about the grid see here — http://getbootstrap.com/css/#grid

    Banner (Call to Action)

    The code of Banner block looks like this:

                            
                            

    You can change the markup of the content in this section according to Bootstrap Grid. In addition, you can change the button style(details, see the file shortcodes.html).

    Portfolio Section

    The structure of the filter of works looks like this:

                            
            				

    Portfolio filter by:

    Data-filter attribute is the name of the category of the works, on the basis of which the dynamic filtering is made.

    The portfolio item structure looks like this:

                            
                            
  • Work

    Tumbler

    Photography
  • The last class of the tag li represents belonging to categories by which there is filtering.

    All the works pages must be stored in folder works. There are three variants of project page template:

    1. project-gallery-1.html
    2. project-gallery-2.html
    3. project-video.html

    Use these templates to create pages for description of new projects.

    Benefits Section

    HTML structure of a separate block of this section looks like this:

                            
                            

    High quality

    Donec pulvinar rutrum mi, sit amet viverra justo hendrerit eget.

    To add new blocks to this section, just copy this code and paste it just after the existing items.

    To change the service icon, edit this class of element . The list of classes of 162 icons, that you can use is here. To view full list of icons, you need to download zip file and open index.html.

    Clients Section

    The list of client's logos has this structure:

                            
                            
    Client1 Client2 Client3 Client4

    To add new logos, copy block .clients-logos-row and paste it after the existing one. After this, edit the addresses of the links paths to images and alt attributes in this block.

    The structure of a separate review item looks like this:

                            
  • Hello. Mauris tincidunt orci in augue adipiscing interdum. Phasellus luctus commodo ullamcorper a posuere rhoncus commodo elit. Thanks!
    Ema Johnson
  • Use this code to add new reviews.

    Contact Section

    Open your HTML file and replace this code of Google Maps embed with your own one:

                                
                            

    Here you can find an instruction how to generate your own Google Maps code.

    The Google Maps code looks like this:

                            
                            

    Map

    To configure the contact form, open file contact.php and enter your email in this line (line 31):

                            $to = 'support@bestlooker.pro';
    						

    FAQ

    1. How to remove smooth scroll?
      Find and delete the line (in the end of the page):
                                      
      								
    2. Why doesn’t contact form work?
      For the correct operation of contact form, the php support is necessary. Upload your website on a server with php support.
    3. Why there are no images that were in live demo?
      Envato forbids including demonstration images to templates’ files.

    Credits

    All the photos used in this template are intended only to illustrate the template and all the rights on them belong to their legal owners.

    1. jQuery
    2. jQuery Easing Plugin
    3. Bootstrap
    4. initmap.js
    5. jQuery.appear
    6. jQuery hashchange event
    7. bxSlider
    8. jQuery countTo Plugin
    9. FitText
    10. FitVids
    11. jQuery.localScroll
    12. mb.YTPlayer
    13. jQuery Parallax
    14. Mixitup
    15. Smooth Scroll
    16. Sticky
    17. jQuery.Viewport
    18. Placeholder
    19. scrollReveal.js

    © Spacia Theme 2014