In this page you’ll find some of the content used to create the home page examples provided in this demo site.
The first section that immediately follows the slider is the “Home Page Before Content” Widget Area. In order to re-create that section you need to paste the code provided below into a “Text” widget added to the “Home Page Before Content” Widget Area. Leave the Title field blank. Here’s the code:
Home Page Before Content (Click here to grab the code behind this layout)
[two_third] <h2 style="color:#333;margin-top:0;font-size:36px !important;">Welcome to U-Design</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 therefore 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 of 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]
The next block contains the content unique to some of the home page examples. To use that code you need to create a new page, give it a name (ie. “Home”) and make sure to assign the “Full-width page” template to it to remove any sidebars:
IMPORTANT: make sure to paste the code in “Text” mode in the editor and not “Visual”.
Next, you’ll need to assign the page as a Front page, for that go to Settings > Reading choose the newly created “Home” page from the dropdown menu:
Home Page 1 Example (Click here to grab the code behind this layout)
<div style="margin: 20px 0 50px; float: left;">
[one_fourth]<img class="aligncenter" src="http://75x75-image-url-goes-here" alt=""/><div style="float:left;text-align:center;"><h3 style="margin:0 auto;padding-bottom:0;"><a href="#" title="SEO Review">SEO Review</a></h3>
<p style="float:left;text-align:left;">U-Design is WP 3.8+ ready and is designed keeping SEO in mind. This is evident by looking at the source code. The main content is positioned above the sidebar...
[read_more text="Read more" title="SEO's Review of U-Design WordPress Theme" url="" align="right"]
</p></div>
[/one_fourth]
[one_fourth]
<img class="aligncenter" src="http://75x75-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="http://75x75-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="http://75x75-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 or require assistance.
[read_more text="Read more" title="Read More..." url="" align="right"]</p></div>
[/one_fourth_last]
</div>
[clear]
[content_block bg_image="" max_bg_width="yes" bg_fixed="no" bg_position="center bottom" bg_repeat="repeat-x" parallax_scroll="no" bg_color="#293037" content_padding="30px 0 0" font_color="#FFFFFF" class="we-are-passionate-block"]
<div style="text-align: center;">
<h4 style="margin-bottom: 25px;"><span style="font-size: 36px; color:#FD7800; line-height:1.2;">Need a solid theme you can count on? Look no further!</span></h4>
<h5 style="margin-bottom: 20px;"><span style="font-size: 20px;color:#999999; line-height:1.5;">U-Design is a very powerful theme which suits both users with no programming background as well as advanced developers. It will help you build your site in no time to your liking with minimal effort.</span></h5>
</div>
<div style="font-size:1.2em; color:#A9A9A9;">
<div class="one_half">
<h4 style="margin-bottom:15px; color:#FFFFFF !important;"><strong>Why choose us?</strong></h4>
<ul class="list-2" style="color:#999999; font-size:17px !important; margin-top:20px;">
<li>Colorpick each element to create a unique look and feel</li>
<li>Background uploader for 5 areas, box or fluid layout</li>
<li>Responsive and Mobile Ready with Retina Ready images</li>
<li>SEO Optimized and compilable with top SEO plugins</li>
<li>Solid and clean code and ongoing updates you can count on</li>
<li>Best support money can buy</li>
<li>Woo Commerce compatibility </li>
<li>100% Translation & Multilingual Ready</li>
</ul>
[one_half][flat_button text="SEE LIST OF FEATURES" title="See list of Features" url="#" padding="10px 20px" bg_color="#FD7800" border_color="#eb6f00" border_width="1px" text_color="#FFFFFF" text_size="13px" align="center"][/one_half]
[one_half_last][flat_button text="BUY U-DESIGN THEME!" title="Buy 'U-Design' Theme Now!" url="#" padding="10px 20px" bg_color="transparent" border_color="#FFFFFF" border_width="1px" text_color="#FFFFFF" text_size="13px" align="center" target="_blank"][/one_half_last]
</div>
<div class="one_half last_column" style="margin-bottom:0;">
<img style="margin-bottom:0;" class="alignright" alt="FeaturePage211" src="http://450x450-image-url-goes-here" />
</div>
</div>
[/content_block]
[content_block bg_image="" max_bg_width="yes" bg_fixed="yes" bg_position="center bottom" bg_repeat="no-repeat" parallax_scroll="no" bg_color="#ffffff" content_padding="40px 0 40px" font_color="#777777"]
<div style="text-align: center;">
<h4 style="margin: 35px 0 25px;"><span style="font-size: 34px; color:#777777; line-height:1.2;">Explore the Endless Possibilities in a Single Theme!</span></h4>
<h5><span style="font-size: 18px;color:#999999; line-height:1.5;">U-Design is a modern, clean and super flexible multi-purpose WordPress theme. It offers all the tools you need to create a unique looking site for any business. It is constantly improved with new features and functionality. Power you site with the <strong>Best Selling</strong> U-Design and get all the features you will need!</span></h5>
</div>
[clear]
[one_third]
<div style="margin-top: 30px;">
<img alt="image 1" class="aligncenter" src="http://600x345-image-url-goes-here" />
<div style="float: left; text-align: center;">
<h3><a title="U-Design Showcase" href="#">U-Design Showcase</a></h3>
<p style="float: left; text-align: center;">The possibilities are truly endless so take a look at what other have done using the U-Design them and decide for yourself. No two websites made with U-Design will ever look the same.</p>
</div>
[flat_button text="TELL ME MORE ABOUT THAT" title="TELL ME MORE ABOUT THAT" url="#" padding="10px 20px" bg_color="#FD7800" border_color="#eb6f00" border_width="1px" text_color="#FFFFFF" text_size="13px" align="center"]
</div>
[/one_third]
[one_third]
<div style="margin-top: 30px;">
<img alt="image 2" class="aligncenter" src="http://600x345-image-url-goes-here" />
<div style="float: left; text-align: center;">
<h3><a title="WooCommerce Integration" href="#">WooCommerce Integration</a></h3>
<p style="float: left; text-align: center;">U-Design theme is now fully compatible with WooCommerce! A demo site has been setup <a target="_blank" title="Go to the Shop demo..." href="#">HERE</a> to demonstrate the U-Design - WooCommerce plugin integration. Start selling your products today.</p>
</div>
[flat_button text="TELL ME MORE ABOUT THAT" title="TELL ME MORE ABOUT THAT" url="#" padding="10px 20px" bg_color="#FD7800" border_color="#eb6f00" border_width="1px" text_color="#FFFFFF" text_size="13px" align="center" target="_blank"]
</div>
[/one_third]
[one_third_last]
<div style="margin-top: 30px;">
<img alt="image 3" class="aligncenter" src="http://600x345-image-url-goes-here" />
<div style="float: left; text-align: center;">
<h3><a title="Support and Documentation" href="#">Support and Documentation</a></h3>
<p style="float: left; text-align: center;">U-Design theme has been known for outstanding 24/7/365 support and extensive documentation. You get access to a support forum packed with useful information to help you setup your site.</p>
</div>
[flat_button text="TELL ME MORE ABOUT THAT" title="TELL ME MORE ABOUT THAT" url="#" padding="10px 20px" bg_color="#FD7800" border_color="#eb6f00" border_width="1px" text_color="#FFFFFF" text_size="13px" align="center"]
</div>
[/one_third_last]
<div style="float: left; display: block; height: 15px;"></div>
[/content_block]
[clear]
[content_block bg_image="http://1980x850-background-image-url-goes-here" max_bg_width="yes" bg_fixed="yes" bg_position="center bottom" bg_repeat="no-repeat" parallax_scroll="no" bg_color="#24292E" content_padding="50px 0 55px" font_color="#EEEEEE"]
<div style="text-align: center;">
<h4 style="margin-bottom: 20px;"><span style="font-size: 38px; color:#fff; line-height: 1;">Users Reviews:</span></h4>
<h4 style="margin-bottom: 20px;"><span style="font-size:24px; color:#fff; line-height: 1;">Join the <span style="color:#F95700;">35 000 + </span>Happy Users of U-Design Theme and see why they <span style="color:#F95700;">love</span> it so much!</span></h4>
<h5 style="margin-bottom: 10px;"><span style="font-size: 20px;color:#999; line-height: 1.5;"><em>"Seriously this is the most versatile and customizable theme, and ON TOP of that, internq7 provides AMAZING support with quick response times. I have purchased many themes and frameworks from themeforest, and have dealt with many of the other designers/developers, internq7 gets 5 out of 5 stars for quality of design, service and support."</em></span> <span style="color:#FFFFFF; font-style:normal; font-weight:bold; font-size:85%;">-- Consultoria</span></h5>
</div>
<div style="text-align: center; margin-top: 20px;"><a href="#"><span style="font-size: 16px; font-style: italic;">More User Reviews...</span></a></div>
[/content_block]
<div style="margin-bottom: -35px;">
[content_block bg_color="#FD7800" max_bg_width="yes" content_padding="35px 0" font_color="#FFFFFF" class="custom-padding"]
<h3 style="float:left; display: inline-block; margin:10px 0; font-size:27px !important; line-height:1.2; color:#FFF;">Get U-Design multi-purpose WordPress theme on ThemeForest!</h3>
[flat_button text="Buy 'U-Design' Theme Now!" title="Buy the 'U-Design' Theme Now" url="#" padding="15px 20px" bg_color="transparent" border_color="#FFFFFF" border_width="2px" text_color="#FFFFFF" text_size="16px" align="right" target="_blank"]
[/content_block]
</div>
Home Page 5 Example (Click here to grab the code behind this layout)
[one_third] <img class="aligncenter" src="http://280x207-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 class="aligncenter" src="http://280x207-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 class="aligncenter" src="http://280x207-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]
Home Page with some of the Sliders' examples located under the Features → Sliders menu (Click here to grab the code)
[one_fourth]<img class="aligncenter" src="http://84x84-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="http://84x84-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="http://84x84-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="http://84x84-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]
[clear]
[message type="simple" bg_color="#F7F7F7" color="#333333"]<blockquote><p>Create your unique looking website with the fresh and interactive design that uDesign template offers. <a href="#" title="Choosing Your Fonts and Colors">Learn more...</a></p></blockquote>[/message]
[clear]
[one_third]
<h3>Why choose us?</h3>
[custom_list style="list-2"]
<ul>
<li>Colorpick each element of the site</li>
<li>Background uploader for 5 areas</li>
<li>Widgitized Homepage</li>
<li>SEO Optimized</li>
<li>Solid and clean code</li>
<li>Ongoing support</li>
</ul>
[/custom_list][/one_third]
[two_third_last]
[udesign_recent_posts title="Explore the endless possibilities" category_id="1" 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]
For Home Page 2, 3 and 4 Examples the code can be found near the bottom of the actual pages.
Alternatively, if you prefer to work with widgets rather than a page, you may past the above code into a “Text” widget in this widget area for example:
The following describes how I’ve setup the Bottom Area Widgets (the four columns):
Bottom Area Widgets (Click here to grab the code behind this layout)
// "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="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: http://example.com <br />
Email: [email protected]
</div>
<div class="social-icons">
<ul>
<li class="social_icon"><a href="https://twitter.com/" title="Twitter" target="_blank"><img src="http://www.example.com/wp-content/themes/u-design/assets/images/twitter-icon.png" alt="twitter" border="0" /></a></li>
<li class="social_icon"><a href="https://www.facebook.com/" title="Facebook" target="_blank"><img src="http://www.example.com/wp-content/themes/u-design/assets/images/facebook-icon.png" alt="facebook" border="0" /></a></li>
<li class="social_icon"><a href="https://www.linkedin.com/" title="LinkedIn" target="_blank"><img src="http://www.example.com/wp-content/themes/u-design/assets/images/linkedin-icon.png" alt="linkedin" border="0" /></a></li>
<li class="social_icon"><a href="http://www.example.com/?page_id=5#contact-wrapper" title="E-mail"><img src="http://www.example.com/wp-content/themes/u-design/assets/images/email-icon.png" alt="email" border="0" /></a></li>
<li class="social_icon"><a href="http://www.example.com/?feed=rss" title="RSS" target="_blank"><img src="http://www.example.com/wp-content/themes/u-design/assets/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
RECENT COMMENTS