Ginger Template
Everything you need to know to customize your new Ginger templates!
join the Fb group
showit help docs
all Videos HERE
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
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 background buttons
#3
Neutral Background Color
#4
Accent color throughout site & buttons
#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.
Font Pairing Tips
blog Post: choosing fonts
A list of fonts used on your template
blog Post: pairing fonts
upload your own
tutorial
the Homepage
HOMEPAGE
02 //
NAVIGATION: The Site Border / Navigation / Understanding Canvas Views / Sticky Settings
HEADER: Canvas Layer Numbers / The Transparent background {min 3:15}
SLIDER: Canvas Views / Slide Transitions / The background {min 4:20}
CALL TO ACTION: Black white photos on Hover {min 6:30}
TESTIMONIALS: Site canvas for both {min 7:30}
FOOTER & BOTTOM BORDER BAR: Sticky To Bottom {min 8:20}
POP UP: canvas view and stacking order / click action / custom embed {min 9:55}
EXTRA: How to Add, Remove, Re-arrange, and Copy Canvases {min 11:00}
COLOR BLOCK: How to re-size the background per canvas
TEAM: How to duplicate the canvas for more team members, how to remove a member {min :50}
MIDDLE: Explanation of “Featured” Buttons and how to spread across full screen {min 1:35}
VIDEO: Adding a new video at the bottom {min 3:20}
NOTE: You have the choice to remove any of the canvases by choosing to ‘disable’ the view on desktop and mobile or ‘cutting’ it completely.
ABOUT
03 //
about page
GALLERY
PAGE CANVAS: How to Duplicate Canvas galleries to add more galleries
IMAGE HOVER: How to Create the Hover Photo Change {min :55}
CLICK ACTIONS: Setting the click actions to choose the selected gallery {min 1:40}
DUPLICATING GALLERY: How to add and edit new individual galleries & click actions {min 2:50}
MOBILE: Check your mobile settings {min 4:50}
05 //
gallery
COMING SOON
SITE CANVAS: Set to window height / Add to Page or 'Set as Homepage'
ADDING THE CANVAS: - ** Recommend Adding the site canvas to the top of the page, not bottom **
PREVIEWING: How to preview your page without seeing the coming soon page.
07 //
click for email signup tutorials
coming soon
THE BLOG
08 //
The wordpress 'reading' settings
The showit 'template' info
TEMPLATE INFO: Linking to your Wordpress templates to integrate (see VIDEO HERE)
BLOG HEADER/SLIDER: The canvas setting to pull specific posts and setting views {min 1:30}
BLOG POST SITE CANVAS: The canvas setting (in post loop) and setting the hover and properties {min 3:55}
EXPLORE CANVAS: Black and white hover (VIDEO HERE), the instagram snapwidget, the mobile version {min 7:05}
SINGLE POST TEMPLATE: Editing the sidebar, the post content settings, the comments {min 9:55}
SIDEBAR: Editing the single post sidebar site canvas / search box / categories {min 12:15}
CATEGORY TEMPLATE: Wordpress settings and page settings {min 15:00}
Reference Your Zip file for the "TEMPLATE EXTRAS" for the post CSS text document and for the screenshot example for reference.
/ post styling note /
view tutorial here
the blog
8
WORDPRESS SETTINGS
SHOWIT SETTINGS: How to set the TEMPLATE INFO to integrate/talk with showit
WORDPRESS SETTINGS: How to tell Wordpress to display your showit pages you want
USING A BLOG AS HOMEPAGE: How you can set a blog template to be used as a homepage {min 1:50}
POSTS: How to create blog posts - an overview {min 4:30}
09 //
blog post css styling here
wordpress settings
recolor my lettering
08
DESIGN EXTRAS
10 //
Reference Your Zip file for the "TEMPLATE EXTRAS" for the following videos that use extra 'CODE'.
/ note /
rewards style embed
07
Flodesk tutorial
02
convertkit email embed styling
03
mailchimp unstyled form tutorial
04
instagram widget greyscale
01
using canvas pop ups (newsletter)
05
