1. Introduction
We would like to thank you for choosing Myland.
We made Myland from the ground-up with flexibility in mind. Each element of Myland
is extremely customizable, where you can make
Myland to reflect your own
branding styles.
The guide gives you detailed methodologies about how you can customize Myland and make it fit your brand perfectly!
1.1 What's Included
After purchasing Myland template on templatemonster with your templatemonster account, go to your Download page. You can choose to download Myland template only or the entire Myland template package which contains the following files:
- Myland template: A .zip file with all .html files with all necessary assets.
- Documentation: An HTML format documentation.
- Licensing.
1.2. How to Install Myland Website Templates
Installing a Myland template is not like WordPress or CMS theme installation, actually, installation keyword does not go with Myland template. Why? because you don’t install anything, yes Myland or HTML templates are automatically rendered by the browser.
1.1 Editing Myland Template
Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as – VScode, Sublime Text, etc. When template editing is done using editor, save the files and folder and go ahead to upload template files on live server.
1.2 Uploading to Live Server Using FTP:
First of all, If you don’t have your template on your computer, download Myland template to get started, when download/purchase complete you will get a package like this screenshot (after unzip).

1.3 Package comes with documentation unzip the download package, you’ll found a folder with all template files, like below screenshot.

1.4 Now, login to your hosting control panel or FTP client, such as: FileZilla, CyberDuck etc. and upload template files on your server root.
1.5 Once all files are uploaded, go to www.yoursite.com/index.html you can see your the homepage, make sure the initial page is named as index.html
2. Template Structures
2.1. HTML Structure
This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MyLand- Real Estate HTML Template</title>
<link rel="shortcut icon" href="assets/images/favicon.svg" type="image/x-icon" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/all.min.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/icofont.min.css" />
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
</head>
<body>
<!-- ========================= preloder section start ========================= -->
<div class="preloder-overlay">
<div class="overlayDoor"></div>
<div class="overlayContent">
<div class="loader">
<div class="inner">
<div class="inner-loding"></div>
</div>
</div>
</div>
</div>
<!-- ========================== preloder section end ========================== -->
<!-- scrollToTop start here -->
<a href="#" class="scrollToTop"><i class="icofont-rounded-up"></i></a>
<!-- scrollToTop ending here -->
<!-- ==========Search area Starts Here========== -->
<div class="search-input">
<div class="search-close">
<i class="icofont-close-circled"></i>
</div>
<form>
<input type="text" name="text" placeholder="Search Heare">
<button class="search-btn" type="submit">
<i class="icofont-search-2"></i>
</button>
</form>
</div>
<!-- ==========Search area end Here========== -->
<!-- ==========Header Section Starts Here========== -->
<header class="header-section">
....
<div class="header-holder d-flex flex-wrap justify-content-between align-items-center">
<div class="brand-logo d-none d-lg-inline-block">
<div class="logo">
<a href="index.html">
<img src="assets/images/logo/logo.png" alt="logo">
</a>
</div>
</div>
<div class="header-menu-part">
<div class="header-top">
<div class="header-top-area">
<ul class="left">
<li>
<i class="icofont-ui-call"></i> <span>+800-123-4567 6587</span>
</li>
<li>
<i class="icofont-location-pin"></i> Beverley, New York 224 USA
</li>
</ul>
<ul class="social-icons d-flex align-items-center">
<li>
<a href="#" class="fb"><i class="icofont-facebook-messenger"></i></a>
</li>
<li>
<a href="#" class="twitter"><i class="icofont-twitter"></i></a>
</li>
<li>
<a href="#" class="vimeo"><i class="icofont-vimeo"></i></a>
</li>
<li>
<a href="#" class="skype"><i class="icofont-skype"></i></a>
</li>
<li>
<a href="#" class="rss"><i class="icofont-rss-feed"></i></a>
</li>
</ul>
</div>
</div>
<div class="header-bottom">
<div class="header-wrapper">
<div class="mobile-logo d-lg-none">
<a href="index.html"><img src="assets/images/logo/logo.png" alt="logo"></a>
</div>
<div class="menu-area">
<ul class="menu">
<li>
<a href="#">Home</a>
<ul class="submenu">
<li><a href="index.html">Home 1</a></li>
<li><a href="index-2.html">Home 2</a></li>
<li><a href="index-3.html">Home 3</a></li>
<li><a href="index-4.html">Home 4</a></li>
<li><a href="index-5.html">Home 5 (Single Property)</a></li>
</ul>
</li>
<li>
<a href="#0">Properties</a>
<ul class="submenu">
<li><a href="property-grid.html">Property Grid</a></li>
<li><a href="property-grid-sidebar.html">Property Grid <small>(With Sidebar)</small> </a></li>
<li><a href="property-list-sidebar.html">Property List <small>(With Sidebar)</small> </a></li>
<li><a href="property-single.html">Property single</a></li>
<li><a href="property-single-2.html">Property single 2</a></li>
</ul>
</li>
<li>
<a href="#">Agents</a>
<ul class="submenu">
<li><a href="agent.html">All Agents</a></li>
<li><a href="agent-single.html">Agent Details</a></li>
</ul>
</li>
<li>
<a href="#0">Pages</a>
<ul class="submenu">
<li><a href="about.html">About Us</a></li>
<li><a href="gallery-3grid.html">Gallery 3 Col</a></li>
<li><a href="gallery-4grid.html">Gallery 4 Col</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="404.html">404 Page</a></li>
</ul>
</li>
<li>
<a href="#0">Blog</a>
<ul class="submenu">
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-2.html">Blog 2</a></li>
<li><a href="blog-single.html">Blog Single</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<a href="javascript:void(0);" class="search"><i class="icofont-search-1"></i></a>
<!-- toggle icons -->
<div class="header-bar d-lg-none">
<span></span>
<span></span>
<span></span>
</div>
<div class="ellepsis-bar d-lg-none">
<i class="icofont-info-square"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- ==========Header Section Ends Here========== -->
<!-- ========================== Some section start ========================== -->
<section class="section-name padding-top padding-bottom">
<div class="container">
<div class="section__wrapper">
....
</div>
</div>
</div>
</section>
<!-- ========================== Some section end ========================== -->
<!-- ========================== Footer section start ========================== -->
<footer class="footer">
<div class="footer__top padding-top padding-bottom" style="background-image:url(assets/images/footer/bg.jpg)">
<div class="container">
<div class="footer__wrapper">
....
<div class="col-lg-4">
<div class="footer__about">
<a href="index.html"><img src="assets/images/logo/logo.png" alt="logo"></a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dolores saepe perspiciatis
iusto!
Repellendus, ab?</p>
<ul class="footer__about-info">
<li class="footer__about-infoItem"> <span><i class="fa-solid fa-location-dot"></i></span> 22 Anzel
Towe,
Neywork , USA</li>
<li class="footer__about-infoItem"> <span><i class="fa-solid fa-phone"></i></span> +09987654321</li>
<li class="footer__about-infoItem"> <span><i class="fa-solid fa-envelope"></i></span>
info@yourmail.com
</li>
<li class="footer__about-infoItem"> <span><i class="fa-brands fa-skype"></i></span> skype.user</li>
</ul>
</div>
</div>
<div class="col-lg-8">
<div class="footer__items">
<div class="row gy-5 gx-4">
<div class="col-lg-3 col-sm-6">
<div class="footer__title">
<h4>Property</h4>
</div>
<div class="footer__content">
<ul class="footer__linklist">
<li><a class="footer__link" href="#">Apartment</a></li>
<li><a class="footer__link" href="#">Commercial</a></li>
<li><a class="footer__link" href="#">Land & Plot</a></li>
<li><a class="footer__link" href="#">Residental</a></li>
<li><a class="footer__link" href="#">Multi Family</a></li>
<li><a class="footer__link" href="#">Single Family</a></li>
<li><a class="footer__link" href="#">Villa</a></li>
</ul>
</div>
</div>
<div class="col-lg-5 col-sm-6">
<div class="footer__title">
<h4>Recent Posts</h4>
</div>
<div class="footer__content">
<div class="footer__post">
<div class="footer__post-item">
<div class="footer__post-inner">
<div class="footer__post-thumb">
<img src="assets/images/blog/01.jpg" alt="blog image">
</div>
<div class="footer__post-content">
<h6><a href="blog-single.html">Top 10 property list for our business</a></h6>
<p>June 22, 2022</p>
</div>
</div>
</div>
<div class="footer__post-item">
<div class="footer__post-inner">
<div class="footer__post-thumb">
<img src="assets/images/blog/02.jpg" alt="blog image">
</div>
<div class="footer__post-content">
<h6><a href="blog-single.html">Find Your Dream house in myland</a></h6>
<p>Sep 22, 2022</p>
</div>
</div>
</div>
<div class="footer__post-item">
<div class="footer__post-inner">
<div class="footer__post-thumb">
<img src="assets/images/blog/03.jpg" alt="blog image">
</div>
<div class="footer__post-content">
<h6><a href="blog-single.html">Best Property & Real Estate HTML Template</a></h6>
<p>June 22, 2022</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="footer__title">
<h4>Photo Gallery</h4>
</div>
<div class="footer__content">
<ul class="footer__gallery">
<li class="footer__gallery-item">
<img src="assets/images/gallery/01.jpg" alt="gallery image">
</li>
<li class="footer__gallery-item">
<img src="assets/images/gallery/02.jpg" alt="gallery image">
</li>
<li class="footer__gallery-item">
<img src="assets/images/gallery/03.jpg" alt="gallery image">
</li>
<li class="footer__gallery-item">
<img src="assets/images/gallery/04.jpg" alt="gallery image">
</li>
<li class="footer__gallery-item">
<img src="assets/images/gallery/05.jpg" alt="gallery image">
</li>
<li class="footer__gallery-item">
<img src="assets/images/gallery/06.jpg" alt="gallery image">
</li>
<li class="footer__gallery-item">
<img src="assets/images/gallery/07.jpg" alt="gallery image">
</li>
<li class="footer__gallery-item">
<img src="assets/images/gallery/08.jpg" alt="gallery image">
</li>
<li class="footer__gallery-item">
<img src="assets/images/gallery/09.jpg" alt="gallery image">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer__copyright">
<div class="container">
<div class="footer__copyright-content">
.....
</div>
</div>
</div>
</footer>
<!-- ========================== Footer section end ========================== -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/fontawesome.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/counterup.js"></script>
<script src="assets/js/swiper-bundle.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
2.2. CSS (SCSS) Files and Structure
We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:
sass ┣ abstracts ┃ ┣ _extend.scss ┃ ┣ _mixins.scss ┃ ┗ _variables.scss ┣ base ┃ ┣ _common.scss ┃ ┣ _fonts.scss ┃ ┣ _helpers.scss ┃ ┗ _typography.scss ┣ components ┃ ┣ _agent.scss ┃ ┣ _banner.scss ┃ ┣ _blog.scss ┃ ┣ _findProp.scss ┃ ┣ _gallery.scss ┃ ┣ _highlight.scss ┃ ┣ _nearplace.scss ┃ ┣ _property.scss ┃ ┣ _service.scss ┃ ┣ _social.scss ┃ ┣ _sponsor.scss ┃ ┣ _testimonial.scss ┃ ┗ _widget.scss ┣ layout ┃ ┣ _about.scss ┃ ┣ _button.scss ┃ ┣ _contact.scss ┃ ┣ _cta.scss ┃ ┣ _error.scss ┃ ┣ _footer.scss ┃ ┣ _header.scss ┃ ┗ _newsletter.scss ┣ pages ┣ vendors ┃ ┗ _rfs.scss ┗ style.scss
2.3. JavaScript Files
There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

3. Change Contents
3.1. Changing Images
To change any images of the website
- Carefully collect the source name of the image (i.e. logo.png)
- Open the folder called media.
- Find the particular image file.
- Replace the file with your image.
- Make sure that the file name does not change.The file name should be the same.
Example: Suppose you want to change the following image file:

You have to do the following to change this image with your own image:
- Open the folder called media.
- Find the particular image file called logo.png
- Replace the file with your image
- Make sure that the file name does not change.
3.2. Changing Brand Logo
- Open the folder called media.
- Find the .png files called logo.png
- Replace the files with your own logo.
- Make sure that the file names does not change.
3.3. Changing Colors
We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.
3.3.1. Changing default template colors
- Open the variable.scss file from assets > scss > abstracts folder with a text-editor.
- Change the right-side values of the variables to change any default colors of your site.
- Save your file.
Have a look at the following image for a visual description:

3.4. Changing Email Settings of the Contact Form
- Go to main folder
- Open contact.php
- Go to line number 27
- Follow instructions in image below:

3.5. Change IcoFont icons
- Open the .html file with a text-editor from where you want to change any IcoFont icon
- Choose and collect an icon from IcoFont.com
- Replace the existing icon from the .html file with the new icon you got from IcoFont.com

To get the icon from icofont.com-
- Go to IcoFont.com
-
Click the icon tab
-
Search for your desired icon font and click on the thumbnail to get the icon
-
Copy the text as shown in the following image
- Collect this text to and replace the existing icon from the .html file.
4. Sources and Credits
We've used the following fonts, free icons and plugins as listed:
5. Support
Support Scope
Included in Free Support Scope:
- Fixing bugs
- Helping clients in changing site contents by sending instructions that couldn’t be covered by documentation
NOT Included in Free Support Scope:
- Any type of custom changes
- Any type of request to update clients’ site contents
Paid Support Scope:
Paid support is not a part of Free Support when you purchase the template from Templatemonster. We understand that some clients need custom changes while using our template. For that we kept an option for paid support which includes:
- Custom change request
- Custom pages
- Custom features
We kept a flat rate for our paid support which is $25/hour.
Support Ticket
Please Send message in LabartisanTemplatemonster account. You will response within 1 business day.
Regards,
LabartisanSupport Team