Containers

A walk through of using containers in your layout.

What Is A Container?

A container is simply a part that houses other parts. It is a fundamental element used to wrap and hold other elements such as text, images, and other content.

Containers help structure a page by defining a boundary within which content is placed, ensuring it is neatly organized and responsive to different screen sizes.

Location in the Parts Library: Base Parts > Layout > Container

Different Containers to Help with Layouts

In Appeggio, there are four types of containers. They are all similar, but have slightly different properties to assist you with your layouts:

1. A Default container. This container has a fixed width.

2. A Page section container. This container has some padding and auto horizontal margin. This section will sit in the center of your screen. On most screen sizes it will span the width of your screen. However, on the largest screens, the container is constrained to the middle of the screen so the content is kept managably in the center.

3. A Fluid container. This container spans the full width of the screen, regardless of screen size.

4. A Fluid container, with a page section container inside.

Example Containers

Many site layouts provide the ability to constrain content in the center of the screen, whilst also allowing background elements (such as color and images) to fill the width of the screen. The fluid containers with page containers inside are designed for this reason.

There are several container variation examples in the parts library to help. For example, there are:

• A fluid container with a background image and page section container inside. This section allows the image to span the width of the largest screen, with your content constrained in the middle.

• A fluid container with a background parallax image and page section container inside. This section allows the parallax to span the width of the largest screen, with your content constrained in the middle.

• Multiple fluid containers, each with a page section container inside so you can layout a page quickly.

In the brief video below, multiple fluid containers have been added to a blank page. Then, different sections have been added to the containers to build out a full page. In the full page is an image header with text, a features section, company logos, a blog, and a newsletter sign-up section. Click the play button to view.

Adding Containers to a Page, and Adding Content to Containers

As you can see from the video, you can change the background color of any of the containers, including removing the color. It's also easy to delete any of the containers you don't need.

Once you've added your content to the containers, edit as needed.

Adding a Background Image to The Container

To add a background image to your container, select the container, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the opacity of the background image within the Decoration Editor as needed.

The image will take up the full background space of the container.

Related Information

Rows and columns

Sizing

Alignment

Editing

Customizing and formatting