Features

  • Customize the modal overlay via color pickers
  • Enable tooltips for the button
  • Set alignment for button
  • Style the trigger button
  • Set modal padding at each responsive breakpoint

Example

Click on the button below labeled "Side Slide Example" to see the Side Slide stack in action. We’ve included a good deal of content with the Side Slide example so you can see how it handles it, allowing the modal content to scroll without disturbing the rest of the page.

Image
Small Label

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Image
Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

That’s been one of my mantras — focus and simplicity. Simple can be harder than complex; you have to work hard to get your thinking clean to make it simple.

Steve Jobs (from the New York Times)

Image

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Using Side Slide

Slide Out Panel

Colors
Define the colors for the background, text, links and closer toggle icon to make the Side Slide stack match your site’s style.

Padding
Set the slide out panel’s padding at each of the three breakpoints in order to ensure your content looks great at each of them.

Background Overlay

Overlay
Choose whether to add an overlay to the background of the page when the Side Slide is toggled on. You can set the overlay’s color, as well as adjust its opacity, using the RapidWeaver color picker.

Button

Button Text
Customize the text on the button which triggers the Side Slide stack.

Block Button
Enable to make the trigger button span the entire width of the stack it is placed within. The button’s width is flexible when enabled and will size down to fit the available space.

Button Size
Choose the size of the trigger button. You can choose from Small, Standard or Large.

Button Style
Set the color of the trigger button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Button Alignment
Allows you to set the justification of the trigger button. Align it either to the Left or Right side of the form.

Use Tooltip
Add a popup tooltip to your button. You can then set the tooltip text and its location, which can be set to either bottom, or top.*

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!

Advanced

Collapse Panel in Edit Mode
Enable this feature to free up some space in Edit Mode by hiding the slide out panel’s content from view until you need to edit it again. Has no effect on the published page.

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