Jump to content


Photo
- - - - -

Single Page Website


Best Answer Danny , 04 March 2013 - 08:02 AM

Hi Jason,

 

The simplest way to achieve a single page website would be to first of all use the Full Width Sections layout, use sections and then use custom CSS to style each section.

 

For just plain old text, I would probably use the ContentBox and clone it each time I wish to have more text. So your page template is going to look something like this:

 

Features Sections

ContentBox Section

ContentBox Section - Clone

ContentBox Section - Clone

ContentBox Section - Clone

ContentBox Section - Clone

ContentBox Section - Clone

 

Each clone is given a unique class for example .clone_2, .clone_3 etc.. which you can use to add individual styles to.

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 04 March 2013 - 02:15 AM

I have a client that would like an event website is very similar to this one:

 

Please Login or Register to see this Hidden Content

 

This single page website design is becoming much more popular, so I anticipate more requests in the future.  The above site has a lot of design features, but what I'm trying to achieve for a starting point is the following:

  1. Separate "pages" with custom backgrounds for each of the fixed menu items.  I know how to have a fixed menu and I'm not concerned about the menu starting at the bottom for the "home" page.  I also know how to use anchors.
  2. Full-page or at least very large slideshows as an option for a particular "page."

Those are the two things I'd like for starting out.  I don't need a parallax effect, yet.

 

I know Nick has at least one or two themes that have similar looks to what I'm trying to achieve, but I'd like to do this within the Framework.

 

A few others have brought this subject up but I've yet to see a response.

 

Thanks in advance.

 

Jason 



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17580 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 March 2013 - 08:02 AM   Best Answer

Hi Jason,

 

The simplest way to achieve a single page website would be to first of all use the Full Width Sections layout, use sections and then use custom CSS to style each section.

 

For just plain old text, I would probably use the ContentBox and clone it each time I wish to have more text. So your page template is going to look something like this:

 

Features Sections

ContentBox Section

ContentBox Section - Clone

ContentBox Section - Clone

ContentBox Section - Clone

ContentBox Section - Clone

ContentBox Section - Clone

 

Each clone is given a unique class for example .clone_2, .clone_3 etc.. which you can use to add individual styles to.



#3 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 07 March 2013 - 03:33 PM

Thanks, Danny.  This is getting close.

 

Please Login or Register to see this Hidden Content

 

I'm not sure if I'm using the right CSS for styling the background, but it's working.  The next issue is anchors to the various content elements.  I know how to use anchors, but not with a fixed navbar.  Any suggestions?

 

(Btw, for anyone following I used the Image Carousel shortcode to add the slideshow instead of a quickslider feature.  I'm not sure if and how to add a feature inside a content box.)

 

Thanks,

Jason 



#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 March 2013 - 04:45 PM

You can use anchor links in a Custom Menu and set that menu as the primary navigation. For instructions, please see:

Please Login or Register to see this Hidden Content



#5 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 07 March 2013 - 05:23 PM

Thanks, Catrina.  After I used you're suggested method I added the Easy Smooth Scroll Links plugin to add smooth scrolling to links.  I'm not quite where I want to be, but I think this topic can be closed.



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 March 2013 - 08:01 PM

Ok, thanks for letting us know!



#7 Madi

Madi

    Member

  • Members

  • 19 posts
  • Country: Country Flag

Posted 06 April 2013 - 06:38 AM

I did Ninja's ContentBox method on the site I'm working on now: HIDDEN

 

DM me if you want to share ideas.



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 03:39 AM

Madi,

 

Your site was reported as containing a virus or malware.  Please check the site using

Please Login or Register to see this Hidden Content

.

 

I have removed the link until you've secured the site. Thanks for your patience.