Features

  • Create one-page sites with style
  • Divide site into full-page sections that scroll vertically
  • Add sub-sections that can be scrolled horizontally as well
  • Allow scrolling to loop
  • Include navigation items at top of page to link directly to each section
  • Allow for keyboard scrolling of page
  • Adjust navigation controls

Example

We’ve built an independent page to show off the Sections stack since it takes over the entire page. Be sure to check it out here to see how Sections works.


Using Sections

Sections Content

Center Vertically
Enabling this feature will center your content vertically within each of the sections. This is the recommended way to use Sections and will provide you with the best user experience.

Scrolling

Animation Speed
The speed at which the page scrolls between sections. The larger the value, the slower the scrolling occurs.

Loop From Bottom & Loop From Top
Allows the page to return to the top, or bottom of the page when the visitor scrolls past the end or start of the page.

Navigation

Navigation Dots
Enabling this feature gives the visitor an indication as to how many sections are on your page and where they’re at in the page’s hierarchy. This too is a recommended feature to leave enabled.

Hide Dots on Mobile
Allows you to choose to have the Navigation Dot be hidden at the Mobile Breakpoint to make more room for your content.

Dots Location
Choose whether you’d prefer the Navigation Dots to be on either the left- or right-hand side of the page, when enabled.

Dot Colors
Allows you to set the Normal and Active colors for the Navigation Dots.

Dots Style
You can choose whether you’d like the Navigation Dots to be Circles or Squares.

Slides

Show Slide Navigation Dots
If you are using the Slides feature in one, or more, of your Sections you can choose to show the Slide Navigation Dots by enabling this feature.

Show Slide Arrows
Allows you the option of showing the left and right Navigation arrows for Slide Sections.

Hide Arrows on Mobile
Allows you to choose to have the left and right Navigation Arrows be hidden at the Mobile Breakpoint to make more room for your content.

Navigation Items

Enable Navigation Items
Using this feature will add a basic navigation system to the top of the page. These navigation items link directly to each section of your Sections stack.

Nav Location
Place the Navigation Items on either the left- or right-hand side of the page.

Height
Choose how tall you would like for your Navigation Items to be.

Padding
Adjust the padding around the Navigation Items.

Normal
Set the non-active colors for the Navigation Items’ text and backgrounds.

Active
Set the active colors for the Navigation Items’ text and backgrounds.

Accessibility

Enable Keyboard Scrolling
Enabling this feature allows your visitors to scroll through the full-screen pages and slides using their keyboard.

Enable Browser Scrollbar
Enabling this feature allows for compatibility with some stacks, namely the Reveal stack.

Child Stacks

Section

Background Type
You can select from several different background types. You’re able to set a different background type for each Section. You can choose from one of Foundry’s presets, use the color picker to choose either a solid color or create a gradient, or use an image. Color pickers and image controls will be shown for each setting depending on your selection.

Section Name
This will be the name shown in Navigation Items if you have that feature enabled in the main Sections stack.

Scroll Down Arrow
Adds an arrow to the bottom of that section. If the visitor clicks this Scroll Down Arrow they will be taken to the next section.

Icon
Choose from hundreds of different icons for your scroll down arrow. This can be set differently for each section where you have enabled the scroll down arrow feature.

Slides

This sub-section contains slides that allow for full-screen horizontal scrolling within the Sections stack.

Section Name
This will be the name shown in Navigation Items if you have that feature enabled in the main Sections stack.

Slide Child-Stack

Within a Slides section there are child-stacks. Each is called a Slide. These contain the content for each of the slides within the Slides section. They each have their own settings.

Background Type
You can select from several different background types. You’re able to set a different background type for each Section. You can choose from one of Foundry’s presets, use the color picker to choose either a solid color or create a gradient, or use an image. Color pickers and image controls will be shown for each setting depending on your selection.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2016 Elixir Graphics | Contact Us