Accessing Wrapper Options
Hover over a wrapper you’ve added to the viewport and then click on the gear icon.
Wrapper Options Explained
Once you click on the gear icon, you should see a pop-up with the available wrapper options. There are 4 tabs:
- Grid & Margins
- Sticky Positioning
- Mirroring & Config
Grid & Margins
This will default to the global setting. You cannot change the number of columns for a wrapper if blocks already exist on the layout. If you try, you will get that error message.
Use Independent Grid
Once you place a checkmark there, then additional options appear: column and gutter width.
Column Width refers to the space you see in the grid of a wrapper where it is pink/tan.
Gutter Width refers to the white space in between the columns.
In addition to being able to adjust margins in the design editor, you can quickly adjust top and bottom wrapper margins within wrapper options using the sliders for top and bottom.
Clicking “enable sticky positioning” will make the chosen wrapper “stick” to the top of the screen so that it is always visible upon scroll.
Once you check it, you will then have the ability to change the offset, which is the amount of distance the wrapper will appear from the top of the screen when the sticky functionality is enabled.
Mirroring & Config
“Mirroring” refers to showing the content from another wrapper and also using that wrapper’s design. This automatically happens when you clone a layout onto another one. You can “unmirror” by setting the drop down to “Do Not Mirror”.
What is mirrored
The blocks inside and the wrapper’s styling, sticky positioning setting, fluidity of the wrapper.
This is a “nice name” you can give to a wrapper that will show up in the top left corner when you hover over a wrapper in the Layout Editor or Design Editor.
It also shows up under “Currently Editing” when you have selected that wrapper to be styled and in the navigator tab for easy identification of your wrappers.
Custom CSS Class(es)
You can easily add a custom class to a wrapper that can be used when styling in the Live CSS Editor.
Select a breakpoint or choose a custom screen width and then choose which adaptive options you want to occur at that breakpoint. If you don’t choose an option, nothing will happen at the breakpoint.
You can have multiple breakpoints set to control things at multiple screen widths.
When using a custom width, be sure to enter a unit or the options you chose will have no effect. Examples of units are px, rem, em, vh, vw
Stretch blocks for mobile
Blocks will become full width so they fill up the entire screen width
Attempt to Center Items
Headway will attempt to center the element you have selected
Hide this wrapper
Wrapper will be hidden at selected breakpoint