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.
Global Modules
SR Footer 01
This global module has the ability to easily update your logo, menu, and links to legal pages with ease.
App Exclusive
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.
Features
- Customizable Text
SR Footer 02
This global module has the ability to easily update your logo, menu, social media and links to legal pages with ease.
App Exclusive
Features
- Global settings
- Easily add/remove menu items
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.
Features
- Change logo on scroll
- Fixed or a static navigation
- Transparent option
- Call to Action
SR Footer 03
This global module has the ability to easily update your logo, menu, social media and links to legal pages with ease.
App Exclusive
Features
- Global settings
- Easily add/remove menu items
SR Nav Dropdown 03
This global navigation module is packed with features that allows you to have a custom navigation that fits your brand.
Features
- Change logo on scroll
- Fixed or a static navigation
- Transparent option
- Call to Action
SR Footer 04
This global module has the ability to easily update your menu, social media links and links to legal pages with ease.
Features
- Global Settings
- Easily add menu items
- Customizable social icons
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.
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.
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.
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 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.
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.
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.
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.
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.
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.
App Exclusive
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.
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.
App Exclusive
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.
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.
App Exclusive
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.
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.
App Exclusive
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.
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.
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.
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.
App Exclusive
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.
App Exclusive
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.
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.
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.
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.
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.
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.
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.
App Exclusive
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.
App Exclusive
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.
App Exclusive
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.
App Exclusive
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.
App Exclusive
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.
App Exclusive
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.
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.
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.
App Exclusive
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.
App Exclusive
Features
- Unlimited testimonials
- Customizable icon color
SR Tabs Testimonials 01
This tabs testimonial module is a great way to show off your client accolades.
Features
- Autoplay
- Adaptive Height
- Smooth fading
Gallery Modules
SR Two Col Gallery 01
This two column module features a four image grid that can be clicked on to show off large images in a responsive modal. The gallery can be switched between the left and right column.
Features
- Image Gallery
- Responsive Image Modal
SR Two Col Gallery 02
This two column module features a single clickable image grid that can be clicked on to show off large images in a responsive modal. The gallery can be switched between the left and right column.
Features
- Image Gallery
- Responsive Image Modal
SR Gallery 01
This single column module features a four image grid that can be clicked on to show off large images in a responsive modal. The gallery can be scrolled through when open in the modal.
App Exclusive
Features
- Image Gallery
- Responsive Modal
Pillar Modules
SR Pillar Chapter Title 01
This module is perfect for introducing different sections on your pillar page.
App Exclusive
Features
- Adjustable Height
SR Pillar Cover 01
This module is perfect to introduce your content sections on a pillar page.
App Exclusive
Features
- Adjustable Height
Bling Modules
SR Bling Graphic 01
This module shows off a large image that can be styled with SR Base.
App Exclusive
Features
- Custom Images
SR Bling Graphic 02
This module features an active slideshow that scrolls through any amount of images.
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.
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.
App Exclusive
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.
App Exclusive
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.
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.
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.
App Exclusive
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.
App Exclusive
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.
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.
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.
App Exclusive
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.
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.
App Exclusive
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.
App Exclusive
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”.
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.
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.
App Exclusive
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.
App Exclusive
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.
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.
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.
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.
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.
App Exclusive
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.
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.
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.
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.
App Exclusive
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.
App Exclusive
Features
- Add unlimited features
SR Cards Articles 01
This attractive blog slider is perfect for adding blog posts to your website pages.
App Exclusive
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.
App Exclusive
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.
Check out the live version of this page. It is fully responsive, on brand and only took 15 minutes to build.
See it liveSlack 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.
Check out the live version of this page. It is fully responsive, on brand and only took 15 minutes to build.
See it live