Skip to main content

Field Types

When you click on a module in the page editor, you will see various input fields in the left panel. This guide explains each type and how to use them effectively.

Quick Reference​

Field TypeWhat It DoesExample Use
Text (Single Line)Short text entryHeadlines, button labels
Text (Multi-Line)Longer text with line breaksDescriptions, addresses
Rich TextFormatted text with stylingBody paragraphs, lists
ImagePicture selectionPhotos, graphics
LinkURL or page connectionButtons, text links
DropdownSelect one option from a listStyle choices, sizes
CheckboxTurn options on or offShow/hide elements
Radio ButtonsPick one from visible optionsLayout choices
NumberNumeric valuesCounts, percentages
ColorColor selectionText colors, backgrounds
SpacingPadding and margin controlsSection spacing
ToggleOn/off switchEnable/disable features

Text Fields​

Single Line Text​

What it looks like: A simple input box where you type on one line.

How to use it:

  1. Click inside the text box
  2. Type your text
  3. The text appears on your page as you type

Where you will see it:

  • Headlines and titles
  • Button text
  • Short labels

Tips:

  • Keep headlines punchy and under 10 words
  • Check spelling before moving on
  • Some text fields have character limits shown below them

Multi-Line Text​

What it looks like: A taller text box that allows you to press Enter for new lines.

How to use it:

  1. Click inside the text box
  2. Type your text
  3. Press Enter to start a new line
  4. Continue typing

Where you will see it:

  • Addresses
  • Short descriptions
  • Quote text

Tips:

  • Use line breaks sparingly for readability
  • This field does not include formatting options (bold, italic, etc.)

Rich Text​

What it looks like: A text box with a toolbar above it containing formatting buttons (like a mini word processor).

How to use it:

  1. Click inside the text area
  2. Type your content
  3. Highlight text to format it
  4. Use the toolbar buttons to add styling

Toolbar options typically include:

  • Bold (B) - Makes text heavier
  • Italic (I) - Slants text
  • Underline (U) - Adds a line under text
  • Bullet List - Creates a list with dots
  • Numbered List - Creates a list with numbers
  • Link - Turns text into a clickable link
  • Heading - Changes text to a heading style

Where you will see it:

  • Body copy sections
  • Feature descriptions
  • Long-form content areas

Tips:

  • Do not overuse bold or italic. Use them to emphasize key points only
  • Use bullet lists to make information scannable
  • Keep paragraphs short (2-3 sentences)
  • Paste text without formatting (Ctrl+Shift+V or Cmd+Shift+V) to avoid importing unwanted styles

Image Fields​

What it looks like: A box showing a preview of the selected image (or a placeholder icon if empty), with a button to browse or upload.

How to use it:

  1. Click on the image area or the Browse images button
  2. The file manager opens
  3. Choose an existing image OR upload a new one
  4. Click Insert or Select to use the image

To upload a new image:

  1. Click Upload in the file manager
  2. Select a file from your computer
  3. Wait for the upload to complete
  4. The image appears in your file manager
  5. Click on it and then click Insert

Common options you may see:

  • Alt Text - Description of the image for accessibility (always fill this in)
  • Image Fit - How the image fills its container (Cover, Contain, etc.)
  • Loading - Usually set to Lazy for better page speed

Understanding Image Fit options:

OptionWhat It Does
CoverFills the entire space, may crop edges
ContainShows the whole image, may have empty space
FillStretches to fit (may distort the image)
NoneShows at original size

Tips:

  • Always add descriptive alt text (it helps people using screen readers and improves SEO)
  • Use high-quality images that are appropriately sized
  • File names should be descriptive (e.g., team-photo-2024.jpg not IMG_1234.jpg)
  • Compress large images before uploading to keep your pages fast

What it looks like: A text field with a link icon, often with additional options below or beside it.

How to use it:

  1. Click on the link field
  2. A panel opens with link options
  3. Choose your link type and enter the destination
  4. Set additional options as needed

Link type options:

TypeWhat It Links ToWhen to Use
External URLAny website addressLinking to other websites
ContentA page in your HubSpot siteLinking to your own pages
FileA document or downloadPDFs, downloads
EmailOpens email with address filled inContact links
PhoneInitiates a phone call on mobilePhone numbers

To add an external link:

  1. Select External URL as the type
  2. Paste or type the full URL (include https://)
  3. Choose whether to open in a new tab

To link to another page on your site:

  1. Select Content or Page as the type
  2. Search for the page by name
  3. Select it from the list

Common options:

  • Open in new tab - Check this for external links so visitors stay on your site
  • No follow - Technical SEO option (usually leave unchecked unless instructed)

Tips:

  • Always test links after publishing
  • Use Open in new tab for links going to other websites
  • For email links, the format is just the email address (no mailto:)
  • Double-check that URLs start with https:// for external sites

Choice Fields​

What it looks like: A box showing the current selection with an arrow. Click to see all options.

How to use it:

  1. Click on the dropdown box
  2. A list of options appears
  3. Click on your preferred option
  4. The dropdown closes and shows your selection

Where you will see it:

  • Button styles (Gradient, Primary, Ghost, etc.)
  • Sizes (Small, Medium, Large)
  • Heading levels (H1, H2, H3)
  • Layout options

Tips:

  • If you are unsure which option to choose, start with the default
  • Hover over options to see if there are preview tooltips
  • Some dropdowns may show a preview of your selection on the page

Checkbox​

What it looks like: A small square box that can be checked or unchecked.

How to use it:

  1. Click the checkbox to toggle it
  2. A checkmark appears when enabled
  3. Click again to remove the checkmark

Where you will see it:

  • Multiple feature selections
  • Optional settings
  • Include or Show options

Tips:

  • Read the label carefully to understand what enabling the checkbox does
  • Multiple checkboxes can be selected at once (unlike radio buttons)

Radio Buttons​

What it looks like: A group of circular buttons where only one can be selected at a time.

How to use it:

  1. Look at all available options
  2. Click the circle next to your preferred choice
  3. That option becomes selected (any previous selection is cleared)

Where you will see it:

  • Layout choices (Left, Center, Right)
  • Style variations
  • Choose one scenarios

Tips:

  • Only one radio button in a group can be active
  • If you want a different option, just click it directly (no need to unselect first)

Button Selection​

What it looks like: A row of clickable buttons, often with icons or short labels. The selected option appears highlighted.

How to use it:

  1. View the available button options
  2. Click on your preferred choice
  3. The button highlights to show it is selected

Where you will see it:

  • Text alignment (left, center, right icons)
  • Layout options
  • Quick style selections

Tips:

  • This is just a visual variation of radio buttons
  • Look for icon tooltips if the buttons show only icons

Number Fields​

What it looks like: An input box for numbers, sometimes with up/down arrows, or a slider.

How to use it:

  1. Click in the number field
  2. Type a number OR use the up/down arrows
  3. For sliders, drag the handle to adjust the value

Where you will see it:

  • Counter values (statistics, numbers)
  • Spacing values in pixels
  • Column counts
  • Percentage values

Tips:

  • Some number fields have minimum and maximum limits
  • Pay attention to the unit shown (px, %, etc.)
  • Use round numbers when possible for cleaner designs

Color Fields​

What it looks like: A small colored square showing the current color, with a button to open the color picker.

How to use it:

  1. Click on the color preview square
  2. The color picker panel opens
  3. Choose a color using one of these methods:
    • Click on a brand color from the palette
    • Enter a hex code (like #FF5733)
    • Use the color picker wheel or gradient
  4. Click outside the picker or press Enter to confirm

Where you will see it:

  • Text colors
  • Background colors
  • Icon colors
  • Border colors

Tips:

  • Stick to your brand colors for consistency
  • Check that text has enough contrast against its background
  • Your theme likely has preset brand colors at the top of the picker. Use these when possible
  • Copy the hex code if you need to use the same color elsewhere

Spacing and Size Controls​

Spacing Field​

What it looks like: A set of inputs arranged like a box, showing padding or margin values for top, right, bottom, and left.

How to use it:

  1. Enter values in each direction (top, right, bottom, left)
  2. Some fields have a link icon to apply the same value to all sides
  3. Choose the unit (usually px for pixels)

Understanding spacing:

  • Padding - Space inside an element (between content and its border)
  • Margin - Space outside an element (between the element and other things)

Where you will see it:

  • Section spacing controls
  • Module padding settings
  • Layout adjustments

Tips:

  • Use consistent spacing values across your page (stick to your theme presets)
  • Larger spacing creates a more open, airy feel
  • Smaller spacing makes content feel more compact

Preset Spacing Selector​

What it looks like: A dropdown or button group with options like None, Small, Medium, Large.

How to use it:

  1. Select the spacing size that fits your design
  2. The module adjusts automatically

Where you will see it:

  • Section padding controls
  • Spacing presets in style options

Tips:

  • Start with preset options before customizing with exact pixel values
  • None removes spacing entirely
  • Presets ensure consistency across your pages

Toggle Switches​

What it looks like: A small switch that slides between on (usually colored) and off (usually gray).

How to use it:

  1. Click the toggle to flip it
  2. Watch the color change to confirm the new state
  3. ON typically shows a color (blue, green, or orange)
  4. OFF is usually gray

Where you will see it:

  • Show/Hide options (like Show Button)
  • Enable/Disable features
  • On/Off settings

Tips:

  • The label usually indicates what happens when the toggle is ON
  • Changes typically appear immediately in the preview
  • Look for related fields that may appear when you toggle something on

Group Fields​

What it looks like: A collapsible section with an arrow or plus sign. Click to expand and see more fields inside.

How to use it:

  1. Click the arrow or header to expand the group
  2. Edit the fields inside
  3. Click again to collapse and clean up your workspace

Where you will see it:

  • Button settings (contains text, link, style fields)
  • Image settings (contains image, alt text, fit options)
  • Advanced options (usually collapsed by default)

Tips:

  • Expand only the sections you need to edit
  • Groups labeled Advanced often contain options you rarely need to change
  • Look for groups named Accessibility to add screen reader descriptions

Repeater Fields (Lists)​

What it looks like: A list of similar items with Add and Remove buttons. Each item can be expanded to show its fields.

How to use it:

  1. Click Add item to create a new entry
  2. Expand the item to edit its content
  3. Use drag handles (grid of dots) to reorder items
  4. Click the trash icon to remove an item

Where you will see it:

  • Testimonial sliders (list of testimonials)
  • Card groups (list of cards)
  • FAQ sections (list of questions)
  • Navigation menus (list of links)

Tips:

  • Check if there is a minimum or maximum number of items allowed
  • Reorder items by dragging rather than deleting and recreating
  • Duplicate similar items to save time, then edit the differences

Tab Navigation​

What it looks like: Tabs at the top of the module panel, typically labeled Content, Style, or Settings.

How to use it:

  1. Click on a tab name to switch views
  2. Each tab shows different types of fields

Common tabs:

TabWhat You Will Find
ContentText, images, links. The actual content
StyleColors, spacing, alignment. How it looks
SettingsAdvanced options, custom classes

Tips:

  • Start with the Content tab to enter your information
  • Move to Style to adjust appearance
  • You rarely need the Settings tab for everyday editing

Getting Help with Fields​

If you are unsure what a field does:

  1. Look for help text - Small text below the field explains its purpose
  2. Hover for tooltips - Some fields show tips when you hover over them
  3. Check the preview - Change the value and watch what happens on the page
  4. Ask your team - Reach out if you are uncertain about an option

Next Steps​

  • Return to the Glossary to understand common terms
  • Check Common Tasks for step-by-step guides
  • Review Design System to understand your brand styling options