Metreex - SEO & Digital Marketing Agency Landing Page Template

Documentation

• Created: 02 / 14 / 2020
• by: Jthemes

Welcome! First of all we want to thank you for purchasing our Landing Pages Pack
We really do appreciate every sale. If you like our work please do not forget to rate it. It helps us in developing new and better items

In the following sections we will explain how to set up and use it the easiest way possible. If you have any questions that you feel should have been in this document you can contact us through our profile page on https://themeforest.net/user/jthemes and we'll get back to you as soon as possible. Thanks so much!!!

For questions on basic HTML, JavaScript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit this tempate.

Use Firebug or Chrome Developer Tools.

Do not start from scratch, use an existing page from the demo and modify it to learn how it works.

Quickly find what you are looking for in this document by using your browser's "Find in Page" feature, typically Control + F.

Many times plugins are to blame when a site fails, always try disabling any third-party plugins if you encounter an error you can't solve.

Don't forget to re-explore the live demo for layouts, usage ideas and sample code

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be a folder with documentation and a folder with the html templates.

The HTML folder contains the website sub-folder and 12 html files (number of the demos)

As Metreex is an HTML template, it uses a number of .html pages in conjunction with css stylesheets and a number of javascript plugins. The following is a brief overview of the files and a look at some prominent features.

• css ( main CSS file, bootstrap4 CSS files etc. )
• fonts ( flaticons )
• images ( all images )
• js ( template js )
• php ( seoForm.php, contactForm.php, commentForm.php etc. - form PHP files )
• your-file.zip - a sample file that can be downloaded (resources.html)

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be a folder with documentation and a folder with the html templates. Metreex is a HTML template so there's no really "installation" required just unzip the main file you've downloaded from Themeforest and after unziping you have your all template ready to be used.

1. Choose the layout which you will use in project
2. Rename a demo-x.html in the index.html
3. Copy this index.html file into the website folder
4. Make necessary changes
5. Copy all content of the website folder into your www or public_html directory on your server or local computer using FTP client or File Manager (or similar)

Metreex template is based on Bootstrap v4.3.1 - a collection of CSS and JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Bootstrap's base grid is a variation of the grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

The index.html is the main template file that contains the HTML structure of the template. Here is the general structure (shortened):

HTML Markup

If you need more information, please visit this site: https://getbootstrap.com/docs/4.0/layout/grid/

All CSS files css files are stored at "css" folder. Here's a list of the stylesheet files we're using with this template. You can find more information opening each file:

1. dropdown-effects - A folder with dropdown-effects for responsive mega menu
2. animate.css - A cross-browser library of CSS3 animations
3. bootstrap.min.css - This is a main stylesheet that required for basic template styling like form, input, div, list element and etc.
4. carrot.css - A css file for carot color scheme
5. dodgerblue.css - A css file for blue color scheme
6. flaticon.css - A complete set of 200+ thin vector icons
7. flexslider.css - An awesome, fully responsive jQuery FlexSlider Plugin v2.0
8. green.css - A css file for green color scheme
9. magneta.css - A css file for magneta color scheme
10. magnific-popup.css - A responsive lightbox stylesheet
11. menu.css - A css file for responsive mega menu
12. olive.css - A css file for olive color scheme
13. orange.css - A css file for orange color scheme
14. owl.carousel.css - A responsive carousel slider
15. owl.theme.default.min.css - A responsive carousel slider customization file ( it is required if you'd like the default nav controls like dots or next buttons)
16. purple.css - A css file for purple color scheme
17. red.css - A css file for red color scheme
18. responsive.css - This stylesheet contains responsive rules for adapting the template to any resolution, from desktop to small mobile.
19. skyblue.css - A css file for skyblue color scheme
20. teal.css - A css file for teal color scheme

If you create you own styles you must check all the sizes of responsive so all works OK, if you need to change your own styles at certain size you will do it at responsive.css

Every section of the *.css files is commented, so we believe you will have no problem editing it. For example, comment that marks begin of the header wrap section looks like this:

How to edit styles

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited. For example if you would like to edit the background color, open up the *.css file and do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your style.css file and make sure that there isn't a similar style that has more weight.

This template uses several scripts many of which are documented within the template's code. If you're a developer, you will find this particularly useful. Here are the included Javascript files:

1. bootstrap.min.js - This framework provides additional user-interface elements such as dialog boxes, tooltips, carousels etc.
2. comment-form.js - A jQuery plugin for comment form
3. contact-form.js - A jQuery plugin for contact form
4. custom.js - This file contains the general jQuery setups for the scrollup plugin, contact form validation and more.
5. google-map.js - A jQuery plugin for Google Map
6. html5shiv.js - This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer.
7. imagesloaded.pkgd.min.js - A jQuery plugin detect when images have been loaded
8. isotope.pkgd.min.js - A jQuery plugin for cascading grid layout library
9. jquery-3.3.1.min.js - Is a Javascript library that greatly reduces the amount of code that you must write.
10. jquery.ajaxchimp.min.js - jQuery plugin for MailChimp subscribe form
11. jquery.appear.js - jQuery plugin for tracking element's appearance in browser viewport
12. jquery.easing.js - A jQuery plugin to give advanced easing options.
13. jquery.flexslider.js - This is jQuery plugin which adds a fully responsive slider to your pages
14. jquery.magnific-popup.min.js - Magnific Popup is a responsive lightbox & dialog script
15. jquery.scrollto.js - Scroll smooth to any element in your DOM
16. jquery.validate.min.js - jQuery form validation plugin
17. materialize.js - A responsive carousel slider jQuery plugin
18. menu.js - A jQuery plugin for responsive mega menu
19. modernizr.custom.js - Is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
20. owl.carousel.js - A responsive carousel slider jQuery plugin
21. respond.min.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
22. seo-form.js - A jQuery plugin for SEO analytics form
23. wow.min.js - A jQuery plugin for reveal CSS animation as you scroll down a page

Select your desired layout and make the following changes.

Changing Favicon:

The favicon is located in the /images folder - favicon.ico. You don't have to make any changes on the HTML, just replace the icon file with yours. Please be sure to force refresh your browser's cache in order to see the new favicon.

You can easily generate your favicon here: Favicon & App Icon Generator

Don't forget to replace icons for IOS devices - apple-touch-icon-152x152.png , apple-touch-icon-120x120.png, apple-touch-icon-76x76.png and apple-touch-icon.png. These icons are also located in the /images folder

Changing Fonts:

Metreex uses two different fonts "Roboto" Google WebFont for text and "Muli" Google WebFont for headers. To change the embedded fonts, please take a look in the head part of the website and you will find this tag:

To change the font, first go to http://www.google.com/fonts/ choose a font and use the generated code..

Changing Logo:

Open the images folder and replace the logo.png and logo-white.png images with your logo. The size of the logo is 162px x 40px. The basic concept of a Retina image is that your taking a larger image, with double the amount of pixels that your image will be displayed at (e.g 334 x 80 pixels), and setting the image to fill half of that space (162 x 40 pixels).

Choosing Color Scheme:

Metreex HTML template includes 10 color schemes. Inside the css folder there are 10 css files for diferent color schemes. You can use one of predefinied colors or build custom CSS with color which you want.

It's easy to change color scheme of this template, you just need to do following:

1. Choose the layout which you will use in project
2. Rename a demo-x.html in the index.html
3. Open the index.html file.
4. Find these lines of code in <head> section:




5. Choose your favorite color with remove one of the comment tag like this:




6. Save and see the result!

One notice: don't forget to add the comment tag to the previous color scheme

Choosing Template Layout:

Metreex HTML Template includes 12 different template layouts :

Note! In this archive the images that you can see in demo pages were replaced by a placeholder.

1. Choose the layout which you will use in project
2. Rename a demo-x.html in the index.html
3. Copy this index.html file into the website folder
4. Make necessary changes
5. Copy all content of the website folder into your www or public_html directory on your server or local computer using FTP client or File Manager (or similar)

Navigation Menu: Scrolling to a spot :

Scrolling to a spot in an HTML page is pretty simple to do. You have a lot of IDs on the page to scroll to. Write your anchor tags just as you normally would with the href attribute pointed at the ID you would like to move to (e.g. href="#content-4".) This means that if JavaScript is turned off, your menu will continue to function normally.

Background color for section:

Most of the sections don't have background color

But if you want you can change the background color manually:

1. Open the index.html file in your text editor (I use Sublime Text (http://www.sublimetext.com/3) .
2. Find the section you want to change the background color (for example content-1):




3. Select the background color you want to apply:




4. Add the class of the background color to the section (for example you want to change white background color to the skyblue, so you can add the class bg-skyblue to the section):
5. Add the class white-color to the container to change the font color from black to white:




6. Save and see the result!

Lightbox Customization

The lightbox is driven by the Magnific Popup jQuery plugin. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device.

HTML Markup:

It is very easy to customize just add suitable class video-popup1, video-popup2 or video-popup2 to the link you want Magnific Popup to be enabled on and video link into the tag a

Initializing popup

Popup initialization code is situated in the custom.js file. There are 3 ways for video (class="video-popup1, video-popup2 or video-popup2") to initialize a popup (in this place you need only enter your video link):

For more information visit their website and check the documentation

Google Map:

We’ll use the Envato headquarters office address in Melbourne, Australia for our example

HTML Markup:

That you need to change position '-37.817214, 144.955925'. You can find appropriate value here maps.google.com

1. Open the js/google-map.js file in your text editor
2. Find these lines of code:





3. Change the position '-37.817214,144.955925'
4. Save the file

To use the Maps JavaScript API you must have an API key. The API key is a unique identifier that is used to authenticate requests associated with your project for usage and billing purposes. To learn more about API keys, see the API Key Best Practices and the FAQs.

If you already have the Google Maps API key please enter it in the string in the bottom of the index.html file as show below:

Get the API key:

If you don't have the API key please read this article to find out how to get it https://developers.google.com/maps/documentation/javascript/get-api-key

Metreex uses Flaticons pack (100+ Icons) and FontAwesome Icons (675+ Icons) and Flat PNG icons (190)

HTML Markup for FlatIcons:

Flaticons icons use the 'span' element and each have their own unique class. For a full list of available classes, see here

HTML Markup for FontAwesome Icons:

UniSet uses also the FontAwesome Icons. Using these icon packs is a simple matter of knowing the correct class to use. If you need more information, please visit this site: http://fontawesome.io/

FontAwesome icons use the 'i' element and each have their own unique class. For a full list of available classes, see here

HTML Markup for Flat PNG Icons:

The class img-85 shows the image resolution (for example: .img-85 = 85x85px etc.)

Mailchimp Subscribe Form

If you want to use the newsletter you need to have a MailChimp account (the funcional Newsletter works only with MailChimp - http://mailchimp.com/).

Open the custom.js file in your code editor, changes needs to be made here :

http://xxx.xxx.list-manage.com/subscribe/post?u=xxx&id=xxx

You need to change three value

How to find mailchimp form action URL?

Just go to your mailchimp account. Then your list. Then Signup forms. Select Embedded forms. You will find form action URL in this page.

Here you'll learn how to add an embedded form to your site, and which third-party sites accept MailChimp Add an embedded form to your website

One notice: this will be functional only on your server, php file can not be executed on your local computer.

SEO Form / Comment Form / Contact Form:

Metreex also uses the PHP engine for activate contact process. The message direct send to your email address, so you can edit your email address in php/seoForm.php, php/commentForm.php or php/contactForm.php file. This will not be available for anyone to see, it is only used by the server to send your email. You can also specify an email subject line (or just leave the one which is there). To do this, please open php/seoForm.php, php/commentForm.php or php/contactForm.php file and change these lines:

One notice: this will be functional only on your server, php file can not be executed on your local computer.

File Names: contactForm.php, quickForm or commentForm (you must use these file names exactly)

Fonts:

  Google Fonts - http://www.google.com/webfonts
  Icons Font-face - http://fortawesome.github.com/Font-Awesome/

Scripts:

• Bootstrap Framework - http://twitter.github.com/bootstrap/
• Lightbox - http://dimsemenov.com/plugins/magnific-popup/
• jQuery - http://www.jquery.com/
• Retina.js - http://retinajs.com/
• jQuery.ScrollTo - https://github.com/yckart/jquery.scrollto.js
• jQuery scrollUp - https://github.com/markgoodyear/scrollup
• Form Validation - http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.

Support does not include:

• solving problems for plugins not packaged with our framework and templates;
• plugins integration;
• adding new features or extending the features currently available;
• any type of modification or customization.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Best Regards,
Jthemes