WELCOME TO SQUAREMUSE! WE ARE SO EXCITED TO SHARE THIS JOURNEY WITH YOU.

On this page, you will find documentation and video tutorials to set up your Tabs (use code demo if accessing the link directly).

TECHNICAL REQUIREMENTS:

Business Plan or higher on Squarespace 7.0 version;

IMPORTANT CONSIDERATIONS:

1. Our tutorials are broken down into steps that you can click through in the menu on the left side of this page.
2. Password for all videos is SQM-ELEMENTS and it is also mentioned above all videos. If you have any questions connect with our team via Facebook chat
3. Should you have technical issues, submit a ticket here.
4. Join our Facebook group to share your launched Custom Element, ask questions, get exclusive deals, and connect with other creatives.

Custom Elements - Tabs 01

Documentation

REQUIREMENTS

Business Plan with your Squarespace version 7.0;
Squarespace template that allows stacked Index pages;

How to

To implement your custom element inside your Squarespace account please follow the instructions below or/and watch the video:

Copy the CSS code from the bottom of the article and paste to your Design tab -> Custom CSS tab
Copy the JavaScript code from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab
Create a post type with text and image for your tabs. Image recommended sizing at least 600x800px (vertical ratio)
Add a new section inside an Index Page, where you want the element located. Make sure to title the section with slug “tabs-type-1“ or “tabs-type-1-x“.
HTML code to use when building the section:

<div class="tabs-title"></div>

Video Passcode: SQM-ELEMENTS

This video will go over how to update your fonts** to match the ones from the Custom element (check screenshots below) and the other way around.

**Font-families set in the CSS Code might differ from the ones mentioned in the video tutorial. The practice of changing the fonts stays the same.

Fonts Styles:

Heading 2

Body

CSS Code:

/* Tabs Type 1 */
@font-face {
  font-family: Questrial;
  src: url("https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5cade8cfe5e5f02b0ddd34b8/1554901200175/Questrial-Regular.ttf");
}
@font-face {
  font-family: nunito-sans;
  src: url("https://static1.squarespace.com/static/5e5cc5496ecd6e20d2894138/t/642e87d44790e500c508a6b1/1680771029363/NunitoSans-Light.ttf");
}
@font-face {
  font-family: libre-caslon-display;
  src: url("https://static1.squarespace.com/static/642fc2cb0ff3d476932cd662/t/642fd70e40a7231d4fe182f4/1680856846167/libre-caslon-display.regular.otf");
}
[id^="tabs-type-1"] {
  background: #f6efe5;

  h3 {
    font-family: Questrial;
    font-size: 10px;
    line-height: 200%;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #35322e;
  }
  .tabs-title h2 {
    font-family: libre-caslon-display;
    font-weight: 300;
    font-size: 38px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #35322e;
    cursor: pointer;
    margin-bottom: 28px;
    display: table;
  }
  .sqs-block-summary-v2 .summary-excerpt p {
    font-family: nunito-sans;
    font-size: 15px;
    line-height: 200%;
    letter-spacing: 0;
    color: #35322e;
  }
  .tabs-title h2 span {
    border-bottom: 1px solid transparent;
  }
  .Index-page-content {
    padding-top: 105px;
    padding-bottom: 80px;
  }
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
    position: relative;
    transition: all 0.5s;
    display: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .yui3-widget
    .summary-item:first-child,
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .summary-item.sm-active {
    display: block;
  }
  .sqs-block-summary-v2 .summary-excerpt {
    max-width: 320px;
    padding-left: 40px;
    margin-top: 105px;
  }
  .tabs-title h2.sm-active span {
    border-bottom: 1px solid #35322e;
  }
  .sqs-block-summary-v2 .summary-title {
    display: none;
  }
  .summary-thumbnail-outer-container {
    pointer-events: none;
  }
  .summary-thumbnail img {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
  }
  .sqs-block-code {
    margin-top: 45px;
  }
  @media (max-width: 1199px) {
    .tabs-title h2 {
      font-size: 32px;
    }
    .sqs-block-code {
      margin-top: 0;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      max-width: 300px;
      margin-top: 65px;
    }
  }
  @media (max-width: 991px) {
    .Index-page-content {
      padding-top: 60px;
      padding-bottom: 40px;
    }
    .tabs-title h2 {
      font-size: 24px;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      margin-top: 45px;
      padding-left: 0;
    }
  }
  @media (max-width: 767px) {
    .tabs-title h2 {
      font-size: 20px;
    }
  }
  @media (max-width: 640px) {
    .Index-page-content {
      padding-top: 30px;
      padding-bottom: 10px;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      max-width: 100%;
      padding-left: 0;
      margin: 0;
    }
    .tabs-title h2 {
      margin-bottom: 15px;
    }
    .sqs-block-summary-v2
      .summary-block-setting-design-list
      .summary-thumbnail-container {
      padding: 0 0 20px;
    }
    .sqs-block-summary-v2
      .summary-block-setting-design-list
      .summary-thumbnail-outer-container,
    .sqs-gallery-design-list
      .sqs-gallery-design-list-slide
      .sqs-gallery-meta-container {
      width: 100% !important;
    }
  }
}

JavaScript Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  tabs_type_1();
});

function tabs_type_1() {
  let tabsSelector1 = '[id^="tabs-type-1"]';
  let tabsType1 = $(tabsSelector1);
  if ( tabsType1.length ) {
    tabsType1.each( function() {
      let count = 0;
      let $this = $(this);
      $this.find('.summary-item:first-child').addClass('sm-active');
      let $tabsTitle = $this.find('.tabs-title');
      $this.find('.summary-item .summary-title-link').each( function() {
        count++;
        let active = '';
        if ( count == 1 ) {
          active = 'class="sm-active"';
        }
        $tabsTitle.append( '<h2 '+active+' data-id="'+ count +'">' + $(this).html() + '</h2>' );
      });
    });

    tabsType1.on('click', '.tabs-title h2', function () {
      if ( !$(this).hasClass('active') ) {
        let dataID = $(this).attr('data-id');
        $(this).parents(tabsSelector1).find('.sm-active').removeClass('sm-active');

        $(this).addClass('sm-active');
        $(this).parents(tabsSelector1).find('.summary-item:nth-child('+dataID+')').addClass('sm-active');
      }
    });

    // fix for custom URL
    tabsType1.find('.summary-item').each(function() {
      let $this = $(this);
      let href = $this.find('.summary-title-link').attr('href');
      $this.find('.summary-read-more-link').attr('href', href);
    });
  }
}
</script>

Custom Elements - Tabs 02

Documentation

REQUIREMENTS

Business Plan with your Squarespace version 7.0;
Squarespace template that allows stacked Index pages;

How to

To implement your custom element inside your Squarespace account please follow the instructions below or/and watch the video:

Copy the CSS code from the bottom of the article and paste to your Design tab -> Custom CSS tab
Copy the JavaScript code from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab
Create a post type with title and description for the tabs.
Add a new section inside an Index Page, where you want the element located. Make sure to title the section with slug “tabs-type-2“ or “tabs-type-2-x“. HTML code to use when building the section:

<div class="tabs-title"></div>

Video Passcode: SQM-ELEMENTS

This video will go over how to update your fonts** to match the ones from the Custom element (check screenshots below) and the other way around.

**Font-families set in the CSS Code might differ from the ones mentioned in the video tutorial. The practice of changing the fonts stays the same.

Fonts Styles:

Heading 2

Body

CSS Code:

/* Tabs Type 2 */
@font-face {
  font-family: Questrial;
  src: url("https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5cade8cfe5e5f02b0ddd34b8/1554901200175/Questrial-Regular.ttf");
}
@font-face {
  font-family: nunito-sans;
  src: url("https://static1.squarespace.com/static/5e5cc5496ecd6e20d2894138/t/642e87d44790e500c508a6b1/1680771029363/NunitoSans-Light.ttf");
}
@font-face {
  font-family: libre-caslon-display;
  src: url("https://static1.squarespace.com/static/642fc2cb0ff3d476932cd662/t/642fd70e40a7231d4fe182f4/1680856846167/libre-caslon-display.regular.otf");
}
[id^="tabs-type-2"] {
  min-height: 500px !important;

  h3 {
    font-family: Questrial;
    font-size: 10px;
    line-height: 200%;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #ffffff;
  }
  .tabs-title h2 {
    font-family: libre-caslon-display;
    font-weight: 300;
    font-size: 38px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 28px;
    display: table;
  }
  .sqs-block-summary-v2 .summary-excerpt p {
    font-family: nunito-sans;
    font-size: 15px;
    line-height: 200%;
    letter-spacing: 0;
    color: #ffffff;
  }
  .tabs-title h2 span {
    border-bottom: 1px solid transparent;
  }
  .Index-page-content {
    padding-top: 90px;
    padding-bottom: 70px;
  }
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
    position: relative;
    transition: all 0.5s;
    display: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .yui3-widget
    .summary-item:first-child,
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .summary-item.sm-active {
    display: block;
  }
  .sqs-block-summary-v2 .summary-excerpt {
    max-width: 680px;
    padding-left: 110px;
    margin-top: 85px;
  }
  .tabs-title h2.sm-active span {
    border-bottom: 1px solid #ffffff;
  }
  .sqs-block-summary-v2 .summary-title {
    display: none;
  }
  .summary-thumbnail-outer-container {
    pointer-events: none;
  }
  .summary-thumbnail img {
    max-width: 100%;
    height: auto !important;
  }
  .sqs-block-code {
    margin-top: 25px;
  }
  @media (max-width: 1199px) {
    .tabs-title h2 {
      font-size: 32px;
    }
    .sqs-block-code {
      margin-top: 0;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      max-width: 95%;
      margin-top: 55px;
      padding-left: 0;
    }
  }
  @media (max-width: 991px) {
    .Index-page-content {
      padding-top: 60px;
      padding-bottom: 40px;
    }
    .tabs-title h2 {
      font-size: 24px;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      margin-top: 45px;
      padding-left: 0;
    }
  }
  @media (max-width: 767px) {
    .tabs-title h2 {
      font-size: 20px;
    }
  }
  @media (max-width: 640px) {
    .Index-page-content {
      padding-top: 40px;
      padding-bottom: 20px;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      max-width: 100%;
      margin: 0;
    }
    .tabs-title h2 {
      margin-bottom: 15px;
    }
  }
}

JavaScript Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  tabs_type_2();
});

function tabs_type_2() {
  let tabsSelector2 = '[id^="tabs-type-2"]';
  let tabsType2 = $(tabsSelector2);
  if ( tabsType2.length ) {
    tabsType2.each( function() {
      let count = 0;
      let $this = $(this);
      $this.find('.summary-item:first-child').addClass('sm-active');
      let $tabsTitle = $this.find('.tabs-title');
      $this.find('.summary-item .summary-title-link').each( function() {
        count++;
        let active = '';
        if ( count == 1 ) {
          active = 'class="sm-active"';
        }
        $tabsTitle.append( '<h2 '+active+' data-id="'+ count +'">' + $(this).html() + '</h2>' );
      });
    });

    tabsType2.on('click', '.tabs-title h2', function () {
      if ( !$(this).hasClass('active') ) {
        let dataID = $(this).attr('data-id');
        $(this).parents(tabsSelector2).find('.sm-active').removeClass('sm-active');

        $(this).addClass('sm-active');
        $(this).parents(tabsSelector2).find('.summary-item:nth-child('+dataID+')').addClass('sm-active');
      }
    });

    // fix for custom URL
    tabsType2.find('.summary-item').each(function() {
      let $this = $(this);
      let href = $this.find('.summary-title-link').attr('href');
      $this.find('.summary-read-more-link').attr('href', href);
    });
  }
}
</script>

Custom Elements - Tabs 03

Documentation

REQUIREMENTS

Business Plan with your Squarespace version 7.0;
Squarespace template that allows stacked Index pages;

How to

To implement your custom element inside your Squarespace account please follow the instructions below or/and watch the video:

Copy the CSS code from the bottom of the article and paste to your Design tab -> Custom CSS tab
Copy the JavaScript code from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab
Create a post collection with title, image and description. Image recommended ratio - horizontal.
Add a new section inside an Index Page, where you want the element located. Make sure to title the section with slug “tabs-type-3“ or “tabs-type-3-x“. HTML code to use when building the element:

<div class="tabs-title"></div>

Video Passcode: SQM-ELEMENTS

This video will go over how to update your fonts** to match the ones from the Custom element (check screenshots below) and the other way around.

**Font-families set in the CSS Code might differ from the ones mentioned in the video tutorial. The practice of changing the fonts stays the same.

Fonts Styles:

Heading 2

Body

CSS Code:

/* Tabs Type 3 */
@font-face {
  font-family: Questrial;
  src: url("https://static1.squarespace.com/static/5c1b99c7a9e02801f6c9b9d0/t/5cade8cfe5e5f02b0ddd34b8/1554901200175/Questrial-Regular.ttf");
}
@font-face {
  font-family: nunito-sans;
  src: url("https://static1.squarespace.com/static/5e5cc5496ecd6e20d2894138/t/642e87d44790e500c508a6b1/1680771029363/NunitoSans-Light.ttf");
}
@font-face {
  font-family: libre-caslon-display;
  src: url("https://static1.squarespace.com/static/642fc2cb0ff3d476932cd662/t/642fd70e40a7231d4fe182f4/1680856846167/libre-caslon-display.regular.otf");
}
[id^="tabs-type-3"] {
  background: #a29d97;

  .summary-excerpt h2 {
    font-family: libre-caslon-display;
    font-weight: 300;
    font-size: 43px;
    line-height: 100%;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 48px;
  }
  .summary-excerpt h3 {
    font-family: nunito-sans;
    font-weight: 600;
    font-size: 11px;
    line-height: 200%;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #ffffff;
    display: inline-block;
    float: left;
    margin-top: 5px;
  }
  .summary-excerpt p {
    font-family: nunito-sans;
    font-size: 15px;
    line-height: 180%;
    letter-spacing: 0;
    color: #ffffff;
    max-width: 400px;
  }
  .summary-excerpt ul li p {
    font-family: Questrial;
    font-size: 10px;
    line-height: 250%;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #ffffff;
  }
  .summary-excerpt p a {
    font-family: nunito-sans;
    font-weight: 600;
    font-size: 9px;
    line-height: 120%;
    letter-spacing: 0.3em;
    color: #494949;
    padding: 19px 60px;
    background: #ffffff;
    margin-left: 55px;
    transition: all 0.4s;
  }
  .tabs-title h2 {
    font-family: Questrial;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #cecece;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    margin-left: 10%;
  }
  .tabs-title h2:first-child {
    margin-left: 0;
  }
  .Index-page-content {
    padding-top: 90px;
    padding-bottom: 90px;
  }
  .summary-excerpt ul {
    padding: 17px 0 65px 15px;
  }
  .summary-excerpt ul[data-rte-list] li > *:first-child::before {
    content: "-";
  }
  .summary-excerpt ul[data-rte-list] li > *:first-child::before {
    padding-right: 4px;
  }
  .sqs-block-summary-v2 .summary-excerpt li {
    margin-bottom: 1px;
  }
  .summary-excerpt p a:hover {
    opacity: 0.8;
  }
  .sqs-block-summary-v2 .summary-block-setting-design-list .summary-item {
    position: relative;
    transition: all 0.5s;
    display: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .yui3-widget
    .summary-item:first-child,
  .sqs-block-summary-v2
    .summary-block-setting-design-list
    .summary-item.sm-active {
    display: block;
  }
  .tabs-title h2.sm-active {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
  }
  .sqs-block-summary-v2 .summary-title {
    display: none;
  }
  .summary-thumbnail-outer-container {
    pointer-events: none;
  }
  .summary-thumbnail img {
    max-width: 100%;
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
  }
  .tabs-title {
    display: flex;
    justify-content: center;
  }
  .sqs-block-code {
    margin-bottom: 45px;
  }
  @media (max-width: 1199px) {
    .Index-page-content {
      padding-top: 70px;
      padding-bottom: 50px;
    }
    .tabs-title h2 {
      margin-left: 5%;
    }
  }
  @media (max-width: 991px) {
    .summary-excerpt h2 {
      font-size: 35px;
      margin-bottom: 25px;
    }
    .sqs-block-code {
      margin-bottom: 15px;
    }
    .summary-excerpt p a {
      padding: 19px 45px;
    }
    .tabs-title h2 {
      font-size: 11px;
      letter-spacing: 0.3em;
    }
  }
  @media (max-width: 767px) {
    .summary-excerpt h2 {
      font-size: 30px;
    }
    .summary-excerpt p a {
      padding: 19px 35px;
      margin-left: 40px;
    }
    .tabs-title h2 {
      font-size: 11px;
      letter-spacing: 0.2em;
    }
  }
  @media (max-width: 640px) {
    .Index-page-content {
      padding-top: 30px;
      padding-bottom: 20px;
    }
    .tabs-title {
      flex-direction: column;
      align-items: flex-start;
    }
    .tabs-title h2 {
      display: inline-block;
      margin-left: 0;
      margin-bottom: 15px;
    }
    .summary-excerpt h3 {
      float: none;
      display: inline-block;
      margin-bottom: 25px;
    }
    .summary-excerpt ul {
      padding-bottom: 25px;
    }
    .summary-excerpt p a {
      margin-left: 0;
    }
    .sqs-block-code {
      margin-bottom: 0;
    }
    .sqs-block-summary-v2
      .summary-block-setting-design-list
      .summary-thumbnail-container {
      padding: 0 0 20px;
    }
    .sqs-block-summary-v2
      .summary-block-setting-design-list
      .summary-thumbnail-outer-container,
    .sqs-gallery-design-list
      .sqs-gallery-design-list-slide
      .sqs-gallery-meta-container {
      width: 100% !important;
    }
  }
}

JavaScript Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  tabs_type_3();
});

function tabs_type_3() {
  let tabsSelector3 = '[id^="tabs-type-3"]';
  let tabsType3 = $(tabsSelector3);
  if ( tabsType3.length ) {
    tabsType3.each( function() {
      let count = 0;
      let $this = $(this);
      $this.find('.summary-item:first-child').addClass('sm-active');
      let $tabsTitle = $this.find('.tabs-title');
      $this.find('.summary-item .summary-title-link').each( function() {
        count++;
        let active = '';
        if ( count == 1 ) {
          active = 'class="sm-active"';
        }
        $tabsTitle.append( '<h2 '+active+' data-id="'+ count +'">' + $(this).html() + '</h2>' );
      });
    });

    tabsType3.on('click', '.tabs-title h2', function () {
      if ( !$(this).hasClass('active') ) {
        let dataID = $(this).attr('data-id');
        $(this).parents(tabsSelector3).find('.sm-active').removeClass('sm-active');

        $(this).addClass('sm-active');
        $(this).parents(tabsSelector3).find('.summary-item:nth-child('+dataID+')').addClass('sm-active');
      }
    });

    // fix for custom URL
    tabsType3.find('.summary-item').each(function() {
      let $this = $(this);
      let href = $this.find('.summary-title-link').attr('href');
      $this.find('.summary-read-more-link').attr('href', href);
    });
  }
}
</script>

WELCOME TO SQUAREMUSE! WE ARE SO EXCITED TO SHARE THIS JOURNEY WITH YOU.

TECHNICAL REQUIREMENTS:

IMPORTANT CONSIDERATIONS:

Custom Elements - Tabs 01

Documentation

REQUIREMENTS

How to

Custom Elements - Tabs 02

Documentation

REQUIREMENTS

How to

Custom Elements - Tabs 03

Documentation

REQUIREMENTS

How to

Part of Pixieset Family

USeful links