Work with responsive bundles
In the Component builder, you can create responsive components by bundling versions designed for different breakpoints. When inserted in a webpage, a bundle will render differently depending on the screen size the component is displayed on.
To create and use a responsive bundle:
-
Create a component and stage it. A default bundle with only one version for all breakpoints is automatically created.
-
Duplicate the original component as many times as you want versions, and set the breakpoints for each version. For example, you can create a version called Small devices for the extra small and small breakpoints, one called Medium devices for the medium breakpoint, and one called Large devices for the large, extra large, and extra extra large breakpoints.
-
Design each version according to the device widths it is meant to be seen on. Any changes made to a specific version will apply to all breakpoint sizes chosen for this version. You can view how the version will render on specific breakpoints using the labels above the version.
-
When you have finished with the designs, click Stage above each version that you want to include in the bundle.
Alternatively, to stage all the versions of this component, click anywhere outside of the versions to open the Overview in the right-hand side pane, and then click Stage all.
-
To check that the breakpoints are defined by the correct version, in the Overview pane, in the Responsive bundles section, click Default bundle. Optionally, you can define other versions for particular breakpoints by clicking the correct version in the drop-down list. To be clickable, the option has to be designed and staged for the relevant breakpoint.
-
To make specific versions available as stand-alone components in Pages (for cases where you do not want to use a responsive bundle in a webpage), in the Overview pane, in the Specific versions section, click Available versions in Pages, and then select Allow to use as a specific version.
-
To use the responsive bundle or a specific version in a webpage, go to Pages, and drag the component to the relevant placeholder in the page. In the right-hand pane, choose the responsive bundle or the specific version you want to use.
Alternatively, to use the responsive bundle or a specific version in a webpage built with your own page builder, click Get the embedding code.