resources

What is included in HubSpot's Ridge template pack?

Last updated: February 14, 2017

Available For:

Marketing:
Sales: N/A

HubSpot's RidgeTemplate pack is a set of templates designed to allow you to easily build a typical Inbound Marketing conversion flow. You will not need any specialized website building skills to use this pack. There are various levels of customization available, but the only requirement for use is to flll in your content.

What’s included?

Ridge contains two email templates, four landing page templates, and four thank you page templates:

  1. Offer Email: an email template designed to kick off your campaign by giving the recipient some information along with an offer.
  2. Landing Pages: there are four different landing page templates with different features depending on the type of content you'll be adding. Each includes a form where a visitor can give their information in order to receive your offer. There are also many felds for additional info and calls to further action.
  3. Thank You Email: an email template where you can thank a user for giving you their info and provide them with a way to retrieve the offer.
  4. Thank You Pages: there are four different thank you page templates that with different features depending on the type of content you'll be adding. Each can be used as an alternative or addition to the Thank You Email. The thank you page contains more options for content than the thank you email, so it may be a good choice if you have a signifcant amount of additional information for this stage.

Using Ridge

Ridge contains a number of featured content sections that can be very helpful for organizing and displaying complex information in an intuitive and digestible way. Before deciding to use Ridge, you should make sure you have useful content for these containers. Other campaign template packs are available with fewer felds for campaigns with lighter content.

Editor Instructions

There are essentially two methods for editing sections of these pages, each of which produce the same result. Use either or both interchangeably. Every effort has been made to give you an intuitive editing experience and a cursory awareness of each method should provide you with all the tools necessary to customize your pages.

Accessing the module editor via page elements

Anything you click on in the page will open the module editor to the appropriate module. This is the easiest and most intuitive way of editing page content. Simply click through the page and edit the content on the left.

Accessing page elements through the module editor

You can also browse through all of the the available editable modules in the module editor by clicking the module editor (box) icon to the left of the page preview. Hover over any module in the list to highlight the content as it appears in the page. Click on a moduleto edit it. Click Save and go to module list to return to the full list. Please note that there are Options and Styles tabs for each module in the module editor. The majority of the time, you will probably be using the Options tab.

A note on editing styles: the Ridge campaign pack comes with predefined styles. It exposes a small number of customization options, but assumes that you have chosen the pack because its style aligns with your needs. That being said, there are many opportunities to further customize pages as you edit. Caution is recommended when customizing the base style. Adding new colors, fonts, and spacing/alignment can dilute the original design and make your page appear haphazard.

Modules of note

Logo

Each landing page template includes two logo instances. The Ridge email templates contain one logo each. To add your logo:

  • Click on the existing Ridge logo to open the module editor.
  • Check the Override default logo for this page box, then click the pencil icon to replace the logo with your own.
  • Follow the instructions in the dialog box to choose or upload a new file. Remember to replace all instances of the logo for consistency.

Gradient colors

The Ridge landing page templates contain subtle gradient background graphics which can be customized. To change these:

  • Click the module editor (box) icon to the left of the page preview. 
  • Click the Choose a beginning/ending gradient color modules in the Hidden Modules section and use the color picker to select a new color for each end of the gradient.
  • Click Done in the color picker, then Apply to see your color refected in the preview.
  • Click Save and go to module list to continue editing other sections of the page.

Calls-to-Action

The Ridge campaign pack comes with three CTA styles. You must customize these with your own URLs. You can customize them from the page editor or by going to Content > Calls-to-Action in the main menu. Keep in mind that all CTAs are global. Edits made to any CTA will affect all instances of that CTA on all pages.

To edit your CTAs via the page editor: 

  • Select a CTA in the page preview and click Add CTA in the module editor. This will bring you to a list of all your available CTAs.
  • Navigate to the Ridge CTA you’d like to edit.
  • Click the gear icon and select Edit. Alternatively, you may want to clone this CTA if you’d like to use diferent settings for multiple instances of it.

Icon Button Cards

Each Ridge landing page template contains a section of the page with icons and text (the thank you page also contains buttons). To edit these Icon Button Cards:

  • Click on them in the page editor and use the module editor to set text and links.
  • The Icon dropdown contains a subset of the Font Awesome icon set. Select an icon that best represents your content.
  • For best results, keep your text length consistent between each card. Extra lines will result in misalignment of content.

Testimonial

Both Ridge landing pages contain a testimonial section with an image, headline, text area, and star rating. To edit testimonial content:

  • Click the element you’d like to edit in the page editor. Each section of the testimonial is edited separately.
  • When adding an Author Image, use an image of similar dimensions to the example image for best results. Use the decrease or increase button to adjust the size if necessary.
  • Click the text fields in the page preview to edit the content. 
  • Select a number of stars if you would like to use this feature, or select No Stars if you would like to disable it.

Background Image

On the two landing page templates in the Root pack, the background image is accessible via a background image button that only appears in the page preview. On the email templates the background image is only accessible via the module editor.

To edit the background image on a landing page:

  • Click Edit BG Image, which appears in top of the section of the page.
  • In the module editor, click Replace and upload or select an image of your choice.
  • For best results, use a large image of similar dimensions to the default image (1280px x 620px). Using an image that is too small will result in excessive pixelation. Using an image that is too large will unnecessarily bloat the size of your page and could slow load times for many users.

To edit the background image in an email:

  • Click the module editor (box) icon to open the module editor.
  • Choose the Background Image module.
  • Click Replace and upload or select an image of your choice.

A note about images: images are a powerful component of your pages. They can signifcantly contribute to the impact of your content, but they can also easily sabotage great content if they are poorly chosen and/or executed. The Ridge theme contains examples of images that have been carefully chosen to work well with this design. If you decide to replace the default background image, try to choose an image that works well in the background and doesn’t detract from the rest of your content. Subdued colors, abstract subject matter, and composition that marries well to the layout are good things to consider when choosing an image for this location. More information and image resources can be found here.

Social Media

Ridge contains icons for Facebook, Twitter, LinkedIn, and Instagram. To add links to your accounts:

  • Click the social media icons in the page editor.
  • If you are editing a landing page, this will open the module editor to the Root - Social module. If you are editing an email, this will open the module editor and reveal all editable modules.
  • Add your social media links to each feld.