How to use default content and advanced options to optimize your templates for content creation

Last updated: January 13, 2017

Available For:

Product: HubSpot Marketing
Subscription: Basic, Professional, & Enterprise

One major benefit of HubSpot's COS is the ability to optimize your templates to allow your marketers to focus purely on content creation. While page creators still have the ability to make many stylistic decisions in the editor, the greater the initial time spent fully setting up the content and look of a template, the more time will be saved for your marketers.  

In this section, you will use default content, as well as CSS options to optimize your templates for content creation.

Adding module default content

HubSpot Academy

Best practices

When you create a template in Design Manager, you can think of it as creating the "model" page or email that all other pages or emails will be based upon.

In the previous sections of this guide, you learned how about how to structure your templates and about the various modules that are available in Design Manager. Once you have created a template with the correct modules, you will want to add default content to fill in your template.

Read more

Adding default content allows you to substitute your own text and assets for the module's stock copy, placeholder images, etc. By inserting default content, you can set up all the formatting and options for that particular module.

Once you are ready to create a page or email from the template, you can simply swap and make modifications to your template's default content.   

To add default content to a module, select the gear icon on the module that you would like to customize and click Edit Options.

Edit options

You can add an internal Label to help you keep your template organized.  The label does not affect your templates HTML code, but it can help you stay organized, when you are working with many templates. In the example below, the labels "Sidebar" and "Bio" have been applied to a module group and a rich-text module.  

Label

In the Modules defaults section of the Edit options pop-up, you are presented with whatever default options that the module is capable of. For example, a form module will allow you to choose which form should appear on a template by default, whereas a rich-text module text module will allow you to add your own copy to that module.  

Default content

After adding your default content or setting your default options, you can see a live preview of your template with your default content by selecting the Preview button. With Design Manager and default content, you never have to leave the app to see how your pages will look.

When you are ready to make publish those changes, press Publish Changes to update the template.

Locking modules

Sometimes there will be areas of the template that require advanced customization or the addition of raw HTML that you may not want your content creators to have access to. For example, if you have a Landing Page template with a custom coded HTML image gallery, you may not want your internal users to be able to access that code from the content editor screen. If you want to prevent your content creators from being able to edit a module from within the content editor, you can lock the module by clicking the gear icon > Lock Module.  Once locked, this option will change to Unlock Module.

In the example below, embed code for a Twitter feed is being added to a Custom HTML module. Since the content creators will not need to tamper with this Twitter feed, the module is locked.

Lock module

After locking a module, a lock symbol will appear on that module. Also note all modules on a blog template are automatically locked, you can unlock them to make those sections of your template editable at the post level. Keep in mind that once the content contained within that module is overwritten at the page or post level, changing the default content of the module will not affect those altered pages.

Lock symbol

Customizing your template's CSS options

Once you have your template structured and have added some stock content, you are ready to begin thinking about your site's aesthetic presentation. In a later section of this guide, you will learn how you can use CSS files to style the look of your site, but depending on the complexity of your site's design, you may need to customize your template a bit more, before you are ready to begin writing your CSS.

As previously mentioned the structure and content of a HubSpot template compile out into an HTML website. While you do not have full access to the HTML markup, when building templates with Template Builder, you can use the Edit CSS feature to add class, style, and id attributes, as well as additional wrapping markup to your modules to help differentiate sections of your template to be styled.

Select a module that you would like to customize, click the gear, and click Edit CSS.

Edit CSS

Depending whether you are customizing an email template module, a page module, or a module group, the options presented to you will vary.

Custom CSS class

The HTML class attribute allows you to name modules in your templates, so they can be styled using CSS. While your template will already have many default classes, custom classes give designers more control over the appearance of a template, while still maintaining the flexibility of Template Builder.  

In the example below, a class of "bio" is being added to the rich text module. This will add the HTML attribute class="bio" to the module's container div tag (an HTML tag that specifies an area or division of a page). By essentially naming this module, you can now target this class or target elements within this custom class, in your CSS file. This option is not recommended for use on email templates, because style tags are not supported by some email clients.  

Custom class

In your Primary CSS or custom CSS file, you can target the container div to style, by selecting your custom class and applying various CSS properties. This guide will not attempt to teach CSS, but it will show a few simple examples of targeting custom classes with CSS. For example to color the background of the module with a custom class of bio, you could write CSS like the example below:

.bio{
background: #CCCCCC;
}
You may also want to target elements within your module, not just the container div. In this case you can use nested or direct descendant selectors. For example, if you wanted to target all paragraph text within the bio module, you could write a nested CSS selector like the example below:

.bio p{
color: #000000;
}

Custom inline styling

Inline CSS is style code that is written within your HTML tags. Adding CSS properties and values to this field will apply your code to the module container div.

In the the example below, margin and color are used to adjust the spacing and the color of the module. This entry will add the HTML attribute style="margin-top:30px; color: #00349e;" to the module's container div tag.

While this option can be useful for quick fixes for a particular page template, it proves less maintainable than using the previously described class feature, because you have to make code changes within individual modules rather than in a global style sheet.

Inline styling

Email clients prove much more limited in their HTML and CSS rendering capabilities than modern web browsers; therefore, inline CSS is the best way to style your emails in a way that will be supported across clients. Email modules have additional user-friendly options for adding inline CSS, depicted below.  

Email CSS

Custom wrapping HTML

Although Template Builder's "drag and drop" editor does not give designers, full access to a page's HTML markup, you can add additional wrapping HTML around certain modules.  This option is for advanced users and designers who need additional control over a templates HTML, but still want to maintain the flexibility of using Template Builder over a hard-coded HTML template.

To implement this feature, write your HTML markup, and then insert the html HubL token, wherever you would like the module's code to render. In the example below, an HTML5 aside tag is being used to wrap the module.

Wrapping HTML

Custom CSS ID

The HTML ID attribute is available as an option on any module group. IDs are similar to classes in that they allow you to name areas of your template to be targeted in your CSS.  But unlike classes, IDs should be unique (only appearing once per template), and carry more weight in terms of CSS specificity.  

In the example below, a group of modules on a page are being given an ID of sidebar.  This entry will update the group's containing div tag to have the HTML attribute id="sidebar". By essentially naming this module group, you can now target this class or target elements within this custom class, in your CSS file.

Custom ID

To target the entire group with a custom ID and add a border, you could write CSS like the example below:

You would add your CSS to your Primary CSS or additional custom CSS files.

#sidebar{
border: 1px solid red;
}

Edit body CSS

Finally, you have the ability to add a class attribute or add inline CSS to the body HTML tag and add additional CSS files, scripts, and other code to the template's head tag. To access these options, click the Edit menu at the top of Design Manager.

Body CSS

Previous article:

Create Effective Inbound Content in Classroom Training Click Here

Next article: