template documentation

Read this page before making any changes to the template. Also, please register for our template restyle course:

 

*By the way, this page is pass-protected. You can just keep it in the Not Linked section and consult it when you need to

 

what's covered in this guide:

  1. How to get started / Watch the course

  2. Access CANVA graphics

  3. Top header split section (as background image)

  4. Split sections created via shape block + image

  5. Vertical text

  6. Anchor links on services page

  7. Summary block title font

  8. Blog page category links

1. How to get started / Watch the course

Firstly, duplicate all the pages you plan to use before making any changes to the design. This way you will save the original design of the layouts for your future reference. Many things can go wrong when you start designing, and some of them are difficult to reverse. Duplicating the pages beforehand will safeguard your customization process. If you mess something up, you can always start fresh. You can duplicate pages within one website as many times as you need.

To duplicate a page click a small gear icon next to it. In the general settings scroll down and click Duplicate page. You can put these duplicated pages in the Not-Linked section, so no one sees them except for you. To do this, just click the name of the page and drag it down.

We also advise you to watch the course and prepare your content before tweaking the template. The course walks you through Squarespace website builder and explains how to customize your template using basic design principles. Watching it before jumping into tweaking ensures the best possible outcome.

2. Access CANVA graphics

3. Top header split section (As a background image)

The Lora template uses two versions of the split screen design. One version is used in the hero (top) sections and is created via custom CSS. The other one, as explained below, is created via Squarespace native Fluid Engine editor.

You can use the CSS-enabled version if you are planning to use a transparent (dynamic) header design. To change the header color design:

  1. Open any page for editing

  2. Click “Edit site header”

  3. Select “Style” and you’ll have a selection of multiple styles (Solid, Gradient, Theme, Dynamic).

The Dynamic option is what we are using for the Lora design. It creates the transparency effect.

How to use the CSS-enabled version of the split section and replace content in it:

  1. Open the top section for editing by clicking the button “Edit section”

  2. Go to the “Background” section and replace the background image

  3. Go back to the Format tab and set the Height property to 3 or 4. If it’s set to 4, the split image will appear on the left; if it’s set to 3, it will appear on the right.

  4. Place the rest of your content on the page to the left or to the right of the image.

  5. If the split settings don’t apply immediately, save the page and reload it for custom CSS to propagate.

On mobile, the image will be placed at the top of the design. 

If you are planning to use a solid header with some color, you can disable the split layout created via the background image. Simply set the section height to something other than 3 or 4.

4. Split sections created via shape block + image

The rest of the split sections (apart from the top hero area) are created using the native Squarespace tools.

To edit the regular split section, do the following:

  1. Open any page for editing

  2. Scroll down the page and find a split section

  3. Open the section settings by clicking the “Edit section” button

  4. Inside these settings, select “Color” - you’ll be able to change the key section background color by choosing a different color theme (for more on how to edit colors in Squarespace - watch the accompanying template restyle class)

  5. Inside the section itself, hover over the content and find a shape block. When you bring up block editing settings, you’ll be able to change the color. If there’s text above the shape block, you can change the text color inside the block itself too.

  6. If you see an image - it’s a regular image, which is stretched to the edges of the screen. Inside the image settings, set the design setting to “Fill”. 

  7. Open the section setting once more, and notice that the Fill Screen option is disabled. This way, there’s no empty room at the top and bottom of the section so we can place an image or a shape block and it will fill the entire split area.

  8. If you wish to put several alternating split layouts next to each other, in the section settings, disable the gap entirely. This way, you images and shape blocks will be vertically aligned without strange gaps. Press “G” to see the grid and make sure the gap is disabled.

5. Vertical text on the Services page

You can add vertical text to any page:

  1. Install this Chrome extension – it allows you to quickly grab section and block IDs on the page in Squarespace.

  2. Add your text to the page; then turn it into italics.

  3. Enable the chrome plugin by clicking on its icon at the top of your Chrome browser.

  4. You’ll see the page with all section IDs highlighted.

  5. Grab the appropriate block ID (it will be situated next to your text block and will begin with #block-yui (etc). 

  6. Next, close the page and go Design -> Custom CSS.

  7. Scroll down the line where it says “// --- Vertical text”

  8. Paste your block ID followed by a comma, next to another block ID like this.

Any text inside this block will become vertical text and you come to move it around the grid.

6. Anchor links on the Services page

Anchor links are a great solution for long-scrolling pages. They help users jump to a different section on the same page and therefore navigate this page more easily. In Lora Template we have anchor links menu on the Services page.

Firstly, we create a menu in one of the upper sections of the page. In this menu we list our services that will have separate sections later on the page.

Now, let's scroll to our first section Strategy and consultancy. Here, add a full-width code block. Insert this snippet in the code block. Give a different name to this section in the snippet. For example, we will call ours strategy.

<span id="strategy"></span>

Now go back to the top section that contains the menu, highlight the text of the first menu item and link it to the  Strategy and consultancy section. The format of linking will be /url slug of the page #name of the section (without spaces) e.g. /catalog#services.

Rinse and repeat – link other menu items to their corresponding sections.

You also want the scroll itself to be smooth. That's why we have added this snippet of code in the Design > Custom CSS.

// --- Smooth scroll
html {
  --scroll-behavior: smooth;
  scroll-behavior: smooth;
}

7. Summary block title font

In Lora template we use summary blocks to display blogs on both home pages. You may have noticed that there isn’t much innate platform flexibility to change fonts in summary blocks. That is why we are swaping a summary block title font with a bit of code.

The following snippet allows you to tweak the parameters of the headlines in the summary block. You can change the font size, the font color, the font-weight (make the text thinner or bolder), or even swap the font altogether. 

// --- Summary Block Titles (blog post titles)
.summary-title-link {
  font-size: 1em !important;
  color: #000000;
  line-height: 1.5px;
  font-family: Yeseva One !important;
}

If you are not sure how to type in the font name in the CSS snippet for it to work, jump into the Fonts menu (Site Styles>Fonts) and find the name of your fonts there. If you want to upload your custom font, follow the first three steps of this tutorial.

8. Blog page category links

Make sure all of your blog posts have categories. Click on three dots next to any blog post, click Settings > Options > Categories. Type in your categories here and click Save.

On the main Blog page we use a Markdown block, that contains this code:

<style type="text/css">
  .applet-justified-links {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	text-align: center;
    font-weight: 600;
    font-size: 0.75em;
    letter-spacing: 0.04em;
  }
  .applet-justified-links a {
    margin-left: 10px;
    margin-left: 10px;
  }
  
  @media screen and (max-width: 768px) {
    .applet-justified-links {
      flex-direction: column;
    }
    .applet-justified-links a {
      margin-top: 15px;
    }
  }
</style>

<p3 class="applet-justified-links">
  
  <a href="/blog?category=Fashion">FASHION</a>
  <a href="/blog?category=Lifestyle">LIFESTYLE</a>
  <a href="/blog?category=Design">DESIGN</a>
  <a href="/blog?category=Photography">PHOTOS</a>

</p3>

Each category should have its line. Let's take the Fashion category as an example. Take a look at this string of code <a href="/blog?category=Fashion">FASHION</a> 

Fashion stands for a category, and FASHION in all caps is how it should be written and look like in the category links.