Get the Code

In the “Home Page Before Content” Widget Area a “Text” widget was used. Leave the Title field blank:

[custom_frame_center]
Home Page Before Content Widget Area
[/custom_frame_center]
[toggle_content title=”Home Page Before Content (Click here to grab the code behind this layout)”]

[code language=”xhtml” gutter=”false” tabsize=”4″ toolbar=”true”]
[two_third]

What We Do…

We create interactive, modern, eye-catching websites. We help you build strong online presence for your business by creating a professional website which best suits your needs and target audience.

We’re passionate about helping businesses improve their online user experience and there for generate more traffic
to their website and increase online sales.
[/two_third]
[one_third_last]

“Creativity often consists merely turning up what is already there.”
-Bernice Fitz-Gibbon

[/one_third_last]
[/code]
[/toggle_content]

[divider]

For the rest of page examples, below are the corresponding content area source code used with a “Text” widget:

[custom_frame_center]
Bottom Area Widgets
[/custom_frame_center]

[toggle_content title=”Home Page 1 Example (Click here to grab the code behind this layout)”]
[code language=”xhtml” gutter=”false” tabsize=”4″ toolbar=”true”]
[one_fourth]

SEO Optimized

Search Engine Optimization has been made a priority when designing the uDESIGN theme. In the code hierarchy, the main content block is placed before the sidebar.

[read_more text=”Read more” title=”Read More…” url=”” align=”right”]

[/one_fourth]
[one_fourth]

Solid Build

It’s fun and easy to create your professional looking website using uDESIGN. Give your website a unique style that helps you get Your message across.

[read_more text=”Read more” title=”Read More…” url=”” align=”right”]

[/one_fourth]
[one_fourth]

Choose your Color

One of the best features of uDESIGN is choosing your colors and uploading image from the backend. You can completely change the look of your site in seconds.

[read_more text=”Read more” title=”Read More…” url=”” align=”right”]

[/one_fourth]
[one_fourth_last]

Ongoing Support

We are dedicated to offer you the best service with support and updates you can rely on. Do not hesitate to contact us should you have any questions.

[read_more text=”Read more” title=”Read More…” url=”” align=”right”]

[/one_fourth_last]

[[message type=”simple” bg_color=”#F7F7F7″ color=”#333333″]

Create your unique looking website with the fresh and interactive design that uDesingn template offers. Learn more…

[/message]]

[one_third]

Why choose us?

[custom_list style="list-2"]
  • Colorpick each element of the site
  • Background uploader for 5 areas
  • Widgitized Homepage
  • SEO Optimized
  • Solid and clean code
  • Ongoing support

[/custom_list][/one_third]
[two_third_last]
[udesign_recent_posts title=”Explore the endless possibilities” category_id=”9″ num_posts=”2″ post_offset=”0″ num_words_limit=”32″ show_date_author=”0″ show_more_link=”1″ thumb_frame_shadow=”0″ post_thumb_width=”140″ post_thumb_height=”85″]
[/two_third_last]
[/code]
[/toggle_content]

[toggle_content title=”Home Page 2 Example (Click here to grab the code behind this layout)”]
[code language=”xhtml” gutter=”false” tabsize=”4″ toolbar=”true”]
[one_fourth]

Easy to Customise


Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth]

Choose your Color


Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth]

Attention to Details


Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth_last]

Have a Question to Ask?


Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth_last]

[one_fourth]

Easy to Customise


Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth]

Choose your Color


Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth]

Attention to Details


Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth_last]

Have a Question to Ask?


Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth_last]
[/code]
[/toggle_content]

[toggle_content title=”Home Page 3 Example (Click here to grab the code behind this layout)”]
[code language=”xhtml” gutter=”false” tabsize=”4″ toolbar=”true”]
[one_fourth]

Easy to Customise

[custom_frame_left]
[/custom_frame_left]

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[small_button text=”Read More” title=”Read More” url=”#” align=”right”]
[/one_fourth]
[one_fourth]

Over 100 Fonts

[custom_frame_left]
[/custom_frame_left]

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[small_button text=”Read More” title=”Read More” url=”#” align=”right”]
[/one_fourth]
[one_fourth]

Choose your Color

[custom_frame_left]
[/custom_frame_left]

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[small_button text=”Read More” title=”Read More” url=”#” align=”right”]
[/one_fourth]
[one_fourth_last]

Creative Ideas

[custom_frame_left]
[/custom_frame_left]

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[small_button text=”Read More” title=”Read More” url=”#” align=”right”]
[/one_fourth_last]
[/code]
[/toggle_content]

[toggle_content title=”Home Page 4 Example (Click here to grab the code behind this layout)”]
[code language=”xhtml” gutter=”false” tabsize=”4″ toolbar=”true”]
[one_fourth]

Easy to Customise

Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth]

Functionality

Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth]

Attention to Details

Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth_last]

Have a Question?

Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth_last]

[one_fourth]

48 Fonts Available

Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth]

Choose your Color

Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth]

New Approach

Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth]
[one_fourth_last]

On Going Updates

Lorem ipsum dolor sit amet, con secte tuer adipi scing elit. Amagnis dis parturient montes.
Aenean com modo ligula eget dolor. Aen ean massa.
[/one_fourth_last]

[[divider]]

U-Design Template gives you the ability to create your unique looking WordPress website with a style of its own…

[[divider]]
[/code]
[/toggle_content]

[toggle_content title=”Home Page 5 Example (Click here to grab the code behind this layout)”]
[code language=”xhtml” gutter=”false” tabsize=”4″ toolbar=”true”]
[one_third]

Sample Title…

[custom_frame_left]

[/custom_frame_left]

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[/one_third]
[one_third]

Sample Title…

[custom_frame_left]

[/custom_frame_left]

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[/one_third]
[one_third_last]

Sample Title…

[custom_frame_left]

[/custom_frame_left]

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[/one_third_last]
[[divider]]

U-Design Template gives you the ability to create your unique looking WordPress website with a style of its own…

[[divider]]
[/code]
[/toggle_content]

[toggle_content title=”Home Page 6 Example (Click here to grab the code behind this layout)”]
[code language=”xhtml” gutter=”false” tabsize=”4″ toolbar=”true”]
[one_third]

100+ Fonts Available

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[/one_third]
[one_third]

Custom Color Control

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[/one_third]
[one_third_last]

Clean Modern Design

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[/one_third_last]
[/code]
[/toggle_content]

[toggle_content title=”Home Page 7 Example (Click here to grab the code behind this layout)”]
[code language=”xhtml” gutter=”false” tabsize=”4″ toolbar=”true”]
[one_third]
[custom_frame_left][/custom_frame_left]

Sample Title…

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[small_button text=”Read More” title=”Read More” url=”#” align=”left”]
[/one_third]
[one_third]
[custom_frame_left]
[/custom_frame_left]

Sample Title…

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[small_button text=”Read More” title=”Read More” url=”#” align=”left”]
[/one_third]
[one_third_last]
[custom_frame_left]
[/custom_frame_left]

Sample Title…

Lorem ipsum dolor sit amet etesom, consectetuer adipiscing elit dom et. Aennean commodo ligula eget son dolor. Aenean madssa. Cum sociis natoque penatibus et magdfnis disc partut montes.

[small_button text=”Read More” title=”Read More” url=”#” align=”left”]
[/one_third_last]
[/code]
[/toggle_content]
The shortcode based column layout described above is only one way of implementing columns on the home page. Feel free to experiment with all Home page widget areas, for example you can use Widget areas alone to create one, two, three or four column layouts.

[divider_top]

The following describes how I’ve setup the Bottom Area Widgets (the four columns):

[custom_frame_center]
Bottom Area Widgets
[/custom_frame_center]
[toggle_content title=”Bottom Area Widgets (Click here to grab the code behind this layout)”]
[code language=”php” gutter=”false” tabsize=”4″ toolbar=”true”]
// “Bottom 1” Widget Area: used the “U-Design: Recent Posts” widget
// “Bottom 2” Widget Area: used the “Recent Posts” and “Recent Comments” widgets
// “Bottom 3” Next is the “Address” info (don’t forget to replace ‘your-website-url.com’ with your own site’s url below):

321 Street Name, UK, London
Phone: (1800) 765-4321
Fax: (1800) 765-4321
Website: http://yoursitename.com
Email: info@yoursitename.com

// “Bottom 4” Widget Area: used a “Text” widget with plain text, nothing special about this column
[/code]
[/toggle_content]

[divider_top]

Other Resources: