How do I add structures and elements when creating a page in Hotmart Pages?

To organize the layout of a page you created with Hotmart Pages and present information in the best way, the editor uses structures, which organize the page, and elements, which make up the displayed content.

In this article, you will understand what structures and elements are in Hotmart Pages, what options are available, and how to add them to your page, along with practical guidance for customizing and organizing content.

What are structures and elements in Hotmart Pages?

When creating a page in Hotmart Pages, it’s important to understand the difference between structure and element, as each plays a specific role in the editor:

• Structures are responsible for organizing the page layout. They create the spaces where content will be placed and help maintain alignment, visual hierarchy, and a good navigation experience.
• Elements, on the other hand, are the components that display content to the visitor, such as text, images, buttons, and forms.

In other words, structures organize the page, while elements communicate the message.

How do I add structures and elements to my page?

To add structures and elements in Hotmart Pages, follow the steps below:

• Access your account via the link http://app.hotmart.com.
• In the side menu, click Marketing and then Page creator.
• Within the Hotmart Pages environment, select My pages in the left-side menu.
• Choose the page you want to edit and click Edit, or select Create page to start from scratch.
• In the editor, click the + icon in the side menu to Add structures and elements.
• Select the desired structure or element and drag it to the location on the page where you want to insert it.
• After adding it, click on the component to customize the content and visual settings.

Changes are automatically saved as a draft. To make the page public or update the published version, click Publish.

What structures are available?

Hotmart Pages offers different types of structures that can be combined with each other:

❯ Section: organizes the main structure of the page.

The Section is the main structure in Hotmart Pages. It works as a block that organizes the page content into parts, making reading, navigation, and visual organization easier. Within a section, you can add different elements such as text, images, videos, buttons, forms, as well as other internal structures like rows, columns, and boxes.

The section is recommended for fixed content blocks such as:

• Headers and banners
• Presentations
• Information areas
• Footers

To add a Section, follow these steps:

1. In the Add structures and elements screen, select Section and drag it to the desired location on the page.
2. If you prefer, click Replace with ready-made template and choose a layout from the available categories.
3. To customize freely, drag elements individually into the section.
4. Changes are automatically saved as a draft. Click Publish to make the page live or update the published version.

Once created, the section can be:

• Reordered or renamed by clicking the Page structure icon in the side menu.
• Duplicated, deleted, or saved for reuse on other pages.
• Configured with a display delay, by time or date.
• Customized with background, internal spacing, and device visibility.

Important: The Pin section option is available only for the first section of the page and allows it to remain visible at the top during scrolling.

❯ Row and Column: organize content vertically and horizontally within a section.

Row and Column are structures used to organize elements within a section in an aligned and structured way, but each works in a different direction.

The Row organizes content vertically, placing elements one below the other within the section. It is used as a base to stack content and structure the page flow. The Column divides the section space horizontally, allowing content to be placed side by side, such as text and images, buttons, or information blocks.

These structures are especially useful when you need to create more organized layouts, such as side-by-side images and text, multiple buttons in the same area, or distributed content blocks on desktop.

To add a Row or Column, follow these steps:

1. In the Add structures and elements screen, select Row or Column and drag it to the desired location on the page.
2. Rows and columns must always be inside a section.
3. Within the row or column, you can add elements directly, depending on the desired structure.
4. Changes are automatically saved as a draft. Click Publish to make the page live or update the published version.

❯ Box: groups elements with similar alignment and visual behavior.

The Box is a structure used to group elements that need to maintain the same alignment or visual behavior. It helps organize related content and makes it easier to adjust spacing and style together.

To add a Box, follow these steps:

1. In the Add structures and elements screen, select Box and drag it to the desired location on the page.
2. Click on the box you just added to customize it freely.
3. If desired, drag elements individually into the box.
4. Changes are automatically saved as a draft. Click Publish to make the page live or update the published version.

You can add icons inside a box to make your page more personalized. See how in the next section.

❯ Carousel: displays content in rotating slides

The Carousel is a special type of section that displays content in rotating slides, allowing you to present text, images, and buttons sequentially. It is recommended when you want to show multiple pieces of information in the same space on the page, such as highlights, benefits, testimonials, or important calls to action.

Unlike regular sections, the carousel does not have a display delay setting. It is displayed as soon as the page loads.

To add a Carousel, follow these steps:

1. In the Add structures and elements screen, select Carousel and drag it to the desired location on the page.
2. Click on the carousel you just added to configure it:
3. Slides: add, duplicate, rename, reorder, or delete.
4. Behavior: enable or disable automatic rotation and define the transition time.
5. Navigation: show or hide arrows and slide indicators.
6. Customize your carousel with internal spacing, background style, and visibility.
7. If desired, drag elements individually into the carousel.
8. Changes are automatically saved as a draft. Click Publish to make the page live or update the published version.

What elements can I add to my page?

Elements are responsible for displaying the page content. Among the main ones available in Hotmart Pages are:

❯ Title and Paragraph: used to insert text and organize information hierarchy.

The Title and Paragraph elements are used to add text to your page in Hotmart Pages. They help structure information, create visual hierarchy, and guide the visitor’s reading throughout the content.

While the Title is used to highlight sections, calls, and key points, the Paragraph is used for explanatory text, descriptions, and additional information.

To add Titles and Paragraphs, follow the steps below:

1.  In the Add structures and elements screen, select Title or Paragraph and drag it to the desired location on the page.
2. Click on the inserted element to edit the content.
3. Customize the text style, such as font size and weight, color, and alignment.
4. Changes are saved as a draft. To apply them, click Publish.

Important tips and best practices:

• Maintain a clear hierarchy: use larger titles for main sections and smaller ones for subtopics.
• Avoid very long text in a single paragraph. It’s best to break the content into shorter blocks.

❯ Button: directs the visitor to an action.

Use the Button (also called a CTA) to direct the visitor to a specific action, such as accessing another page, joining a WhatsApp group, downloading a material, or proceeding to checkout.

To add the Button element, follow the steps below:

1. In the Add structures and elements screen, select Button and drag it to the desired location on the page.
2. Click on the button to enter the text and open the customization menu.
3. In Action, choose what will happen when the button is clicked:
   • External link: directs to a URL (another Hotmart Pages page or an external website).
   • Hotmart payment link: links to an offer for your product.
   • Anchor section: takes the visitor to a specific section of the same page.
   • Open pop-up: displays a pop-up window configured on the page.
4. In Effect, define when the button will be displayed:
   • Disabled: the button appears immediately.
   • By date: displays the button on a specific date and time.
   • By time: displays the button after a waiting time (in seconds or minutes).
5. In Animation, select a visual effect to highlight the button (such as Vibrate, Shimmer, Shake, Jelly, Swing, Bounce, Pulse, or Blink). Then adjust:
   • Animation variation.
   • Repetitions.
   • Duration time.
6. Customize the button style, such as color, size, borders, and spacing.
7. Changes are saved as a draft. To apply them to the page, click Publish.

Important tips and best practices:

• You can add more than one button on the same page, configuring each one individually.
• To make files available, host the material on an external service and use the External link action.

❯ Image and GIF: adds static visual content to the page.

The Image element allows you to add static visual content to your page in Hotmart Pages, while GIFs allow you to display dynamic visual content. Both follow the same insertion process in the editor and can be used together throughout the page, depending on the content’s purpose.

To add Images or GIFs, follow the steps below: 

1. In the Add structures and elements screen, select Image and drag it to the desired location on the page.
2. Click on the inserted element to open the settings and customization menu.

Then, consider the following points:

• Image: the Image element is recommended for displaying banners, illustrations, photos, mockups, or any other static visual content. When configuring an image, you can:
  • Select the image from your computer or from a URL.
  • Adjust the size, alignment, and spacing within the structure.
  • Define borders, rounded corners, and shadows, according to the page style.
  • Add a link to the image, directing the visitor to another page, checkout, or external website.
  • Set the image visibility by device, choosing whether it appears on desktop, mobile, or both.
• GIFs: GIFs allow you to display short animations on the page and can be used to highlight information, illustrate actions, or make the content more dynamic.
  • To insert GIFs, you must host them on a service such as GIPHY and use the generated link.
  • In Hotmart Pages, GIFs are added via an external link, using the same Image element.

Important tips and best practices to ensure a good visitor experience:

• Prefer optimized images, between 100 and 300 KB, with a limit of 1 MB.
• Avoid excessive use of very large images, especially on mobile.
• To prevent cropping or distortion on different devices, use the following sizes as a reference:
  • Favicon: 32 × 32 px
  • Sharing image (Open Graph): 1200 × 630 px
  • Full-screen section background: around 1920 × 1080 px
  • Recommended ratios: 16:9, 4:3, and 1:1

❯ Video: adds dynamic visual content to the page.

The Video element allows you to display dynamic visual content on your page, such as lessons, testimonials, demonstrations, or short animations.

To add Videos, follow the steps below:

1. In the Add structures and elements screen, select Video and drag it to the desired location on the page.
2. Click on the inserted element to open the settings and customization menu.

The Video element can be used to embed videos hosted either on Hotmart Player or on external platforms such as YouTube, Vimeo, or Panda. When configuring a video, you can:

• Enter the URL of the video hosted on the selected platform.
• Define whether the video will autoplay or only play after the visitor clicks.
• Choose whether the player controls will be visible.
• Adjust the size, alignment, and responsiveness for different devices.

Important tips and best practices:

• Direct video upload is not supported. Always use external URLs.
• Avoid adding too many videos or heavy content on the same page.
• If you want to add a video from a platform that is not supported, you must add it via HTML.

❯ Send Form: 

The Send Form is used to capture data such as name, email, and phone number. It is recommended for landing pages, waiting lists, and sign-ups, with direct integration to Hotmart Send.

To add a Send Form to your page, follow the steps below:

1. In the Add structures and elements screen, select Send Form and drag it to the desired location on the page.
2. Click on Click here to configure it to set up your form.
3. Select the form that will receive the captured data. If a form does not yet exist, you can create one during the setup process.
4. Then, click on the form element to open the customization menu.
5. Customize the submit button text, the messages displayed after submission, and the form’s visual style, such as colors, typography, and spacing.
6. Changes are saved as a draft. To start capturing information, click Publish.

Important tips and best practices:

• Forms with fewer fields tend to have higher submission rates.
• You can use more than one form on the same page.
• The form will only start capturing data after the page is published.
• If you make any changes to the Form, it is important to update it on the page where it is inserted and publish again to apply the changes.

Important: if you want to add an external form, you must do so using HTML code. Also check in this section how to insert HTML elements on your page.

❯ Icon: adds visual symbols that help highlight information.

The Icon element allows you to add visual symbols to reinforce messages, highlight benefits, or organize information.

To add Icons, follow the steps below:

1. In the Add structures and elements screen, select Icon and drag it to the desired location on the page.
2. Click on the inserted icon to open the settings menu.
3. Choose the icon you want to use from the available library.
4. Adjust the size, color, and alignment of the icon according to the page layout.
5. Customize the spacing to maintain visual alignment with other elements.
6. Changes are saved as a draft. To apply them to the page, click Publish.

To create more complete informational blocks, you can combine the icon with text, such as titles or paragraphs. The most recommended way is to use a Box structure, which helps maintain alignment and visual organization. An example structure:

• Select the Box structure and inside it, add:
  • An Icon.
  • A Title or Paragraph right below or next to it.

This format is ideal for benefit lists, quick explanations, or feature presentations.

❯ Timer: displays a countdown on your page.

The Timer allows you to display a countdown to communicate deadlines, such as the end of offers or registrations.

To add the Timer to your page, follow the steps below:

1. In the Add structures and elements screen, select Timer and drag it to the desired location on the page.
2. Click on the inserted timer to open the settings menu.
3. In Timer type, choose how the deadline will be displayed:
   • Time on page load: the countdown starts when each visitor accesses the page. In this case, the displayed time may vary from person to person.
   • Specific date: the countdown is based on a date and time defined by you and will be the same for all visitors.
4. In Action when countdown ends, define what will happen when the time runs out:
   • Redirect the visitor to another page.
   • Display a custom message.
5. Adjust the Display format, choosing whether the timer will show days, hours, minutes, and seconds, as well as the labels that accompany the numbers.
6. Customize visual aspects such as colors, font, number size, spacing, borders, and device visibility.
7. Changes are saved as a draft. To apply them to the page, click Publish.

Important tips and best practices:

• If you choose the redirect option when the countdown ends, make sure the destination link has been entered correctly. Without the link, the redirect will not occur.
• When using Time on page load, keep in mind that repeated tests may show variations due to browser cache.

❯ FAQ: organizes answers to frequently asked questions.

The FAQ element allows you to create a question-and-answer section, displaying the content only when the visitor interacts.

To add the FAQ element, follow the steps below:

1. In the Add structures and elements screen, select FAQ and drag it to the desired location on the page.
2. Click on the inserted FAQ to open the settings menu.
3. Add the questions and answers you want to display.
4. Customize the text of the questions and answers according to the page content.
5. Adjust the visual style, such as colors, typography, spacing, and expand icons, if available.
6. Changes are saved as a draft. To apply them, click Publish.

❯ Pop-up: displays automatic or button-triggered windows.

The Pop-up is a Hotmart Pages feature that allows you to display overlay windows on the visitor’s screen after a specific action. It can be used to present notices, offers, important messages, or forms, helping direct attention and increase engagement with the page content.

When configuring a pop-up, you can choose how it will be displayed:

• Button-triggered pop-up: appears when the visitor clicks a specific button on the page. It is recommended for highlighting offers, extra content, sign-ups, downloads, or specific actions.
• Exit pop-up: is displayed when the system detects that the visitor is about to leave the page, such as when moving the cursor toward closing the browser. This type of pop-up is only displayed on desktop and can be used to try to retain the visitor with a final message or incentive.

To add the Pop-up element, follow the steps below:

1. In the Add structures and elements screen, select Pop-up and drag it to the desired location on the page.
2. During editing, it will be displayed below the first section.
3. After adding the element, choose one of the options:
   • Replace with ready-made template, to use an existing layout.
   • Add elements, to create a pop-up from scratch.
4. Click on the inserted pop-up to open the settings menu.
5. Define an internal name to make it easier to identify the pop-up.
6. In When to display, choose one of the options:
   • On button click.
   • On exiting the page.
7. Customize the pop-up content by adding elements such as text, buttons, images, or Hotmart Send forms.
8. Adjust style, colors, spacing, and other visual settings according to the page layout.
9. Changes are saved as a draft. To apply them, click Publish.

You can also edit, reuse, or delete a pop-up. See how below:

1. To edit or delete a pop-up, access the Page structure through the layers icon in the editor’s side menu.
2. Click the pencil icon to edit or the trash icon to delete.
3. You can add new pop-ups through this same path, reusing ready-made templates, previously saved pop-ups, or creating a blank pop-up.
4. If you want to reuse the pop-up on other pages, use the Save pop-up option available in the side menu.

Important tips and best practices:

• If the pop-up is displayed when clicking a button, make sure to correctly link the button to the action of opening the pop-up.
• The exit pop-up works only on desktop.

❯ HTML: allows you to insert external code for forms and content.

The HTML element allows you to embed external content on your Hotmart Pages page using code snippets. It is recommended when you need to add features that are not available in the editor’s native elements, such as external forms, specific players, maps, widgets, or other embeddable content.

Using the HTML element, you can embed content such as:

• External forms created in email marketing tools or Google Forms.
• Players and embedded content via <iframe>.
• Other code snippets provided by external tools, using tags such as <iframe>, <form>, <div>, <img>, <audio>, or <video>.

The code must always be provided by the external platform hosting the content.

To add external content via HTML, follow the steps below:

1. In the Add structures and elements screen, select HTML and drag it to the desired location on the page.
2. Click on the inserted element to open the settings panel.
3. Select the Edit HTML option.
4. Paste the HTML code snippet provided by the external platform into the indicated field.
5. Changes are saved as a draft. To apply them, click Publish.

Important precautions when using the HTML element:

• Use only HTML snippets, not full pages. Code that includes <html>, <head>, <body>, or <!DOCTYPE html> is not compatible with the editor.
• Scripts and tracking codes should not be inserted through the HTML element. These codes must be configured through the Scripts menu in the page settings. For more information, refer to this article.
• For forms or embedded content, set the width attribute to 100% to ensure proper display on mobile devices.
• Whenever possible, prioritize native Hotmart Pages elements. HTML should be used as a complement when the desired result cannot be achieved with standard options.

These elements can be freely combined within structures to create different layouts.

How do I customize structures and elements?

After adding structures and elements, you can adjust the appearance and behavior of each component directly from the editor’s side menu. The main customization options include:

• Positioning and alignment of elements within rows, columns, and boxes.
• Internal spacing, adjusting margins and padding.
• Background, with solid color, image, or gradient (in sections, rows, and columns).
• Text styling, such as font, size, color, alignment, and line spacing.
• Responsiveness, defining whether the component will be displayed on desktop, mobile, or both.

How does responsiveness work in Hotmart Pages?

Pages created in Hotmart Pages are responsive by default, which means they automatically adapt to different screen sizes, such as computers, mobile devices, and tablets.

Even with this automatic adaptation, the editor allows you to make specific adjustments for each device, helping improve the visitor experience on smaller screens. The editor works with two views:

• Desktop: this is the base version of the page and serves as the reference for the layout.
• Mobile: allows specific adjustments for smaller screens.

The tablet view adjusts automatically, following the most appropriate pattern based on screen size.

❯ Do the same settings apply to both desktop and mobile?

Some settings are always synchronized between versions and cannot be changed separately, such as text content, page structure, fonts, links, and images.

Other settings can be customized independently on desktop or mobile, such as font size, element size (height and width), internal spacing (padding), margins, and text alignment.

When an adjustment is made only for mobile, a mobile icon indicates that the setting is specific to that view.

You can define whether an element or section will be displayed on each device:

• Hide on desktop: the item appears only on mobile.
• Hide on mobile: the item appears only on desktop.

During editing, all elements remain visible. Visibility settings are only applied in the published version of the page. This feature is useful when an element works well on desktop but does not adapt properly to mobile.

❯ How do I adjust the page for desktop and mobile?

With the page already open in the Hotmart Pages editor:

1. Make sure you are in the Desktop view and organize the layout first in this version.
2. In the top bar, click the Mobile icon.
3. Adjust only what is necessary for smaller screens, such as font sizes, spacing, and alignment.
4. To control the display of an item by device, click on the element and access Visibility in the side menu.
5. By default, the item appears in both versions. If you prefer, select:
   • Hide on desktop (displays only on mobile), or
   • Hide on mobile (displays only on desktop).
6. Click Preview draft to check how the page appears on desktop and mobile.
7. Changes are saved as a draft. To apply them, click Publish.

Important: during editing, all elements remain visible to make organization easier. Visibility settings are only applied in the published version of the page.

Frequently asked questions

❯ How do I customize a section in Hotmart Pages?

To customize a section, click on it in the editor and use the side menu to adjust the available settings. You can:

• Pin the section (option available only for the first section of the page): keeps the section fixed at the top during scrolling, which is useful for menus, notices, or important calls to action.
• Set a display effect (delay):
  • By time: the section appears after a number of seconds.
  • By date: the section becomes visible from a defined date and time.
• Adjust internal spacing, controlling margins and padding between the content and the section edges.
• Customize the background style by choosing between:
  • Transparent
  • Solid color
  • Background image
  • Gradient, combining two color
• Control visibility by device, defining whether the section will be displayed on desktop, mobile, or both.

During editing, the section remains visible in the editor. Visibility settings are only applied in the published version of the page.

❯ Do I need to use a section to add elements to the page?

Yes. Every Hotmart Pages page needs sections, as they are the foundation where elements (such as text, images, and buttons) are inserted. Without a section, it is not possible to add other content to the page.

❯ Can I combine different structures on the same page?

Yes. Structures can be freely combined. For example, you can use sections with rows, columns, and boxes to create different layouts and better organize the page elements.

❯ Can I reuse sections or pop-ups on other pages?

Yes. Both sections and pop-ups can be saved for reuse and added to other pages, helping standardize layouts and save time during creation.

❯ Can I hide an element only on mobile or only on desktop?

Yes. You can control visibility by device, defining whether an element or section will be displayed on desktop, mobile, or both. This setting is only applied in the published version of the page.

❯ What happens if I don’t publish the page after making changes?

Changes are automatically saved as a draft, but they will only be visible to visitors after the page is published or updated.

❯ Can I preview the layout before publishing the page?

Yes. Use the View draft option to check how the page will be displayed on desktop and mobile before publishing.