HubSpot CMS: A Guide to the High-Conversion "Button Module with Images"

In website design, CTA (Call-to-Action) buttons are critical elements that determine the success of inquiries and resource downloads. Unlike standard text-only buttons, the Button Module with Images introduced here allows you to incorporate intuitive icons or images. This approach strongly appeals to the user's visual senses and encourages higher click-through rates.

1. Objectives

The primary objective of this module is to enable anyone to easily build and manage high-quality, high-visibility visual buttons.

• Enhanced Visibility: By placing an image on the left side, the button's purpose is communicated to the user instantaneously.
• Flexible Customization: Background colors, text colors, borders, and even button width or padding can be adjusted freely within the editor.
• Multi-Device Compatibility: A responsive design is automatically applied, ensuring the layout remains perfect even when viewed on smartphones.

2. Use Cases

• Resource Downloads: Accompany the button with an image of a document cover to help users visualize what they are downloading.
• Bookings & Purchases: Use calendar or cart icons to intuitively indicate the next action.
• Service Information: Add supplementary sub-text to the main text to provide more detailed information at a glance.

3. Implementation and Operation Steps

This section covers the entire process from creating a new page to applying the code and configuring the actual operational settings.

Step 1: Page Creation and Module Placement

Start a new page (such as a landing page) from the HubSpot admin dashboard. Search for the module name in the left sidebar of the editor, then drag and drop it into the editing area.

Step 2: Applying Code in the Design Manager

To enable advanced design features, perform the following in the Design Manager:

• File Preparation: Create a new module in the Design Manager.
• Paste the Code: Simply copy and paste the provided source code into the respective HTML/HubL and CSS sections, then save and publish.

Step 3: Editor Configuration

Once the code is applied, you can design the button intuitively from the side panel of the editing screen.

• Links and Images: Set the destination URL and upload the icon or photo you want to display on the button.
• Text: Enter the main copy and, if necessary, add sub-text for further context.
• Style Adjustments: Use the color picker to specify button and text colors, and fine-tune font sizes and padding values to complete the setup.

‍

Module Source Code

Create a "New Module" in the HubSpot Design Manager and paste the following code into each respective section.

1. fields.json

This is the field definition. It consists of a repeater field (Items) and style setting fields (Styles).

[
 {
  "allow_new_line": false,
  "display_width": null,
  "id": "f828e942-d88b-6872-99aa-7e6839a2ba4a",
  "label": "section_title",
  "locked": false,
  "name": "section_title",
  "required": false,
  "type": "text"
 },
 {
  "default": {
   "color": null,
   "opacity": null
  },
  "display_width": null,
  "id": "23d16879-569c-2624-b906-6ae2371a442f",
  "label": "title_color",
  "locked": false,
  "name": "title_color",
  "required": false,
  "type": "color"
 },
 {
  "display": "text",
  "display_width": null,
  "id": "bf18e844-9553-d75c-fe55-7e0c1a65fe9d",
  "label": "title_font_size",
  "locked": false,
  "name": "title_font_size",
  "required": false,
  "step": 1,
  "type": "number"
 },
 {
  "children": [
   {
    "default": {
     "size_type": "auto",
     "src": "",
     "alt": null,
     "loading": "lazy"
    },
    "display_width": null,
    "id": "0c514272-f096-02d4-33c1-791a40fe2d9f",
    "label": "Image",
    "locked": false,
    "name": "image",
    "required": false,
    "resizable": true,
    "responsive": true,
    "show_loading": false,
    "type": "image"
   },
   {
    "allow_new_line": false,
    "display_width": null,
    "id": "1f453c47-b6a2-a51a-f8d7-dc5248114ba0",
    "label": "title",
    "locked": false,
    "name": "title",
    "required": false,
    "type": "text"
   },
   {
    "display_width": null,
    "id": "456812f3-1652-0fff-f563-f8787f2efbcc",
    "label": "description",
    "locked": false,
    "name": "description",
    "required": false,
    "type": "richtext"
   }
  ],
  "default": [],
  "display_width": null,
  "expanded": false,
  "group_occurrence_meta": null,
  "id": "004e3419-0e40-def3-93c0-bf008f14bb26",
  "label": "cards",
  "locked": false,
  "name": "cards",
  "occurrence": {},
  "required": false,
  "tab": "CONTENT",
  "type": "group"
 },
 {
  "default": {
   "color": null,
   "opacity": null
  },
  "display_width": null,
  "id": "f577bff8-1c57-1000-f2b9-0297e618fb2a",
  "label": "card_title_color",
  "locked": false,
  "name": "card_title_color",
  "required": false,
  "type": "color"
 },
 {
  "default": {
   "color": null,
   "opacity": null
  },
  "display_width": null,
  "id": "33968af4-9a30-8270-1df2-5ff36ebcca38",
  "label": "card_descriotion_color",
  "locked": false,
  "name": "card_descriotion_color",
  "required": false,
  "type": "color"
 },
 {
  "display": "text",
  "display_width": null,
  "id": "9c9f49bb-5a85-c6b6-395b-c8577fffac7b",
  "label": "card_description_font_size",
  "locked": false,
  "name": "card_description_font_size",
  "required": false,
  "step": 1,
  "type": "number"
 },
 {
  "default": {
   "color": null,
   "opacity": null
  },
  "display_width": null,
  "id": "7152aefd-c5cc-1ad9-9025-c6f55715d19d",
  "label": "border_color",
  "locked": false,
  "name": "border_color",
  "required": false,
  "type": "color"
 },
 {
  "display": "text",
  "display_width": null,
  "id": "1c170b7c-6ba3-2f81-7881-884f1b780fc9",
  "label": "border_width",
  "locked": false,
  "name": "border_width",
  "required": false,
  "step": 1,
  "type": "number"
 },
 {
  "default": false,
  "display": "checkbox",
  "display_width": null,
  "id": "624857cf-7d81-5530-10aa-72b51715b231",
  "label": "autoplay",
  "locked": false,
  "name": "autoplay",
  "required": false,
  "type": "boolean"
 }
]