Archived

This topic is now archived and is closed to further replies.

  • 0

Create Page Like Pagelines Tour Page

Question

Posted · Report post

I am interested in creating a page similar to the Pagelines Tour Page http://pagelines.com/tour

 

I saw another thread inquiring about this and it mentioned using the hero unit and then it was 'resolved'.  I am pretty resourceful so I started poking around on the Tour Page with firebug to try to identify the elements.  I am struggling to figure out how the page was created.

 

First the nav bar seems like nothing else in pagelines.  Is it a styled Scroll Spy bar or something else?  I see images are added...

 

For the actual content, how is that being displayed or where is it called from?

 

I noticed that everything seems to be on the same page as opposed to different pages and what displays is dependent upon the selection in the nav bar.  The fade effect is beautiful as well.

 

Appreciate any guidance in pointing me in the right direction in creating something similar.

 

For a point of reference, I am planning to create a product tour with it myself.

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

Hi there, I think this page was created prior to the incorporation of bootstrap to the framework.

 

However, looking at the source code its using a modified version of tabs interface (http://demo.pagelines.me/tools/) for the nav menu at the top of the page. The content that loads on each section is contained within the tab shortcode.

 

You can find more info on the tabs at http://twitter.github.com/bootstrap/javascript.html#tabs

Share this post


Link to post
Share on other sites

Posted · Report post

Its a custom section we made just for the tour page. It uses jquery.fancybox

 

Unfortunately the section is all hardcoded there are no options for it so its unlikely to ever be released as a user section.

Share this post


Link to post
Share on other sites

Posted · Report post

Its a custom section we made just for the tour page. It uses jquery.fancybox

 

Unfortunately the section is all hardcoded there are no options for it so its unlikely to ever be released as a user section.

 

That's too bad, I thought everything on the site was made in the Framework.  That explains why I couldn't figure it out.  

 

Would there be a way to put icons in the scroll spy bar?  I could probably live with making a page that way.  The tab option might be something I can consider too.

Share this post


Link to post
Share on other sites

Posted · Report post

Depending on what type of icons you wanted to add you could use css to insert the icon. Something like the below, you'd need to add css to align and give it padding etc. For more info on the :after selector see http://www.w3schools.com/cssref/sel_after.asp

 

.nav-tabs:after, .nav-pills:after {
    clear: both;
    content: url(your full url to the icon/image goes here);
}

Share this post


Link to post
Share on other sites