The Container Plus stack is available in the Source Addon Pack
The Source Container stacks are what should contain any stacks/content that you add to your page. Using these lets you control how wide / how much of the page your content should take up. They also let you apply padding, margins and backgrounds to your content too.
It should be noted though that unless you need the advanced functionality / additional background options for a particular container then you should always use the regular Container stack. This one is lighter in terms of code / settings and therefore will have less impact on performance in Edit / Preview modes (not that the Plus version is particularly heavy but every little helps!).
Container tag
The first section in the Container settings allows you to set the appropriate semantic tag for the section that you are creating. This can help to properly structure your page following semantic rules. It is not a requirement that you use this approach however and if in doubt then just leave each as the default div.
Class
You can add a custom class (or classes) by adding values here. These can then be used to target this section with your own css. You can add a class directly to different 'layers' of the Container - the Wrapper, the Outer container and the Inner container (which is where the content is added to).
ID
You also have the opportunity to add in a unique ID for the container. This too can be used to target specific css however it can also be used to add an anchor link to this section - meaning that you can add links or buttons that take you straight to this container or a full url that can be shared that will take visitors straight to this particular part of the page.
Container Base
Related IDs
If you are using multiple Container Base stacks on the page then you can specify which set you want to reference. This can be different for padding, margins and backgrounds. Simply select the appropriate ID for each. If you then select to use Base Padding, Margins or Backgrounds in the other Container settings then they will use this ID to apply the desired stylings.
Width
You can select whether the container stack will use the 'Base max-width' setting (set in the Source Base stack), 'Full width' or 'Custom width' (where you can specify your own max-width for this particular container).
Unlike the regular container stack, Container Plus also allows you to specify a different width of container for each breakpoint. This is especially useful when used alongside the additional 'Alignment' settings that come with Container Plus.
Any content added into this container will only flow as wide as the setting selected.
Alignment
You can specify whether the container is aligned in the middle (default) or at the left or right of the page. This will only come into play when the container width is narrower than the available screen width. Additionally, you can toggle the alignment setting to allow you to specify a different alignment for each breakpoint.
Padding
If you wish to add padding to your container then you can select from either the Base Basic or Advanced padding (that you have set up in the Container Base stack) or Custom padding, where you can specify a width (in pixels) for each side of the container.
The Container Plus stack allows you to add 'Advanced' custom padding to the container for each breakpoint (and using whichever units you wish).
Margins
Like with padding, you can opt to add either the Base Basic or Advanced margin settings (from the Container Base stack). You can also specify a width (in pixels) for each side of the container.
Note: The Container Plus stack allows you to add 'Advanced' custom margins to the container for each breakpoint (and using whichever units you wish).
Background
You can add any of the following options as a background for any container stack:
- Base Background 1 or 2 (set up in the Container Base stack)
- Accent colour
- Accent colour (text) - which is the colour specified as being the 'text' component of the accent colours
- Custom colour - where you can specify any colour (and opacity)
- Image - you also have the option of making this a 'fixed' background and adding an overlay colour.
- Gradient - you can select 2 colours and also set the direction for the transition from one colour to the other
- Custom CSS - where you can either write in your own code or paste from an online generator (i.e. a gradient or sag background generator)
You can also set the background to have rounded corners by setting a value (in pixels) for each corner.
Note: The Container Plus stack allows you to apply the background to either the 'Inner container' or the 'Outer container'. Applying it to the outer container is useful when you want the background to be full width on the page but still want the content that you add to the container to sit within a max-width.
Layout
Min-height
You can set a minimum height for the container - this is useful if you want to have a container that is taller than the contained content.
You can add a different height for each breakpoint. Or if you want the height to be the same on each device then you can just add a height to one box and larger breakpoints will also inherit that size.
Flex container
If you do set a minimum height for your container (and therefore have a space taller than the height of the content) then you will likely want to control the vertical alignment / distribution of the added content. You can do this by enabling the option for 'Flex container'.
Once enabled you can then select from various alignment options - e.g. centre, top or bottom. There are other options such as 'space between' which would (if you have multiple separate stacks added as content) space them out within the available height. It is worth experimenting with these settings as they are extremely useful.
