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.
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 global content icon. This 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 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.
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.
- 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.
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 page, 500 error page, Password prompt page, and Search results page 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 page, Unsubscribe backup pages, and Subscription update confirmation page 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Features
- Image Gallery
- Responsive Modal
Pillar Modules
SR Pillar Chapter Title 01
This module is perfect for introducing different sections on your pillar page.
Features
- Adjustable Height
SR Pillar Cover 01
This module is perfect to introduce your content sections on a pillar page.
Features
- Adjustable Height
Bling Modules
SR Bling Graphic 01
This module shows off a large image that can be styled with SR Base.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Features
- Add unlimited features
SR Cards Articles 01
This attractive blog slider is perfect for adding blog posts to your website pages.
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.
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 liveZoom Showcase
Watch us use Sprocket Rocket to rebuild Zoom's homepage on the HubSpot CMS without touching any code in just 20 minutes.
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.