Style guide
Media: video & written how-to articles • Advanced tips & tricks • Under 30 minLearning objective
By the end of this session, you will be able to:
- Understand the purpose of a style guide
- Easily extend your microsites, all while keeping in line with your template's aesthetics and brand guidelines
Video tutorial
Resources
Video transcript
Introduction
Today we will go over two things. One is our template. This is our Zoomforth template that we use across different accounts as we are introducing the platform. This is what you would see in your account. A template that we have created for your use case, whether it is an internal onboarding site as a template, or you are using it as a sales or a bid.
It is going to have your basic structure and your different subpages. It is going to have particular sections with download, case studies, team bio sections, and then you can update to create sites from this.
The second thing that I am going to mention today and reference is the style guide itself. What exactly is a style guide? Many of you have seen it under the templates area of your accounts.
So think of a style guide as a visual reference of what your theme has. Style guides can vary. Some can have layout suggestions as well, but it is often used as inspiration to add new sections or even assets to your site.
The whole benefit of a style guide is that it is going to maintain the aesthetics of your brand guidelines. It is very much going to incorporate the color palettes, the font options, and the styling that you expect to see.
The second thing that you really want to think about with your style guide is that it is a bird’s eye view. I will just speak for myself, sometimes when I go to update a template, I need some inspiration.
I need to understand what colors I have available, what a table can look like, the ways I can use or bring in different colors or buttons. A style guide gives a general visual representation of that to understand what I can actually change within my template.
The last big benefit before we dive into specific examples is that the style guide has been built alongside your theme. The benefit here is that you can copy and paste elements of your style guide directly to your template without worrying about going off-brand or having copy/paste issues.
It really is like your best friend and something I would encourage you to have open as you start to extend or add new areas to your template.
For the rest of today’s session, I will focus on each of the different subpages of your style guide and show you how you can start to refresh your template with this resource.
Text and color (03:04)
The first thing I am going to talk about is typography, starting with the text and color tab here. First, what exactly is typography? Typography involves the font style, appearance, and structure used to elicit emotions throughout your site.
Here it is listing out the different font families that you have available within your template. Again, they are all in line with your brandings. You do not have to worry too much as you swap out different text on your templates.
I want to highlight a bit of a tip. This is listing out the different font options and sizes, but how do you use headings? I hear this question a lot. Our head of client design, Patrick, provided some guidelines to share with you today.
Headings (04:04)
First is headings. We see a lot of different font formats, like H1 through P, but when we are applying it to a template, sometimes it is not clear how many heading types we should have. For instance, when should I use an H2 versus an H4? Here are a few design suggestions.
H1 is used for your page title. A general rule of thumb is to include a single H1 per subpage. Think in terms of the hero back on your template. On the example homepage, H1 is “Transform your communications.”
H2 is section headers. These are used within a subpage. “Hello company” would be our H2. H3 and H4 are then used throughout the page. You can divide H3 and H4 to highlight key terms or key elements. Something worth noting is that in some templates, an eyebrow text is included.
Eyebrow text usually goes above a section header, and we usually assign that to H4. On our homepage, the eyebrow text is here in blue. We have a section header called “Hello Company” but the eyebrow text is “Welcome to Zoomforth.” When I select and highlight that, you can see that it is listed as H4. That is definitely something to keep in mind and leverage as you are thinking about typography and headers.
Tables (06:12)
Next we will move on to tables. This comes up often as we start to add content and more simple communication within our templates. Tables are generally used for dates and times, or adding any sort of financial information, for instance.
Building tables from scratch can be time consuming, especially if you are not sure where to start. This is where the style guide really comes in handy. Your style guide already has examples of tables for you to use that are already in line with your brand aesthetics and guidelines.
To start, select a grid section and you can copy and paste directly to your template. In this example, I can paste the entire section because I copied the table as a grid. Now I have that table to reference completely within my template without a lot of work. I can just go in and replace the content as I need and it follows in line with my template.
Your style guides can have a few different variations of tables based on what was discussed when the style guide was created. This is a quick way to use that feature.
Style presets (08:08)
The next thing that I want to mention is style presets. Style presets are a fun way of introducing color within your tiles in your template. Here we have different visuals, defaults, and the different colors that you can incorporate. For example, you have this solitude color, this purple, the gradient background style preset, light blue, and finally alice blue.
This is especially helpful when you are looking to add new colors to your background. Instead of trying to guess how to incorporate color, use the style guide to get a full view of the options. You can see what types of colors are available and how they look.
Instead of trial and error, you can see all of your options at a glance and select the branded color that works best. If you select the specific tile in the style guide to display the style preset, you can mimic the settings in your site.
Buttons (10:14)
The next thing that I want to highlight here is buttons. A few common questions we receive ask why there are only 2 button options, and how to incorporate different types of buttons, for action tiles as an example.
This is where the style guide is going to help you again because it is a visual representation of the different variations you can have. I will show you how it works. If I edit this button, you can see that you have several different action options. Under styling you always have two different button types, primary and secondary.
If you recall in our style guide, there are more than two different button types here. I see a blue button and a white button as well. Let me show you how to access those colors.
It is based on your style preset. When you create an action, your default buttons are automatically loaded. When you select a style preset such as this solitude blue, the style preset overrides those default settings to create more contrast according to the style preset that you have chosen.
In this case, the primary button changes from yellow to blue to give a different visual appeal. This gradient background works the same way. When this style preset is used, the primary button goes back to yellow again to create contrast within that style.
I will show one more example of these additional button styles. In our text tile here, I will change it back to palatinate purple. You can see that my button option has been overridden to the yellow button. This gives you a few more options to create some variance in your text.
Page elements (13:05)
Page elements is a visual reference of the different sections or tile formats you can have within your template. Here it shows the different media file formats you can use.
Here we have different text tiles, as well as the color options we have for image tiles. As you can see there is a white and black text caption for your image tiles versus that palatinate purple and white.
The media tiles section gets more granular. This is where we have our video tiles and how they are displayed versus action tiles. I want to focus on action tiles for a moment and show you how to leverage this.
Action tiles (14:04)
So generally with action tiles such as expand media, .pdf, or zip files. This is especially useful when creating resources or built in documents on your template. Notice this icon in the corner and see how you can bring that icon into your templates.
I want to add these icons to my template so I will select the case studies section and bring these icons inside. To build out this section, I will toggle on my column count view and add in a .pdf for a case study.
I will add a placeholder example, then expand this out. It is displaying the default .pdf icon as my thumbnail, but I would like to create more visual appeal.
I can select an image from the media library and crop that into the tile. I can delete the unnecessary captions. Now the case study is in the section, but it does not indicate to my visitors that this is a .pdf.
This is where the style guide is going to help you again with the option to create an icon. I can either copy this entire PDF into my template or I can mimic the elements here.
In this case, they have turned on the show action icon. So I can mimic that within my template. When I select this area I will select the show action icon. As you can see, because it is a .pdf that I uploaded, the default action is .pdf. Now there is more context for my visitor. The preview shows that there is a .pdf that they can access under case studies.
One top tip is that you can create a custom icon, as well. Let me visualize that for you. If I select custom icon, I can search for the icon I want to use, such as “icon four” and I can change it. That allows you to create more customization.
CSS classes (17:10)
The last area of the style guide that I want to reference is CSS classes. This is probably the most fun page of our style guide. It is essentially a custom version of the CSS Wiki.
If you recall, the CSS Wiki incorporates all the different classes that you can incorporate within your template to create some variation and snippets to power up the animations of your sites.
In your style guide on the CSS classes page, we have given you a reference of the CSS that is already built into your template. Instead of copying the code and the class name, you can simply copy the class name right to your template.
Let me show you an example. Under this CSS class, I can see that we have a section background gradient already as a class and we also have different rounded tiles. I have rounded-tile, which is slightly rounded. We also have rounded-tile-2, which is more angular.
I want to apply the rounded-tile-2 class to my site. To do that, I simply copy that class name - rounded-tile-2 - and I am going to apply it to my case studies. It currently looks squared and I can see that my site incorporates more rounded curves. I want to maintain that aesthetic as I update and extend this section.
I select the section, then select the tile. Under CSS class name, I have copied it right from my style guide and I can apply it there. Here is the preview.
You can see that my case study is more in line with the rest of my template and there was no guesswork involved. I used my CSS classes subpage, found the class, and applied it to my site.