<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 Zoom'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.

SR Base

In this video, we’ll look at SR.Base and how we can update global styles to match our brand, including colors and typography.

How to access and edit Global Modules

In this video, we’ll explore Global Modules, including what they are, how to find them, how to make any edits you need.

How to setup blog and system templates

In this video, we walk through how to set up your custom blog and system templates in HubSpot.

Build Your First Page with SR App

In this video, we'll look at how you can use Sprocket Rock Pro and the drag and drop builder to create your first web page in just minutes. 

sr-hero-01
Features
  • CTA(s) included

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