Documentation › Wrapper Options

Wrapper Options

Accessing Wrapper Options

Hover over a wrapper you’ve added to the viewport and then click on the gear icon.

wrapper-options

 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
  • Responsive

wrapper-settings2

Grid & Margins

Columns

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.

wrapper-options-grid

Column Width

Column Width refers to the space you see in the grid of a wrapper where it is pink/tan.

wrapper-options-columns

 

Gutter Width

Gutter Width refers to the white space in between the columns.

wrapper-options-gutter

Wrapper Margins

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.

wrapper-options-margins

 

Sticky Positioning

Clicking “enable sticky positioning”  will make the chosen wrapper “stick” to the top of the screen so that it is always visible upon scroll.

wrapper-options-sticky

 

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.

wrapper-options-sticky-offset

Mirroring & Config

wrapper-options-mirroring-configMirror blocks from another wrapper

“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.

Wrapper Alias

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.

Responsive

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

wrapper-options-responsive

 

Adaptive Options

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

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress