Control where content is positioned on a page depending on
whether the visitor is using a large-resolution device such as a
desktop computer or iPad, or a screen that is smaller than 720
pixel width, such as a smartphone.
Add the component to the page.
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.
If you only wish to hide some content in one view (e.g. for mobile users), only one container is needed.
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).
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
CSS Classes: Specificy additional style information. This
will be added to the opening element.
Opening HTML: Add additonal 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.
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.)
You will need to switch to the Author environment's Preview Mode to see how your page will change.
Instead of nesting these containers, try to achieve the same
results using the Opening HTML setting to place your
Was this page helpful?
Tip: Learn more about making your site mobile-ready using Responsive Web Design.
February 8, 2018