Auto Layout Sections

GENERAL ELEMENT COMPONENTS & CSS SNIPPETS

Select a Squarespace Element to Examine CSS Selectors:  

Squarespace Element Description
Auto Layout Section Elements Refers to Auto Layout Section selectors, including Carousel, Banner Slideshow, and Simple List layouts.

 CSS Code Snippets for Customizing Auto Layout Sections

Change the opacity of all auto layout cards in the “Banner Slideshow” layout so that the card doesn’t completely cover the image

It might be worth it to use this code snippet in combination with the page section color theme selectors so that you have more control over the card background colors for different color theme sections.

 
//Start: Change the opacity of auto layout cards in the “Banner Slideshow” layout
.user-items-list-banner-slideshow .list-item[data-is-card-enabled="true"] .list-item-card-background {
    background-color: rgba(255,255,255,.5);
}
//End: Change the opacity of auto layout cards in the “Banner Slideshow” layout

Add gradient background effect to auto layout section in “Simple List” layout

You’ll need to replace the “data-section-id” attribute with your specific attribute.

 
//Start: List Section with Shadows on Home Page
[data-section-id="650e3b2c541bfd0dc873be91"] { 
  .section-background {
    background-image: linear-gradient(#e31e6f, #e64e62, #ed5f9a);
  }

  .user-items-list-simple .list-item {
    border-radius: 10px;
    box-shadow: 10px 10px 6px 0 rgba(0,0,0,.16);
    border: 1px solid #ffffff;
    background: rgba(255,255,255,.5)
  }
}
//End: List Section with Shadows on Home Page

Create message bubbles for testimonial Auto Layout Sections that are using the “Carousel” layout

Make sure you have the layout set to “Carousel” and you have “Card” enabled as the background.

You’ll need to replace the “data-section-id” attribute with your specific attribute.

You’ll also need to change the “border-color” attribute to match the color of the list background color.

If you want to include the bold text that has a larger font for the name as pictured below, make sure to embolden the top text field and start the company title text on a new line in the text editor (see second image for reference).

//Start: Create message bubbles for testimonial auto layout sections
@carouselMessageBubble_Background: lightpink;
@carouselMessageBubble_ContentPadding: 20px;
@carouselMessageBubble_ContentBorderRadius: 20px;
@carouselMessageBubble_QuoteTextColor: inherit;
@carouselMessageBubble_BoldTextFontSize: 1.3em;
@carouselMessageBubble_BoldTextColor: inherit;
@carouselMessageBubble_DescrTextColor: inherit;

.page-section[data-section-id="653335d1cb1af10b01435666"] {
  .user-items-list-carousel__slides {
    padding-bottom: 15px;
  }
  .user-items-list-carousel__slide {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 15px;
  }
  .user-items-list-carousel__slide .list-item-content:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 25%;
    margin-left: -15px;
    border-width: 15px;
    border-style: solid;
    border-color: @carouselMessageBubble_Background transparent transparent transparent;
  }
  .user-items-list-carousel__slide .list-item-content {
    background-color: @carouselMessageBubble_Background;
    padding: @carouselMessageBubble_ContentPadding;
    border-radius: @carouselMessageBubble_ContentBorderRadius;
  }
  .user-items-list-carousel__media-container {
    margin-bottom: -5px !important;
  }
  .list-item-content__title {
    color: @carouselMessageBubble_QuoteTextColor;
  }
  .list-item-content__description p {
    margin: 0;
    color: @carouselMessageBubble_DescrTextColor;

    strong {
      font-size: @carouselMessageBubble_BoldTextFontSize;
      color: @carouselMessageBubble_BoldTextColor;
    }
  }
}
//End: Create message bubbles for testimonial auto layout sections

Carousel Auto Layout testimonial styling

You’ll need to replace the value for the “data-section-id” attribute with your unique page section value.

If you want to include the bold text that has a larger font for the name as pictured below, make sure to embolden the top text field and start the company title text on a new line in the text editor (see second image for reference).

The first line is emboldened. The second line is not.

//Start: Carousel Auto Layout testimonial styling
@carouselTest_Background: pink;
@carouselTest_ContentPadding: 20px;
@carouselTest_ContentBorderRadius: 20px;
@carouselTest_QuoteTextColor: inherit;
@carouselTest_DoubleQuoteFontSize: 4em;
@carouselTest_DoubleQuoteColor: inherit;
@carouselTest_DoubleQuoteFontFamily: inherit;
@carouselTest_BoldTextColor: inherit;
@carouselTest_BoldTextFontSize: 1.3em;
@carouselTest_DescrVerticalLineColor: #ffffff;
@carouselTest_DescrTextColor: inherit;

.user-items-list-section[data-section-id="6533359ac9f37962b34b3172"] .user-items-list-carousel__slide {
  position: relative;
  background-color: transparent !important;

  .list-item-content {
    background-color: @carouselTest_Background;
    padding: @carouselTest_ContentPadding;
    border-radius: @carouselTest_ContentBorderRadius;
  }
  .list-item-content__title, .list-item-content__description p {
    text-align: left;
  }
  .list-item-content__title {
    color: @carouselTest_QuoteTextColor;
  }
  .list-item-content__description p {
    margin: 0;
    color: @carouselTest_DescrTextColor;

    strong {
      font-size: @carouselTest_BoldTextFontSize;
      color: @carouselTest_BoldTextColor;
    }
  }
  .list-item-content {
    display: flex;
    align-items: start;
  }
  .list-item-content:before {
    content: '“';
    font-size: @carouselTest_DoubleQuoteFontSize;
    position: relative;
    top: 10px;
    font-family: @carouselTest_DoubleQuoteFontFamily;
    color: @carouselTest_DoubleQuoteColor;
  }
  .list-item-content__description:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 100%;
    border-radius: 5px;
    background-color: @carouselTest_DescrVerticalLineColor;
    position: absolute;
    left: -10px;
  }
  .list-item-content__description {
    position: relative;
  }
  .user-items-list-carousel__media-container {
    margin-bottom: -5px !important;
  }
}
//End: Carousel Auto Layout testimonial styling

Asymmetrical Grid Layout

This one can get a little complicated if you are new to CSS, so ask me for help if you need to!

Note that you will need to make your image aspect ratios match the ratio of the list items. For example, the first list item pictured below is skinner than the second one, so I made the aspect ratio portrait to ensure the image takes up the full allotment of space in the card.

 
/* Start: Asymmetrical Grid Layout */
[data-section-id="6533318b11e65b7d37e56870"] {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch !important;
  grid-gap: 20px;
  grid-template-columns: initial !important;

  .user-items-list-simple .list-item {
    justify-content: space-between;
    padding: 20px !important;
    background-color: #000000;
    border-radius: 10px;
    flex: 1;
    box-sizing: border-box;
  }
  .user-items-list-simple .list-item .list-item-content__description {
    margin-top: 20px !important;
    color: #ffffff;
  }
  .user-items-list-simple .list-item .list-item-content__title {
    color: #ffffff;
  }
  img {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  //flex-basis: calc($width - ($gap * $numOfGaps / $numOfColumns));
  .list-item:nth-child(1) {
    flex-basis: calc(~"30% - (20px * 1 / 2)");
    background-image: linear-gradient(#0853cc, #7c9fd6);
  }
  .list-item:nth-child(2) {
    flex-basis: calc(~"70% - (20px * 1 / 2)");
  }
  .list-item:nth-child(3) {
    flex-basis: calc(~"30% - (20px * 2 / 3)");
  }
  .list-item:nth-child(4) {
    flex-basis: calc(~"30% - (20px * 2 / 3)");
  }
  .list-item:nth-child(5) {
    flex-basis: calc(~"30% - (20px * 2 / 3)");
  }
}
/* End: Asymmetrical Grid Layout */
Previous

Course Pages
Next

Gallery Blocks