Container Start / End

Style & Appearance

Description

These two blocks are used in combination to distinguish and define properties —or characteristics— of a portion of a web page. The pair act as bookends around content to define the start and end of a portion of a web page. This is one of the most powerful, but complex blocks.

A container start block begins a series of blocks and a container end block ends the series.

Examples

Admin UI - Use Container Start & Container End

Container Start Property Fields

Container Start fields define the properties of content within the container. The only required field is background color.

: You can enter text into a Container Start block. This text will inherit the background and width settings you select; however, text in the Container Intro will always be one column wide, so it can act as a header over multiple columns below.

You can use a Container Start and End without any content blocks in between to apply background and width characteristics to just the content in the Container Intro field.

The container is what goes around, or what contains, the content.

: Select a background color or gradient from the swatches.
: Apply an image to the background. The image will automatically display in grayscale with a translucent overlay of the selected background color.
: Select a background pattern from the dropdown. Patterns can be applied with or without a background image.
: Your container can be standard width, wide, or full-screen width. Full-screen width applies background selections to the full width of the screen, so these backgrounds run right to the edge.
: Toggle this switch on to reduce the amount of space between the last content block within the container and the next content block.
: Toggle the checkbox to make the contents between container start and end be hidden, as in an accordion. Use the Container Intro Text field to write the Accordion header; generally, use an h2 heading.

Accordion Sanity Check

The system will perform a sanity check on Container start/end accordions to confirm that any Container Start blocks with the "Make Accordion" switch toggled have a corresponding Container End block with the "Make Accordion" switch toggled.

Screenshot of warning about accordion end missing.

Content is what goes inside the container. These properties apply to content within blocks placed between the Container Start and Container End blocks. The Container Intro content is not affected by these settings.

Define how wide the content inside your container will be: standard, wide, or maximum. Content.

This setting can be used in different combinations with Container Width. Logically, the container should be wider or as wide as the content, but inverting the two does not “break” the page.

Container Standard + Content Standard creates the smallest result.
Container-Wide + Content-Standard creates a wider background containing smaller content.
Container-Wide + Content-Wide creates a wide background containing wide content.
Container-Full-screen + Content-Wide creates a background that extends beyond the screen and wide content within.

When the widest option is selected for both Container Width and Content Width, images will be as wide as the screen and text will only have a small margin.

Demonstration of different container and content width combinations.

: Enter a number to define how many columns you want. These columns are automatically equal width and content blocks appear within the columns in the order you place them beneath the Container Start.

For example:

When you include more blocks than columns, they will wrap and begin a second row.

: Select either 2:1 or 1:2 to display content blocks in columns with this specific width ratio, regardless of how many columns indicated.

Note: When Preconfigured Columns are selected, it overrides "Number of Columns" input.

: When available, these style options apply specific styling to content blocks within the container. An example use case for a preconfigured style is to feature certain content by applying a different font and font size compared to how text is treated throughout the site.

Dialogue - The dialogue preconfigured style automatically creates as styled dialogue, similar to a two-person texting conversation on a phone. Enter each speaker’s dialogue into a separate text block. End the container to conclude the dialogue.

Container End

Container End is just the block that marks the end of the container. Toggle the "Make Accordion" switch on the Container End block if you are creating an accordion from the two container blocks.

If you create a page with a missing Container Start or Container End, the page will render with an error message.

Warning: Container Start/End Count Mismatch. You must have the same number of Start Containers and End Containers. You have a missing End Container or too many Start Containers. Start Containers = 7. End Containers = 6.

Recommendations

When individual content blocks have width settings, it is typically best to display the content at full width within its individual block.
In your site's custom documentation, include “recipes” and examples of the preconfigured styles in use.
Please contact the WPSU team to discuss other use cases for preconfigured columns or styles. It may prove more efficient for our team to work with you to create additional options instead of working to find workarounds to any limitations of the container system.
If the content within your blocks is of very different heights, thismay create an undesired layout effect. You may want to explore options and alternatives, including preconfigured columns

Four content blocks of varied length within a two column container create large white empty spaces.