Sections
Fullscreen scrolling pages are made easy with the Sections stack. Build stunning one-page sites with ease.
- 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
- Style sections differently for Dark Mode visitors
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
General
Dark Mode
When enabled you'll be given additional options throughout the Sections stack's settings that allow you to customize the styling for visitors who have Dark Mode enabled in their computer's OS or browser.
- Please Note: Features marked with the purple moon icon will include color picker(s) for Dark Mode when Dark Mode is enabled.
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.
Accesibility
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.
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.
If you opt for an image background you'll be given an area to drag-and-drop your image file. If you've chosen Remote Image you'll be presented with a control for inserting a URL to an image that is on your server.
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.
If you opt for an image background you'll be given an area to drag-and-drop your image file. If you've chosen Remote Image you'll be presented with a control for inserting a URL to an image that is on your server.
Full Page
The Sections stack is a unique tool. It takes over the entire page, separating the page into preset sections. These sections are where your page's content will live.
This means that all of your content for the page must be placed within the Sections stack. Don't place content above or below the Sections stack.
Limit Your Content
Since each section is only as big as your visitor's browser window or device screen, you'll want to use just a small amount of content per section in the Sections stack.
If you use too much content it will not be seen on small screens like mobile devices or smaller laptop screens.