In our recent workshop on HubSpot page design, we dived into the essentials of building effective, high-performing pages using HubSpot's drag-and-drop editor. Here’s a recap of the key insights and tips shared, including valuable tools that will enhance your page design process.

Understanding the Power of Heat Mapping Tools

We kicked off the workshop by exploring the use of Crazy Egg, a heat mapping tool, along with alternatives like Hotjar and Lucky Orange. These tools offer valuable insights into user behavior on your site, allowing you to visualize clicks, scrolls, and interactions. Whether you’re improving a high-traffic homepage or reworking a landing page, heat mapping tools help you see where users are engaging the most and where you’re losing them.

💡 Pro Tip: If you aren’t using heat mapping tools yet, start by installing the free version on one page—either your homepage or a high-traffic landing page. You’ll gain immediate insights that can shape your design and improve conversions.

Transitioning to HubSpot’s Drag-and-Drop Editor

A common challenge for HubSpot users is transitioning from the older template editor to the newer drag-and-drop editor. Many sites are still on the old system, which can hinder modern design capabilities. I emphasized the importance of updating to the latest version, especially if you're looking to integrate advanced features.

hubspot drage and drop editor hot

Why Make the Move?

  • The drag-and-drop editor supports atomic design, a modular framework where reusable components can be deployed across pages.
  • It enables a streamlined workflow for copying and pasting sections, speeding up page design.
  • You can match your style across your navigation and footer, ensuring brand consistency across all pages.

The Role of User Feedback in Page Design

User feedback, combined with data from tools like Crazy Egg, is a key driver of design decisions. By understanding how users interact with your content, you can design with intention. For example, if your heat map shows a lack of engagement with certain sections, consider moving critical content higher on the page.

hubspot page hacks heatmaps

One of our case studies was a redesign project for a client where we noticed high engagement with the "Explore Courses" CTA via anchor links, but limited scrolling through the rest of the page. This insight informed our decision to place the course content higher on the page.

Atomic Design and Modular Components

The concept of atomic design was another major point of discussion. By breaking down page elements into smaller, reusable components, you can create a flexible, scalable design system.

Steps for Implementing Atomic Design in HubSpot:

  1. Create Reusable Components: Build sections and modules that can be easily reused across multiple pages.
  2. Screenshot Inspiration: When planning new designs, take screenshots of sections you like from various sources. These can serve as wireframe inspiration.
  3. Deploy Modular Design: Use HubSpot’s drag-and-drop editor to arrange saved sections for rapid deployment across your site.

Mobile-First Design: When It Matters

While desktop design often takes priority, we discussed the growing importance of mobile-first design, especially for businesses with high mobile traffic. Some B2B sites may skew towards desktop, but optimizing for mobile is critical as mobile traffic increases.

💡 Pro Tip: Use HubSpot’s analytics or Google Analytics to track mobile conversion rates. If mobile conversions are lagging behind desktop, it’s time to rethink your mobile UX.

Leveraging ChatGPT for Basic HTML and CSS

A highlight of the workshop was showcasing how ChatGPT can assist with coding simple HTML and CSS. Whether you’re creating custom buttons, animations, or styling, ChatGPT offers an easy way to generate code without the need for deep technical expertise.

code generated chatgpt hubspot

For example, I demonstrated how to create a custom button using ChatGPT by feeding it a screenshot and receiving both the HTML and CSS needed to implement the button in HubSpot’s rich text editor. This is a great method for those who aren’t developers but need quick coding solutions for their site.

Steps for Using ChatGPT to Customize HubSpot Pages:

  1. Take a screenshot of a button or section you want to recreate.
  2. Ask ChatGPT to generate the HTML and CSS for that element.
  3. Paste the code into HubSpot’s rich text editor or a custom CSS file.

Key Takeaways

  • Use Heat Mapping Tools: Tools like Crazy Egg are invaluable for understanding user behavior and refining your design.
  • Upgrade to the Drag-and-Drop Editor: Transitioning to the modern HubSpot editor unlocks advanced capabilities that streamline your workflow.
  • Design with User Feedback: Combine user feedback with heat mapping data to make informed design decisions.
  • Think Modular with Atomic Design: Reusable components speed up the design process and ensure consistency.
  • Optimize for Mobile: Analyze your mobile conversion rates and adjust your design accordingly.
  • Leverage ChatGPT for Quick HTML/CSS Solutions: Save time by letting ChatGPT assist with coding basic elements.

We concluded the workshop with a Q&A, where participants asked about specific use cases for page speed, mobile optimization, and advanced HubSpot features. If you have any questions or need further assistance, feel free to reach out.

Subscribe to our Newsletter

Sign up to stay up to date with what we are up to. You’ll receive news and tips to Living Beyond the Norms.