4 replies to this topic

[illinimatt81]

I am interested in creating a page similar to the Pagelines Tour Page

Please Login or Register to see this Hidden Content

 

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.

[James B]

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 (

Please Login or Register to see this Hidden Content

) 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

Please Login or Register to see this Hidden Content

[Simon_P]

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.

[illinimatt81]

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.

[James B]

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

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content