Grid sections in depth

Learning objective

By the end of this session, you will be able to:

• Understand the purpose of a grid section
• Add all kinds of media to a grid section

Video tutorial

Video transcript

In this video, we will explore the grid section in more detail. A grid is a term used in web page design that combines different visual elements like photos, videos, and documents to a single layout.

To begin, click the plus section to add a new section, then select grid. Click add tile, and a pop-up will appear to add a new tile.

How to use grid tiles

Here you have quite a few options to choose from, such as adding a tile from assets from your media library, a text tile, YouTube video, presentation, and more. Let’s begin by uploading a photo from the media library.

Next, we can add a text tile to help describe the image. We can even format the text using the paragraph bar and our style preset from the left.

And lastly, let’s add a YouTube video. I’m going to use the editing panel to format the thumbnail to a custom image. We’re now building quite a dynamic section and mixing a variety of content for our audience to engage in.

Column count

You can customize the number and size of tiles in your section. This is done through the column count. You can change the number of columns in the left hand editing panel.

Look for the column count input field on the left hand editing panel. It is currently set to three, but this can be increased all the way to 30.

Click on the toggle or eye icon to reveal the number of columns currently associated with your grid, in this case, three. The pink grid lines are displayed in the site editor only. They will not appear in your preview or published site view.

The columns form the grid of your tile placement. The higher column count, the more narrow your columns and thus the smaller incremental shifts you can make to your section. This also helps you equally size multiple tiles in your section. Let me demonstrate this now. I can snap the size of my tile based on the column width.

The higher the column count 30, the smaller my shifts. As displayed in this example, you may want to create a column count of three, or set your columns to the number of tiles in your section to create uniformity.

Now you know about the grid section. Go ahead and try adding one to your site now.

For more information on how to use this platform, please see the next modules in this video series.