HUBSPOT COS -— BLOG

LEARNING HUBSPOT COS BLOG

Engineering Effective Blog Templates

Why use the HubSpot design tools to build blog templates

When you build in HubSpot, your blog becomes part of the same ecosystem. It is all about automatic connections, easy responsiveness and personalization.

How is creating page templates in HubSpot different from other CMS platforms?

HubSpot smart content will allow you to customize the blog content and CTAs for each visitor. This is really important since it’s recommended to add a call to action at the end of each blog article. Blog readers, when they make it to the end of your article, are looking for their next step. This typically comes in the form of a CTA.

With smart CTAs, HubSpot will rotate out different CTAs for your visitors, each time that they visit based on your set criteria. This way they aren’t seeing the same call-to-action every time they read your blog.

Best Practices for Structure

What unique challenges should be considered when designing a blog template?

How should a blog look, compared to the rest of the website?

Unlike some of your other pages where you focus on the usability, with blog templates, focus onreadability first. Your blog visitors are there to read long-form content. This is longer
-
form
compared to your landing pages, a tweet on Twitter, and even the amount of content you’d place
in a
n email. You don’t necessarily have the luxury of long
-
form content on the rest of your
website, which is what makes the blog such a necessary marketing channel.
If your blog is tough on the eyes, your readers won’t be engaged and might not read your blo
g,
so take some steps to make it easy to read, especially for long periods of time. One way of doing
this is by using clear, emphasized headlines. Make the title of each blog post easy to find and
read so visitors will understand what the article is about
very quick

What is the primary goal for the end user, when building a responsive blog?

Page template — which is suitable for any website or la

Consistency is important for creating a great user experience, so make sure that your blog template matches everything else on your site. Even if the blog is on a subdomain in a subdirectory somewhere.

How is the structure of individual blog posts built?

Focus on readability first.
If it’s tough on the eyes, the content will suffer (and so will your readers)
Keep your visuals consistent.
Blog fonts and colors should match the rest of the site.
Use clear, emphasized headlines.
Make the title of each blog post easy to find and read.
Leave whitespace on the blog page.
Make sure that the blog is spacious
Use legible fonts.
The easier it is to read, the more likely it is for a reader to become emotional.
Consider using neutral colors.
The easier it is to read, the more likely it is for a reader to become emotionally invested.
Optimize reading for the mobile visitor.
Blogs should be optimized for reading without a sidebar or navigation getting in the way.

Best Practices for Marketing

What are groups and why use one? What types of groups can you create?

How are modules moved and split?

Groups are essential for providing rigid structure to responsive design. By grouping modules, it adds them to a parent DIV. If we take a few DIVs and put them into a parent DIV, it makes styling that whole group much easier.

Grouping also ensures that the modules stick together. So if you size and resize the screen, they are not going to break apart and appear on different parts of the page.

What types of modules are available to you?

Built in Modules, Global Modules, Custom Modules

Module - Header and Sub Header

Header tag, one line of text, whereas the section header is two lines of text, one is a slightly larger line and a smaller sub-header underneath. This can be helpful if you want to define all of your header styles ahead of time so that the
content creator only has the option to type in the text.

You can set the header value whether it’s H1 or
H2, H4 or whatever it needs to be. The header value can be set within the edit options menu, which is under the settings gear.

Module - Call To Action

These are modules that content creators will be using to convert their visitors into leads within the Contacts database.
First is a Call - to - Action or CTA module. The content creator is able to create the CTA in the CTAs tool.

A CTA is a button that links to a landing page offer such as free guide or white paper.

Module - Forms

The Form module allows users to select a form to add to a page. It is used to capture contact information from visitors to your website. It is available as a module that can be added to content and templates created with Landing Pages, Site Pages, and Blog Pages. Forms cannot be added to email templates.

The form module allows you to:

Give your form a title on the page.
Choose which HubSpot form will appear on which page.
Choose whether to redirect a person that submits the form to another page or to display a thank you message on the same page.
Override your default form submission notification options from HubSpot settings and send notification emails to specific email addresses when a visitors submits the form.
Send follow-up emails to visitors that submit the form.
Add visitors that submit the form to a Salesforce Campaign. (Requires HubSpot Professional or Enterprise and an existing integration with Salesforce.)

Module - Social Sharing and Follow ME

Social sharing, allows a website visitor to share the
page on their own social networks.

A follow me module on the other hand, is going to link to the
company’s business social media pages. In a case where a company is looking for more followers on Twitter, or more friends on Facebook, this is the module to use.

Whichever social sharing module you include on a template, it will pull social account information directly from the Social Setting.

Module - Flexible Column

You can turn the module group into a flexible column in the
Settings for the group.

Flexible Column in your site or landing page template to give content creators the ability to add or remove modules within that column from the page editor. This module is not available on blog, system page, or email templates.

This option is ideal if your marketers would like the ability to add modules to an individual page without affecting other pages built with the same template. If you have a group of modules in a flexible column, and you would like to change it back to a static group, click the Gear icon > Revert to Static Group.

Once a flexible column has been customized for a particular page, using the content editor, changes to that column at the template level will no longer take effect for that customized page.

Module - Custom HTML and HubL Template

These modules are used for adding custom markup and embeddable items like a Twitter feed. The difference between a custom HTML and HubL Template module is that the HubL Template is locked by default to make sure that the content editor doesn’t have the ability to see or edit the code.

Don’t forget however, that you can lock any module. Also, these modules are different from a custom module, which we’ll talk about later.

HubL Template modules are coded modules that support HubSpot markup language in addition to HTML, CSS, and JavaScript. The most common use case for these modules is if you need to create other editable modules using HubL in a template layout.

Unlike custom HTML modules, these modules are not editable in the content editor. HubL Template modules can not be made global, but you can instead use custom HTML or custom modules.

To learn more about HubL, check out our HubL reference documentation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

What modules are used for lead generation?

Forms and CTA

Why is placeholder text important?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Module - Rich Text

The rich text module is the most common content module used across the various HubSpot content tools. It offers the most editing options for your content, such as text formatting, images, links, CTAs, and more.

Rich text modules for adding smart content to a page. Use this module for creating editable content areas for your marketers.

Module - One Line of Text

This can help guide the content creator if you wish to prevent the content creator from writing a paragraph of text in a particular space or prevent them from changing the text styling.

Module - Page Footer

Pulls the company name and copyright information
from Content Settings. While this is a good starting point, you might want to customize this module to include contact information, a navigation menu, or even a map.

Add descriptive filler text to a text module to give the content creator an idea of how the module should appear .

Module - Logo

The first type of visual content module is a logo. This is
probably going to be present on almost all of the page
and email templates that you make. Any place where this logo module appears in a template, it will pull in the logo from Content Settings, ensuring that your designs are consistent.

The Logo module loads your company logo set in Content Settings > Page Publishing > Logo.

Module - Image Slider

Image slider modules allow you to create revolving image galleries that can easily be updated by your internal users.

You can customize:

If the slider auto advances and how quickly it auto advances
If the slider loops
If the slider shows pagination
If the slider retains the size of the tallest image or adjusts to the size of each image
If you want to include a caption for each image
If the caption is displayed below the image or superimposed on top of the images

While image sliders can help make a great looking page, sliders generally have a lower click through rate than static CTAs, because the image rotates.

Module - Advanced Menu

You can use the Advanced Menu content module to add navigation to your content and templates. Your navigation is created in Advanced Menus (Content > Content Settings > Advanced Menus). To learn more about constructing menus, check out this article.

By editing the module options you can customize the follow:

The type of menu:
- Static - renders entire menu tree
- Dynamic by section - renders menu items within parent section (multiple levels up)
- Dynamic by page - renders menu items within parent page (one level up)
- Breadcrumb - shows the navigation path to current page
Max number of dropdowns/flyouts that will render.
Orientation, which updates the HTML markup so that the menus can be styled accordingly (horizontal or vertical)
Enable flyouts, which turns on or off dropdowns/flyout child menus
Which content advanced menu tree should be used as the basis for the navigation menu

Module - Image

Image module is where you can indicate that an image should be placed in that space and you can add styling.
If you have a specific idea of where you’d like an image placed or styling, this is a good module option.
This doesn’t mean that content creators are limited though. Images can also be added into a rich text module.

When possible, include the ideal dimensions of an image in the module label. This is a way for you to communicate with the content creator since the label will be displayed whenever they use your template.

Now, generally speaking, the built-in responsiveness should take care of most image sizing problems.

How Do You Use the Code Editor

What is the purpose of the Code Editor

How do you style a template built in the visual editor?

The Code Editor is suited for your code and mostly used for creating your styling with CSS.

How are styles and templates previewed?

As you create stylesheets, you can preview the stylesheet on any template you’ve created.

Conversely, if you are creating templates, you can preview any stylesheet. Once you’ve written some CSS be sure to click “Publish Changes” to save and update your work.

What is a primary CSS file and what does it do?

Primary CSS is a CSS file that gets automatically included in all of your templates (unless disabled).

Primary CSS will save your designers time, especially if your company plans on creating several themes to use across your different tools in HubSpot.

If you end up creating multiple versions of a site's look or require differently branded campaigns, Primary CSS can give a home to all your global code, while additional stylesheets can be written for various campaign-specific aesthetic decisions.

Best Practices

Responsive CSS - you can include HubSpot's required_base.css code to make your templates responsive.
Normalize CSS - any code that you want to add to all of your pages to help browsers render your pages consistently can be added to primary CSS.
Container max-width - HubSpot's COS is automatically responsive, but you still need to specify the max-width of your pages content areas. For more information about applying a max-width to your containers check out this article.
Fluid media code - make images and video responsive. The specific CSS for making images responsive can be found here.
Responsive table code - tables can break responsiveness, so any code that you add to style tabular data can be added to Primary CSS.
Styling of other standard modules - styling any of the standard modules covered in the last section of this guide. For example, you may want to add styling for the slider module in Primary CSS, so it looks and behaves consistently across all templates.

To create or edit an existing CSS file, navigate to Design Manager (Content > Design Manager).

Click the Coded Files folder and click the blue New coded file button

Select a folder to create the new CSS stylesheet in. You can also create a new folder, by selecting the parent folder and clicking New Folder and naming the folder. Next, give your CSS file a name with a .css extension. Finally, click Save to create your new CSS file.

Once you have created or opened an existing CSS file, you can edit in in the code editor. In addition to standard CSS, HubSpot's code editor supports HubL variables and macros to make maintaining your CSS easier.

Click Publish changes to compile and minify the CSS file.

To attach stylesheets to a template layout, open the template and click Actions > Edit Head. Open the stylesheet and click +Add Stylesheets. Select the stylesheet, click Add, Save, and Publish Changes.

While you can also attached CSS files at the domain or at the page level, it is recommended to always attach at the template level. You may also want to disable domain stylesheets to reduce the chances of any conflicting code. To learn more about where CSS can be attached, check out this article.

How do CSS Stylesheets and Templates interact?

CSS or Cascading Style Sheets are coded files that select elements of your page and control their presentation. You can think of the templates that you create and their HTML as the bones of your website, and the CSS as the skin of your site.

What boilerplate styles are referenced in new stylesheets?

CompanyStyle.CSS is a stylesheet full of empty CSS selectors that can be used to style commonly occurring HubSpot COS elements. The code is commented into sections to help explain the various selectors and HubL tokens. Since the selectors are empty, pasting this code into your CSS file will not change your pages presentation, but rather provide you with a template to add your own CSS properties to.

CompanyModules.css is a file that addresses some of the more challenging modules to style. This file includes code for making images/media responsive, styling HubSpot's responsive slider module, and more. Unlike the CompanyStyle.css, this CSS file contains complete CSS definitions that will affect the presentation of you page. This code can be pasted in the same file, included via a HubL include token, or pasted into a separate file and attached separately to a template.
If you choose to paste CompanyModules.css into the same file as CompanyStyle.css you should replace the {% include "custom/page/Company_Theme/CompanyModules.css" %}, at the beginning of CompanyStyle.css, with the code from CompanyModules.css.