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 varying visual elements like photos, videos, and documents to a single layout adapted from multimedia interaction. When you add a grid from add a new section, a new blank section opens. Inside it, an option to add tile in blue will appear. These tiles make up your section and allow you to add a variety of asset types. Click the add tile, and a popover will appear to add a new tile. Here, you can select a tile made of assets from the media library, such as a photo, add a text box, a YouTube video, or even a presentation.

Let’s begin by uploading a photo from the media library. Next, we can add a text tile to describe the image or the section. We can even format it using the paragraph bar and the style preset. Lastly, let’s add a YouTube video. We’re now building quite a dynamic section and mixing a variety of content for the audience to engage in.

You can achieve different designs based on the number of tiles in your section. Tiles become smaller as you increase the number of columns to the section. You can change the number of grid columns in the left-hand editing panel. Look for the column count input field. It is currently set to three and can be at the highest 20 columns. Click on the toggle or eye icon to reveal the grid lines associated with the column count highlighted in pink on your section. 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. Therefore, the higher a 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. For example, in a set with three tiles, you may want to create a column count of three. So each tile is the width of one column which creates uniformity.

Now you know about the grid section, go try adding a section to your site. Now for more information on how to use the platform, please see the next modules in this video series.