saffron ave

Willow Template

Everything you need to know to customize your new WILLOW templates!

understanding
showit part 2
(right side)

02

understanding
showit part 1 (left side)

01

Showit has various videos and helpful documents you can reference when setting up your site and understanding everything within. I’ve also made a video going through the various settings within showit

Showit Overview

Jump To...

Below are direct links to various tutorials that can help you understand how to use the elements and canvases within your template

01 // design settings overview

1. Overview of COLORS and how they can be replaced throughout the site

2. Using FONTS - changing them throughout the template

3. Adding CUSTOM FONTS with fontsquirrel.com and uploading to your media gallery

Design Settings

customizing your design settings

01

Within my templates I have the following colors pre-set based on how they are used within the template. When changing the colors in this template keep in mind how they are currently used. AKA: If you make #1 a pale/light color, all text will then be that color.

PALETTE :: There are 8 different colors you can add to your palette. FONT :: Mobile and Desktop each have 4 Font settings

Color Palette

Overview

my template color settings

#1
For text throughout

#2
For buttons and lines

#3
Neutral Background Color

#4
Accent color throughout site & text hover

#5
Unused Neutral Color

#6
Unused Neutral Color

#7
Background Overlay/Underlay

#8
All white text & graphics

Stick to choosing around 4-6 colors, this will give you the flexibility on usage and brand cohesiveness. Be aware of your overall style, adjectives, color theory and your brand season.

Color Pairing Tips

read this blog post!

categorize the colors:

1-2 main colors: Used on the majority of your branding, your key color
1-2 accent colors: Used sparingly but used to highlight info or buttons
1-2 neutral colors: For text, backgrounds, subtle accents throughout

GOOGLE FONTS: Here you can pick and choose any FREE google font to add to your site.

CUSTOM FONTS: Here you can upload your Purchased fonts and add to the site.

SELECTED FONTS: Here is a list of all the fonts that you've added and can be used on your site.

When changing the fonts, keep in mind how they are used throughout the template. AKA: If you change the ‘Heading’ to a cursive font all button text and page headings will reflect that.

Within my templates I have 4 fonts pre-set. If you click the 3 dots on the left of each style, you can set the font, size, line height, link, etc.

Font Settings

NOTE

Add FREE Google fonts

Choose the 'Font Squirrel' link, upload your font, unzip, and add the .WOFF to your library first.

When choosing fonts, make sure to limit it to 2-3 fonts total. The more fonts you introduce, the less cohesive and busier it can feel.

Find a primary font, a secondary, and an accent font. Make sure the fonts you use align with your adjectives and style. and don’t use a messy or hard-to-read font for any headings!

A glamorous and high-end brand might use a serif font type. A simplistic and modern might use a clean or bold sans-serif font. A romantic or playful brand might use a calligraphy or brush font.