Just another Solostream Demo Sites site

Duplicate the Demo Site Alternate Home Page

By on November 26, 2012 in Tutorials with 0 Comments

The alternate home page of this demo site is created using the Alternate Home Page template, which is a fully widgetized page. In this brief tutorial, we’ll give you the specific widgets and/or code that we used for each widget.

Alternate Home Page Widgetized Areas

In your WP dashboard, click Appearance >> Widgets, and you will see 5 different widgetized areas for the Alternate Home Page.

1. Alt Home Page Full-Width Top
2. Alt Home Page Left (One-Third Width)
3. Alt Home Page Middle (One-Third Width)
4. Alt Home Page Right (One-Third Width)
5. Alt Home Page Full-Width Bottom

Specific Widgets Used in Each Area

Alt Home Page Full-Width Top

1. Widget 1: Full-Width Featured Pages Slider

2. Widget 3: Text Widget with the Following Code:


<div class="one-third first">
<h3 class="widgettitle">Who We Are</h3>
<img src="https://demo.solostream.com/wp-brilliance/wp-content/uploads/2011/04/photodune-431529-business-people-m-e1354386130675-150x150.jpg" alt="Business people" width="150" height="150" class="alignright size-thumbnail wp-image-1574" />Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... <a href=#">Read More</a></div>
<div class="one-third">
<h3 class="widgettitle">What We Do</h3>
<img src="https://demo.solostream.com/wp-brilliance/wp-content/uploads/2011/04/photodune-1531858-black-binoculars-m-e1354386615155-150x150.jpg" alt="Black binoculars" width="150" height="150" class="alignright size-thumbnail wp-image-1575" />Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... <a href=#">Read More</a></div>
<div class="one-third">
<h3 class="widgettitle">How We Do It</h3>
<img src="https://demo.solostream.com/wp-brilliance/wp-content/uploads/2009/12/iStock_000018993839Small1-150x150.jpg" alt="Silhouette of hiking man jumping over the mountains" width="150" height="150" class="alignright size-thumbnail wp-image-1156" />Pellentesque enim. Sed et leo nec augue mollis pharetra. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Lorem ipsum dolor sit amet, consectetuer adipiscing elit  ... <a href=#">Read More</a></div>

4. Widget 4: Line Break Widget

Alt Home Page Left

1. Widget 1: Featured Post Widget

Alt Home Page Middle

1. Widget 1: Subscribe Box Widget

Alt Home Page Right

1. Widget 1: Featured Page Widget

Alt Home Page Full-Width Bottom

1. Widget 1: Line Break Widget

2. Widget 2: Featured Category Slider

3. Widget 3: Text Widget with the Following Code:


<div class="two-thirds first">
<div class="mapembed-wrap">
<div class="mapembed">
            <iframe width="720" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Fenway+Park,+Yawkey+Way,+Boston,+MA&amp;aq=1&amp;oq=Fenway+&amp;sll=41.557317,-71.497914&amp;sspn=1.469456,3.56781&amp;ie=UTF8&amp;hq=Fenway+Park,&amp;hnear=Yawkey+Way,+Boston,+Suffolk,+Massachusetts+02215&amp;t=m&amp;cid=11709374198378550532&amp;ll=42.355309,-71.095533&amp;spn=0.031714,0.061884&amp;z=14&amp;output=embed"></iframe>
<small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Fenway+Park,+Yawkey+Way,+Boston,+MA&amp;aq=1&amp;oq=Fenway+&amp;sll=41.557317,-71.497914&amp;sspn=1.469456,3.56781&amp;ie=UTF8&amp;hq=Fenway+Park,&amp;hnear=Yawkey+Way,+Boston,+Suffolk,+Massachusetts+02215&amp;t=m&amp;cid=11709374198378550532&amp;ll=42.355309,-71.095533&amp;spn=0.031714,0.061884&amp;z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small></div>
</div>
</div>
<div class="one-third">
<div class="contactinfo">
<div class="contactinfo-inner">
<h4>Contact Information</h4>
<span class="name">Jane Q. Smith</span>
            <span class="phone">555-555-5555</span>
            <span class="email"><a href="mailto:[email protected]">Email</a></span>
            <span class="address">123 John St. New York, NY 99999</span>
            <span class="addinfo">This is the place to list additional info such as store hours or whatever you like.</span></div>
</div>
</div>

4. Widget 4: Line Break Widget

5. Widget 5: Text Widget with the Following Code:


<div class="two-thirds first">
<div class="testimonial">
        "Lorem ipsum dolor sit amet, id falli inermis duo, mea agam clita nostrud et. Vim ei dicit facete, his aliquam accusamus repudiandae id. Ne stet tracta tos vis. Vel ei autem velit. Te ius ridens everti, est alii epicuri an. Insolens dignissim aliquando ad eos. d mea labore virtute dissentiunt. Utroque periculis percipitur ei seat leon ibiza. Lorem ipsum dolor sit amet, id falli inermis duo."

        <span class="test-author"><a href="">John Smith - Some Company, Inc.</a></span></div>
</div>
<div class="one-third">
<div class="testimonial small">
        "Lorem ipsum dolor sit amet, id falli inermis duo, mea agam clita nostrud et."
        <span class="test-author"><a href="">Jane Smith - Company, Inc.</a></span></div>
<div class="testimonial small">
        "Lorem ipsum dolor sit amet, id falli inermis duo, mea agam clita nostrud et."
        <span class="test-author"><a href="">Jill Smith - MyCompany, Inc.</a></span></div>
</div>

6. Widget 6: Line Break Widget

7. Widget 7: Text Widget with the Following Code:


<div class="banner468" style="margin:0;">
    <a href="#"><img src="https://demo.solostream.com/wp-brilliance//banner728.jpg" alt ="" /></a></div>

8. Widget 8: Line Break Widget

9. Widget 9: Text Widget with the Following Code:


<div class="two-thirds first">
<h3 class="widgettitle" style="margin-bottom:10px;">This is a Two-Thirds Column</h3>
<img src="https://demo.solostream.com/wp-brilliance/wp-content/uploads/2012/11/def-thumb2-150x150.jpg" alt="def-thumb2" width="150" height="150" class="alignleft size-thumbnail wp-image-1625" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Lorem ipsum dolor sit amet, con sec tetuer adipiscing elit. Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Lorem ipsum dolor sit amet, con sec tetuer adipiscing elit. Lorem ipsum dolor.

</div>
<div class="one-third">
<h3 class="widgettitle" style="margin-bottom:10px;">This is a One-Third Column</h3>
<img src="https://demo.solostream.com/wp-brilliance/wp-content/uploads/2012/11/def-thumb2-150x150.jpg" alt="def-thumb2" width="150" height="150" class="alignright size-thumbnail wp-image-1625" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Aliquam ut nunc quis nisi tincidunt tincidunt. Lorem ipsum dolor sit amet, con sec tetuer adipiscing elit. Lorem ipsum dolor.

</div>

10. Widget 10: Line Break Widget

11. Widget 11: Full-Width Featured Posts Slider Widget

About the Author

About the Author: This is the Biographical Info field in the WordPress user profile. You should write something here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. .

Subscribe

If you enjoyed this article, subscribe now to receive more just like it.

Top