Documentation for Fold
Landing Page HTML Template
Fold template documentation version 1.0
Table of Contents
- Item Name : Fold Multipurpose Landing Page HTML Template
- Item Version : Version 1.0
- Minimum Required : Bootstrap 4.0+
- Author : YDirection Themes
Getting Started #back to top
Once you download the Template zip folder, unzip it using any of the free services like WinRAR and make sure you have all the folders including index files, assets folder and PHP file. Now copy the template folder to your desktop for easy access and to prevent overwriting the theme files.
There are 3 different variations in this template. However, the blocks or sections of individual demos share the same layout and structure. So, you can freely use the sections of one demo in another.
Editing Template Content #back to top
Choose a easy to use text editor
You can use any of your favorite text editors like sublime, Notepad or Atom to start editing the template files.
- Open the folder using a text editor
- Head to the homepage index file
Changing the Head section
Fold Multipurpose Landing Page Template
Head section of all the pages are similar to the above displayed format. However, the stylesheets and fonts used might differ. But the basic structure is almost similar. Now, you'll only need to change/edit the following lines which show impact on the SEO.
- Meta Description
- Meta Keywords
- Title of the respective page being edited.
Fold Multipurpose Landing Page Template
Editing Body and Main Content
Entire body section is divided into the following sections and the number of depends/varies for each demo(page). Listed below are the sections included in the body of Main Demo of Fold Template.
- Hero Section
- Features Section
- CTA Sections
- Reviews
- Pricing
- Footer
Navigation
Find the above code in your index/individual page and change the menu item name and link to your desired one. Repeat the same process for all pages in your theme folder carefully and save it.
Styling the template #back to top
Font Family and Style
Changing font-family is much simpler. Just head to the Google Fonts Collection and copy the link of your desired font and paste it in the head section by replacing the current font. However, to change/vary the font-size you got to look for it in the CSS or note the class name and give it a different size in the custom CSS file.
How to Change Images #back to top
Add all your images you wish to use in your website to the images folder. Please avoid PNG images as they might consume more space on your servers. Also, PNG images takes ages to load.
Add Images
If quality is a major concern i.e. if you are using photography demo, images of PNG format is a necessity. So, once again use JPG for better performance and PNG for better appearance. Its up to you.
2. Replacing background Images
Head to the respective class in the CSS file and look up for the background: url() line and replace the image with your own preferred image and save it. For cover images the optimal size is above 1380px and to be exact the images used in this template demo are 1400 px wide and height is above 800 px.
.hero-2 {
background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)), url(../images/image-bg.jpg) no-repeat center center;
background-size: cover;
padding: 150px 0 100px 0;
}
3. Replacing images
Its almost as easy and similar to the above process. Just replace the image 'name' with you own and make sure that the path to the image is correct. Its by default like assets/images/yourimage.jpg.
Note:
After done editing your template, save it and check for any broken links or unedited sections. Make sure the images are properly formatted for the lightcase (plugin which is used to popup images) and the are linked to the same image. Now, get ready to upload your website.
