Container element
Use the Container element to add containing elements to your layout. Containers can have other Site Studio elements placed inside of itself.
Locating the container element
To find the Container element:
- Navigate to a component or a 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
- Trigger ID - Enter the ID of the modal trigger, this is the ID of this element
Adding a trigger ID will allow for the focus will return to the body when the modal closes. - Modal ID - Enter the ID of the modal to open
- Trigger ID - Enter the ID of the modal trigger, this is the ID of this element
- Internal page - Link to an internal page
- Target window - Select the target window for the link.
- If the link type is set to URL and the target is set to New window the following attribute options are displayed:
- No follow - Prevents backlink endorsement, so that search engines don't pass page rank to the linked resource.
- No opener - Prevents linked resource getting partial access to linking page, something that is otherwise exploitable by malicious websites.
- No referrer - Similar to noopener (especially for older browsers), but also prevents the browser sending the referring webpage's address.
Use of the No follow
toggle will have an impact on SEO, given that it stops search engines passing page rank endorsement to the linked resource. This is often used in blog comments or forums, as these can be a source of spam or low-quality links. Google and other search engines require nofollow
to be added to sponsored links and advertisements. Use of the No referrer
toggle will affect analytics, as it will report traffic as direct instead of referred.
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.