Auto layouts

Use auto layouts to present sets of content in columns and rows, carousels, or slideshows. When you add new content to an auto layout, it's rearranged automatically based on your chosen settings. This makes auto layouts great for content that you update regularly, such as featured product images, recent projects, current team members, testimonials, or past clients.

This guide focuses on the auto layouts that combine text and images. For a similar layout that primarily showcases images, use a gallery section instead. To create similar layouts manually, use a block section.

This guide is for version 7.1. For a similar effect in version 7.0, create columns and rows with blocks.

Add an auto layout section

To add an auto layout section that includes text and images:

1. Click Edit on the page, then click Add Section.
2. Click People, Services, or Testimonials.
3. Look for layouts with an i icon in the top-right corner and click the one you want.

Keep in mind:

• To add an auto layout that showcases images, follow our steps for adding gallery sections instead.
• If you click a section without an i icon in the top-right corner, you'll add a block section and the rest of the steps in this guide won't apply. Block sections can have similar layouts, but they need to be manually arranged.
• Auto layouts appear in other categories, but People, Services, and Testimonials have the most options. Even if the topic doesn't match what you want for your site, you'll replace all the demo content with your own.

Set what elements display

To choose how your section and items display:

1. Hover over the section and click Edit Content.
2. In the elements tab, switch the toggles on or off for each option.

For the section as a whole, use these toggles:

• Title - Displays a text title at the top of the section
• Button - Displays a button link at the bottom of the section

To change how items display, use these toggles:

• Show Image - Displays an image with each item
• Show Title - Displays title text with each item
• Show Body - Displays body text with each item
• Show Button - Displays a button link with each item

Keep in mind:

• These options apply to all items for that section. It's not possible to have different settings for individual items in a section.
• Turning a toggle off hides its corresponding option in the content tab. For example, if you turn the Show Title toggle off, the Title field won't appear in the item editor.

Add or edit items

Each auto layout includes demo items. You can replace the content of these items with your own, or delete them and add new items to start from scratch.

To add or edit items:

1. Hover over the section and click Edit Content, then click Content.
2. In the Items list, click an item to edit its content, or click Add to add a new one.
3. To rearrange an item, click and drag the :: icon to the right of the item title.
4. To delete an item, click the trash can icon to the right of the item.

Each item can have an image, a title, a description, and a button. If you don't see one of these options, ensure it's enabled in the elements tab.

Tip: You'll add all items and their elements to an auto layout manually. If you want to display collection items from an existing collection on your site, use summary blocks instead.

Edit the section title and button

In the content tab, you can also edit the title and button for the section as a whole. The title displays at the top of the section, and the button displays at the bottom. To add and edit these: 

1. In the element tab, ensure the Title and Button toggles are turned on.
2. In the content tab, click Title to add text and change the alignment.
3. Click Button to edit the button text, set up a link, and change the button size and alignment.

To hide either of these elements, disable it in the elements tab.

Change the auto layout design

To change the section's layout:

1. Hover over the section and click Edit Content, then click Design.
2. Click the drop-down menu at the top to change the layout.

You can choose from three layouts:

• Simple list - Displays items and their elements in a row from left to right. Depending on your settings and the number of items, the layout may create more rows below the first.
• Banner slideshow - Displays one item at a time with elements overlaying the image, which acts as a background for the section. Visitors click controls to scroll through the items.
• Carousel - Displays items and their elements in a row from left to right in a rotating carousel. Visitors click controls to scroll through more items.

Each layout has its own design settings for more customization. For example, with simple list and carousel layouts, you can crop the images as circles. If you change layouts, the section will save your settings on the previously selected layout, so you can always go back to it if you want.

Note: It's not possible to change from these options to a gallery layout. Instead, create a gallery section.

Text size

After selecting your list section layout, scroll down in the Design tab and click Style to choose a font size. You can select from preset sizes that change title and description all together, or click ... to set custom sizes for item titles and descriptions separately. Depending on your layout and its current settings, other options may appear.

Section height

The auto layout section height is set by the item with the most text. This means the section may have extra padding above or below items with less text in slideshow banner and carousel layouts. In the simple list layout, the same may happen with row height.

We recommend keeping a similar amount of text in each item to ensure the most control over section height and padding.

Auto layout design on mobile

Certain design options may vary on computer and mobile. Banner slideshow and carousel layouts, for example, can display navigation arrows so visitors can click through items. If you disable the navigation arrows, visitors on a computer will click and drag to scroll through items, but the arrows will always display on mobile devices to ensure all items display for visitors.

Style auto layout font and buttons

Auto layouts follow the global font and button style settings in site styles.

Font

Auto layout text follows your site's global font settings in the Fonts panel of site styles. Item titles follow Headings and item body text follows Paragraphs. If you use a section title for your auto layout, you can style that independently of other font settings by clicking Assign Styles, then clicking Title under List Section.

Text size is set in the auto layout section styles.

Buttons

Style button text, size, and shape in the Buttons panel of site styles. Both item buttons and section buttons follow the Primary style settings. Keep in mind, to ensure a consistent look and feel, these settings apply to most buttons throughout your site.

Auto layouts vs. gallery sections

Auto layouts and gallery sections both automatically organize your content into customizable layouts, but the features between them vary. It's not possible to change an auto layout to a gallery section or vice versa. Here are the basic differences:

• Auto layouts can display different combinations of images, larger amounts of text, and button links. They're ideal for showcasing team members, past clients, or recent projects.
• Gallery sections highlight images alone, making them more suited for artist portfolios or photography sites. You can add text to gallery section images, but only brief captions.

To learn more about the differences between the two sections and decide which is best for your needs, refer to the table below.

Feature	Auto layouts	Gallery sections
Auto crop images	Simple list layout Carousel layout	No
Auto play slideshow	No	Slideshow: simple layout Slideshow: full layout
Buttons	Yes	No
Display text only	Yes	No
Image clickthrough URLs	No	Yes
Layouts	Simple list Banner slideshow Carousel	Grid: simple, strips, masonry Slideshow: simple, full, reel
Lightbox	No	Grid layouts
Overlay text on image	Banner slideshow layout	No
Section title	Yes	No
Videos	No	No