Jump to content


Photo
- - - - -

Create Page Like Pagelines Tour Page


  • Please log in to reply
4 replies to this topic

#1 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 09 January 2013 - 09:04 PM

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.



#2 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 09 January 2013 - 09:48 PM

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



#3 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 09 January 2013 - 09:54 PM

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.



#4 illinimatt81

illinimatt81

    Super Member

  • Members

  • 205 posts
  • LocationChicago, IL
  • Framework Version:DMS 2
  • Country: Country Flag

Posted 10 January 2013 - 02:42 AM

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.



#5 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 10 January 2013 - 03:05 AM

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