Content Optimization Container

The container loads with two bars, Content Optimization Container and Content Optimization Container End.

The initial bar has two tabs: Content Optimization and Content Order and Placement.

Note: this component is sometimes called an "appendAround".

If you only wish to hide some content from people using one size of display, just one container is needed. But if you want the content to switch between two places on your page, you will need two containers, one for each size of display ('mobile' versus 'normal'), and both must have the same Set Name. 

Once this component is on your page, you can then add additional components within it, such as Body Text, Photos or Lists. Simply drag and drop new components right between the two gray bars as you would for a Form Container.

If you delete the start or end component, both will be removed, but the content will remain on your page (like a Form or Column Control component).

The Content Optimization Container can be used on a non-RWD-enabled site to wrap other components with an ID or class. However, the content will always behave as if the device is a desktop (hide in normal layout will always be hidden, hide on mobile layout will never hide, and there will never be any repositioning).

• We do not recommend nesting pairs of these containers. We have encountered some problems when page content was subsequently revised and the containers became disconnected. Please proceed with caution if you explore this path.

Click the wrench icon to 'configure' these settings.

ID: Identify the container for use in other coding. This will be added to the opening element. (This is NOT used to identify paired containers. For that, use the Set Name setting.)

CSS Classes: Specify additional style information. This will be added to the opening element.

Opening HTML: Add additional coding. (By default these are coded as <div>.) The HTML will be applied to components in the container and closing HTML will be automatically generated. Classes and ID are added to the opening element.

Visibility

• Normal visibility (default): do nothing.
• Hide in normal layout: do not display this block of content on a larger (720 pixel plus) display device. (Also will be hidden in On This Page.)
  
• Hide in mobile layout: do not display this content on a small (under 720 pixel) display device. (Also will be hidden in On This Page.)

Description: Enter a label visible in Author to identify the purpose of your container for the benefit of other authors. This label will appear on both elements.

Set Name: To allow content to jump between two locations, depending on the device display size, both containers must have the identical Set Name. (One will also be set as Visibility: 'Hide in Normal,' while the other will be set as 'Hide in Mobile.')

Weight: Enter a value to allow the browser to adjust the location of the content on your page. Content with a lower 'weight' will be repositioned above content with a higher value. (This is optional.)

To see how how your page will change for a small screen device like a smartphone, switch to Preview Mode, and manually reduce the width of your browser window. Once it falls below the cutoff point, it will automatically switch to small-screen mode.

You can also use the handy Emulator (mobile device simulator) to predict how your site will look in popular device screen sizes.