List Section

Description

In 7.1, you can add a List Page Section to your site. These sections are layout options that let you quickly add content items while being able to easily switch between layouts and not have to manually rearrange them.

There are 3 different layouts to choose from:

• Simple List

• Banner Slideshow

• Carousel

To add a list section click on People, Services, or Testimonials and look for a layout with an i icon in the top-right corner.

Custom CSS

For style changes across multiple pages, add the code snippet to your Custom CSS panel and each page will be updated.

Advanced Code Injection

For style changes on one page, add the code snippet to the page Advanced Code Injection so only that page will be updated. Enclose your code in style brackets like this:

<style>

.list-section-title {
}

</style>

Custom CSS

All Layouts

To target the list section title

/* list section title */
.list-section-title {
}

To target the list section button

/* list section button */
.list-section-button {
}

To target the list item image

/* list item image */
.list-image {
}

To target the list item title

/* list item title */
.list-item-content__title {
}

To target the list item description

/* list item description: container */
.list-item-content__description {
}

/* list item description: text */
.list-item-content__description p {
}

To target the list item button

/* list item button */
.list-item-content__button {
}

To target the list item card

/* list item card */
.list-item[data-is-card-enabled="true"] {
}

Simple List

/* simple list */
.user-items-list-simple {
}

Banner Slideshow

To target the banner list

/* banner list */
.user-items-list-banner-slideshow {
}

To target the arrows

/* banner arrow background */
.user-items-list-banner-slideshow__arrow-icon-background {
}

/* banner arrow icon */
.user-items-list-banner-slideshow__arrow-icon-foreground {
}

To target the image

/* banner slideshow images */
.user-items-list-banner-slideshow .slides img {
}

Carousel

To target the carousel list

/* carousel list */
.user-items-list-carousel {
}

To target the arrows

/* carousel arrow background */
.user-items-list-carousel__arrow-icon-background {
}

/* carousel arrow icon */
.user-items-list-carousel__arrow-icon-foreground {
}