Your Unstack Onboarding Guide

This guide will take you ~1-hour to complete and will lead you through setting up an entire Unstack Website.

First Steps

Welcome to Unstack 👋we’re thrilled you’ve joined us!

Your first steps will include learning the editor, uploading your logos, updating your branding, and updating your header.

Yes. That’s a list - however, most can do this in under one hour.

Exploring the Editor

Our page editor is an incredibly powerful tool, however, it does take some getting used to just like any other platform.

Basics

Our editor is a component-based editor, so all the customizations you’d like to do will happen component-by-component

Here’s a 20-minute video exploring the editor experience:

Additionally, here’s a fully written out help document about the editor: Unstack Editor Overview

Uploading Your Logos

Head into the elements manager and upload them within the top row of the page, you’re going to need:

  • One light colored logo that can easily be seen on a darker background
  • One darker colored logo that can easily be seen on a lighter background
  • Favicon in PNG format (32px by 32px)
  • Social share image that’ll be used when links are shared on Twitter (16:9 image ratio)

Then, once you’ve uploaded the logo, make sure you adjust its display size:

You can do this by hovering over the text that says “Configure Header” and incrementing or decrementing the “logo he:” option

Updating Your Branding

Colors

💡 I already have a website with colors, but WTH (what the heck) are RGB or HEX color codes?

Great question! RGB/HEX color codes are a standardized way we reference color to keep is consistent across platforms. Your designer might have set these up for you, so let’s talk about finding them.


I suggest using a Chrome/Firefox Eyedropper extension


I need help? Click here to email support and request we do this for you.

First, let’s talk about what you’ll need to bring to the table, you’ll need RGB or HEX color codes for the following:

  • Primary Brand Color
    • The main color you use for your brand usually is within the logo.
  • Secondary Brand Color
    • The secondary color you use for your brand usually complementary to the primary and may or may not be within the logo, however, it’s heavily used on the site.
  • Accent Color
    • This can be the secondary color if you’d like. We’ll use this for hyperlinks and buttons.
  • Dark Background Color
    • This can be “#27292D” if you’d like, however, I suggest using a dark on-brand color that is complementary to the primary color.
  • Light Text Color
    • This can be white or “#FCFCFC” if you’d like, or you may get designer with it and use a lighter color that is complementary to the primary/secondary color.

You’ll then enter these colors into the styles manager, we’ll be changing out the defaults, to know what default you’re editing look at the badge directly underneath the color block:

Color we Found Above

Unstack Default Name

Primary Brand Color

Brand Primary

Secondary Brand Color

Success

Accent Color

Warning

Dark Background Color

Dark Background

Light Text Color

Light Text

 

All other colors are a good idea to fill out, however, not required for this guide.

Font Families

💡 Fonts Suggestion


Need help finding our which font your site is using? Check out What Font: an extension which will tell you what each font is.


We pull our fonts directly from Google Fonts, if you need to embed a custom font that is not a Google Font, please add this code example as a custom integration.

No worries, we have a large directory of Fonts that we’ve inputted into the app that you may select from, so let’s talk about selecting which ones you’d like to use.

You’ll select up to 4 fonts which will be used across the entire site.

To add a new font family

Use the blue + button in the upper right corner to add a new font:

Then, select the font you’d like from the drawer that’ll open by clicking it:

To edit a currently selected font family

Simply click the square to open the drawer then select the font you’d like to change it to:

Once you’ve opened the drawer, click the font you’d like to change it to:

Typography


Updating your typography is HUGE, fonts, copy, and colors are the three key things people unconsciously process about your brand while reading your website. (But, don’t stress, you can adjust this at any time)

You’re going to update the following font types:

  • H1
  • H2
  • H3
  • Paragraph
  • Blog H1
  • Blog H2
  • Blog H3
  • Blog Paragraph

Let’s first breakdown, how to edit a type:

Within the highlighted tray, you’re going to edit:

  • Font Family
  • Font Weight
    • Depending on the font family this will vary, however, is most commonly: Light, Regular, Medium, or Bold
  • Font Size
    • This is in REM, the conversion here is 0.0625 for PX -> REM:
      • 16px = 1 REM
      • 32px = 2 REM
  • Line Height
    • This is in EM, the conversion here is 0.0625 for PX -> EM:
      • 16px = 1 EM
      • 32px = 2 EM
  • Color
    • This is the color that the typography will appear in

Additionally, make sure to adjust each typography for “Dark BG” (dark background) too, this is how you can make sure text is viewable even when the background is on the darker side:

When editing the Dark Bg version, you’ll only need to adjust Color since all attributes will remain the same.

Highlight and Quote

When updating the color used for the highlight and quote elements, we suggest using either:

  1. Brand Secondary
  2. Accent Color

To adjust these you’ll simply need to change the color they’re appearing in:

And, of course, don’t forget to adjust them for Dark Bg too!

Buttons

Buttons, they’re the main CTA. Although it seems so small, it’s so important to edit this and make it look on-brand since clicking a button is the key step someone takes before completing an action you’re trying to get them to do.

Button settings are broken down into four categories:

  1. Text
  2. Shape
  3. Border
  4. Hover

Let’s break down the important settings for each category:

Text

  • Make sure font family is the one you’d like
  • Make sure the font color is visible in respect to background-color

Shape

  • Adjust background color to either Brand Primary, Accent Color, or whichever you fancy
  • Adjust the height if you’d like the button to be larger

Border

  • Adjust the border-radius if you’d like the button to be rounded
    • The higher the number, the rounder the button

Hover

  • We suggest leaving the background and border color the same and simply decrementing the hover

The lower the opacity, the brighter the button will get when hovered:

💡 Style Suggestion


Having the primary button have a background color and no border then the secondary button to have no background color and solely a border is a commonly done style:


Hyperlinked Text

The hyperlinked text will take on the text color designated under `Action Link`

Header and Footer

The header’s editing grid is standard with what you’ve done so far. The key thing I’d like to point out is the ability to change the header action link (an action link is a CTA) to either a: action link, primary button, or secondary button.

You can do that by clicking `Action` then selecting from `Style`

Updating Your Header

Headers, Footers, and Logos are managed in your Elements Manager.

💡 Quick Tip


When linking to a page/blog/PDF/etc. rather than linking to the full URL, simply type in the page/blog/PDF name and select it from the dropdown that’ll appear:


Your header should feature links that new visitors would find useful while exploring your site.

Commonly linked to pages include:

  • Home
  • About Us
  • Product Features
  • Contact Us
  • Portfolio

And so on, depending on company type…

First, let’s breakdown the three types of links within the header:

  1. Action links, this can be considered the main CTA, it can be an action link, primary button, or secondary button (you make that decision within the styles manager)

  2. Navigation links, this is basic hyperlink alike text which will link out to pages

  3. Dropdowns, this is a great way to store larger lists of links, you can make a navigation link a dropdown by clicking the tooltip which appears below it when it’s actively selected by your cursor

  4. To remove the dropdown, simply delete all the links within a dropdown by clicking the link and clicking the trash icon:

Updating Your Footer

First up, let’s breakdown the footer so you know what I am talking about:

  1. Two lines of basic text for your email, address, or anything you fancy
  2. + button for adding a new group of links
  3. Group which is comprised of links
  4. Lightning icon for adding a link to a group
  5. Social link icons

Adding Social Links

To add a social link, simply click it to toggle it on or off (if it’s lighter coloration, it’s off) and then within the tooltip that’ll appear, enter that respective Social Media’s URL.

Connecting an Integration


Select one of the following integrations and follow along with its respective documentation.