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.1 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.

A Note on Fluid Engine

Our Custom Element use the Classic Editor as builder. New sites use the new Fluid Engine as default when adding a blank section. When we recorded the video the Classic Editor was still default so it’s not showing it, so when you add a new section for your Custom Element, make sure to use the option at the bottom Add Blank - CLASSIC EDITOR as seen in the following image:

Custom Elements - Tabs 1 (Squarespace 7.1)

Documentation

REQUIREMENTS

  • Business Plan with your Squarespace version 7.1;

How to

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

  1. Copy the CSS code from the bottom of the article and paste to your Design tab -> Custom CSS tab

  2. Copy the JavaScript code from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab

  3. Create a blog collection for your options, and build the element on the page you want to use it as shown in the video. HTML code to use in the code block:

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

4. Copy the “Code for ‘Show the Section ID’:” from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab

5. In Edit mode press Shift + i keys, which will show your Section ID (this will be used in step 6 and 7)

6. Replace in CSS the “[data-section-id=“5f884c970bce463c7b90299f”]” with your Section id as shown by the selector in step 4

7. Replace in JavaScript the “[data-section-id=“5f884c970bce463c7b90299f”]” with your Section id as shown by the selector in step 4

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:

Headings

 

Paragraphs

Meta

 
 

Code for Show the Section ID:

<script src="https://smi.squarespace.com/assets/sm-show-id/show-id.js?password=demo&ver=1.0.1"></script>

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");
}
[data-section-id="5f884c970bce463c7b90299f"] {
  .section-background {
    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-top: 0;
    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;
  }
  .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) {
    min-height: auto !important;

    .tabs-title h2 {
      font-size: 24px;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      margin-top: 45px;
      padding-left: 0;
    }
  }
  @media (max-width: 767px) {
    .tabs-title {
      display: flex;
      justify-content: space-between;
    }
    .tabs-title h2 {
      font-size: 18px;
      margin-bottom: 0;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      max-width: 100%;
      padding-left: 0;
      margin: 0;
    }
  }
  @media (max-width: 640px) {
    .tabs-title {
      display: table;
    }
    .tabs-title h2 {
      font-size: 25px;
      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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var $ = jQuery;
  $(document).ready(function() {
    tabs_type_1();
  });

  function tabs_type_1() {
    let tabsSelector1 = '[data-section-id="5f884c970bce463c7b90299f"]';
    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 (Squarespace 7.1)

Documentation

REQUIREMENTS

  • Business Plan with your Squarespace version 7.1;

How to

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

  1. Copy the CSS code from the bottom of the article and paste to your Design tab -> Custom CSS tab

  2. Copy the JavaScript code from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab

  3. Create a blog collection for your options, and build the element on the page you want to use it as shown in the video. HTML code to use in the code block:

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


4. Copy the “Code for ‘Show the Section ID’:” from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab

5. In Edit mode press Shift + i keys, which will show your Section ID (this will be used in step 6 and 7)

6. Replace in CSS the “[data-section-id=“5f884c970bce463c7b9029a3”]” with your Section id as shown by the selector in step 4

7. Replace in JavaScript the “[data-section-id=“5f884c970bce463c7b9029a3”]” with your Section id as shown by the selector in step 4

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:

Headings

 

Paragraphs

Meta

 
 

Code for Show the Section ID:

<script src="https://smi.squarespace.com/assets/sm-show-id/show-id.js?password=demo&ver=1.0.1"></script>

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");
}
[data-section-id="5f884c970bce463c7b9029a3"] {
  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-top: 0;
    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;
  }
  .tabs-title h2:last-child {
    margin-bottom: 0;
  }
  .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) {
    min-height: auto !important;

    .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: 16px;
      margin-bottom: 0;
    }
    .tabs-title {
      display: flex;
      justify-content: space-between;
    }
    .sqs-block-summary-v2 .summary-excerpt {
      max-width: 100%;
      margin: 0;
    }
  }
  @media (max-width: 640px) {
    .tabs-title {
      display: table;
    }
    .tabs-title h2 {
      font-size: 25px;
      margin-bottom: 15px;
    }
  }
}

JavaScript Code:

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

  function tabs_type_2() {
    let tabsSelector2 = '[data-section-id="5f884c970bce463c7b9029a3"]';
    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 (Squarespace 7.1)

Documentation

REQUIREMENTS

  • Business Plan with your Squarespace version 7.1;

How to

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

  1. Copy the CSS code from the bottom of the article and paste to your Design tab -> Custom CSS tab

  2. Copy the JavaScript code from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab

  3. Create a blog collection for your information, and build the element on the page you want to use it as shown in the video. HTML code to use in the code block:

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

4. Copy the “Code for ‘Show the Section ID’:” from the bottom of the article and paste to your Settings -> Advanced -> Code Injection -> Footer tab

5. In Edit mode press Shift + i keys, which will show your Section ID (this will be used in step 6 and 7)

6. Replace in CSS the “[data-section-id=“5f884c970bce463c7b9029a7”]” with your Section id as shown by the selector in step 4

7. Replace in JavaScript the “[data-section-id=“5f884c970bce463c7b9029a7”]” with your Section id as shown by the selector in step 4

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:

Headings

 

Paragraphs

Meta

 
 

Code for Show the Section ID:

<script src="https://smi.squarespace.com/assets/sm-show-id/show-id.js?password=demo&ver=1.0.1"></script>

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");
}
[data-section-id="5f884c970bce463c7b9029a7"] {
  .section-background {
    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-top: 0;
    margin-bottom: 40px;
  }
  .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.2em;
    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.2em;
    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.3em;
    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;
  }
  .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) {
    .tabs-title h2 {
      margin-left: 5%;
    }
  }
  @media (max-width: 991px) {
    min-height: auto !important;

    .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) {
    .tabs-title {
      flex-direction: column;
      align-items: flex-start;
    }
    .tabs-title h2 {
      display: inline-block;
      margin-bottom: 15px;
      margin-left: 0;
    }
    .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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var $ = jQuery;
  $(document).ready(function() {
    tabs_type_3();
  });

  function tabs_type_3() {
    let tabsSelector3 = '[data-section-id="5f884c970bce463c7b9029a7"]';
    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>