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.
- intro.html — The list if demo files.
- index.html — Home page with parallax image background.
- index-slider.html — Home page with full width slider.
- index-video.html — Home page with video background.
- index-pattern.html — Home page with pattern background.
- index-gradient.html — Home page with gradient background.
- shortcodes.html — the list of elements which you can use on your website.
- blog.html — Blog page.
- blog-post.html — Blog post.
- "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:
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:
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:
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:
Tumbler
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:
- project-gallery-1.html
- project-gallery-2.html
- 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:
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!
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
-
How to remove smooth scroll?
Find and delete the line (in the end of the page): -
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. -
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.
- jQuery
- jQuery Easing Plugin
- Bootstrap
- initmap.js
- jQuery.appear
- jQuery hashchange event
- bxSlider
- jQuery countTo Plugin
- FitText
- FitVids
- jQuery.localScroll
- mb.YTPlayer
- jQuery Parallax
- Mixitup
- Smooth Scroll
- Sticky
- jQuery.Viewport
- Placeholder
- scrollReveal.js
© Spacia Theme 2014