<img src="https://secure.leadforensics.com/78315.png" style="display:none;">

Sprocket Rocket Documentation

Sprocket Rocket lets you transform your rapid prototype
into a beautiful design by adjusting every aspect of the design
to fit brand standards.

[Showcase] Watch us Rebuild Moz's Homepage on HubSpot - No Code Required Watch The Recording

Let's Get Started

Modules Walkthrough

This video is your introduction to Sprocket Rocket and explains how you can use custom modules to create your webpages.

Build your first page with SR

This video will demonstrate the exact steps you need to start building unique pages with Sprocket Rocket. It includes the initial page creation, how to add the custom modules you want, and how to tweak each module to match your needs.

Edit global styles

In HubSpot, navigate to Marketing > Website > Website Pages, then select Edit on one of your pages. 

Now that you’re on your page, navigate to the theme editor. On the lefthand side of the editor, go to Design, then Edit Theme Settings. This is where you can modify your existing theme settings. Publishing changes to theme settings will update the styles across your pages using this theme that was updated. 

theme-settings

 

How to access and edit Global Modules

Within the page editor, you can update the global content that's included in your page or blog template. Changes made to your global content within the page editor will be applied to all pages created with a template that contains the same global content.

  • Navigate to your website pages.
  • Within the page editor, global content on your template is labeled with a globalGroup global content icon. This globalGroup global content icon will appear directly on the module group in the editor, or in the module listing in the Content tab on the left panel.
  • Click the globalGroup global content then select Edit global content. This will open a new content editor specifically for your global content.
  • In the left panel, click to edit its contents in the left sidebar editor.
  • In the upper left, click the View on dropdown menu to see a list other assets using this global content in the template. Select another asset to preview how the changes you've made to your global content will impact that page or blog post.
  • When you're done editing your global content, click Publish to [X] assets in the upper right. These changes will be applied to all pages and blog posts using a template that includes this global content.

global-module

 

How to apply a template to your blog

Your blog has a blog posts template that sets the structure for all blog posts, and a listing page template that sets the style for your blog's homepage. By choosing your theme template for your blog, all your colors, fonts, and styles will be consistent on your website.

To choose a theme template for your blog templates:

  • In your HubSpot account, click the settings icon settings in the main navigation bar.
  • In the left sidebar menu, navigate to Website > Blog.
  • Click the Templates tab.
  • Below the Blog posts heading, click the Template for blog posts dropdown menu and select the Blog post template.

apply-blog-template

  • To apply your theme styles to your blog listing page, select the Use a different template for the blog listing page than the blog post template checkbox.
  • Then click the Template for listing pages dropdown menu and select the corresponding Blog listing template.

apply-blog-listing-page

 

Select your error page templates

Systems templates are used for certain types of pages generated automatically by HubSpot.

  • In your HubSpot account, click the settings icon settings in the main navigation bar.
  • In the left sidebar menu, navigate to Website Pages.
  • Click the System Pages tab. 
  • Click the corresponding dropdown menus to select your 404 error page500 error pagePassword prompt page, and Search results page templates.

error-templates

When you're done, click Save in the bottom left. 

 

Select your email subscription page templates

  • In your HubSpot account, click the settings icon settings in the main navigation bar.
  • In the left sidebar menu, navigate to Marketing Email in the left sidebar menu.
  • Click the Subscriptions tab.
  • Click the corresponding dropdown menus to select your Subscription preference pageUnsubscribe backup pages, and Subscription update confirmation page templates.

email-templates

 

Using custom fonts

To use custom fonts, head to your theme settings. Enabled Custom Font, this will hide the font fields from theme settings. Font weight, size, line height are still editable from within your theme settings.

custom-fonts

 

Next head to the design manager, The Design Manager can be found by navigating to Marketing > Files and Templates > Design Tools in the top navigation bar. From there search for sr-base.css and click on it.

sr-base-css

Add the follow code to the top off the CSS file and replace with your fonts details. To ensure that your fonts works across all old and new browsers include EOT, TTF, WOFF, and WOFF2 . Repeat for multiple custom fonts.

@font-face {
    font-family: "YourFontName";
    src: url("http://domain.com/YourFontName.eot");
    src:
    url("http://domain.com/YourFontName.woff") format("woff"),
    url("http://domain.com/YourFontName.otf") format("opentype"),
    url("http://domain.com/YourFontName.svg#filename") format("svg");
}

Next press ctrl/cmd+f to search the file and search for Custom fonts. 

custom-fonts-search

From here add YourFontName to the font-family rule to the body, h1, h2, h3, etc. If you have multiple custom fonts, you can use any of theme for each style.

font-family-1

 

Add navigation and footer to blog

If you are using Sprocket Rocket App there are a variety of headers and footers included within the application. When the blog is added to your portal there is some additional setup required to add the correct navigation and footer to your blog. Follow the steps in this video to add the correct navigation/footer to your blog.

Permissions for SR App

In order to add SR App to your portal, you will need the following permissions under Marketing and under More > Account.

permissions-sr-app

Saving Page Layouts

You can save and update page layouts inside of Sprocket Rocket using our Save Layout option. Watch this short tutorial video to learn how it all works.

Features
  • Save your own page layouts
  • Save unlimited layouts

Global Modules

SR Footer 01

This global module has the ability to easily update your logo, menu, and links to legal pages with ease.

sr-footer-01
Features
  • Global settings
  • Easily add/remove menu items

SR Footer Min 01

This global module is perfect for landing pages the minimal content section and lack of off-page links keep users focused on the offer on the page.

sr-footer-min-01
Features
  • Customizable Text

SR Nav Min 02

This global navigation module is packed with features that allows you to have a custom navigation that fits your brand. This minimal navigation is perfect for landing pages.

sr-nav-min-01
Features
  • Change logo on scroll
  • Fixed or a static navigation
  • Transparent option
  • Call to Action

SR Nav Dropdown 03

This global navigation module is packed with features that allows you to have a custom navigation that fits your brand.

sr-nav-dropdown-01
Features
  • Change logo on scroll
  • Fixed or a static navigation
  • Transparent option
  • Call to Action

Hero Modules

SR Hero 01

This module allows you to create unique pages with an adjustable height, background image parallax and two CTA button options you can make sure your users are engaged above the fold.

sr-hero-01
Features
  • Adjustable height
  • Parallax
  • Two CTA options

SR Hero 02

This hero module features a slider and flexible cards for additional content and allows you to adjust the height.

sr-hero-02
Features
  • Adjustable height
  • Slider
  • Flexible card layout

SR Hero 03

This hero module is a version of SR Hero 02 without the extra feature boxes. Just add in your graphics to create a customized hero slider.

sr-hero-03
Features
  • Adjustable height
  • Smooth scrolling effect

SR Hero 04

This hero module is a simplified hero version that allows you to change the content with ease.

sr-hero-04

SR Hero Parallax 01

This module allows you to create unique pages with an adjustable height, background image parallax and two CTA button options you can make sure your users are engaged above the fold.

sr-hero-parallax-01
Features
  • Adjustable height
  • Parallax
  • Dual CTA options

SR Hero Video 01

This module allows you to create sections with a custom background video. Include content and a call to action button to direct users to additional pages.

sr-hero-video-01
Features
  • Adjustable height
  • Add your custom video

SR Hero 404

This module provides a branded experience for users if they happen to navigate to a page that is unavailable. You can setup a return to home button or add a second CTA to direct users to another page.

SR Error 404
Features
  • Multiple CTA options

SR Hero 500

This module provides a branded experience for users if the website server is down or if there are other issues. Provide a return to home button or add a second CTA to direct users to another page.

SR Error 500
Features
  • Multiple CTA options

Column Modules

SR One Col 01

This module is perfect for placing your content on your website. Add up to 4 columns per row and use the rich text editor to customize your content layout.

sr-one-col-01
Features
  • Customizable Column Layout

SR One Col 02

This module is perfect for placing your content on your website.  Use the rich text editor to customize your content.

sr-one-col-02
Features
  • Customizable graphic

SR One Col Media 01

This module is perfect for placing media content on your website. Add up to 4 columns per row and use the rich text editor to customize your content layout.

sr-one-col-media-01
Features
  • Customizable Column Layout
  • Custom Media Type - Wistia, YouTube, Images

SR Three Col 01

This pre-set three column module is perfect for displaying content in a row. Add up to four columns.

sr-three-col-01
Features
  • Customizable Column Layout
  • Customizable media type

SR Three Col 02

This pre-set three column module is perfect for displaying content in a row. Add up to four columns.

sr-three-col-02
Features
  • Customizable Column Layout
  • Customizable media type

SR Three Col 03

This pre-set three column module is perfect for displaying content in a row. 

sr-three-col-03
Features
  • Customizable Column Layout
  • Customizable media type

SR Two Col 01

This two column module is built to be flexible for different content types. It has a default of 2 columns but you can add up to 4.

sr-two-col-01
Features
  • Customizable column layout
  • Customize media type

SR Two Col 02

This two column module is built to be flexible for different content types. It has a default of 2 columns but you can add up to 4.

sr-two-col-02
Features
  • Customizable column layout
  • Customize media type

SR Two Col 03

This two-column module is built to be flexible for different content types. It has a default of 2 columns but you can add up to 4.

sr-two-col-03
Features
  • Customizable column layout
  • Customizable media type

SR Two Col 04

This two-column module is built to be flexible for different content types. It has a default of 2 columns but you can add up to 4.

sr-two-col-04
Features
  • Customizable Column Layout
  • Customizable Media Type

SR Two Col 07

This two-column module is built with a checklist that you can add any number of items to. This module works great on landing pages and inside pages to show off benefits or features.

sr-two-col-07
Features
  • Unlimited checklist items
  • Vertically center content

Offer Modules

SR Offer Bar 01

This module is perfect for converting on your next big offer! Customizable graphic, text and HubSpot form. 

sr-offer-bar-01
Features
  • Customizable graphic
  • Customizable Form

SR Offer Bar 02

This shorter version of SR Offer Bar 01 is perfect for converting on your next big offer! Customizable graphic, text and HubSpot form. 

sr-offer-bar-02
Features
  • Customizable graphic
  • Customizable Form

SR Offer Bar 03

This module is perfect for promoting the next step for your users to take. It can also be used to add in a prompt to checkout your latest offer and direct users to a landing page or another relevant inside page.

sr-offer-bar-03
Features
  • Customizable offer graphic

SR Offer Bar 04

This module is perfect for promoting the next step for your users to take. It features a customizable background image and solid-colored content background.

sr-offer-bar-04
Features
  • Customizable offer graphic

SR Offer Bar 05

This module is perfect for promoting your next big offer. It features a customizable graphic, animated SVG and solid-colored content background.

sr-offer-bar-05
Features
  • Animated SVG
  • Customizable offer graphic

SR Offer Exit Modal 01

This pop up module includes options to add a custom graphic, gradient and the ability to provide a button, HubSpot CTA or a form directly in the modal.

sr-offer-exit-modal-01
Features
  • Customizable graphic
  • Button, CTA or Form embed
  • Gradient background

SR Offer One Col 01

This module features an attractive form for visitors to fill out. Perfect for long landing pages and to prompt your users to fill in their information to get to the next step.

sr-offer-one-col-01
Features
  • Customizable HubSpot Form

SR Offer Video CTA 01

This module has the ability to embed Wistia, YouTube, vidyard videos or a custom uploaded mp4 video. With a smooth loading effect it can be placed anywhere on your page to showoff video information to your users.

sr-offer-video-cta-01
Features
  • Customizable video types
  • Easy embed for Wista, YouTube, Vidyard

SR Offer Faux Modal 01

This module is perfect for converting on your next big offer! Customizable graphic, text and HubSpot form. 

sr-offer-faux-modal-01
Features
  • Customizable Graphic
  • Customizable HubSpot Form

SR Offer Parallax 01

This module provides an awesome call to action section that has a parallax image behind. 

sr-offer-parallax-01
Features
  • Parallax effect

SR Offer Slide In 01

This offer module provides an opportunity for your users to convert. It comes with the option to hide the offer section and slides in on scroll. 

sr-offer-slide-in-01
Features
  • Slide in on scroll
  • Hide offer on click
  • Customizable HubSpot form

SR Offer Sticky Form 01

This module allows you to set up a multi-step form to simplify the process of multiple form fields being filled out by the user. 

 

sr-offer-sticky-form-01
Features
  • Multi-step form
  • Customizable graphic
  • Customizable HubSpot Form

SR Offer Two Col 01

This offer section has a 50/50 split with an interchangeable HubSpot form. You can embed your own custom image and form. 

sr-offer-two-col-01
Features
  • Custom HubSpot Form
  • Customizable Images

SR Offer Two Col 02

This offer section has a 50% column with an interchangeable HubSpot form. You can embed your own custom image and form. 

sr-offer-two-col-02
Features
  • Custom HubSpot Form
  • Customizable Images

Testimonial Modules

SR Cards Testimonial Grid 01

This module offers the ability to show off your client testimonials in a grid format. It also includes a feature to enable a smooth effect that captures your users' attention.

sr-cards-testimonial-grid-01
Features
  • Unlimited testimonials
  • Smooth scrolling
  • Customizable icon color

SR Cards Testimonial Slider 01

This module has the ability to show off your client testimonials in a dual card slider. Add an unlimited amount of testimonials.

sr-cards-testimonial-slider-01
Features
  • Unlimited testimonials
  • Dual testimonial viewing
  • Customizable icon color

SR Cards Testimonial Slider 02

This module has the ability to show off your client testimonials in a slider. Add an unlimited amount of testimonials.

sr-cards-testimonial-slider-02
Features
  • Unlimited testimonials
  • Customizable icon color

SR Cards Testimonial Slider 03

This module has the ability to show off your client testimonials in a slider. Add an unlimited amount of testimonials.

sr-cards-testimonial-slider-03
Features
  • Unlimited testimonials
  • Customizable icon color

SR Tabs Testimonials 01

This tabs testimonial module is a great way to show off your client accolades.

sr-tabs-testimonials-01
Features
  • Autoplay
  • Adaptive Height
  • Smooth fading

Pillar Modules

SR Pillar Chapter Title 01

This module is perfect for introducing different sections on your pillar page.

pillar-chapter-title-01
Features
  • Adjustable Height

SR Pillar Cover 01

This module is perfect to introduce your content sections on a pillar page.

pillar-cover-01
Features
  • Adjustable Height

Bling Modules

SR Bling Graphic 01

This module shows off a large image that can be styled with SR Base.

sr-bling-graphic-01
Features
  • Custom Images

SR Bling Graphic 02

This module features an active slideshow that scrolls through any amount of images.

sr-bling-graphic-02
Features
  • Unlimited Photos
  • Smooth Scrolling Effect

SR Clients 01

This module shows off your clients. It includes a toggle to convert logos to grayscale and can be switched from a static grid to a moving carousel.

sr-clients-01
Features
  • Unlimited logos
  • Grayscale mode
  • Static or carousel view

SR Cards Image 01

This three-column grid module allows you to easily update text, images and add a CTA to direct your website visitors. 

sr-cards-image-01
Features
  • Customizable column layout

SR Cards Logos 01

This three-column module allows you to show off a logo or image along with a customizable text and link. This is perfect for listing job positions. 

sr-cards-logos-01
Features
  • Add up to 3 card per row

Resource Modules

SR Cards Categories 01

This module can be used to assist the user to navigate through a variety of different destinations.

sr-cards-categories-01
Features
  • Flexible card numbers
  • CTA(s) included

SR Cards Filter 01

This module has the ability to filter through different links based on two customizable filters. It also allows you to edit the hover image and the hover color of each individual link.

sr-cards-filter-01
Features
  • Flexible card numbers
  • Two Customizable Filters
  • Custom hover colors

SR Cards Filter 02

This module has the ability to filter through different links based on editable filters set in the module. Set up as many filters as you want. Each item can have multiple filters. 

sr-cards-filter-02
Features
  • Flexible card numbers
  • Unlimited Customizable Filters

SR Cards Grid 01

This module has the ability to display cards with a headline and brief description. It also allows you to add a call to action for each individual card.

sr-cards-grid-01
Features
  • Flexible card amount
  • Customizable CTAs
  • Flexible Grid

SR Cards Grid 02

This module has the ability to display cards with an image, headline and brief description text. It also allows you to add a call to action for each individual card.

sr-cards-grid-02
Features
  • Flexible card numbers
  • Customizable CTAs
  • Flexible Grid

Tab Modules

SR Tabs Accordion 01

This accordion tabber is perfect for listing FAQs or additional content in an engaging way.

sr-tabs-accordion-01
Features
  • Unlimited accordions
  • View all option

SR Tabs 01

This accordion tabber is perfect for showing several content sections in one area or additional content in an engaging way.

sr-tabs-01
Features
  • Unlimited tabs
  • View all option

SR Tabs Split Screen 01

This tabs module provides an engaging way to show off different content sections focusing the website visitor on one piece of content at a time. A smooth scrolling effect transitions between content sections.

sr-tabs-split-screen-01-dark
Features
  • Customizable Images
  • Custom overlay color
  • Flexible number of sections

SR Tabs Horizontal 01

This accordion tabber is perfect for showing several content sections in one area. Each tab you can set a custom icon and image. 

sr-tabs-horizontal-01
Features
  • Unlimited tabs
  • View all option

SR Tabs Vertical 01

This accordion tabber is perfect for showing several content sections in one area. You can set an unlimited amount of tabs and make the tab section sticky so it follows your user as they scroll. 

sr-tabs-vertical-01
Features
  • Unlimited tabs
  • Sticky tabs

Miscellaneous

SR Cards Pricing 01

This module has the ability to add up to four pricing plans with a call to action for each plan. It also allows you to set featured text such as “Best Deal” or “Most Popular”.

sr-cards-pricing-01
Features
  • Flexible 1-4 pricing plans
  • Customizable featured text

SR Cards Steps 01

This module assists in showing off any process type content. It allows you to add any amount of steps and add customized CTAs to each individual step.

sr-cards-steps-01
Features
  • Flexible step numbers
  • Customizable CTAs
  • Custom Background Colors

SR Cards Steps 02

This module assists in showing off any process type content. It allows you to add any amount of steps and add customized CTAs to each individual step.

sr-cards-steps-02
Features
  • Flexible step numbers
  • Customizable CTAs
  • Custom Background Colors

SR Cards Team 01

This module has the ability to list your team members in a completely flexible grid. Each team member card comes with a flexible field for image, name, title and the ability to link to another page.

sr-cards-team-01
Features
  • Flexible team member amount

SR Cards Team 02

This module has the ability to list your team members in a completely flexible grid. Each team member card comes with a flexible field for image, name, title and the ability to link to another page.

sr-cards-team-02
Features
  • Flexible team member amount

SR Contact 01

This module offers the ability to display a google map and the location of your business to your website viewers.

sr-contact-01
Features
  • Google maps integrated
  • Contact information & business hours

SR FAQ 01

This module has the ability to show frequently asked questions to your website visitors. Listing frequently asked questions allows you to free up customer support requests and allows visitors to get answers to their questions faster.

sr-faq-01
Features
  • Unlimited amount of FAQs

SR Meeting 01

This module allows you to paste your meeting embed code inside to create an attractive section to drive users to book meetings with you.

sr-meeting-01
Features
  • Embed your HubSpot meetings code

SR Social Tweet 01

This module lets you set up a quote from your content to easily be shared to Twitter. 

sr-social-tweet-01
Features
  • Share content directly to Twitter

SR Stats 01

This module is perfect for placing quick credibility statistics in front of your website viewers. Add multiple stats.

sr-stats-01
Features
  • Flexible stats column

SR Stats 02

This module is perfect for placing quick credibility statistics in front of your website viewers. Add multiple stats.

sr-stats-02
Features
  • Flexible stats column

SR Stats 03

This module is perfect for placing quick credibility statistics in front of your website viewers. Add multiple stats.

sr-stats-03
Features
  • Flexible stats column

SR Three Col Features 01

This module is perfect for displaying content around one image graphic. Great for applications or other software.

sr-three-col-features-01
Features
  • Add up to 4 features

SR Two Col Features 01

This module is perfect for displaying features. Customize the icon graphic and text for each feature. Great for applications or other software.

sr-two-col-features-01
Features
  • Add unlimited features

SR Cards Articles 01

This attractive blog slider is perfect for adding blog posts to your website pages. 

sr-articles-01
Features
  • Customizable blog amount
  • Editable button style

SR Job Listing 01

This module is perfect for listing career opportunities within your company. You can link each position to an application link - or open the position details in a pop-up modal. 

sr-job-listing-01
Features
  • Unlimited job positions
  • Responsive modal

Fiit Showcase

We wanted to show how easy it is to create a website page with any brand in under 15 minutes! With absolutely no code.

Fiit-Video

 

Check out the live version of this page. It is fully responsive, on brand and only took 15 minutes to build.

See it live

Slack Showcase

We use Slack every day, so why not re-create the Slack homepage using Sprocket Rocket! Follow along in this demo and watch us build the Slack Homepage in under 15 minutes.

SR-Showcase-Slack

 

Check out the live version of this page. It is fully responsive, on brand and only took 15 minutes to build.

See it live

Zoom Showcase

Watch us use Sprocket Rocket to rebuild Zoom's homepage on the HubSpot CMS without touching any code in just 20 minutes.

SR-Zoom-Showcase-07-28-20

 

Learn how to build a no-code website in minutes with access to intuitive, easy-to-use design tools and a modular builder.

Inside this showcase, we’ll show you how to:

  • Take your website from concept to creation in moments, not days or weeks.
  • Launch beautiful sites on the HubSpot CMS without having to touch code.
  • Harness 100s of intuitive, flexible modules to get your message to market.
  • Ditch your rigid templates, and create your fully modular, customized website.
See it live