Container element
Use the Container element to add Containers to your layout.
Locating the container element
To find the Container element:
- Navigate to a page or template with the Layout canvas
- Click the + button on the Layout canvas
- Within the Elements tab, look for the Container element.
The Container element includes the following fields:
Container width
- Width - Set the width of the container.
- Fluid (100% width of parent) - The container will expand to fit the width of its parent container. If this is the browser, it will expand to fit the browser viewport width.
- Boxed width - The container will be the width of the website grid.
Markup
- HTML markup - Change the HTML element the Container applies to make the structure of your layout semantically correct.
- Div - Default. The container is a simple <div> element
- Span - Sets the container to a <span> element
- Header, Nav, Section, Article, Aside, Footer, Main, Fieldset - Html 5 element types
- Custom - Enter an element type.
Link and interaction
Use the Link fields to make your container into a link. This is used for creating "cards" or "link panels".
- Title attribute - Add a title attribute for your link
- Type - Select the type of link
- Internal page - Link to an internal page
- Link to page - Type the name of the internal page you are linking to.
- URL - Link to a URL
- URL - Enter the full URL of an external web page.
- Anchor - Link to a page Anchor
- Anchor - Enter an Anchor ID. You do not need to include the #.
- Back to top - Add a smooth scroll back to the top of the page
- Scroll to - Add a smooth scroll to a jQuery selector
- Scroll target - Enter a jQuery selector to target an element to scroll to.
- Scroll duration - Enter the time it will take for the scroll to complete in milliseconds.
- Offset type
- Offset against element - Offset the top of completed scroll position by the height of an element. Target the element using a jQuery selector.
- Offset in PX - Offset the top of completed scroll position in pixels.
- Modifier - Toggle, add or remove a modifier class on an element using on-click. For more information, see Add on-click interactivity to elements
- Open modal - Link to open a modal
- Modal ID - Enter the ID of the modal to open
- Internal page - Link to an internal page
- Target window - Select the target window for the link.
If you make a container into a Link you cannot add Links (<a> tags) within it as this is not valid HTML.
Custom style
Layout style - Apply a Layout custom style to the Container. For more information see Applying styles to elements.
Match heights
- Match heights - Match the height of the element using:
- None - Removes the match heights at the specific breakpoint
- Class - Match the height of the element with another element with the same class name
- Children with class - Match the heights of any child elements with the same class name
- Child element - Match the heights of all child elements of the same type.
For more information on Match heights, see Match the heights of elements.
Comments
- Add comments - Add comments to the Element. For more information, see Adding comments to an element.