INTRODUCTION TO BUILDING TEMPLATES
I. What are the HubSpot Design Tools?
What is the HubSpot COS?A complete inbound marketing platform for hosting your
website, blog and landing pages, analytics, file management and your development tools are all in the same place, which is much easier to manage. How do they differ from other CMS platforms?What sets COS apart?
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. With the COS you can use smart content to provide a personalized experience for each visitor. Your website visitors aren’t all the same and their website visit experience doesn’t have to be the same either. Visitors access your website through different kinds of devices, in different parts of the world and at different lifecycle stages. For example, if you want your customers to see a different form or CTA than what your leads see, smart content can do that and more. The COS has world-class security. Your hosted site’s traffic goes through HubSpot’s security firewall and 24- hour security team. You can set up a Secure Sockets Layer with no extra costs involved. If you’re not familiar, SSL is a security protocol that establishes an encrypted connection for your visitor. Aside from being extra secure, you might get a positive ranking boost from search engines by having an SSL site. The COS has a reliable speed. All of your content will be hosted on the very same content delivery network that HubSpot uses, along with Akamai’s web application accelerator. What this means is high-speed downloads and a fantastic track record for reliability. No-hassle support. All HubSpot customers have access to our world-class support team. |
What do the tools do?The Design Manager relies on a powerful and intuitive, drag-and-drop visual system for designing layouts along with a rapid development platform for staging new content and testing out styling.
Of course, if you prefer to design templates with code, that’s also possible 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 can incorporate custom code into your drag-and-drop layouts including HubL tokens, HTML, Javascript, a JQuery library and any combination of these. It is recommended, starting in the Template Builder and adding custom modules as needed rather than coding from scratch in the Code Editor |
|
|
II. How Do You Create New Template?
How do you create and edit a new template?Whether you’re adding smart text to a landing page, email, or website page, there needs to be a rich text module. Nothing else will do.
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 by default. Blog template contains a blog content module as well as recent posts and email subscription modules. System pages template are created to handle 404 errors, subscription preferences and other user experience necessities. Every website should use a full set of system pages. What is the Actions menu?
Actions menu let you to clone your template, save it, delete it and even see the revision history to revert back to a previous template state
|
What are the functions of the buttons in the Template BuilderWhat are the Systems Page and how they are 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 that time |
III. How Do You Build With Modules?
What are groups and why use one? What type of groups can you create?
Groups are essential for providing some rigid structure to responsive design. By grouping modules, it adds them to a parent DIV.
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. Global groups — Used when the group or module must be used across multiple page templates Local groups — Used to ensure that specific modules always stick together and for cohesive styling. What types of modules are available to you?
Text Module
A rich text module is the most commonly used module as it can contain text, images, videos, call-to-action and more. One line of text module. 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. Basic page footer module that 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. Pro tip: add descriptive filler text to a text module to give the content creator an idea of how the module should appear when filled out. Visual Content Modules
Logo- The end user’s logo, which can be uploaded under their Content Settings. Image- A module meant specifically for uploading an image. Why is place holder text important?
Add descriptive filler text to a text module to give the content creator an idea of how the module should appear when filled out.
|
How are modules moved and split?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 modules are used for lead generation?
Call-to-Action - A module for buttons that create an offer, such as a free guide or whitepaper.
They typically direct visitors to Landing Pages. Form - Used on Landing Pages or Contact Us pages. Forms convert site visitors into leads by gathering information in exchange for an offer. 
What modules are specific to blog layouts?
Blog Content- The most basic element of a blog template. It displays blog posts from the Blogging tool.
Post Listing- Creates a list of blog posts by date or by popularity. Post Filter-This module creates a list filtered by different criteria, such as authors or topics. Blog Email Subscription- A simple form that allows visitors to subscribe to the site’s blog. 
What are body classes?
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.
|
VII. Smart Forms
How do smart form fields different from smart text or smart CTAs?
|
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.
|
VIII. Personalization Token
Where does the Personalization Token tool live?
How do you create and edit a new template layout?
What is the difference between setting the default values for personalization tokens in email and on other pages?
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.