Build a home page

This is step by step guide on how to build homepage manually for HOME ONE

Note: You need Wordpress, BEYOT & plugins are already. Building other homepages process are similar.

Overview elements area on page

Building header area

You can consult this video guide on How to build Header Area. This process is similar to building Header Area on BEYOT theme.

Go to ThemeOptions → Header tab, then setup options for Header Area as your liking

Note:

You could select a Preset to apply all its settings to Theme Options.

Once you choose a Preset and press Load Preset button, it will get all current values in this Preset and apply to options that corresponds in Theme Options (it means that if later you change any option in this Preset will not affect to Theme Options).

1.2 Add widgets to Top Bar Left area

Go to Apperance → Widget and do follow:

Add 2 widget: ERE Login Menu and Text to the Top Bar Left widget area:

and then add content to Text widget as below:

Code HTML for Text Widget in Top Bar Left:

View example's code

	<div class="custom-dropdown-list fold-out hover">
		<div class="submit-property"><a href="/beyot/new-property/" title="Submit Property"><i class="icon-office2 accent-color"></i> Submit Property</a></div>
		<div id="lang_sel">
			<ul>
				<li> <a href="#" class="lang_sel_sel icl-en"> <img class="iclflag" src="http://themes.g5plus.net/handmade/wp-content/themes/handmade/assets/images/flags/en.png" alt="en" title="English">  English </a>
					<ul>
						<li class="icl-fr"> <a href="#"> <img class="iclflag" src="http://themes.g5plus.net/handmade/wp-content/themes/handmade/assets/images/flags/fr.png" alt="fr" title="French"> French </a>
						</li>
						<li class="icl-de"> <a href="#"> <img class="iclflag" src="http://themes.g5plus.net/handmade/wp-content/themes/handmade/assets/images/flags/de.png" alt="de" title="German"> German </a>
						</li>
						<li class="icl-ja"> <a href="#"> <img class="iclflag" src="http://themes.g5plus.net/handmade/wp-content/themes/handmade/assets/images/flags/ja.png" alt="ja" title="Japanese"> Japanese </a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>

1.3 Add widgets to Top Bar Right area

Add widgets G5Plus - Social Profile to Top Bar Right area.

1.4 Upload logo

Go to Theme Options → Logo Setting tab, do follow:

1.5 Create menu

Go to Apperance → Menus, do follow:

Building footer area

2.1 Settings Footer

Footer Area on the frontend

Go to ThemeOptions → Footer tab, then setup general options for Footer area and Bottom Bar area.

2.2 Add widgets to FOOTER 1 area

Go to Widget Manager

Add G5Plus: Logo widget and Text widget: and G5Plus: Profile widget.

Setup these widgets as below:

2.3 Add widgets to FOOTER 2 area

Add Text widget to FOOTER 2 widget area

Code HTML for Text Widget in FOOTER 2 widget area:

View example's code

	<div class="custom-dropdown-list fold-out hover">
		<ul class="footer-get-in-touch">
			<li><span class="text-color-accent fa fa-map-marker"></span><span>G5 Technology JSC, Room 1201, Tecco Tower C Apartment, Quang Trung Ward, Vinh City, Nghe An Province, VietNam(46000)</span></li>
			<li><span class="text-color-accent fa fa-phone"></span><span>(+84) 388-969-888</span></li>
			<li><span class="text-color-accent fa fa-envelope"></span><span>g5plus@outlook.com</span></li>
			<li><span class="text-color-accent fa fa-headphones"></span><span>www.g5plus.net</span></li>
			<li><span class="text-color-accent fa fa-skype"></span><span>beyot_realstate</span></li>
		</ul>
	</div>

2.4 Add Widgets to FOOTER 3 area

Add ERE Listing Property Taxonomy widget:

2.5 Add Widgets to FOOTER 4 area

Add MailChimp Sign-Up Form widget:

2.6 Add Widgets to BOTTOM BAR LEFT area

Add Text widget:

CSS Class:

fw-medium fs-12 pd-top-10

2.7 Add Widget to BOTTOM BAR RIGHT area