How to Use Intro Unit
(Difference between revisions)
m |
m |
||
| (5 intermediate revisions by one user not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div class="row"> | <div class="row"> | ||
<div class="span12"> | <div class="span12"> | ||
| Line 12: | Line 7: | ||
</h1> | </h1> | ||
</div> | </div> | ||
| − | With PageLines 2.2, you can add an Intro Unit <a href="#">Section</a> to your website; a responsive, full width section with a simple headline and call to action. The Intro Unit forces the focus of your visitors onto your featured content, and a call to action with a simple button that directs traffic to any destination.<br> | + | </div> |
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="span7"> | ||
| + | <a class="btn btn-danger" href="#">New in PageLines 2.2</a> | ||
| + | <ul class="thumbnails unstyled"> | ||
| + | <li class="span7"> | ||
| + | <div class="thumbnail"> | ||
| + | <a href="#"> | ||
| + | <img class="pl-imageframe" src="http://placehold.it/300x250" alt="Place Holder"> | ||
| + | </a> | ||
| + | <div class="caption" style="text-align:center;"> | ||
| + | <p>Placeholder image for Intro Unit Content Image</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | <div class="span5"> | ||
| + | <div style="padding:10px; | ||
| + | background-color: transparent; | ||
| + | border-radius: 5px; | ||
| + | -moz-border-radius: 5px; | ||
| + | -moz-box-shadow: 0 0 5px #AAAAAA; | ||
| + | -webkit-box-shadow: 0 0 6px #AAAAAA; | ||
| + | box-shadow: 0 0 6px #AAAAAA;"> | ||
| + | <ul class="nav nav-list unstyled"> | ||
| + | <li class="nav-header">Other New Features</li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/How_to_Use_the_Grid">How to Use the Grid</a></li> | ||
| + | <li class="active"><a href="#">Intro Unit</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/How_to_Use_Masthead">Masthead</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/Bootstrap_Shortcodes_System">Bootstrap Shortcode System</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/Introducing_PageLESS">PageLESS CSS</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/How_to_Use_ScrollSpy">ScrollSpy</a></li> | ||
| + | <li><a href="http://www.pagelines.com/wiki/How_to_use_NavBar">NavBar</a></li> | ||
| + | <li class="divider"></li> | ||
| + | <li><a href="#">Help</a></li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="row"> | ||
| + | <div class="span12"> | ||
| + | With PageLines 2.2, you can add an Intro Unit <a href="#">Section</a> to your website; a responsive, full width section with a simple headline and call to action. The Intro Unit forces the focus of your visitors onto your featured content, and a call to action with a simple button that directs traffic to any destination.<br><br> | ||
<a href="http://www.pagelines.com/wiki/images/c/c5/IntroUnitFE.png"><img class="pl-imageframe" src="http://www.pagelines.com/wiki/images/thumb/c/c5/IntroUnitFE.png/800px-IntroUnitFE.png" alt="Intro Unit Demo!"></a> | <a href="http://www.pagelines.com/wiki/images/c/c5/IntroUnitFE.png"><img class="pl-imageframe" src="http://www.pagelines.com/wiki/images/thumb/c/c5/IntroUnitFE.png/800px-IntroUnitFE.png" alt="Intro Unit Demo!"></a> | ||
</div> | </div> | ||
| Line 33: | Line 71: | ||
<div class="thumbnail"> | <div class="thumbnail"> | ||
<a href="http://www.pagelines.com/wiki/images/b/b9/IntroUnitDrag.png"> | <a href="http://www.pagelines.com/wiki/images/b/b9/IntroUnitDrag.png"> | ||
| − | <img src="http://www.pagelines.com/wiki/images/thumb/b/b9/IntroUnitDrag.png/320px-IntroUnitDrag.png" alt="Intro Unit Drag & Drop Demonstration"> | + | <img class="pl-imageframe" src="http://www.pagelines.com/wiki/images/thumb/b/b9/IntroUnitDrag.png/320px-IntroUnitDrag.png" alt="Intro Unit Drag & Drop Demonstration"> |
</a> | </a> | ||
<div class="caption"> | <div class="caption"> | ||
| − | <p>The image above demonstrates that the Intro Unit can even be used in the "Morefoot" section.</p> | + | <p style="text-align:center;">The image above demonstrates that the Intro Unit can even be used in the "Morefoot" section.</p> |
</div> | </div> | ||
</div> | </div> | ||
| Line 45: | Line 83: | ||
<ul class="thumbnails unstyled"> | <ul class="thumbnails unstyled"> | ||
<li class="span5"> | <li class="span5"> | ||
| − | + | <div class="thumbnail"> | |
| − | + | <a href="http://www.pagelines.com/wiki/images/1/12/IntroUnitAdmin.png" class="thumbnail"> | |
| − | + | <img class="pl-imageframe" src="http://www.pagelines.com/wiki/images/thumb/1/12/IntroUnitAdmin.png/317px-IntroUnitAdmin.png" alt="Intro Unit Settings"> | |
| + | </a> | ||
| + | <div class="caption" style="text-align:center;"> | ||
| + | <p>Arrows 1, 2, and 3 correspond to the image above.</p> | ||
| + | </div> | ||
| + | </div> | ||
</li> | </li> | ||
| − | |||
</ul> | </ul> | ||
</div> | </div> | ||
Latest revision as of 03:31, 16 May 2012
The Intro Unit A Proper Hello, and Responsive to Boot.
New in PageLines 2.2
-
Placeholder image for Intro Unit Content Image
With PageLines 2.2, you can add an Intro Unit Section to your website; a responsive, full width section with a simple headline and call to action. The Intro Unit forces the focus of your visitors onto your featured content, and a call to action with a simple button that directs traffic to any destination.
From Conception to Finale How to make it happen
The Intro Unit can be customized in several ways and added to any page template throughout your site. Use it to draw attention to new content or draw traffic to an outside source with the ability to have the Button open up the page in a new window!
Now that we know how the Intro Unit works, let's take a quick lesson on how to achieve the best results.
Now that we know how the Intro Unit works, let's take a quick lesson on how to achieve the best results.
-
The image above demonstrates that the Intro Unit can even be used in the "Morefoot" section.
-
Arrows 1, 2, and 3 correspond to the image above.
