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:
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:
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:
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
|
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. |