Get the Code
In the “Home Page Before Content” Widget Area a “Text” widget was used. Leave the Title field blank:
[custom_frame_center]
[/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]
<h2 style="color:#333;margin-top:0;font-size:36px !important;">What We Do…</h2>
<p>We create <strong>interactive, modern, eye-catching websites</strong>. We help you build strong <span style="color:#F95A09;">online presence</span> for your business by creating a <strong>professional website</strong> which best suits your needs and target audience.</p>
We’re passionate about helping businesses improve their <span style="color:#F95A09;">online user experience</span> and there for generate <span style="color:#F95A09;">more traffic</span>
to their website and <span style="color:#F95A09;">increase online sales</span>.
[/two_third]]
[[one_third_last]
<div style="margin-top:20px; color:#000; text-align:right; font-size:20px; font-style:italic;">"Creativity often consists merely turning up what is already there."</div>
<div style="text-align:right;"><span style="color:#F95A09;"> -Bernice Fitz-Gibbon</span></div>
[/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]
[/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]<img class="aligncenter" src="https://84×84-image-url-goes-here" alt=""/><div style="float:left;text-align:center;"><h3 style="margin:0 auto;padding-bottom:0;"><a href="#" title="SEO Optimized">SEO Optimized</a></h3>
<p style="float:left;text-align:left;">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"]
</p></div>
[/one_fourth]]
[[one_fourth]
<img class="aligncenter" src="https://84×84-image-url-goes-here" alt=""/><div style="float:left;text-align:center;"><h3 style="margin:0 auto;padding-bottom:0;"><a href="#" title="Solid Build">Solid Build</a></h3>
<p style="float:left;text-align:left;">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"]</p></div>
[/one_fourth]]
[[one_fourth]
<img class="aligncenter" src="https://84×84-image-url-goes-here" alt=""/><div style="float:left;text-align:center;"><h3 style="margin:0 auto;padding-bottom:0;"><a href="#" title="Choose your Color">Choose your Color</a></h3>
<p style="float:left;text-align:left;">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"]</p></div>
[/one_fourth]]
[[one_fourth_last]
<img class="aligncenter" src="https://84×84-image-url-goes-here" alt=""/><div style="float:left;text-align:center;"><h3 style="margin:0 auto;padding-bottom:0;"><a href="#" title="Ongoing Support">Ongoing Support</a></h3>
<p style="float:left;text-align:left;">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"]</p></div>
[/one_fourth_last]]
<div class="clear"> </div>
[[message type="simple" bg_color="#F7F7F7" color="#333333"]<blockquote>Create your unique looking website with the fresh and interactive design that uDesingn template offers.<a href="#" title="Choosing Your Fonts and Colors"> Learn more…</a></blockquote>[/message]]
<div class="clear"> </div>
[[one_third]
<h3>Why choose us?</h3>
[custom_list style="list-2"]
<ul>
<li><h5 style="margin-top:7px;color:#777;">Colorpick each element of the site</h5></li>
<li><h5 style="margin-top:7px;color:#777;">Background uploader for 5 areas</h5></li>
<li><h5 style="margin-top:7px;color:#777;">Widgitized Homepage</h5></li>
<li><h5 style="margin-top:7px;color:#777;">SEO Optimized</h5></li>
<li><h5 style="margin-top:7px;color:#777;">Solid and clean code</h5></li>
<li><h5 style="margin-top:7px;color:#777;">Ongoing support</h5></li>
</ul>
[/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]
<h3>Easy to Customise</h3>
<img class="alignleft" src="https://75×75-image-url-goes-here" alt=""/>
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]
<h3>Choose your Color</h3>
<img class="alignleft" src="https://75×75-image-url-goes-here" alt=""/>
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]
<h3>Attention to Details</h3>
<img class="alignleft" src="https://75×75-image-url-goes-here" alt=""/>
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]
<h3>Have a Question to Ask?</h3>
<img class="alignleft" src="https://75×75-image-url-goes-here" alt=""/>
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]]
<div class="clear"> </div>
[[one_fourth]
<h3>Easy to Customise</h3>
<img class="alignleft" src="https://75×75-image-url-goes-here" alt=""/>
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]
<h3>Choose your Color</h3>
<img class="alignleft" src="https://75×75-image-url-goes-here" alt=""/>
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]
<h3>Attention to Details</h3>
<img class="alignleft" src="https://75×75-image-url-goes-here" alt=""/>
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]
<h3>Have a Question to Ask?</h3>
<img class="alignleft" src="https://75×75-image-url-goes-here" alt=""/>
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]
<h3>Easy to Customise</h3>[custom_frame_left]<img src="https://180×100-image-url-goes-here" alt=""/>
[/custom_frame_left]<p style="margin-top: 10px; float: 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.</p>[small_button text="Read More" title="Read More" url="#" align="right"]
[/one_fourth]]
[[one_fourth]
<h3>Over 100 Fonts</h3>[custom_frame_left]<img src="https://180×100-image-url-goes-here" alt=""/>
[/custom_frame_left]<p style="margin-top: 10px; float: 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.</p>[small_button text="Read More" title="Read More" url="#" align="right"]
[/one_fourth]]
[[one_fourth]
<h3>Choose your Color</h3>[custom_frame_left]<img src="https://180×100-image-url-goes-here" alt=""/>
[/custom_frame_left]<p style="margin-top: 10px; float: 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.</p>[small_button text="Read More" title="Read More" url="#" align="right"]
[/one_fourth]]
[[one_fourth_last]
<h3>Creative Ideas</h3>[custom_frame_left]<img src="https://180×100-image-url-goes-here" alt=""/>
[/custom_frame_left]<p style="margin-top: 10px; float: 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.</p>[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]
<h4>Easy to Customise</h4>
<img class="alignleft" src="https://32×32-image-url-goes-here" alt=""/>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]
<h4>Functionality</h4>
<img class="alignleft" src="https://32×32-image-url-goes-here" alt=""/>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]
<h4>Attention to Details</h4>
<img class="alignleft" src="https://32×32-image-url-goes-here" alt=""/>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]
<h4>Have a Question?</h4>
<img class="alignleft" src="https://32×32-image-url-goes-here" alt=""/>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]]
<div class="clear"> </div>
[[one_fourth]
<h4>48 Fonts Available</h4>
<img class="alignleft" src="https://32×32-image-url-goes-here" alt=""/>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]
<h4>Choose your Color</h4>
<img class="alignleft" src="https://32×32-image-url-goes-here" alt=""/>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]
<h4>New Approach</h4>
<img class="alignleft" src="https://32×32-image-url-goes-here" alt=""/>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]
<h4>On Going Updates</h4>
<img class="alignleft" src="https://32×32-image-url-goes-here" alt=""/>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]]
<div class="clear"> </div>
[[divider]]
<blockquote>U-Design Template gives you the ability to create your unique looking WordPress website with a style of its own…</blockquote>
[[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]
<h3>Sample Title…</h3>
[custom_frame_left]
<img src="https://258×120-image-url-goes-here" alt=""/>
[/custom_frame_left]
<p style="margin-top: 10px; float: 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.</p>
[/one_third]]
[[one_third]
<h3>Sample Title…</h3>
[custom_frame_left]
<img src="https://258×120-image-url-goes-here" alt="" />
[/custom_frame_left]
<p style="margin-top: 10px; float: 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.</p>
[/one_third]]
[[one_third_last]
<h3>Sample Title…</h3>
[custom_frame_left]
<img src="https://258×120-image-url-goes-here" alt="" />
[/custom_frame_left]
<p style="margin-top: 10px; float: 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.</p>
[/one_third_last]]
[[divider]]
<blockquote>U-Design Template gives you the ability to create your unique looking WordPress website with a style of its own…</blockquote>
[[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]
<img src="https://280×207-image-url-goes-here" alt=""/><div style="float:left;text-align:center;"><h3><a href="#" title="100+ Fonts Available">100+ Fonts Available</a></h3>
<p style="float:left;text-align:center;">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.</p></div>
[/one_third]]
[[one_third]
<img src="https://280×207-image-url-goes-here" alt=""/><div style="float:left;text-align:center;"><h3><a href="#" title="Custom Color Control">Custom Color Control</a></h3>
<p style="float:left;text-align:center;">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.</p></div>
[/one_third]]
[[one_third_last]
<img src="https://280×207-image-url-goes-here" alt=""/><div style="float:left;text-align:center;"><h3><a href="#" title="Clean Modern Design">Clean Modern Design</a></h3>
<p style="float:left;text-align:center;">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.</p></div>
[/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]<img src="https://258×120-image-url-goes-here" alt=""/>[/custom_frame_left]
<div style="float:left;"><h4>Sample Title…</h4>
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.</div>
[small_button text="Read More" title="Read More" url="#" align="left"]
[/one_third]]
[[one_third]
[custom_frame_left]<img src="https://258×120-image-url-goes-here" alt=""/>
[/custom_frame_left]
<div style="float:left;"><h4>Sample Title…</h4>
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.</div>
[small_button text="Read More" title="Read More" url="#" align="left"]
[/one_third]]
[[one_third_last]
[custom_frame_left]<img src="https://258×120-image-url-goes-here" alt=""/>
[/custom_frame_left]
<div style="float:left;"><h4>Sample Title…</h4>
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.</div>
[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]
[/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):
<div style="color:#EEEEE; font-style:italic;">
321 Street Name, UK, London <br />
Phone: (1800) 765-4321 <br />
Fax: (1800) 765-4321
</div>
<div style="margin-top:10px; color:#3d6e97; font-style:italic;">
Website: https://yoursitename.com <br />
Email: info@yoursitename.com
</div>
<div class="social-icons">
<ul>
<li class="social_icon"><a href="https://twitter.com/home?status=Reading%20-%20https://your-website-url.com/" title="Twitter" target="_blank"><img src="https://your-website-url.com/wp-content/themes/u-design/styles/common-images/twitter-icon.png" alt="twitter" border="0" /></a></li>
<li class="social_icon"><a href="https://www.facebook.com/sharer.php?u=https://your-website-url.com/" title="Facebook" target="_blank"><img src="https://your-website-url.com/wp-content/themes/u-design/styles/common-images/facebook-icon.png" alt="facebook" border="0" /></a></li>
<li class="social_icon"><a href="https://www.linkedin.com/shareArticle?mini=true&url=CONTENT-URL&title=CONTENT-TITLE&summary=DEATILS-OPTIONAL&source=YOURWEBSITE-NAME" title="LinkedIn" target="_blank"><img src="https://your-website-url.com/wp-content/themes/u-design/styles/common-images/linkedin-icon.png" alt="linkedin" border="0" /></a></li>
<li class="social_icon"><a href="https://your-website-url.com/?page_id=5#contact-wrapper" title="E-mail"><img src="https://your-website-url.com/wp-content/themes/u-design/styles/common-images/email-icon.png" alt="email" border="0" /></a></li>
<li class="social_icon"><a href="https://your-website-url.com/?feed=rss" title="RSS" target="_blank"><img src="https://your-website-url.com/wp-content/themes/u-design/styles/common-images/rss-icon.png" alt="rss" border="0" /></a></li>
</ul>
</div>
// "Bottom 4" Widget Area: used a "Text" widget with plain text, nothing special about this column
[/code]
[/toggle_content]
[divider_top]
Other Resources:
[button text=”32×32 Icons Used in the Demo” title=”32×32 Icons Used in the Demo” style=”light” url=”https://www.tutorial9.net/downloads/108-mono-icons-huge-set-of-minimal-icons/” align=”left” target=”_blank”]