Hello & Welcome! Thank you for purchasing!
If you have any questions, feel free to contact us at spacia@bestlooker.pro
Updated: 6 April 2020
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.
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.
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.
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.
You can choose one of several Home Section options.
To substitute the background image, open file index.html and replace the value of background-image in style attribute of this construction:
…
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.
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:
…
To change the background video, open file index-video.html and replace videoURL with the address of your Youtube video in this construction:
…
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):
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.
...
HTML structure of a separate counter looks like this:
73Projects
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
HTML structure of a separate block of this section looks like this:
Mike SmithCreative DirectorContactsMaecenas 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.
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:
...
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
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).
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:
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:
Use these templates to create pages for description of new projects.
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.
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.
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';
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.
© Spacia Theme 2014