2. Access CANVA graphics

Access CANVA graphics below:

Evergreen Palette

Backgrounds - background images for sections, testimonial cards, pricing tables

Evergreen Benefits Icons

Swirl Background

Portrait Hero Banner

Recolor Stars

Offer Inclusions Cards

Pricing Tables

Offer Mockups

3. Evergreen as a standalone website

Evergreen is a coded sales page template. If you got this template as a 6-month trial, you probably don’t need all the code that is used to replace the site styles on-page, since we are using the same styles inside Squarespace Design settings (colors, fonts, etc).

To disable on-page code, edit a page and head down to the bottom section (just duplicate the page before you do this)

Now go to Design > Custom CSS and find this snippet in the code:

This piece of code gives us our uppercase subhead (heading 4) and handwriting font (paragraph 3).

Change the name of the font (after font-family:) for the one you have set as your Site Title font. You can also tweak a few more settings here – font size and line height. Click Save in the upper-left corner, when you are happy with the result.

If you use Evergreen as a standalone site, the rest of the site settings are in Squarespace design tab (colors, fonts, etc).

We use some of the backgrounds as images - see the Canva graphics above.

You can recolor and replace images that serve as backgrounds for some of the sections, like

• testimonial blocks

• pricing tables

• split sections

• general section backgrounds

4. Evergreen as a sales page template

If you got this template as a sales page template and we installed it for you on your established website, you have two options:

1) Keep and edit the local on-page styles via custom CSS

2) Remove the CSS and use your own site’s fonts and colors and edit the layouts. To remove any styling from the page, simply delete the last section on the page that has a markdown block.

We suggest backing up the page - you can duplicate is multiple times.

5. How local styles are applied

The markdown that you will find at the bottom of the page does two things:

1) It installs custom fonts on your website. These are free Google fonts Karla, Bebas Neue and Great Vibes. We generated the fonts link on the Google Fonts website.

2) It adds a custom class to the whole page - this allows us to target this page via custom CSS (Design → Custom CSS).

Now, head over the the custom CSS tab and find the snippet the starts with *WARNING!*. You’ll find the custom code that replaces:

• font families and font sizes

• button colors

• accordion block colors

• tertiary button block colors in light and dark sections

6. How to replace, edit or disable custom fonts (Sales Page temPlate)

Head over to the custom CSS and find the following snippet:

This snippet defines variables that are calling a specific font later in the code. We have these fonts (Bebas Neue, Karla, Great Vibes) installed via a markdown block.

You can:

1) Rewrite these variables with your own font that you have installed on the website. For example, you can assign one of Squarespace fonts via Website Logo (Design → Fonts - Assign Styles → Site title. If you are using a logo on your, nobody will see this font but it will be available on the site and we call it via CSS. You can call any font available on your site (in paragraphs, meta, etc)

2) Install your own custom font (if it’s not available on Squarespace) and reference it using the variable (for example, replace “Karla“ with another font name like “Open Sans“. Here’s an article explaining how to install a custom font on your website.

3) Delete this snippet altogether and this action will disable all custom fonts on this page.

Look down the code and you’ll be to edit individual font sizes (keep in mind that if you delete this, the code will stop working):

7. How to edit font colors on-page

Squarespace allows editing font colors on-page. We re-applied some colors on your page manually. You can edit the colors by going into the page, selecting a piece of text and changing the color in a contextual menu that appears:

8. How to Change bullet list colors

You template uses custom bullet points. We have added and colored them using custom CSS.

In the Custom CSS tab, find the following snippet:

Here, you can change some of the color variable we used down below the page. You can re-write these with your own HEX codes.

On line 159, you’ll find the snippet that applies custom icons to bullet points and add @applet-color-accent-light color. You can rewrite it above in the variable and it will be use to recolor the bullet points to #EA99BC color.

9. How to CHANGE BUTTON COLORS & fonts

We are replacing all button fonts and colors using the following snippet:

We are replacing the style in all Tertiary buttons, so the easiest way to “disable“ this code is to use a primary or secondary buttons.

If you’d like to use different colors and fonts, you would need to rewrite the variables used in this code.

Or for example, if you’d like to avoid using a font-family in the buttons, you can simply delete the line that says “ font-family: @applet-paragraph-font-family;“

10. How to REPLACE ACCORDION STYLES

This the last thing we are doing using the custom CSS. The following snippet replaces accordion background / items title color / arrow color. You can edit these variable at the top of the CSS file. If you with to use your own styles and control them via Squarespace admin, you can delete this snippet (just be careful not delete the last bracket in the CSS - the one that wraps the whole CSS into a page-specific class).