Welcome to Unstack!

All of us here at Unstack are excited to welcome you as the newest member of our family! 

We also know that learning to use a new tool can sometimes be a challenging experience, so we've pulled together the below guide to help you take the plunge - all without feeling like you're drowning. 

That said, let's jump in!

 

skydiving.gif

 

1. Navigating Unstack

Upon logging into Unstack you'll find the navigation menu on the left-most side of the screen. This menu is your go-to for jumping between tools or sections within Unstack and is something we know you will become familiar with in no time. 

screely-1621391848696.png

In this guide we are not going to cover many of the items on this menu; instead, we are going to focus in on three of them in particular:

That said, if you're interested in learning more about a feature we didn't cover in this guide, then head on over to our fully-searchable support site where we've covered all of these features and more.

Without further adieu - let's keep this train rolling!

polar_express.gif

 

2. Adjusting your Styles

One of the more powerful features in Unstack is the ability to control your fonts, colors, typography and more through the Styles tool. When configured, these options are effectively set at the account level, propagating to your webpages, landing pages, or blog when needed.

In other words, if you want all your "H1" text to be the same size, the same color, and the same font; there is no need to go page by page ensuring uniformity. Instead, these options simply need to be set under the "H1" section in Styles, and then Unstack does the rest to ensure those settings propagate to where they're needed. 

H1.png

Now the available options for those above-mentioned settings are also controlled by the Styles tool.

In fact, the only reason the color of "Dark Text" and the Font Family of "Source Sans Pro" were available options for "H1" is because these were both predefined under the Colors, and Fonts sections of Styles; respectively.  

example1.png

If you're interested in learning more about our Styles tool, you're more than welcome to check out our in-depth guide for the tool which can be found here

Not sure what colors, font, etc. you're going to use for your brand?

Think about some sites that you're inspired by and check out our blog post on the Unstack Style Guide; a Chrome extension that lets you capture a complete brand palette for any website with just one click.

 

3. Customizing your Header & Footer

Next you'll want to jump into the "Header & Footer" section which is where the settings for - you guessed it - your header and footer are configured. 

Header_footer.png

In this section you're able to: upload your logo and favicon, set the default "Social Share Image" (the image that shows up when you share your site's URL on any social platform) and adjust any of the links that are accessible through your either your header or footer. 

social_share_image.png

 

Before you're able to include links to pages in your header or footer, we need a page to link to. Once a page has been completed, all you need to do to link to that page is to type the page's Unstack Name into the URL field. Doing so should query the list of pages that exist in your account, and allow for it to be easily linked to the right page; all without juggling URLs or page paths. This is what we refer to as Smart Linking and is a concept that persists throughout Unstack. 

Lastly, this section is also where you're able to adjust the colors used in your Header & Footer which pull directly from the color palette you established in Styles - notice a trend yet?

header_color.png

 

4. Website page creation

For the last section of this guide, we'll walk through the webpage creation process together to cover some of the fundamental customization options available through Unstack.

That in mind, let's imagine we want to create an "About Us" page that includes both a contact form and a "meet the team" section, and is available through a link in the site's header. To do this, the first thing we need to do is to "create" a new page. This is done by navigating to Website and then selecting one of two options: "New page" or "Templates".

New_Page.png

The difference between these two options is that selecting "New page" allows you to create a page from scratch, while selecting "Templates" allows you to select from a list of previously created pages that were marked as being a template (either automatically by Unstack or manually by a user on your account). For the purposes of this demonstration, we are going to select "New page" to start from scratch.

Upon doing so, we are immediately asked what type of component we would like to start with. For the purposes of this walkthrough, let's select the "3D Media" component to start and attempt to build a "Meet the Team" page.

webpage1.png

Before we go any further, it is important to note that Components are truly the building-blocks of all web and landing pages within the Unstack platform. There's a wide-range of components available for a variety of uses, and members of our Full+ plan can even create their own via the Component Editor if they're not able to find exactly what they're looking for. 

Upon selecting the "3D Media" component, we are brought into the Webpage Editor; which is where we are able to edit the various components used in our webpages. In our case, you should see the "3D Media" component we selected above at the top of the editor, underneath the header.

WebpageEditor1.png

Before we customize this component, it's important to understand exactly how it is structured. In particular it is especially important to recognize that within this component there are two distinct blocks: a Media block, and the text/CTA block. From component to component the contents of a block and the number of blocks in the component will change, but the principals detailed below explaining how to work with them will not. 

Component___Block_Structure.png

Above is an example that should help to demonstrate this difference using the customized version of this component as an example.

To get our component to look like the above example, we are going to customize it by adding a piece of media (image or video), some text, and a call to action:

To add an image or video, just click into the Media block on the left and select/upload the image or video of your choosing. This is all done via "My Media", an Unstack-hosted media library which allows uploaded assets to be used and reused within your account.

To add text, click into where it reads Enter text and type! Once added, highlight the newly added text and another toolbar will appear. This is a text-specific toolbar used for making adjustments to the appearance of selected text. By default, any text that is added in Unstack is assigned a default class; the styling of which is configured in Styles. This toolbar enables you to override those predefined styles and allows you to change the class that is associated to the highlighted text (H1, H2, H3). 

WebpageEditor3.png

Lastly, to add a Call to Action select the (+) icon. Once selected you will be presented with a couple options:

      1. Primary Button
      2. Button
      3. Text Link
      4. Form
      5. Payment

Each of these serve a different purpose and some won't be available unless certain conditions have been met (for example, "Payment" isn't available unless you have linked Unstack to Stripe). Using "Primary Button", "Button", or "Text Link" will allow you to link to another previously created page or section.

For our purposes I've opted for #4 (this process is pictured below), and pulled in a form I've previously created. We won't get into the specifics of form creation/management here, but if you want to learn more about it we recommend that you check out this article!

 

brady.gif

It is an unwritten rule that every Boston-based software company has to include TB12 in their support docs at least once. Emphasis on "at least once".

 

At this point, the only other change we have left to make to this component before moving on is to center the "Get to know our team" text above the form we just added. To achieve this we actually need to adjust the alignment of the block's content via a third (and final) toolbar.

This toolbar controls block-specific settings which include individual animations, block-specific background color adjustments, or (why I've brought this up in the first place) the alignment of content.

WebpageEditor6_-_Block_Toolbar.png

Finally, our 3D Media component is now complete; but the page still feels like it's missing something. Therefore we're going to add a new component; Image Callouts for the three team members on this fictional team. Each of these should include their name, title, and headshot.

To add a new component to a page you need to first select the Add Component button found underneath a component. If you don't see it, try clicking into the component that already exists; doing so will make this button appear. Upon clicking this button a component-selection menu will slide-in from the left, and is how you select which component you want to add.  

Since obviously you're now an expert at component customization I flew through the configuration of this component so that I can highlight some additional tips and tricks. 

However, if all of a sudden this team doubles over night, we do have two other options for updating this page to include these new team members.

For one, we could clone the previously configured component by selecting the option pictured below from the component toolbar and then updating the duplicate with the new team members information.

Duplicating_a_Component.png

Alternatively, the component used for the team members actually supports more than just three image cards. In fact, by clicking the "+" that appears when hovering your mouse over one of the image cards, you're able to add as many additional cards as you might need.

Adding_Additional_Cards.png

For us this is probably the better way to set it up so that the next time the team doubles overnight, we're ready.

As the of our page is now complete, we're ready to save. However before we can do that we still need to add a couple more pieces of information. By clicking on "Publish Change" or "Publish" you'll see the missing required information:

  • Unstack Name = An internal name for this page only found in Unstack.
  • Title = The name of the page that shows up in the browser tab.
  • URL = The URL you'd like this page to be accessible through. 
  • Meta Description = A brief description of this page. 

Once that data has been entered click Save and Publish and give yourself a pat on the back because you made it to the end of this walkthrough!!

If you're interested in continuing to learn about the Unstack platform, we do have an additional guide that covers some more intermediate-to-advanced features and processes in Unstack which you can access here. We also encourage you to search through our support site (you're on it now!) to learn more about what Unstack has to offer.

Articles in this section

Was this article helpful?
0 out of 0 found this helpful
Share