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 themeforest.net/user/DSAThemes 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.
You can use notepad++ , sublimetext 3 or brackets for editing the code.
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.
As Martex is an HTML template, it uses a number of .html pages (27 demo pages + 26 additional inner 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.
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. Martex 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.
Martex template is based on Bootstrap v5.2.3 - 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 demo-x.html is the main template file that contains the HTML structure of the template. Here is the general structure (shortened):
If you need more information, please visit this site: https://getbootstrap.com/docs/5.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:
Color scheme css files:
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 style.css file 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:
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 style.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 *.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:
Select your desired layout and make the following changes.
The favicon is located in the /images/ - 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
Martex uses one font "Rubik" Google WebFont for text and headers. To change the embedded fonts, please take a look in the head part of the website and you will find this tag:
Martex uses Rubik fonts for text and Plus+Jakarta+Sans 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..
Martex HTML Template includes 27 different template layouts and 20 additional inner pages :
Martex HTML template includes 9 color schemes. Inside the css folder there are 9 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:
To switch the dark mode just add the class theme--dark to the body tag:
The Light Mode is set as default:
To set the Dark Mode:
Background Color:
Navigtion Menu Text Color:
Here are some representative examples of these classes:
The header has transparent background color and black color for text
The header has white background color and black color for text
The header has transparent background color and white color for text
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="#lnk-1".) This means that if JavaScript is turned off, your menu will continue to function normally.
Martex includes a wide range of shorthand responsive margin and padding classes to modify an element’s appearance.
The classes are named using the format: {property}{sides}-{size}
Where property is one of:
Where sides is one of:
Where size is value in the pixels (multiple of 10) - 10, 20, 30, 40, 50 etc.
Here are some representative examples of these classes:
The section has the padding top and bottom 100px
The section has only the padding top 100px
The section has only the padding bottom 100px
Most of the sections don't have background color. But if you want you can change the background color manually:
All available colors for background:
Similar to the background color classes, set the color of a button. To change the color of the button manually:
All available classes for button colors
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.
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
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
To deactivate your content as a pop-up just add the class auto-off
To activate your content as a pop-up just remove the class auto-off
To setup the pop-up appear interval open the file js/custom.js, find the code for modal and setup the interval manually
Martex uses Flaticons Pack (250+ Icons)
Flaticons icons use the 'span' element and each have their own unique class. For a full list of available classes, see here
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
xxx.xxx.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.
Martex 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/contactForm.php, php/commentForm.php, php/quickForm.php, php/requestForm.php or php/resetForm.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/contactForm.php, php/commentForm.php, php/quickForm.php, php/requestForm.php or php/resetForm.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:
Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.
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,
DSAThemes