Build an example

This is step by step guide on how to build home page manually for ORSON HOME 15

Need Wordpress, ORSON & plugins are already

I. Overview elements area on page

II. Building

Build & Setting top bar area

1.1 Build Top Bar Left

Add Three " Text Widgets" to "Top Bar Left" Area

Go to Widget Manager

Add Text Widget 01:

Code HTML

View example's code

<div class="custom-dropdown-list fold-out hover">
	<span>English <i class="fa fa-plus"></i></span>
	<ul class="fold-out-drop drop-shadow">
		<li><a href="#">EN - English</a></li>
		<li><a href="#">FR - French</a></li>
		<li><a href="#">DE - German</a></li>
		<li><a href="#">JA - Japanese</a></li>
		<li><a href="#">VN - Vietnam</a></li>
	</ul>
</div>

Add Text Widget 02:

Code HTML

	<div class="custom-dropdown-list fold-out hover">
		<span>English <i class="fa fa-plus"></i></span>
		<ul class="fold-out-drop drop-shadow">
			<li><a href="#">EN - English</a></li>
			<li><a href="#">FR - French</a></li>
			<li><a href="#">DE - German</a></li>
			<li><a href="#">JA - Japanese</a></li>
			<li><a href="#">VN - Vietnam</a></li>
		</ul>
	</div>

Add Text Widget 03:

1.2 Build Top Bar Right

Add Custom Menu and G5Plus - Social Profile Widgetsto "Top Bar Right" Area

Add Custom Menu Widget

For more information create menu: Cick here

Add Social Profile Widget :

Build & Setting header area

You can consult this video guide on How to build Header Area (on ORSON - Homepage 15)

2.1 Upload logo

Go to ThemeOptions >> Logo Setting tab, do follow:

2.2 Create menu

Go to Apperance >> Menus, do follow:

2.3 Settings

Go to ThemeOptions >> Header tab, then setting below

Import slider & create home page

3.1 Import slider simple

You can consult how to import slider at Import slider home page
And locate zip file slider to import on path: wp-content\plugins\orson-framework\install-demo\data\main\revslider

3.2 Create A New Page

Click classic mode, add code below:

View example's code

	[vc_row el_class="mg-bottom-55 sm-mg-bottom-35"][vc_column][rev_slider_vc alias="slider-fullwidth"][/vc_column][/vc_row][vc_row equal_height="yes" el_class="mg-bottom-55 sm-mg-bottom-35"][vc_column][g5plus_heading title="Our Services" style="style_02"][/vc_column][vc_column width="1/2" offset="vc_col-md-4 vc_col-xs-12" css=".vc_custom_1461838127073{margin-bottom: 40px !important;}"][g5plus_icon_box layout="classic" title="Customer Support" description="In sed nisl felis. Phasellus luctus vestibulum mi a rutrum. Nullam et eleifend ipsum. Proin eu est sed mauris scelerisque porttitor." icon_font="pe-7s-users" custom_icon_color="#33a752"
	icon_color="#212121"][/vc_column][vc_column width="1/2" offset="vc_col-md-4 vc_col-xs-12" css=".vc_custom_1461838118160{margin-bottom: 40px !important;}"][g5plus_icon_box layout="classic" title="Sliders" description="Vivamus mollis, turpis sit amet mollis malesuada, ante urna sodales erat, a laoreet ipsum nisl ut ipsum." icon_font="pe-7s-exapnd2" custom_icon_color="#33a752"
	icon_color="#212121"][/vc_column][vc_column width="1/2" offset="vc_col-md-4 vc_col-xs-12" css="
	.vc_custom_1461837883160{margin-bottom: 40px !important;}"][g5plus_icon_box layout="classic" title="HTML5" description="Phasellus sit amet justo sodales, finibus quam eget, semper arcu. Mauris mattis, lacus ut rutrum luctus, mauris sem pulvinar enim." icon_font="pe-7s-config" custom_icon_color="#33a752" icon_color="#212121"][/vc_column][vc_column width="1/2" offset="vc_col-md-4 vc_col-xs-12" el_class="sm-mg-bottom-40 xs-mg-bottom-40"][g5plus_icon_box layout="classic" title="Lightboxes"
	description="In sed nisl felis. Phasellus luctus vestibulum mi a rutrum. Nullam et eleifend ipsum. Proin eu est sed mauris scelerisque porttitor." icon_font="pe-7s-browser" custom_icon_color="#33a752" icon_color="#212121"][/vc_column][vc_column width="1/2" offset="vc_col-md-4 vc_col-xs-12"
	el_class="xs-mg-bottom-40"][g5plus_icon_box layout="classic" title="Shortcodes" description="Vivamus mollis, turpis sit amet mollis malesuada, ante urna sodales erat, a laoreet ipsum nisl ut ipsum." icon_font="pe-7s-keypad" custom_icon_color="#33a752" icon_color="#212121"][/vc_column][vc_column width="1/2" offset="vc_col-md-4 vc_col-xs-12"][g5plus_icon_box layout="classic" title="Videos"
	description="Phasellus sit amet justo sodales, finibus quam eget, semper arcu. Mauris mattis, lacus ut rutrum luctus, mauris sem pulvinar enim." icon_font="pe-7s-film" custom_icon_color="#33a752"
	icon_color="#212121"][/vc_column][/vc_row][vc_row full_width="stretch_row" equal_height="yes" css=".vc_custom_1464083417071{background-color: #122e4f !important;}"][vc_column width="1/2"
	offset="vc_col-lg-3 vc_col-md-3 vc_col-xs-12"][g5plus_counter counter_title="HAPPY CLIENTS" counter_value="5,000" counter_unit="+" counter_unit_align="right" color_scheme="light" el_class="pd-top-80 pd-bottom-80 sm-pd-top-45 sm-pd-bottom-0 xs-pd-bottom-0"][/vc_column][vc_column width="1/2" offset="vc_col-lg-3 vc_col-md-3 vc_col-xs-12"][g5plus_counter counter_title="YEARS IN BUSINESS"
	counter_value="12" counter_unit_align="right" color_scheme="light" el_class="pd-top-80 pd-bottom-80 sm-pd-top-45 sm-pd-bottom-0 xs-pd-bottom-0"][/vc_column][vc_column width="1/2" offset="vc_col-lg-3 vc_col-md-3 vc_col-xs-12"][g5plus_counter counter_title="DONE PROJECTS" counter_value="95"
	counter_unit="%" counter_unit_align="right" color_scheme="light" el_class="pd-top-80 pd-bottom-80 sm-pd-top-40 sm-pd-bottom-45 xs-pd-bottom-0"][/vc_column][vc_column width="1/2" offset="vc_col-lg-3 vc_col-md-3 vc_col-xs-12"][g5plus_counter counter_title="CUPS OF COFFEE" counter_value="577"
	counter_unit_align="right" color_scheme="light" el_class="pd-top-80 pd-bottom-80 sm-pd-top-40 sm-pd-bottom-45"][/vc_column][/vc_row][vc_row full_width="stretch_row" overlay_mode="color" overlay_color="rgba(0,0,0,0.7)" css=".vc_custom_1464083556389{padding-top: 55px !important;padding-bottom: 70px !important;background-image: url(http://localhost/orson/wp-content/uploads/2016/05/background-08.jpg?id=2047) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}" el_class="mg-bottom-55
	sm-mg-bottom-35"][vc_column][g5plus_testimonials values="%5B%7B%22quote%22%3A%22Vivamus%20mollis%2C%20turpis%20sit%20amet%20mollis%20malesuada%2C%20ante%20urna%20sodales%20erat%2C%20a%20laoreet%20ipsum%20nisl%20ut%20ipsum
	.%20Sed%20tristique%20orci%20urna%2C%20non%20mattis%20quam%20pellentesque%20vitae.%20%22%2C%22author%22%3A%22JOLLIE%20ROSE%22%2C%22author_info%22%3A%22CEO%20%26%20Founder%20-%20Digital%20Creative%22%7D%2C%7B%22quote%22%3A%22Lorem%20ipsum%20dolor%20sit%20amet%2C%20ut%20novum%20praesent%20vulputate%20sed%2C%20quis%20iudico%20te%20nam.%20Rebum%20scripta%20has%20eu.%20Ne%20choro%20impetus%20mea.%20Eum%20at%20tempor%20ancillae.%22%2C%22author%22%3A%22DAVID%20%20JOAH%22%2C%22author_info%22%3A%22Computer%20Systems%20Analyst%22%7D%2C%7B%22quote%22%3A%22Lorem%20ipsum%20dolor%20sit%20amet%2C%20decore%20principes%20scriptorem%20sed%20in.%20Per%20soleat%20facilisis%20comprehensam%20no%2C%20te%20eos%20postulant%20adversarium.%22%2C%22author%22%3A%22WILIAM%20DAVID%22%2C%22author_info%22%3A%22Software%20Developer%22%7D%5D" layout_style="style2" layout_type_2="st2_type2" color_scheme="color-light" arrows_position="center" arrows_style="classic" arrows="true" dots="true" autoplaytimeout="5000"
	nav="yes"][/vc_column][/vc_row][vc_row full_width="stretch_row" el_class="mg-bottom-55 sm-mg-bottom-35"][vc_column][g5plus_our_team title="Meet The Team" title_style="style_02" columns="4" current_page="1" ajax="0" is_slider="true"][/vc_column][/vc_row][vc_row el_class="mg-bottom-55 sm-mg-bottom-35"][vc_column width="1/2"][g5plus_heading title="Who we are"
	style="style_02"][vc_column_text el_class="mg-bottom-25"]Vivamus mollis, turpis sit amet mollis malesuada, ante urna sodales erat, a laoreet ipsum nisl ut ipsum. Sed tristique orci urna, non mattis quam pellentesque vitae.[/vc_column_text][g5plus_lists bullet="icon" color="primary" size="xs"
	values="%5B%7B%22icon_font%22%3A%22fa%20fa-plus%22%2C%22label%22%3A%22Vivamus%20mollis%2C%20turpis%20sit%20amet%20mollis%20malesuada%2C%20ante%20urna%20sodales%20erat%2C%20a%20laoreet%20ipsum%20nisl%20ut%20ipsum.%22%7D%2C%7B%22icon_font%22%3A%22fa%20fa-plus%22%2C%22label%22%3A%22Integer%20facilisis%20ex%20in%20mauris%20semper%20tempor.%20Aenean%20faucibus%20varius%20lorem%2C%20eget%20sollicitudin%20tortor%20tincidunt%20ut.%20Fusce%20nec%20nisi%20eu%20enim%20bibendum%20dapibus.%20%22%7D%2C%7B%22icon_font%22%3A%22fa%20fa-plus%22%2C%22label%22%3A%22Suspendisse%20magna%20quam%2C%20commodo%20venenatis%20nunc%20vel.%22%7D%5D"][/vc_column][vc_column width="1/2"][vc_progress_bar
	layout_style="style_01" values="%5B%7B%22label%22%3A%22HTML%2FCSS%22%2C%22value%22%3A%2290%22%2C%22color%22%3A%22bar_green%22%7D%2C%7B%22label%22%3A%22DESIGN%22%2C%22value%22%3A%22100%22%2C%22color%22%3A%22bar_green%22%7D%2C%7B%22label%22%3A%22WORDPRESS%22%2C%22value%22%3A%2285%22%2C%22color%22%3A%22bar_green%22%7D%2C%7B%22label%22%3A%22SHORTCODE%22%2C%22value%22%3A%2295%22%2C%22color%22%3A%22bar_green%22%7D%5D" units="%"][/vc_column][/vc_row][vc_row full_width="stretch_row"
	el_class="mg-bottom-25 sm-mg-bottom-15" css=".vc_custom_1464083978802{background-color: #222222 !important;}"][vc_column][g5plus_portfolio title="Our Portfolio" title_style="style_02"
	title_scheme="light" layout_style="portfolio-masonry" color_scheme="portfolio-color-dark" show_category="left" overlay_style="portfolio-overlay-title-category-icon" icon_color_scheme="icon-color-light" hover_effect="default-effect" items="12" columns="3"
	arrows_position="center" column_padding="20px" image_size="portfolio-size2" current_page="1" ajax="0" arrows="true" el_class="mg-top-55 sm-mg-top-35 mg-bottom-60 sm-mg-bottom-40"][/vc_column][/vc_row][vc_row el_class="mg-bottom-30 sm-mg-bottom-10"][vc_column][g5plus_partner_carousel size="size_02" images="724,725,726,727,728" custom_links_target="" arrows_position="center" arrows_style="classic" is_slider="true"][/vc_column][/vc_row][vc_row full_width="stretch_row" css="
	.vc_custom_1464084179028{background-color: #eeeeee !important;}"][vc_column][g5plus_posts title="From The Blog" title_style="style_01" layout="style_04" source="recent" number="5" columns="3" arrows="" is_slider="true" dots="true" el_class="mg-top-55 sm-mg-top-35 mg-bottom-60 sm-mg-bottom-40" icon_light="true"][/vc_column][/vc_row]

Choose source data content Portfolio,Our Team

4.1 Choose data for Portfolio shortcode

Follow below to create Portfolio item or Category

4.2 Choose data for Our Team shortcode

Follow below to create Our Team item or Category

Setting Footer & Create content footer

5.1 Settings Footer

Go to ThemeOptions >> Footer tab, then setting below

5.2 Add widgets "G5Plus: Image", "Text" , "G5Plus - Social Profile"to "Footer 1" area

Go to Widget Manager

Add content to "Text" widget

Add content to "G5Plus: Image" widget

Add content to "Text" widget

Add content

"G5Plus - Social Profile"

widget

5.3 Add widgets "Text" to "Footer 2" area

Add content to "Text" widget

Code HTML

View example's code

	<ul class="icon-info">
		<li>
			<i class="fa fa-map-marker"></i>
			<div>
				<div class="icon-info-title">ADDRESS</div>
				<p>1908 Street Name, City Name, United States</p>
			</div>
		</li>
		<li>
			<i class="fa fa-phone"></i>
			<div>
				<div class="icon-info-title">PHONE</div>
				<p>+1 (008) 789 77 35</p>
			</div>
		</li>
		<li>
			<i class="fa fa-envelope"></i>
			<div>
				<div class="icon-info-title">EMAIL</div>
				<p>info@orsontheme.com</p>
			</div>
		</li>
		<li>
			<i class="fa fa-clock-o"></i>
			<div>
				<div class="icon-info-title">WORKING DAYS/HOURS</div>
				<p>Mon - Sun / 9:00 AM - 8:00 PM</p>
			</div>
		</li>
	</ul>

Build an example

I. Overview elements area on page

II. Building

Build & Setting top bar area

1.1 Build Top Bar Left

1.2 Build Top Bar Right

Build & Setting header area

2.1 Upload logo

2.2 Create menu

2.3 Settings

Import slider & create home page

3.1 Import slider simple

3.2 Create A New Page

Choose source data content Portfolio,Our Team

4.1 Choose data for Portfolio shortcode

4.2 Choose data for Our Team shortcode

Setting Footer & Create content footer

5.1 Settings Footer

5.2 Add widgets "G5Plus: Image", "Text" , "G5Plus - Social Profile"to "Footer 1" area

5.3 Add widgets "Text" to "Footer 2" area

5.4 Add Widget "Tag Cloud" to "Footer 3" area

5.5 Add Widget "G5Plus:Twitter" to "Footer 4" area

5.6 Add text Copyright to "Bottom Bar Left" area

5.7 Add G5Plus:Image paypal to "Bottom Bar Right" area

On this page