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
1. Overview of COLORS & FONTS (HOW TO ADD custom and edit the line-height/size) 2. How to Duplicate Pages from original design or current design. 3. Add New page templates and duplicate canvases.
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 some backgrounds and links
#3 Background Color
#4 Accent color throughout site & text hover
#5 Unused Neutral Color
#6 Template lines throughout
#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.
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.
6. Make it homepage for blog 7. Signup Reference 8. Edit Site Canvas for Press 9.Footer
HOMEPAGE
02 //
about page overview
01
1. The Top Gallery 2. Lettering Font 3. Duplicate 'team'
ABOUT
03 //
services page overview
01
SERVICES
1. The Top Gallery 2. Lettering Font 3. Duplicate 'team'
04 //
portfolio & galleries
01
PORTFOLIO
1. Canvas Layout (duplicating canvas for more galleries) 2. Hover action w/title behind 3. Different 'Views' with different gallery styles (Tiled, matted, sliding, etc) *Option to open a new page 4. Click actions for popping up and closing out 5. Image recommendations for galleries
05 //
contact page & Form
01
CONTACT
1. Phone/Email Click action 2. Form box settings 3. Form Submit/View (OR send to 'thank you')
06 //
default page templates
01
DEFAULT PAGES
1. Regular Page template (when to use) 2. Wordpress Blog Template (how to create custom pages)
07 //
coming soon page & Canvas
01
COMING SOON
1. As a page itself OR as a site canvas with high page stacking 2. How to use it on pages (like the blog) 3. Signup Form Reference
2.Canvas Template Info (single Post) one you choose
3. Title 'grow with' post title settings
4. Category, Date and Featured Image Options
5. Post content (grow with)
6. Signature (stick to bottom)
7. CUSTOM CSS & Creating a new blog post in Wordpress
The showit 'template' info
Reference Your Zip file for the "TEMPLATE EXTRAS" for the post CSS text document and for the blog post screenshot example for reference.
/ note /
category & search templates
01
CATEGORIES
1. Explanation (canvas views like blog), the category title 2. Using the template for Tags and other wordpress 'templates' 3. Creating Custom Category Pages. (category-travel)
