Adjust content or layout for small-screen devices.
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.
(This feature is sometimes called an "appendAround.")
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 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.
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 code.
This feature works comparably in both the Classic and Flex UI versions of the UBCMS. In the future, screenshots and language will be updated to reflect Flex UI.
Tip: Learn more about making your site mobile-ready using Responsive Web Design.
April 9, 2021