LEARNING HUBSPOT COS DESIGN
What is Hubspot COS?
The HubSpot Content Optimization System, or COS, is a complete inbound marketing platform. This means marketing communication including social media tools, your website, blog and landing pages, analytics, file management and your development tools are all in the same place for easy management.
How do they differ from other CMS platforms?
COS is different from the rest.
When it comes to visits from a mobile device, the COS has built-in responsive design so that your COS content is mobile -optimized right out-of-the-box, without the need for any additional coding. You’ll just need to make sure that they stay responsive once you start adding in your own styling. |
What do the Tools Do?
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 are the two tools that are available for designing?
The Design Manager is comprised of two parts, the template builder and the code editor.
The Template Builder is a visual way of laying out a website or putting together the structure. Typically this is the sort of thing you’d be writing in HTML. The Code Editor is suited for your code and mostly used for adding that coat of paint to the house or creating your styling with CSS. With that said, you do have the ability of coding a template by hand, but it’s so simple to create with the Template Builder that it’s mostly extremely complex designs that end up being built in the code editor. It is recommended, starting in the Template Builder and adding custom modules as needed rather than coding from scratch in the Code Editor |
How Do You Create a New Template Layout
How do you create and edit a new template?
|
What are the functions of the buttons in the template builder?
|
Click Content from the top-navigation drop down menu and select the Design Manager.
The first thing you’ll see is the template dashboard. On the left, you can view templates, coded files, custom modules, or the File Manager. On the right, you can create a new template or stylesheet. Depending on the screen you’re viewing, the button will change. As an example, when you view coded files, the new button gives the option to create a coded file and when you’re looking at templates, the button gives the option to create a new template. What types of templates can be created?
Page template — which is suitable for any website or landing page template that you’d want to create. The default page template will contain modules such as a section header, logo and page footer.
Email templates — which will have a main email body module, a view as webpage module and CAN-SPAM module. Blog template — What is actions menu?
Actions menu helps you clone your template, save it, delete it and even see the revision history to revert back to previous template state
|
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 are ‘System Pages’ and how are they used?
System pages are created to handle 404 errors, subscription preferences and other user experience necessities.
Every website should use a full set of system pages. For example with a great 404 page, you can help to keep a visitor engaged even if the page they are trying to access isn't working at the time. |
How Do You Build With Modules
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. What modules are specific to blog layouts?
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 are body classes?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.
|
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. |