Docs

How to Use Intro Unit

[edit] Please Note

These docs are now deprecated, we have a new Support area located here

(Difference between revisions)
m
m
 
(27 intermediate revisions by one user not shown)
Line 2: Line 2:
 
<div class="row">
 
<div class="row">
 
<div class="span12">
 
<div class="span12">
−
<a class="btn btn-danger" href="#">New in PageLines 2.2</a>
+
<div class="page-header">
 +
<h1>The Intro Unit
 +
<small>A Proper Hello, and Responsive to Boot.</small>
 +
</h1>
 +
</div>
 
</div>
 
</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>
 
<div class="row">
 
<div class="row">
 
<div class="span12">
 
<div class="span12">
−
<div class="page-header">
+
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>
−
<h1>The Intro Unit</h1>
+
<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>
−
<small>A responsive full width image and text area with button</small>
+
−
</div>
+
−
<p>With PageLines 2.2, you can add an Intro Unit <a href="#">Section</a> to your website, forcing the focus of your visitors onto your featured content, and a call to action with with a simple button that directs traffic to any destination.
+
−
</p>
+
−
<img src="http://www.pagelines.com/wiki/images/d/df/Introunitdemo.jpg" alt="Intro Unit Demo!">
+
 
</div>
 
</div>
 
</div>
 
</div>
Line 19: Line 57:
 
<div class="span12">
 
<div class="span12">
 
<div class="page-header">
 
<div class="page-header">
−
<h1>Customize It</h1>
+
<h1>From Conception to Finale
−
<small>Focus Your Concept</small>
+
<small>How to make it happen</small>
 +
</h1>
 
</div>
 
</div>
 
</div>
 
</div>
Line 26: Line 65:
 
<div class="row">
 
<div class="row">
 
<div class="span7">
 
<div class="span7">
−
<p>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!
+
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!<br><br>
−
</p>
+
Now that we know how the Intro Unit works, let's take a quick lesson on how to achieve the best results.
−
<p>Now that we know what Intro Unit can do, let's take a quick lesson on how to achieve the best results.</p>
+
<ul class="thumbnails unstyled">
 +
<li class="span7">
 +
<div class="thumbnail">
 +
<a href="http://www.pagelines.com/wiki/images/b/b9/IntroUnitDrag.png">
 +
<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>
 +
<div class="caption">
 +
<p style="text-align:center;">The image above demonstrates that the Intro Unit can even be used in the "Morefoot" section.</p>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 
</div>
 
</div>
 
<div class="span5">
 
<div class="span5">
−
<div class="thumbnail">
+
<ul class="thumbnails unstyled">
−
<a href="http://www.pagelines.com/wiki/images/c/c1/Introunitsettings.jpg"><img src="http://www.pagelines.com/wiki/images/thumb/c/c1/Introunitsettings.jpg/314px-Introunitsettings.jpg" alt="Intro Unit Settings"></a>
+
  <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>
 +
</ul>
 +
</div>
 +
</div>
 +
<div class="row">
 +
<div class="span12">
 +
<div class="page-header">
 +
<h1>Customize It
 +
<small>Focus Your Concept</small>
 +
</h1>
 
</div>
 
</div>
−
</div>
+
</div>
 
</div>
 
</div>
 
</html>
 
</html>

Latest revision as of 03:31, 16 May 2012

The Intro Unit A Proper Hello, and Responsive to Boot.

New in PageLines 2.2
  • Place Holder

    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.

Intro Unit Demo!

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.
  • Intro Unit Drag & Drop Demonstration

    The image above demonstrates that the Intro Unit can even be used in the "Morefoot" section.

  • Intro Unit Settings

    Arrows 1, 2, and 3 correspond to the image above.

Customize It Focus Your Concept

Retrieved from "http://www.pagelines.com/wiki/index.php?title=How_to_Use_Intro_Unit&oldid=5297"