Demo Containers

WordPress gives us many different blocks we can use to arrange content. Initially it may be tricky to decide which to use. You will probably want to experiment a bit. Peruse the area on the right to play with different styles.

Basic Container

Containers can be laid out in many ways. Below is a screenshot of the options and below that is a container with two rows each with two content areas.

I”ve outlined our container in red and the content areas in blue. You can add any type of block to these sections. You can also put a container in a container if you want. You can adjust padding and margins for the whole container and for the areas within.

Here we have a wide content areas on the top left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

This is a narrow area. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum.

This is a narrow area. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum.

Here we have a wide content areas on the bottom right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Group

A group is like a container but has different layout options.

This group has rows that go across the container. You could also choose columns. And you can put different blocks into each area. This does not give us an option to style the rows with a border. But you could accomplish that by putting a container inside a row.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Columns

Columns are like the other blocks. They give you a few different default column layouts.

You can put a border around the whole area but not around individual columns. But you can put other blocks inside a column.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Rows & Stacks

Rows and Stacks are sort of like columns but with more flexibility. A row gives you side by side content areas. You can keep adding them. And you can change a row into a stack.

In this example I put containers in a row and gave them a width of 28%. They are set to wrap to another to another row when they don’t fit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tortor enim, pulvinar vitae vulputate non, condimentum iaculis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum urna orci, euismod vel imperdiet at, bibendum consequat nunc.

Scroll to Top