Value Stack

Setup

  1. Add a new index section to your page and insert a gallery grid block to add your images and their corresponding titles.

  2. Inside the block’s Design tab, remove the padding, uncheck the crop option and set the title as visible. The image size can be left as default since it’s controlled through the code.



CSS

In your custom CSS window, add snippet 1 (a or b depending on your template) and 2 and switch #target-id for the url slug of the index page section you just created.

SNIPPET 1a:

If you’re using a template from the Brine family, start with this one:

/*TO EXPAND INDEX SECTION TO FULL WIDTH FOR BRINE*/
#target-id .Index-page-content {
  padding: 0;
  max-width: 100%;
}

SNIPPET 1b:

If you’re using the Pacific template, start with this one:

/*TO EXPAND INDEX SECTION TO FULL WIDTH FOR PACIFIC*/
#target-id .page-content {
  padding: 0 !important;
  max-width: 100%;
}
#target-id .page-content .sqs-row {
  margin: 0;
}
#target-id .page-content .gallery-block {
  padding: 0;
}

SNIPPET 2:

/*VALUE STACK*/
#target-id .gallery-block {
  padding-bottom: 0;
}
#target-id .sqs-gallery-design-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#target-id .slide.sqs-gallery-design-grid-slide {
  padding: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}
#target-id .slide.sqs-gallery-design-grid-slide .margin-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}
#target-id .image-slide-anchor,
#target-id .image-slide-title {
  text-align: left;
}
#target-id .image-slide-anchor {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 20%; /*the 20% can be adjusted to resize icon container*/
          flex: 1 1 20%; /*the 20% can be adjusted to resize icon container*/
  margin: 0 10px; /*the 10px can be adjusted to set space between icon and title when side by side in desktop*/
}
#target-id .image-slide-title {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%; /*the 50% can be adjusted to resize title container*/
          flex: 1 1 50%; /*the 50% can be adjusted to resize title container*/
}

/*To alter icon size*/
#target-id .image-slide-anchor {
  padding-bottom: 20% !important;
}

/*To alter title text*/
#target-id .image-slide-title {
  white-space: normal !important;
  font-size: 20px !important;
  text-transform: uppercase;
  margin-top: 0 !important;
  word-break: break-word;
}

/*To alter all three background colors and title color*/
#target-id .sqs-gallery-design-grid-slide:nth-child(1) {
  background: #ebebeb;
}
#target-id .sqs-gallery-design-grid-slide:nth-child(2) {
  background: #898989;
  color: #fff;
}
#target-id .sqs-gallery-design-grid-slide:nth-child(3) {
  background: #464646;
  color: #fff;
}

@media screen and (max-width: 640px) {
  #target-id .sqs-layout .sqs-row .sqs-block:first-child {
    padding-top: 0 !important; /*to remove extra spacing at the top in mobile*/
  }
  #target-id .sqs-gallery-design-grid {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #target-id .slide.sqs-gallery-design-grid-slide {
    width: 100% !important;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  #target-id .image-slide-anchor,
  #target-id .image-slide-title {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    text-align: center;
  }
  #target-id .image-slide-anchor img {
    left: 0 !important;
  }
  #target-id .image-slide-title {
    padding-top: 5px; /*to adjust space between icon and title when stacked in mobile*/
  }
}
 

Note: if you want to make it easier to edit #target-id, you can remove it from each individual selector and instead nest the code inside it since the custom CSS window works with LESS. It will look like follows…

/*VALUE STACK*/
#target-id {
  .Index-page-content {
    padding: 0;
  }
  .gallery-block {
    padding-bottom: 0;
  }
  .
  .
  .
}

@media screen and (max-width: 640px) {
  #target-id {
    .sqs-gallery-design-grid {
      flex-direction: column;
    }
    .slide.sqs-gallery-design-grid-slide {
      width: 100% !important;
      box-sizing: border-box;
    }
    .
    .
    .
  }
}

Text block plugins

Setup

1. Go to the page where you want to implement this plugin and add a Code Block.

2. Paste the HTML portion of your code inside it.

3A. If you want to apply the styles anywhere on your site where you embed the plugin, then add the CSS portion inside your Custom CSS window by going into Design > Custom CSS.

3B. If you want to apply a particular style to only ONE page on your site, then paste the CSS portion of the code inside your Page Settings by clicking on the gear icon next to your page.
In this case, you'll need to add <style> tags around your code like so:

<style>
  Paste here your CSS
</style>

 

#1: Inline text box

Inline text block.jpg

HTML

  • To edit the link address replace http://www.google.com with your preferred URL. Keep in mind that if you're directing to a page inside your site you only need the URL slug of your page, for example for http://www.yourdomain.com/home you'd only need to use /home

  • If you're linking to another blog post, you can also use the URL slug of your post but in this case you also need to indicate your blog page. For example, if your blog post is under this address: http://www.yourdomain.com/myblog/my-blog-post-is-this-one you'll need to use the entire slug that starts after the .com /myblog/my-blog-post-is-this-one

<!-- INLINE TEXT BOX PLUGIN -->
<div class="highlighted-text">
  <p>Related: <a href="http://www.google.com">link that can be set to go to an internal or external URL</a></p>
</div>

CSS

You can make style changes to any of the properties below that have annotations next to them, even the ones set as !important. Just make sure to only alter the values (in blue or green).

/*INLINE TEXT BOX PLUGIN*/
/*To modify the box or container*/
.highlighted-text {
  background: #f0f0f0; /*change background color of the box*/
  padding: 30px 50px; /*change spacing around it*/
  width: 100%; /*alter its width*/
  box-sizing: border-box;
}

/*To modify the text*/
.highlighted-text p {
  font-size: 1.2em !important; /*to keep as body text size use 1em*/
  color: #000 !important; /*change font color*/
  font-weight: bold; /*to keep it same as body text, change to normal or remove entire line*/
}

/*To modify the link*/
.highlighted-text a {
  color: #D31B51 !important; /*change the color of the link*/
  cursor: pointer;
}

/*To modify the link on mouseover*/
.highlighted-text a:hover {
  opacity: 0.5; /*change visibility of the link*/
}

 

#2: Text box for banners

Text only over banner.jpg

HTML

<!--TEXT BOX PLUGIN FOR BANNERS by Thirty Eight Visuals-->
<div class="text-overlay-block">
  <h1>THIS IS A HEADING</h1>
  <h2>With its cool subtitle</h2>
</div>

CSS

You can make style changes to any of the properties below that have annotations next to them, even the ones set as !important. Just make sure to only alter the values (in blue or green).

/*TEXT BOX PLUGIN FOR BANNERS by Thirty Eight Visuals*/
/*To modify the box or container*/
.text-overlay-block {
  background: #fff; /*change bg color*/
  padding: 80px 50px; /*change box's interior spacing*/
  text-align: center; /*change text alignment*/
  width: 100%; /*alter width of the box*/
  margin: 0 auto; 
  word-wrap: break-word;
  box-sizing: border-box;
}

/*To modify the headings*/
.text-overlay-block h1 {
  color: #000 !important; /*change heading 1 color*/
  margin-bottom: 0;
}
.text-overlay-block h2 {
  color: #000 !important; /*change heading 2 color*/
}

 

#3: Text + button box for banners

Text and button block.jpg

HTML

  • To edit the link address replace http://www.google.com with your preferred URL. Keep in mind that if you're directing to a page inside your site you only need the URL slug of your page, for example for http://www.yourdomain.com/home you'd only need to use /home

  • To add an arrow or icons to your button, you can substitute the >> by any of the icons on this list. Just copy/paste the HTML code listed under the icon!

<!-- TEXT + BUTTON BOX PLUGIN FOR BANNERS by Thirty Eight Visuals-->
<div class="text-overlay-block-two">
  <h1>THIS IS A HEADING</h1>
  <h2>With its cool subtitle</h2>
  <div class="text-overlay-block-button">
    <a href="http://www.google.com">AND A NICE BUTTON >></a>
  </div>
</div>

CSS

This plugin shares the same CSS styles for the text as the "Text box for banners" (#2). So:

  • If you want to be able to style the text on the boxes #2 and #3 separately, you don't need to modify anything.

  • If you want to have the exact same text style for boxes #2 and #3, do the following:

  1. In the HTML of box #3 look for class="text-overlay-block-two" and remove: -two

  2. Skip the first part of the CSS portion of box #3 and simply copy from /*To modify the button*/ and paste it either on the CSS custom window or under the Page Settings.

You can make style changes to any of the properties below that have annotations next to them, even the ones set as !important. Just make sure to only alter the values (in blue or green).

/*TEXT + BUTTON BOX PLUGIN FOR BANNERS by Thirty Eight Visuals*/
/*To modify the box or container*/
.text-overlay-block-two {
  background: #fff; /*change bg color*/
  padding: 80px 50px; /*change box's interior spacing*/
  text-align: center; /*change text alignment*/
  width: 100%; /*alter width of the box*/
  margin: 0 auto; 
  word-wrap: break-word;
  box-sizing: border-box;
}

/*To modify the headings*/
.text-overlay-block-two h1 {
  color: #000 !important; /*change heading 1 color*/
  margin-bottom: 0;
}
.text-overlay-block-two h2 {
  color: #000 !important; /*change heading 2 color*/
}

/*To modify the button*/
.text-overlay-block-button {
  position: relative;
  background: #D31B51; /*button bg color*/
  font-weight: bold; /*button font can be set same as body text by switching to normal or deleting this entire line*/
  padding: 20px 50px; /*can be changed to alter the button's height and width*/
  display: inline-block; 
  margin-top: 10px;
  letter-spacing: 0.1em; /*change letter spacing here*/
  transition: opacity 0.3s; 
  cursor: pointer;
  box-shadow: 0 3px 0 0 #b4194c; /*alter or remove button's bottom border/shadow here*/
}

/*Button's font color*/
.text-overlay-block-button a {
   color: white;
 }

/*To create the "pushable button" effect on click*/
.text-overlay-block-button:active {  
  top: 2px; 
  box-shadow: 0 1px 0 0 #b4194c;
 }

/*To modify the button on mouseover*/  
.text-overlay-block-button:hover {
  background: #e12562; /*button's color on mouseover*/
}

 

#4: ConvertKit form box

Convertkit form plugin.jpg

HTML

  • To add your image:

  1. Upload it to Squarespace by going into Design > Custom CSS and clicking on the "Manage Custom Files" button below.

  2. Click on an empty space in your Custom CSS window and click over the file you just uploaded in the "Manage Custom Files" window. That will paste the exact URL of where your file is being stored.

  3. In the HTML below, replace the URL inside the quotes with your own.

  • To add your form:

  1. Create a form that's Naked and Inline and grab the embed code.

  2. Replace the entire <script> line in the HTML below with your code.

<!-- CONVERTKIT FORM BOX PLUGIN by Thirty Eight Visuals -->
<div class="inline-form-block">
  <h3>This is the form heading</h3>
  <p>And your awesome opt-in invite text goes here!<br>Phasellus vitae volutpat enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel rutrum dolor.</p>
    <div class="inline-form-block-image">
        <img  src="https://static1.squarespace.com/static/59512e9e3a04117eb4b1c8c0/t/5a1ebbbf9140b7c306c3007f/1511963584192/CSS+cheatsheet+for+using+custom+code+in+Squarespace.png" alt="This is the freebie">
    </div>
    <div class="inline-form-block-form">
      <script async id="_ck_303298" src="https://forms.convertkit.com/303298?v=6"></script>
    </div>
</div>

CSS

You can make style changes to any of the properties below that have annotations next to them, even the ones set as !important. Just make sure to only alter the values (in blue or green).

/*CONVERTKIT FORM BOX PLUGIN by Thirty Eight Visuals*/
/*To modify the box or container*/
.inline-form-block {
  background: #f0f0f0; /*box's bg color*/
  text-align: center;
  padding: 50px 30px; /*box's inner spacing*/
  width: 100%; /*to alter the width of the box*/
  box-sizing: border-box;
}

/*To modify the text*/
.inline-form-block h3 {
  color: #191717 /*title color*/
}
.inline-form-block p {
  color: #191717 /*description text color*/
}

/*To modify the layout of the box*/
.inline-form-block-form,
.inline-form-block-image {
  display: inline-block;
  width: 45%;
  vertical-align: middle;
}
.inline-form-block-image {
  width: 30%;
}
.inline-form-block-form  .ck_form input,
.inline-form-block-form .ck_form button {
  width: 100% !important;
  margin-bottom: 3px !important;
}
@media screen and (max-width: 640px) {
  .inline-form-block-form,
  .inline-form-block-image {
    width: 100%;
    display: block;
    margin: 0 auto;
  }
  .inline-form-block-image {
    width: 70%;
  }
  .inline-form-block-form {
    margin-top: -30px;
  }
}

 

#5 Animated list

 

    This is my heading 1  

 

    This is my subtitle  

 
       
  • This is a list item 1
  •    
  • This is a list item 2
  •    
  • This is a list item 3
  •    
  • This is a list item 4
  •    
  • This is a list item 5
  •    
  • This is a list item 6
  •  

 

HTML

  • To add your content, simply switch the information in caps.

  • If you want to change the bullet icons, replace the <i> elements using the newest version of Font Awesome since the CSS styles are set to work with them.

Note: to embed the new version of FA on your site – if you don't have it already – simply click on Get Started, copy the script on that page and paste it inside Settings > Advanced > Code Injection!

<!-- ANIMATED LIST PLUGIN by Thirty Eight Visuals -->
<div id="flybox">
  <h1>
    THIS IS MY HEADING 1
  </h1>
  <h2>
    THIS IS MY SUBTITLE
  </h2>
  <ul class="fa-ul">
    <li class="list-item"><i class="fas fa-gem fa-li"></i> THIS IS A LIST ITEM 1 </li>
    <li class="list-item"><i class="fas fa-gem fa-li"></i> THIS IS A LIST ITEM 2 </li>
    <li class="list-item"><i class="fas fa-gem fa-li"></i> THIS IS A LIST ITEM 3 </li>
    <li class="list-item"><i class="fas fa-gem fa-li"></i> THIS IS A LIST ITEM 4 </li>
    <li class="list-item"><i class="fas fa-gem fa-li"></i> THIS IS A LIST ITEM 5 </li>
    <li class="list-item"><i class="fas fa-gem fa-li"></i> THIS IS A LIST ITEM 6 </li>
  </ul>
</div>

 

CSS

Add this snippet into your Custom CSS window.

/*ANIMATED LIST PLUGIN by Thirty Eight Visuals | Animation modified from @chriscoyier's original CodePen https://codepen.io/chriscoyier/pen/DjmJe */
#flybox {
  background: #f9f9f9; /*box's background color*/
  padding: 50px;
  width: 100%;
  box-sizing: border-box;
}
#flybox h1 {
  color: #191717;
}
#flybox h2 {
  color: #191717;
}
#flybox .svg-inline--fa {
  color: #CD1947; /*icon's color*/
}
.list-item {
  opacity: 0;
  color: #191717; /*list text color*/
}
.fly-in {
  transform: translateX(150px);
  animation: fly-in 0.8s ease forwards;
}
.fly-in:nth-child(2) {
  transform: translateX(200px);
  animation-delay: 0.8s;
}
.fly-in:nth-child(3) {
  transform: translateX(250px);
  animation-delay: 1.6s;
}
.fly-in:nth-child(4) {
  transform: translateX(300px);
  animation-delay: 2.4s;
}
.fly-in:nth-child(5) {
  transform: translateX(350px);
  animation-delay: 3.2s;
}
.fly-in:nth-child(6) {
  transform: translateX(400px);
  animation-delay: 4s;
}
@keyframes fly-in {
  to { transform: translateX(0); opacity: 1; }
}

 

JS

Add this snippet into your site's Code Injection window.

If you don't have the script for the JQuery library, paste this line before the plugin's script begins:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ANIMATED LIST PLUGIN by Thirty Eight Visuals | Script modified from mentioned sources -->
<script>
(function($) {

  /**
   * Copyright 2012, Digital Fusion
   * Licensed under the MIT license.
   * http://teamdf.com/jquery-plugins/license/
   *
   * @author Sam Sehnert
   * @desc A small plugin that checks whether elements are within
   *     the user visible viewport of a web browser.
   *     only accounts for vertical position, not horizontal.
   */

  $.fn.visible = function(partial) {
    
      var $t            = $(this),
          $w            = $(window),
          viewTop       = $w.scrollTop(),
          viewBottom    = viewTop + $w.height(),
          _top          = $t.offset().top,
          _bottom       = _top + $t.height(),
          compareTop    = partial === true ? _bottom : _top,
          compareBottom = partial === true ? _top : _bottom;
    
    return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

  };
    
})(jQuery);

/*Original CodePen animation by @chriscoyier https://codepen.io/chriscoyier/pen/DjmJe*/
$(window).scroll(function(event) {
  
  $(".list-item").each(function(i, el) {
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("fly-in"); 
    } 
  });
});
  
  
var win = $(window);
var allMods = $(".list-item");

// Already visible modules
allMods.each(function(i, el) {
  var el = $(el);
  if (el.visible(true)) {
    el.addClass("seen"); 
  } 
});
</script>

 

SUPPORT & CUSTOMIZATION

Get in touch if you have any issues with the code/instructions, or if you'd like to request specific plugin customizations (a customization service quote may apply).