Layouts

Content

Description

Custom layouts are the pages built with custom shortcodes and HTML data.

Usage

Copy & paste these examples. Do modify the examples in accordance to your needs.

Examples

  • Corporate
  • Online Magazine
  • Community
Screenshot About Live Preview
Description

Clean layout for corporate website.

Features
  • 4 animated buttons for hot features
  • About us
  • Why us
  • A list of features
  • Featured testimonials
  • Easy to rearrange
Live Preview Corporate layout
Get a shortcode
[raw]

	<div class="mt-10"> <!-- Remove a 10px of gap --> </div>

	<div class="gray-contentbox">

		[clear h="25"]

		[one_fourth]
			[icon60 url="#" bg="EEE" bg_ico_hover="0f53ff"] Use a Generator of Shortcodes [/icon60]
		[/one_fourth]

		[one_fourth]
			[icon60 url="#" bg="EEE" bg_ico_hover="6cb100" ico="2"] Keep Control over the Frontpage [/icon60]
		[/one_fourth]

		[one_fourth]
			[icon60 url="#" bg="EEE" bg_ico_hover="ffae00" ico="3"] Get a Better Results [/icon60]
		[/one_fourth]
		
		[one_fourth m="10"]
			[icon60 url="#" bg="EEE" bg_ico_hover="ff0060" ico="4"] Save Your Time & Money [/icon60]
		[/one_fourth]

		[clear h="25"]

	</div>

	[clear h="25"]

		[one_fourth]

			<h4> What is TB?</h4>

			[line]

			[clear h="5"]

			<p> <img src="/wp-content/themes/topbusiness/_temp/browsers.png"> </p>

			<p> TB is an advanced WordPress Theme with BuddyPress compatibility. It's fully functional tool to start business online.</p>

		[/one_fourth]

		[one_fourth]

			<h4> Why TB?</h4>

			[line]

			<p> Need to have corporate website, product portfolio or landing page? TB allows you to make your unique layouts by using shortcodes, visual shortcode editor, style editor.</p>

			<p> Having needs to make contact with customers? Build a full-fledged community into website and interact with them through groups, forums, status, messaging.</p>

		[/one_fourth]

		[one_fourth]

			<h4> Features</h4>

			[line]

			[ul bullit="accept.png"]
				<ul>
					<li> <p> <a href="#"> Own unique layouts</a> </p> </li>
					<li> <p> <a href="#"> BuddyPress & bbPress ready</a> </p> </li>
					<li> <p> <a href="#"> Custom type posts</a> </p> </li>
					<li> <p> <a href="#"> Shortcodes visual editor</a> </p> </li>
					<li> <p> <a href="#"> Built-in slider</a> </p> </li>
					<li> <p> <a href="#"> SEO optimized</a> </p> </li>
					<li> <p> <a href="#"> Extended documentation</a> </p> </li>
				</ul>
			[/ul]

		[/one_fourth]

		[one_fourth m="0"]

			<h4> Testimonials <span class="inline f11 fr"> <a href="#"> View all »</a> </span> </h4>

			[line]

			[clear h="5"]

			[slider height="160"]
	
				[s]
					[quote bg="EEE" color="555" pic="1" cite="tonvie" subcite="TF customer"] "I just purchased and am so excited about this theme! The admin is so incredible!" [/quote]
				[/s]

				[s]
					[quote bg="EEE" color="555" pic="5" cite="ovey" subcite="TF customer"] "The theme is great, but the support was even better! Thanks." [/quote]
				[/s]

				[s]
					[quote bg="EEE" color="555" pic="2" cite="tonvie" subcite="TF customer"] "Thanks Karina, I have given you 5 stars for your excellent support! Cheers!" [/quote]
				[/s]
	
				[s]
					[quote bg="EEE" color="555" pic="3" cite="paulhynek" subcite="TF customer"] "Thank you for a very nice theme. I’m very happy with it." [/quote]
				[/s]
	
			[/slider]

		[/one_fourth]

	[clear h="30"]

[/raw]
Screenshot About Live Preview
Description

Clean layout for online magazine.

Features
  • Animated slider with featured posts
  • Recent posts
  • More featured posts
  • List of posts from selected categories
  • Easy to rearrange
Live Preview Online Magazine layout
Get a shortcode
[raw]



	<div class="gray-contentbox mt-10" style="border-radius:3px 0 0 0; padding:25px 25px 0;">

		[posts2 qty="5" cat="1" transition="pth" autoplay="7" date="no" titletag="h2"]

	</div>



	[clear h="25"]



	<h4>Recent Posts</h4>

	[line]

	[clear h="5"]

	[posts qty="3" w="590px" m="0 25px 0 0" grid="3" t="left" tw="170" th="170" excerpt="yes" date="yes" postedin="yes"]



	[clear h="25"]



	<div class="gray-contentbox">

		[clear h="20"]

		<h4>Another Featured Post</h4>
	
		[line]

		[clear h="5"]

		[posts qty="9" w="580px" m="0 10px 0 0" grid="9" t="left" tw="50" th="50" title="no" resp="no"]

		[clear h="10"]

	</div>



	[clear h="25"]



	[one_half]

		<h4><a href="http://topbusiness.pandathemes.com/blog/category/business/">Business</a></h4>
	
		[line]

		[clear h="5"]

		[posts qty="4" cat="23" t="left" tw="50" th="50" date="yes" comments="yes" titletag="div"]

	[/one_half]



	[one_half m="0"]

		<h4><a href="http://topbusiness.pandathemes.com/blog/category/culture/">Culture</a></h4>
	
		[line]

		[clear h="5"]

		[posts qty="4" cat="26" t="left" tw="50" th="50" date="yes" comments="yes" titletag="div"]

	[/one_half]



	[clear h="25"]



	<h4><a href="http://topbusiness.pandathemes.com/blog/category/travel/">Travel</a></h4>

	[line]

	[clear h="5"]

	[posts qty="4" cat="24" w="560px" m="0 25px 10px 0" grid="2" t="left" tw="80" th="80" excerpt="yes"]



[/raw]
Screenshot About Live Preview
Description

Clean layout for community.

Features
  • Welcome video
  • Community features
  • What people say
  • List of members and groups
  • Recent posts within network
  • Easy to rearrange
Live Preview Community layout
Get a shortcode
[raw]


	[one_half align="center"]

		<div style="padding:25px;">

			<h2>BuddyPress Social networking</h2>
	
			<p class="f120">Turning an average blog into a full-featured Social Media Network. Buddypress is everything you need to start your WordPress-powered community.</p>
	
			[clear h="10"]
	
			[bbutton url="http://topbusiness.pandathemes.com/pages-2/sign-up-page-goes-here/" tagline="Join us today. 100% FREE." bg="8EAF00"] Create an account [/bbutton]
	
			[clear h="15"]
	
			<p>or <a href="http://topbusiness.pandathemes.com/wp-admin/">Log In</a> in case you've an account.</p>
	
			[clear h="15"]

		</div>

	[/one_half]



	[one_half m="0"]

		[clear h="30"]

		<div class="video-container"><iframe width="435" height="251" src="http://www.youtube.com/embed/6tmOiQlsUHA?wmode=transparent" frameborder="0" allowfullscreen></iframe></div>

		[clear h="40"]

	[/one_half]



	[clear]



	<div class="gray-contentbox">

		[clear h="15"]

		<table>
			<tr>
				<td width="33%">
					[icon60 url="http://topbusiness.pandathemes.com/pages-2/sign-up-page-goes-here/" w="60px" m="10px auto" bg_ico_hover="8EAF00" ico="2"][/icon60]
					<p class="f15 center" style="padding:0 15%;"> Interact through groups, forums, blogs, friends, status updates </p>
				</td>
				<td width="33%">
					[icon60 url="http://topbusiness.pandathemes.com/pages-2/sign-up-page-goes-here/" w="60px" m="10px auto" bg_ico_hover="ff4095" ico="4"][/icon60]
					<p class="f15 center" style="padding:0 15%;"> View activity streams: threaded commenting, status updates, favorites </p>
				</td>
				<td width="33%">
					[icon60 url="http://topbusiness.pandathemes.com/pages-2/sign-up-page-goes-here/" w="60px" m="10px auto" ico="8"][/icon60]
					<p class="f15 center" style="padding:0 15%;"> Change their account information without access to administration area </p>
				</td>
			</tr>
		</table>

		[clear h="10"]

	</div>



	[clear h="40"]



	[one_fourth]
		[quote cite="Lisa Green" subcite="member" src="http://topbusiness.pandathemes.com/wp-content/uploads/avatars/9/b341688fe2a1b826f991fcf334d4e11b-bpfull.jpg" bg="f1f0e1" color="444"]
			I really like BuddyPress, its really easy to install and configure and provides a social network with all the main features.
		[/quote]
	[/one_fourth]

	[one_fourth]
		[quote cite="John Doe" subcite="member" src="http://topbusiness.pandathemes.com/wp-content/uploads/avatars/7/8e7c22fc95b401b708dcc013cd3d1d31-bpfull.jpg" bg="f1f0e1" color="444"]
			BuddyPress is overkill, it's great to make your own Facebook type site. BP's intention is to let you build your own network. 
		[/quote]
	[/one_fourth]

	[one_fourth]
		[quote cite="Phill Brandson" subcite="member" src="http://topbusiness.pandathemes.com/wp-content/uploads/avatars/4/fbec49b641bba9967d4f3d2338cd5ca0-bpfull.jpg" bg="f1f0e1" color="444"]
			I love BuddyPress! My team mates are free to create posts as they please and I dont have to do that much moderation anymore. 
		[/quote]
	[/one_fourth]

	[one_fourth m="0"]
		[quote cite="Mark Jacobs" subcite="member" bg="f1f0e1" color="444"]
			I have to say, I love it! I've been working with a charity to redevelop their site into a fully fledged social network. BP is awesome for a job like this .
		[/quote]
	[/one_fourth]



	[clear h="40"]
	[divider]
	[clear h="40"]



	[one_fourth]
		[sidebar name="Side 2"]
	[/one_fourth]

	[one_half]
		[sidebar name="Side 3"]
	[/one_half]

	[one_fourth m="0"]
		[sidebar name="Side 4"]
	[/one_fourth]



	[clear h="50"]


[/raw]

How to build and activate the custom layout

By default the homepage looks like a standard blog (Recent Posts + Sidebar). But you are not limited to the default settings; feel free to set any page as homepage by following these steps:

  1. Create a new page at Admin Panel > Pages > Add New.
    • Fill it with content. You can even use this page as a base for your own layout.
    • Select Blank page template.
    • Select a custom sidebar or deactivate it, depending on your needs.
    • Click Publish.
  2. Go to Admin Panel > Settings > Reading
    • Select the page you've created and save changes.
  3. And that's it! Your own custom layout has been created.

2013 © Your Company Name
TopBusiness Premium WordPress theme by PandaThemes