Olive Template
Everything you need to know to customize your new Olive 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 lines and button borders
#3
Neutral Brand 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.
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 //
DESIGN SETTINGS: Making Changes to your Design Settings (colors/fonts)
SCROLLING NAV: Canvas Views / Icon / Sticky / Alignment / transition / canvas layer pop-up {min 1:50}
HEADER: white vs color vs mobile / Changing text links, copy paste {min 6:15}
SLIDER: Gallery settings / transitions / background / Fit Window height {min 7:55}
CALL TO ACTION: changing images, hover actions {min 11:40}
TESTIMONIALS: site canvas {min 13:00}
BLOG: link to categories, show hover color and text / option to set as blog home {min 13:50}
FOOTER: instagram (LINK OFF) / social links / mobile {min 17:50}
POP UP: canvas view / click action / custom embed {min 19:45}
INTRO: image settings and text locking to grow with the screen
TEAM: Duplicate, remove member
{min 1:30}
BY THE NUMBERS: check on mobile and desktop
{min 2:10}
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
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.
08 //
click for email signup tutorials
coming soon
THE BLOG
09 //
The wordpress 'reading' settings
The showit 'template' info
TEMPLATE INFO: The Wordpress template dropdown should be ‘Front Page’ (LEARN MORE HERE)
BLOG LANDING: Editing the featured sections (hover, click links, changing image, full-width)
BLOG POST CANVAS: The template settings, changing the background hover, the canvas settings (in post loop) and grow with content {min 4:25}
SIDEBAR BOTTOM: The bottom categories & search bar editing {min 6:40}
SINGLE POST: Template info, the title (grow with content) and post content (canvas settings) - {min 7:45}
SIDEBAR: Editing the sidebar, the canvas layer number, instagram {min 8:00 and 11:05}
CATEGORIES & SEARCH; Changing the title and the different sidebar {min 12:45}
WORDPRESS PAGE: Using a Wordpress page separately {min 15:30}
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
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}
10 //
blog post css styling here
wordpress settings
DESIGN EXTRAS
11 //
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
