Best Practices for Using Drag & Drop HubSpot Themes

Pillar Page

Best Practices for Using Drag & Drop HubSpot Themes

To make sure it’s the best choice for you, we’ll take a deep dive into CMS Hub and drag and drop themes, including benefits, how to edit, and more.

Last year, 81% of consumers searched online for a product or service to buy. That means if you don’t have a website, you’re dramatically reducing the potential size of your business.

But creating and maintaining a site is a massive undertaking, right? Not necessarily.

You could opt for several content management systems, like Wix, WordPress, or Squarespace. All are excellent choices, but for one reason or another, marketers can find them tricky.

If you’re looking for a straightforward website editor, then CMS Hub may be your best bet. CMS Hub is a flexible website content management system built on the HubSpot CRM and backed by intuitive drag and drop editing capabilities.

For anyone experienced with HubSpot, you’re likely familiar with templates or template packs. They used to be the only method of building HubSpot sites. However, HubSpot is sunsetting them in favor of their all-encompassing drag and drop themes because content creators find them easier to work with.

So, what EXACTLY is a HubSpot theme?

A theme contains a set of drag-and-drop enabled templates, custom modules, and global content that marketers can use to manage all parts of a website’s content and layout without a developer. These drag and drop themes, which your team can develop, access through HubSpot’s default themes, or download from the Asset Marketplace, unlock all available drag and drop editor features. The goal of any theme is to create a cohesive site without worrying about mismatching designs, logos, navigations, or anything else. Everything you need to brand your site accordingly comes with the theme!

drag-drop-themes-img-1-1

Now, let’s take a closer look at those different elements.

Template 101

A template or group of templates are reusable page wrappers that place modules and partials into a specific layout. When marketers create a page, they’ll select a template to use before editing and populating it with content. A home page template is a typical example. Home pages include modules like hero images and text, icons with text, CTAs, and related blog posts. You can see this in action by visiting Spark by Lynton.

Module 101

A module in HubSpot is any reusable component within individual templates or added to pages through the CMS’s drag and drop features. Default and custom modules are both available within drag and drop themes.

Default: HubSpot includes default modules in their pre-built themes, as do many agencies in their Asset Marketplace themes. If you’re creating your own theme or page, you can pick from a long list and drag them onto your layout. Examples include blog comments, blog email subscription, button, CTA, divider, footer, follow me, form, image gallery, header, spacers, language switchers, images, meetings, menu, footer, password prompt, post-filter, post listing, rich text, RSS listing, and site search input.
Custom: Sometimes default modules don’t offer the necessary functionality. That’s where custom modules come in. These modules provide a wide range of capabilities, so you can fully personalize your content to your requirements. Unlike default ones, you’ll need a developer to build them from scratch. If that’s not possible, you can always download them from the Asset Marketplace or look for a theme that comes with custom modules. Examples here include tabs, shifters, carousel, sliders, and more.

Global Content 101

Global content is content shared across portions of a website. Common examples are website headers, footers, sidebars, logos, or other components. Developers establish which features should be global by using global partials or through making modules global. Then marketers can edit them as needed. Again, if you don’t have development skills on hand, drag and drop themes like Spark offer global content capabilities.

Drag and Drop 101

Creating well-designed, high-functioning web pages used to be restricted to experienced developers until the introduction of the drag and drop editor. Drag and drop abilities are a core component of CMS Hub themes because they allow marketers control over the design, content, and layout. It’s available in HubSpot’s default themes, Asset Marketplace themes, and any template that has drag and drop areas built-in.

When you’re editing a page, you’ll see the page’s current state in the middle. You’ll notice the drag and drop editor on the left-hand side, where you can click on different modules (standard or custom, depending on what type of theme you’re using) and drag and move them over to the right-hand side. Then you can click the module and edit it. You can move modules, entire sections, and rows to rearrange whole parts of your page.

If you want to edit global content, you’ll need a developer to enable it or use a theme where it comes built-in, as mentioned earlier. Similarly, if you want custom modules, you can choose to build them yourself or explore the Asset Marketplace. More on this comes later, but first, it’s time to explain why you should use a drag and drop theme.

Easy Set Up
Maximize Capabilities
Simple Editing
Made for Marketers and Developers

There’s a lot to love about these themes, from all the modules, templates, and easy editing capabilities. But perhaps the best part of all of these is the benefits they bring to the various users involved in making your site. Here are some examples:

Old-school templates and template packs are limited in their editing capabilities. Generally, they require someone who has the technical expertise using HubSpot’s Design Manager (and as noted, they will be outright replaced by themes eventually).
Relying on a developer to make simple changes or edits to copy, images, and more can be frustrating. Drag and drop themes make it easy for marketers to make edits on the fly while keeping a cohesive, branded look throughout every page of your site and blog.
Global theme settings let marketers customize the website header, footer, fonts, buttons, and style settings for your entire site in one place – something that was once relegated to just developers.
Modules live in a space in the drag and drop editor called Theme modules making them essentially impossible to miss.
If you install a theme from the Asset Marketplace or create your own, you can quickly clone it and copy it into another portal. This is useful for agencies using the same themes to customize sites for multiple clients, especially if they need a quick turnaround on their projects.
Developers can create reusable modules for themes which means less coding for them and requests asking from marketers.
Developers can also choose the tools they prefer to work with to customize themes and other elements of a CMS Hub site (but again, it’s not 100% necessary to have a developer on hand when using a drag and drop theme).

Now that you know a lot about what themes are and their benefits, let’s explore how to select a theme.

Section 04

Choosing Your HubSpot Theme

If you’ve gotten this far, you understand there are three ways to go about using a drag and drop theme: selecting the HubSpot defaults, checking out the Asset Marketplace, or making your own. Here’s what each looks like:

Default Themes: All CMS Hub usersdrag-drop-themes-img-4-1 have access to default HubSpot themes when they purchase any tier of CMS Hub. You use the drag and drop editor with these. It’s all pre-built and ready to go, so this is a good option if you’re eager to get started.

Asset Marketplace Themes: CMS Hub and Marketing Hub users can download themes from the Asset Marketplace. HubSpot partners create these themes and offer generic modules, templates, style settings, and global content that you can customize to fit your branding. Some of these themes are free, while others you will have to purchase.

Creating Your Own: If you have the skill sets and time on hand, you can build a theme from scratch that you can then pass off to your marketers to edit with drag and drop features. This may be tough if you don’t have any branding guidelines established or have a complex request or need. Creating your theme can give you more control over the result -- if you have what you need.

You can also use child themes with any of these selections. Child themes are a copy of any original theme that you can edit without altering the parent theme. This is a solid choice if the theme you’ve chosen doesn’t allow editing because you can edit child themes regardless of their parent. However, you’ll need to use the Design Manager to enable child themes.

Section 05

How to Adjust Your Drag and Drop Theme Settings

We’ve briefly touched on global and style settings throughout, but now it’s time to get into the nitty-gritty. Style settings for all pages using the same theme are managed in your drag and drop theme settings. These settings are what you edit to control the look of your site and ensure it’s consistent on every page and matches your branding.

Editing Theme Settings

To edit your theme settings, you first need to create a page using an available template. You can then customize the settings by clicking the Design tab in the left panel of your page editor then selecting Edit theme settings. You’ll see toggles, switches, and color pickers. Styling options include colors, fonts, and spacing. These change the default styles for all the elements on your web page. You can edit more minor details like button colors, heading fonts, and more by clicking Edit next to More settings. This brings up additional settings available for your templates.

Please note that your styling options will depend on the theme options included by the web developer you created your theme. You may be able to access more than the default style settings to make changes to modules like tables with other drag and drop themes. Be sure to do your research if you’re selecting a theme from the Asset Marketplace if you want more!

Theme fields: Drag and drop modules and themes can also use these fields for customization. A variety of fields help developers control style and function and provide the best editing experience for marketers.

Editing Global Content

HubSpot provides a different editing experience for content editors when editing a global component, making it easy to edit the global content and preview the changes across pages before publishing. Hover over the page or blog post containing your global content, then click Edit. A tiny icon will appear directly on the module group in the editor or the module listing in the Content tab on the left panel. In the left panel, choose your module that has global settings and make your edits.

Global Content

If you’re curious if style settings apply to your blog and blog posts, they do! HubSpot recognizes the importance of blogging, so they’ve simplified the process of creating and editing your blog – all of which we jump into next.

Section 06

How to Set Up Your HubSpot Blog

HubSpot Blog

Every marketer knows having a blog is a crucial piece of their website. Blogs can help highlight your products, service, and industry thought leadership. And thankfully, when you download a theme, create your own, or use a pre-built HubSpot theme in CMS Hub, you have access to blog themes and templates. You can use the same drag and drop functionality to edit the look and feel of your blog as you would with a website page.

But before you can edit your blog, you have to create it. Here are the steps to do just that:

Navigate to Settings > Website > Blog
Select your existing blog or create a new one
Choose a blog post or blog listing template from whatever theme you’re using
Edit the settings like you would a page’s setting by navigating to this option on the left-hand side.

With Spark, you can make global changes and drag and drop pages to your listing and post to ensure consistency throughout! Once you’re live, you can always go back and make changes to your blog and blog content as needed. If you’re feeling excited about all the capabilities of HubSpot drag and drop themes but are using a different CMS, don’t worry. Check out what to do next.

Section 07

Migrating to HubSpot from Another CMS

If you want to take advantage of CMS Hub, you can migrate your existing site to HubSpot by working directly with HubSpot or partnering with Lynton. At Lynton, we offer complete migrations of your site’s content, structure, processes to HubSpot. We have deep experience and expertise in what we consider standard and complex website migration processes. Those projects include:

Standard –A migration of your site pages (template of your webpages, landing pages, blog) and data from one system to HubSpot, then recreating and developing the site as-is.
Complex – A total migration of all your site’s pages, functionality, and content, plus any training and onboarding HubSpot’s tools.

To make the most out of your investment, we recommend having in-depth conversations with all your stakeholders, defining any new processes, and determining who needs to use different HubSpot functionality. If you’re new to website design and development, we advise that you discuss HubSpot themes. You can even explore some on the Asset Marketplace to start better understanding HubSpot.

Section 08

Start Using HubSpot Drag and Drop Themes Today

Spark

If you’re already using HubSpot, we believe the best way to learn it all is just to get started – and maybe keep this page bookmarked as an easy reference? You can do this by checking out some free and paid themes you can download now from the Asset Marketplace, including:

By exploring the Asset Marketplace, you’ll get a sense of the power of themes. After all, they’re built to support your company in your quest to create stunning websites and online experiences that prospective and current customers will love. And with these guidelines, you should be able to see great success with HubSpot themes!

Ready to fall in love with HubSpot Drag and Drop themes?

Ready to fall in love with HubSpot Drag and Drop themes? Download Spark from the HubSpot App Marketplace today.