Knowledge Base

Introduction

Realestate Banner
Realestate Thumbnail RealEstatePro - Property Listings & Agent/Agency Site Template Documentation

Welcome to the RealEstatePro - Property Listings & Agent/Agency Site Template. This document will guide you through the process of setting up, customizing, and using the template effectively.

Contact Support

Getting Started

Requirement

  • Compatible Browsers: Chrome, Firefox, Safari, Edge
  • Software: Code editor (e.g., VSCode)

Features

  • With over 35 pages, 100 design elements, and 10 forms, this theme offers a comprehensive collection of pre-designed components to help you create a sophisticated and professional website effortlessly.
  • Step-by-step Front-end Listing Submission: Allow users to submit their property listings effortlessly with a live preview feature to ensure accuracy and appeal.
  • Interactive Booking Date and Time Selector: Schedule tours and appointments with potential buyers using an intuitive and interactive date and time selector available in two distinct styles.
  • Messaging System with Pre-made Templates: Enhance communication with potential clients using a built-in messaging system that includes template responses and a notification dropdown for new messages.
  • Agent and Agency Reviews and Ratings: Build credibility by displaying reviews and ratings for agents and agencies, prominently shown on individual post cards.
  • Lead Generation Contact Forms: Customizable contact forms with relevant selection options and form fields to capture potential leads effectively.
  • Versatile Search Forms: Multiple search forms designed for different use cases, including multi-tab options for quick navigation and refined searches.
  • Advanced Filtering Options: Provide users with a seamless search experience using various filter styles, including horizontal and sidebar filters.
  • Notification Dropdown: Keep users informed with a dropdown showing the latest notifications, with an option to view all updates.
  • Trust-building Badges and Tags: Display various badges and tags on post cards or detail pages to build trust and highlight key features or accolades.
  • Free Home Valuation Requests: Generate leads by offering potential clients the ability to submit requests for a free home valuation, enhancing user engagement and conversion rates.

File Structure

  • RealEstatePro-html
    • assets
      • css
        • archive.css
        • archive1.css
        • archive2.css
        • archive3.css
        • archive4.css
        • archive5.css
        • archive6.css
        • archive-agency.css
        • archive-agency2.css
        • archive-agent.css
        • archive-agent2.css
        • realestate-element.css
        • realestate-font-family.css
        • realestate-footer.css
        • realestate-footer2.css
        • realestate-footer3.css
        • realestate-footer4.css
        • realestate-footer5.css
        • realestate-header.css
        • realestate-header1.css
        • realestate-header2.css
        • realestate-header3.css
        • realestate-header4.css
        • realestate-header5.css
        • realestate-header6.css
        • realestate-header7.css
        • realestate-header8.css
        • realestate-header9.css
        • realestate-header-classic.css
        • realestate-style.css
        • responsive.css
        • single.css
        • single2.css
        • single-agency.css
        • single-agent.css
        • solo-single.css
        • submit-listing.css
      • js
        • jquery-min.js
        • realestate-archive.js
        • realestate-archive3.js
        • realestate-archive3.js
        • realestate-script.js
        • realestate-submit.js
        • single.js
    • 01-home-classic.html
    • 02-home-modern.html
    • 03-home-dir.html
    • 04-home-commercial.html
    • 05-home-brokerage1.html
    • 06-home-brokerage2.html
    • 08-home-dir.html
    • 09-leadgen.html
    • 10-home-hybrid.html
    • 11-home-condo.html
    • 12-home-single-projact.html
    • 13-home-luxury.html
    • 14-home-solo.html
    • archive.html
    • archive-agency.html
    • archive-agency2.html
    • archive-agent.html
    • archive-agent2.html
    • archive-style1.html
    • archive-style2.html
    • archive-style3.html
    • archive-style4.html
    • archive-style5.html
    • archive-style6.html
    • claim-listing.html
    • home-classic.html
    • home8-archive.html
    • home8-single.html
    • realestate-plans.html
    • single.html
    • single2.html
    • single-agency.html
    • single-agent.html
    • solo-single.html
    • solo-archive.html
    • submit-listing.html

Html Structure


<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <link rel="icon" type="image/x-icon" href="assets/images/icons/home.png">
    <title>Realestate</title> 
    <link rel="stylesheet" type="text/css" href="assets/lib/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/lib/fontawesome/css/solid.min.css">
    <link rel="stylesheet" type="text/css" href="assets/lib/fontawesome/css/regular.min.css">
    <link rel="stylesheet" type="text/css" href="assets/lib/fontawesome/css/brands.min.css"> 
    <link rel="stylesheet" type="text/css" href="assets/lib/bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="assets/lib/pretty-photo/css/prettyPhoto.css"> 
    <link rel="stylesheet" type="text/css" href="assets/lib/slick/slick.css"> 
    <link rel="stylesheet" type="text/css" href="assets/css/realestate-font-family.css"> 
    <link rel="stylesheet" type="text/css" href="assets/lib/select2/select2.min.css"> 
    <link rel="stylesheet" type="text/css" href="assets/css/realestate-header.css">
    <link rel="stylesheet" type="text/css" href="assets/css/realestate-element.css"> 
    <link rel="stylesheet" type="text/css" href="assets/css/loop/property/style-1.css"> 
    <link rel="stylesheet" type="text/css" href="assets/css/blogs/loop-style1.css">
    <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
    <link rel="stylesheet" type="text/css" href="assets/css/realestate-styles.css">
    <link rel="stylesheet" type="text/css" href="assets/css/realestate-footer.css">


</head>

<body>
    <div id="content" class="site-content">
        <header class="realestate-header"> 
        </header>
        <div class="realestate-content-container">  
        </div>
        <footer class="footer-style1"> 
        </footer>
    </div>   
    <script src="assets/js/jquery-min.js"></script>
    <script src="assets/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/lib/select2/select2.min.js"></script>
    <script src="assets/lib/slick/slick.js"></script>
    <script src="assets/lib/pretty-photo/js/jquery.prettyPhoto.js"></script>
    <script src="assets/lib/sticky-kit/jquery.sticky-kit.min.js"></script>
    <script src="assets/lib/counters/jquery.countup.js"></script>
    <script src="assets/lib/counters/jquery.waypoints.min.js"></script>
    <script src="assets/js/realestate-scripts.js"></script> 
    <script src="assets/js/loop/property/style1.js"></script>
</body>

</html>

Customization Guide

Changing Styles
  • Open the realestate-elements.css file in the /assets/css directory. for Homepage Elements
  • Open the relevent css file in the /assets/css directory. for example Single.css for single page etc.
  • Modify the CSS properties to change colors, fonts, and other styles.
Modifying Components
  • To update the header, open the realestate-header.css file according to header style choosen.
  • Follow the comments in the file to make your changes.

Assets and Dependencies

Included Assets
  • Images: Located in the /assets/images directory.
  • Fonts: Listed in the /assets/lib/font-family.

Adding New Pages

Step 1:

Duplicate an existing HTML file.

Step 2:

Update the content as needed.

Step 3:

Add a link to the new page in the navigation menu.

Adding New Font Family

Currently We are using Gilroy, Inter, PlusJakarta, Poppins, Urbanist, Lora, Montserrat, The Nautigal Fonts but You can change and add new Fonts

Step 1:

Download font family file from https://fonts.google.com/

After unzipping this file add into assets/lib/font-family/

Step 2:

Now write callback on your file into /assets/css/realestate-font-family.css


@font-face {
	font-family: 'font';
	src: url('../lib/font-family/your-font/font.ttf') format('truetype');
	font-weight: 500;
	font-style: normal; /* Adding default properties for completeness */
	font-display: swap; /* This property improves loading performance */
}

Note: Now you can update your existing font family or call this using font-family: "your-font-name", sans-serif;

Installation Guide

Step 1:

After unzipping Template Files, you will find our product RealEstatePro ->HTML(Source code)

Step 2:

Open HTML folder, copy all files and paste in your localhost or server root folder

Step 3:

Now you can run this Template in any web browser from your PC or Laptop

for example

localhost/realestatepro/01-home-classic.html or www.example.com/01-home-classic.html

FAQs

With one purchase code you can use it on one domain name. You need to get new license for every new domain name, please check Envato Help Page for more information about licenses.

Check the browser console for errors and ensure all files are correctly linked.

You can change the logo or replace it from img folder or you can edit it from HTML file.

Go to your ThemeForest account, navigate to "Downloads," and download the latest version of theme.

If you need support, or if you're facing any problems, please contact us via Email at: contact@cridio.com
Please note that our respond can take up to 2 business days.

  • Availability to answer questions, Answering technical questions about item’s features, Assistance with reported bugs and issues, Help with included 3rd party assets.
  • Any customization request will be ignored.
  • Please make sure to read more about the support policy.

Appendix

Recource Usage URL
Bootstrap Frontend Framework https://getbootstrap.com/docs/
jQuery Ajax interactions https://jquery.com/
Fontawesome Icon Library https://fontawesome.com/
Select2 enhancing HTML 'select' elements https://select2.org/
Google Fonts Wide Selection of Fonts https://fonts.google.com/
Fancy Box Display content in a lightbox overlay https://fancyapps.com/fancybox/
Jquery UI To use animation, advanced effects https://jqueryui.com/
Pie Donut Charts data visualization https://www.jqueryscript.net/demo/Pie-Donut-Chart-SVG-jChart/
thanks

Thank You

Thank you once again for downloading Realestate Pro.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.

Review Link:https://themeforest.net/downloads