About Homepage

Content

Description

Custom homepages are standard pages built for customization with shortcodes and HTML.

How to Build and Set Custom Homepage

By default, the homepage looks like a default blog page (recent posts + sidebar). If you like to, you can set any page as your homepage by following these steps:

  1. Create a new page at Admin Panel > Pages > Add New.
    • Customize it according to your preferences. Here are some examples.
    • Select the Blank page template
    • Activate or remove the custom sidebar based on your needs.
    • Click Publish.
  2. Go to Admin Panel > Settings > Reading
    • Select the page you've just created from the Front page drop menu.
    • Click Save Changes.
  3. Congrats! Your custom homepage has been selected. Refresh your website to ensure that the change has been implemented.

Examples

Use these examples for inspiration or modify them according to your preferences.

  • v.1
  • v.2
  • v.3
  • v.4
  • v.5
  • v.6
Screenshot Description
Features
  • Welcome tagline
  • 4 random products
  • Big button
  • Featured section
Live demo
Shortcode
[raw]

	<div style="text-align:center;">
		<h2> Tagline goes here. </h2>
	</div>
	
	<div class="h10"><!-- --></div>
	
	[divider]
	
	<div class="h10"><!-- --></div>
	
	[products qty="4" orderby="rand"]
	
	<div class="h20"><!-- --></div>
	
	<div style="text-align:center;">
		[bbutton url="#" tagline="Tagline goes here" target="blank"] Button text [/bbutton]
	</div>
	
	<div class="h30"><!-- --></div>
	
	[fieldset legend="Featured" icon="asterisk_orange.png"]

		[one_third]
			<h4> Title </h4>
			[dropcap size="80"] 1 [/dropcap]
			<p> Content goes here. </p>
			[button bg="3f8700" color="FFF" bg_hover="8CB145"] Learn more [/button]
		[/one_third]

		[one_third]
			<h4> Title </h4>
			[dropcap size="80"] 2 [/dropcap]
			<p> Content goes here. </p>
			[button bg="3f8700" color="FFF" bg_hover="8CB145"] Learn more [/button]
		[/one_third]

		[one_third]
			<h4> Title </h4>
			[dropcap size="80"] 3 [/dropcap]
			<p> Content goes here. </p>
			[button bg="3f8700" color="FFF" bg_hover="8CB145"] Learn more [/button]
		[/one_third]

	[/fieldset]

[/raw]
		
Screenshot Description
Features
  • About
  • Featured info
  • A list of services
  • Recent posts
Live demo
Shortcode
[raw]

	<!-- start 1 column -->
	[one_fourth]

		<h4> About </h4>
		
		[img src="image-path-goes-here.jpg" w="203" h="100"]

		<div class="clear h10"><!-- --></div>

		<p> Shortly about goes here </p>

		[button url="#"] Read more [/button]

	[/one_fourth]
	<!-- end 1 column -->


	<!-- start 2 column -->
	[two_fourth]

		[fieldset legend="Shortcodes" icon="trophy.png"]

			<div style="text-align:center;">

				<h3> Title goes here </h3>
				<p> Short info goes here. </p>

			</div>

			<div class="clear h10"><!-- --></div>

			[one_third]
				[ul bullit="accept.png" m="10"]
					<ul>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					</ul>
				[/ul]
			[/one_third]

			[one_third]
				[ul bullit="accept.png" m="10"]
					<ul>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					</ul>
				[/ul]
			[/one_third]

			[one_third]
				[ul bullit="accept.png" m="10"]
					<ul>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					<li><a href="#"> Link </a></li>
					</ul>
				[/ul]
			[/one_third]

			<div class="clear h20"><!-- --></div>

			<div style="text-align:center;">

				[bbutton tagline="Tagline goes here" tooltip="Tooltip goes here" url="#"] Purchase Now [/bbutton]

			</div>

		[/fieldset]

	[/two_fourth]
	<!-- end 2 column -->


	<!-- start 3 column -->
	[one_fourth]	

		<h4> Features </h4>

		[accordion]

			[toggle title="One" status="open"] Content goes here. [/toggle]

			[toggle title="Two"] Content goes here. [/toggle]

			[toggle title="Three"] Content goes here. [/toggle]

			[toggle title="Four"] Content goes here. [/toggle]

			[toggle title="Five"] Content goes here. [/toggle]

		[/accordion]

	[/one_fourth]
	<!-- end 3 column -->


	[clear]

	<div class="h40"><!-- --></div>

	[divider]

	<div class="h20"><!-- --></div>

	[posts qty="6" w="100%" m="10" grid="3" t="center" tw="280" th="100" excerpt="yes"]

[/raw]
		
Screenshot Description
Features
  • Welcome tagline
  • 3 pricing boxes
  • Testimonials
  • About
  • Featured info
Live demo
Shortcode
[raw]


	<div style="text-align:center;">
		<h2> Tagline goes here. </h2>
	</div>
	
	<div class="h20"><!-- --></div>


	<!-- start 1 column -->
	[one_third m="0"]

		[pbox
			title="Support"
			price="<sup>$</sup> <strong>0</strong> <small>/ mo.</small>"
			bg="3a8291"
			button="Sign In"
			tagline="to support forum"
			url="#"
			h="240"
			m="5"
		]
			[ul bullit="lifebuoy.png" m="10"]
				<ul>
				<li> List item </li>
				<li> List item </li>
				<li> List item </li>
				</ul>
			[/ul]
		[/pbox]

	[/one_third]
	<!-- end 1 column -->


	<!-- start 2 column -->
	[one_third m="0"]

		[pbox
			title="Regular Licence"
			price="<sup>$</sup> <strong>35</strong> <small>/ once</small>"
			bg="d86917"
			button="Purchase"
			tagline="Regular Licence"
			url="#"
			h="240"
			m="5"
		]
			[ul bullit="trophy_silver.png" m="10"]
				<ul>
				<li> List item </li>
				<li> List item </li>
				<li> List item </li>
				</ul>
			[/ul]
		[/pbox]

	[/one_third]
	<!-- end 2 column -->


	<!-- start 3 column -->
	[one_third m="0"]

		[pbox
			title="Extended Licence"
			price="<sup>$</sup> <strong>85</strong> <small>/ once</small>"
			bg="9ca60e"
			button="Purchase"
			tagline="Extended Licence"
			url="#"
			h="240"
			m="5"
		]
			[ul bullit="accept.png" m="10"]
				<ul>
				<li> List item </li>
				<li> List item </li>
				<li> List item </li>
				</ul>
			[/ul]
		[/pbox]

	[/one_third]
	<!-- end 3 column -->


	[clear]


	<div class="h10"><!-- --></div>


	<h3> What people are saying? </h3>

	[one_fourth]
		[quote pic="1" bg="EEE" color="555" cite="John Doe" subcite="Company Name"] Testimonial goes here. [/quote]
	[/one_fourth]

	[one_fourth]
		[quote pic="2" bg="EEE" color="555" cite="John Doe" subcite="Company Name"] Testimonial goes here. [/quote]
	[/one_fourth]

	[one_fourth]
		[quote pic="3" bg="EEE" color="555" cite="John Doe" subcite="Company Name"] Testimonial goes here. [/quote]
	[/one_fourth]

	[one_fourth m="0"]
		[quote pic="4" bg="EEE" color="555" cite="John Doe" subcite="Company Name"] Testimonial goes here. [/quote]
	[/one_fourth]


	[clear]


	<div class="h40"><!-- --></div>


	<!-- start About us -->
	[one_half]

		[fieldset legend="About us" icon="user_business.png" h="330px"]
	
			[img w="150" h="150" align="left" title="John Doe, CEO" alt="Caption goes here" src="image-path-goes-here.jpg"]
	
			<p> Shortly about goes here. </p>

			[button url="#"] Read more [/button]
	
		[/fieldset]

	[/one_half]
	<!-- end About us -->


	<!-- start Features -->
	[one_half m="0"]

		[fieldset legend="Features" icon="world.png" h="330px"]
	
			[accordion]
	
			[toggle title="One" status="open"] Content goes here. [/toggle]

			[toggle title="Two"] Content goes here. [/toggle]

			[toggle title="Three"] Content goes here. [/toggle]

			[toggle title="Four"] Content goes here. [/toggle]

			[toggle title="Five"] Content goes here. [/toggle]	

			[/accordion]
	
		[/fieldset]

	[/one_half]
	<!-- end Features -->


[/raw]
		
Screenshot Description
Features
  • Slider
  • Services
  • Tagline
  • Features
  • Welcome
  • Contact form
Live demo
Shortcode
[raw]

	[clear h="10"]

	<!-- start SLIDER -->
		[three_fourth]

			[slider transition="pth" height="310" autoplay="7"]
	
				[s] <img src="image.jpg" alt=""/> [/s]
				[s] <a href="#"><img src="image.jpg" alt=""/></a> [/s]
				[s] <a href="#"><img src="image.jpg" alt=""/></a> [/s]
	
			[/slider]

		[/three_fourth]
	<!-- end SLIDER -->
	
	
	<!-- start SERVICES -->
		[one_fourth m="0"]

			<div style="margin:-10px 0 0 0;">

				[fieldset legend="Services:" icon="pin.png"]

					[accordion]

						[toggle title="Online marketing" status="open" style="2"] Content goes here. <a href="#"> More </a> [/toggle]

						[toggle title="Web development" style="2"] Content goes here. <a href="#"> More </a> [/toggle]

						[toggle title="E-commerce" style="2"] Content goes here. <a href="#"> More </a> [/toggle]

						[toggle title="Support" style="2"] Content goes here. <a href="#"> More </a> [/toggle]

					[/accordion]

					[button bg="66b81e" color="FFF" bg_hover="3f8700" url="#"] More services [/button]

				[/fieldset]

			</div>

		[/one_fourth]
	<!-- end SERVICES -->


	<!-- start NOTE -->

		[clear h="10"]
		<blockquote><strong><em>January 27th</em></strong> - Tagline goes here. <a href="#">Details</a></blockquote>

	<!-- end NOTE -->


	<!-- start FEATURES -->
		[one_fourth]

			<h6>Features</h6>
			[line]
			<p>
				<span class="f120 strong block pb5"> Highly customizable </span>
				Content goes here.
			</p>
			[button url="#"] Learn more [/button]

			[clear h="20"]

			[line]

			<p>
				<span class="f120 strong block pb5"> Unlimited styles </span>
				Content goes here.
			</p>
			[button url="#"] Learn more [/button]

			[clear h="20"]
	
		[/one_fourth]
	<!-- end FEATURES -->
	
	
	<!-- start WELCOME -->
		[two_fourth]

			<h6>Welcome to Website</h6>
			[line]
			<span class="f120 strong block pb5"> Sup-title </span>
			<h3>Title.</h3>
			<p>
				Content goes here.
			</p>
			[fieldset legend="Legend" icon="accept.png"]
				<img class="aligncenter" src="image.jpg" alt=""/>
			[/fieldset]

		[/two_fourth]
	<!-- end WELCOME -->
	
	
	<!-- start CONTACT -->
		[one_fourth m="0"]

			<h6>Get in touch</h6>
			[line]
			Put here a contact form shortcode. Do not forget to install Contact Form 7 plugin.

		[/one_fourth]
	<!-- end CONTACT -->


[/raw]
		
Screenshot Description
Features
  • Network tagline
  • Sign Up button
  • Network features
  • Network groups
Live demo
Shortcode
[raw]



	[clear h="10"]



	[three_fifth] <h2 style="font-size:250%; padding:0.3em;" class="fr">Lorem ipsum!</h2> [clear] [/three_fifth]

	[two_fifth] [bbutton url="#" tagline="Lorem ipsum!" tooltip="Lorem ipsum."] Sign up [/bbutton] [/two_fifth]


	
	[clear h="20"] [divider]



	[two_third]

		<h5>Network features</h5>
		[clear h="10"]

		[one_half]

			<!-- start A -->
			  [dropcap color="FFF" bg="396AA6"] A [/dropcap]
			  <a href="#" class="f120 strong ntd"> Join a Group </a> <p> Lorem ipsum. </p>
			<!-- end A -->
		
			[clear h="20"]
		
			<!-- start C -->
			  [dropcap color="FFF" bg="396AA6"] C [/dropcap]
			  <a href="#" class="f120 strong ntd"> Start an awesome blog </a> <p> Lorem ipsum. </p>
			<!-- end C -->

		[/one_half]

		[one_half]
			
			<!-- start B -->
			  [dropcap color="FFF" bg="396AA6"] B [/dropcap]
			  <a href="#" class="f120 strong ntd"> Have a Discussion </a> <p> Lorem ipsum. </p>
			<!-- end B -->
		
			[clear h="20"]
		
			<!-- start D -->
			  [dropcap color="FFF" bg="396AA6"] D [/dropcap]
			  <a href="#" class="f120 strong ntd"> Share with Friends </a> <p> Lorem ipsum. </p>
			<!-- end D -->

		[/one_half]
	
	[/two_third]
	
	[one_third]
	
		[sidebar name="Default Sidebar"]
	
	[/one_third]



	[clear h="30"]



[/raw]
		
Screenshot Description
Features
  • Tagline
  • Featured tabs
    1. About
    2. Services
    3. Features
    4. Get in touch
  • Testimonials as slider
Live demo
Shortcode
[raw]



	[two_third]


		<h2>Welcome to the Lorem ipsum.</h2>

		[clear h="10"]


		[tabs names="About,Services,Features,Get in touch"]


			<!-- start ABOUT tab -->
			[t]

				[one_half]
		
					<h4>Who are we?</h4>

					<p>Lorem ipsum</p>

					[button bg="66b81e" color="FFF" bg_hover="3f8700" url="#"] Browse portfolio [/button]

					[button bg="2D9AD3" color="FFF" bg_hover="396AA6" url="#"] Learn more [/button]
		
				[/one_half]

				[one_half]

					<div style="border-left:1px solid #DDD; padding-left:20px;">
					
						<h4>What we do?</h4>
	
						[icon name="page_white_world.png" url="#" tooltip="Lorem ipsum"] Website Development [/icon]

						[clear h="7"]
	
						[icon name="chart_pie.png" url="#" tooltip="Lorem ipsum"] Online Marketing [/icon]

						[clear h="7"]

						[icon name="cart.png" url="#" tooltip="Lorem ipsum"] Ecommerce Solutions [/icon]

						[clear h="7"]

						[icon name="database.png" url="#" tooltip="Lorem ipsum"] Database Development [/icon]

						[clear h="7"]

						[icon name="chart_bar.png" url="#" tooltip="Lorem ipsum"] Search Engine Optimization [/icon]

						[clear h="15"]

					</div>

				[/one_half]

				[clear]

			[/t]
			<!-- end ABOUT tab -->


			<!-- start SERVICES tab -->
			[t]

				[clear h="10"]

				<ol>
		
					<li>
						<p>
							<span class="f120 strong block pb5">Online marketing</span>
							Lorem ipsum. COST: [icon name="money_dollar.png"] <strong>59.95</strong> [/icon]
						</p>
						[button url="#"] Learn more [/button]
						[clear h="20"]
						[line]
					</li>
		
					<li>
						<p>
							<span class="f120 strong block pb5">Web development</span>
							Lorem ipsum. COST: [icon name="money_euro.png"] <strong>99.95</strong> [/icon]
						</p>
						[button url="#"] Learn more [/button]
						[clear h="20"]
						[line]
					</li>
		
		
					<li>
						<p>
							<span class="f120 strong block pb5">E-commerce</span>
							Lorem ipsum. COST: [icon name="money_pound.png"] <strong>179.95</strong> [/icon]
						</p>
						[button url="#"] Learn more [/button]
					</li>
		
		
				</ol>

			[/t]
			<!-- end SERVICES tab -->


			<!-- start FEATURES tab -->
			[t]

				[clear h="10"]

				[accordion]
			
					[toggle title="Title goes here"]
						<p>Lorem ipsum.</p>
					[/toggle]

					[toggle title="Title goes here"]
						<p>Lorem ipsum.</p>
					[/toggle]

					[toggle title="Title goes here"]
						<p>Lorem ipsum.</p>
					[/toggle]

				[/accordion]

				[button url="#"] ...and many more [/button]

			[/t]
			<!-- start FEATURES tab -->


			<!-- start GET IN TOUCH tab -->
			[t]

				[clear h="10"]

				[two_fifth]
					[icon name="house.png"] 143/83 Viset road, Phuket [/icon]
					[clear h="5"]
					[icon name="clock.png"] 8:00-17:00, Monday-Friday [/icon]
					[clear h="5"]
					[icon name="telephone.png"] +66 (0) 1230099 [/icon]
					[clear h="5"]
					[icon name="user_business.png" url="#" tooltip="Hello world!"] Mike Forrester [/icon], sales
					[clear h="5"]
					[email to="mailbox@website.tld"] Email me [/email]
					[clear h="5"]
					[icon name="lifebuoy.png" url="#"] Support [/icon]
				[/two_fifth]

				[three_fifth]
					<iframe width="325" height="181" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?source=embed&ie=UTF8&t=m&ll=42.292723,18.840888&spn=0.003968,0.006974&z=16&output=embed"></iframe>
				[/three_fifth]

				[clear]

			[/t]
			<!-- start GET IN TOUCH tab -->


		[/tabs]


	[/two_third]



	
	[one_third m="0"]
	

		<!-- start TESTMONIALS -->
		<h5>Testimonials</h5>

		[slider height="265"]

			[s]
				[quote pic="1" cite="tonvie" subcite="TF customer"]
					<h5 style="color: white; padding-top: 0;">Lorem ipsum!</h5>
					Lorem ipsum.
				[/quote]
			[/s]

			[s]
				[quote pic="1" cite="tonvie" subcite="TF customer"]
					<h5 style="color: white; padding-top: 0;">Lorem ipsum!</h5>
					Lorem ipsum.
				[/quote]
			[/s]

			[s]
				[quote pic="1" cite="tonvie" subcite="TF customer"]
					<h5 style="color: white; padding-top: 0;">Lorem ipsum!</h5>
					Lorem ipsum.
				[/quote]
			[/s]

		[/slider]
		<!-- end TESTMONIALS -->


	[/one_third]



[/raw]