¿Cómo agrego estructuras y elementos al crear una página en Hotmart Pages?

La Sección es la estructura principal de Hotmart Pages. Funciona como un bloque que organiza el contenido de la página en partes, facilitando la lectura, la navegación y la organización visual. Dentro de una sección, puedes agregar diferentes elementos, como textos, imágenes, videos, botones, formularios, además de otras estructuras internas, como filas, columnas y cajas.

La sección es ideal para bloques de contenido fijos, como:

• Encabezados y banners
• Presentaciones
• Áreas de información
• Pies de página

Para agregar una Sección, sigue estos pasos:

1. En la pantalla de Añadir estructuras y elementos, selecciona Sección y arrástrala al lugar deseado de la página.
2. Si lo prefieres, haz clic en Reemplazar por plantilla prediseñada y elige un diseño entre las categorías disponibles.
3. Para personalizar libremente, arrastra los elementos de forma individual dentro de la sección.
4. Los cambios se guardan automáticamente como borrador. Haz clic en Publicar para poner la página en línea o actualizar la versión publicada.

Una vez creada, la sección puede:

• Reordenarse o renombrarse haciendo clic en el menú lateral en el ícono de Estructura de la página.
• Duplicarse, eliminarse o guardarse para reutilizar en otras páginas.
• Configurarse con retraso de visualización, por tiempo o por fecha.
• Personalizarse con fondo, espaciados internos y visibilidad por dispositivo.

Importante: La opción Fijar sección está disponible solo para la primera sección de la página y permite mantenerla visible en la parte superior durante el desplazamiento.

La Línea y la Columna son estructuras que se usan para organizar los elementos dentro de una sección de forma alineada y ordenada, pero cada una actúa en un sentido diferente.

La Línea organiza los contenidos en vertical, colocando los elementos uno debajo del otro dentro de la sección. Se usa como base para apilar contenidos y estructurar el flujo de la página.La Columna, por su parte, divide el espacio de la sección en horizontal, lo que permite posicionar contenidos uno al lado del otro, como textos e imágenes, botones o bloques informativos.

Estas estructuras son especialmente útiles cuando necesitas crear diseños más organizados, como imágenes y textos lado a lado, múltiples botones en una misma área o bloques de contenido distribuidos en desktop.

Para agregar una Línea o Columna, sigue estos pasos:

1. En la pantalla de Añadir estructuras y elementos, selecciona Línea o Columna y arrástrala al lugar deseado de la página.
2. Las filas y columnas siempre deben estar dentro de una sección.
3. Dentro de la fila o columna, puedes agregar elementos directamente, según la estructura deseada.
4. Los cambios se guardan automáticamente como borrador. Haz clic en Publicar para poner la página en línea o actualizar la versión publicada.

El Conjunto es una estructura que se utiliza para agrupar elementos que necesitan mantener la misma alineación o comportamiento visual. Ayuda a organizar contenidos relacionados y facilita los ajustes de espaciado y estilo en conjunto.

Para agregar un Conjunto, sigue los pasos:

1. En la pantalla de Agregar estructuras y elementos, selecciona Conjunto y arrástralo al lugar deseado de la página.
2. Haz clic en la caja que acabas de agregar para personalizarla libremente.
3. Si lo deseas, arrastra los elementos de forma individual dentro de la caja.
4. Los cambios se guardan automáticamente como borrador. Haz clic en Publicar para poner la página en línea o actualizar la versión publicada.

Puedes agregar íconos dentro de una caja para hacer tu página más personalizada. Consulta cómo hacerlo en la siguiente sección.

El Carrusel es un tipo especial de sección que muestra contenidos en diapositivas rotativas, lo que permite presentar textos, imágenes y botones de forma secuencial. Es ideal cuando deseas mostrar múltiples informaciones en el mismo espacio de la página, como destacados, beneficios, testimonios o llamadas importantes.

A diferencia de las secciones comunes, el carrusel no tiene configuración de retraso de visualización. Se muestra tan pronto como se carga la página.

Para agregar un Carrusel, sigue los pasos:

1. En la pantalla de Agregar estructuras y elementos, selecciona Carrusel y arrástralo al lugar deseado de la página.
2. Haz clic en el carrusel que acabas de agregar para configurarlo:
   • Diapositivas: agregar, duplicar, renombrar, reordenar o eliminar.
   • Comportamiento: activar o desactivar la rotación automática y definir el tiempo de transición.
   • Navegación: mostrar u ocultar flechas e indicadores de diapositivas.
3. Personaliza tu carrusel con espaciado interno, estilo de fondo y visibilidad.
4. Si lo deseas, arrastra elementos de forma individual dentro del carrusel.
5. Los cambios se guardan automáticamente como borrador. Haz clic en Publicar para poner la página en línea o actualizar la versión publicada.

Los elementos Título y Párrafo se utilizan para agregar textos a tu página en Hotmart Pages. Ayudan a estructurar la información, crear jerarquía visual y guiar la lectura del visitante a lo largo del contenido.

Mientras que el Título es ideal para destacar secciones, llamados y puntos importantes, el Párrafo se utiliza para textos explicativos, descripciones e información complementaria.

Para agregar Títulos y Párrafos, sigue los pasos a continuación:

1. En la pantalla de Agregar estructuras y elementos, selecciona Título o Párrafo y arrástralo al lugar deseado de la página.
2. Haz clic en el elemento insertado para editar el contenido.
3. Personaliza el estilo del texto, como tamaño y grosor de la fuente, color y alineación.
4. Los cambios se guardan como borrador. Para aplicarlos, haz clic en Publicar.

Consejos y recomendaciones importantes:

• Mantén una jerarquía clara: usa títulos más grandes para secciones principales y más pequeños para subtítulos.
• Evita textos muy largos en un solo párrafo. Es mejor dividir el contenido en bloques cortos.

Usa el Botón (también llamado CTA) para dirigir al visitante a una acción específica, como acceder a otra página, unirse a un grupo de WhatsApp, descargar un material o ir al checkout.

Para agregar el elemento Botón, sigue los pasos a continuación:

1. En la pantalla de Agregar estructuras y elementos, selecciona Botón y arrástralo al lugar deseado de la página.
2. Haz clic en el botón para ingresar el texto y abrir el menú de personalización.
3. En Acción, elige qué sucederá al hacer clic en el botón:
   • Enlace externo: dirige a una URL (otra página de Hotmart Pages o un sitio externo).
   • Enlace de pago de Hotmart: vincula una oferta de tu producto.
   • Anclar sección: lleva al visitante a una sección específica de la misma página.
   • Abrir pop-up: muestra una ventana emergente configurada en la página.
4. En Efecto, define cuándo se mostrará el botón:
   • Deshabilitado: el botón aparece inmediatamente.
   • Por fecha: muestra el botón en una fecha y hora específicas.
   • Por tiempo: muestra el botón después de un tiempo de espera (en segundos o minutos).
5. En Animación, selecciona un efecto visual para destacar el botón (como Vibrar, Centellear, Sacudir, Gelatina, Oscilar, Rebotar, Pulsar o Parpadear). Luego, ajusta:
   • Variación de la animación.
   • Repeticiones.
   • Duración del tiempo.
6. Personaliza el estilo del botón, como color, tamaño, bordes y espaciados.
7. Los cambios se guardan como borrador. Para aplicarlos en la página, haz clic en Publicar.

Consejos y recomendaciones importantes:

• Puedes agregar más de un botón en la misma página, configurando cada uno de forma individual.
• Para disponibilizar archivos, hospeda el material en un servicio externo y utiliza la acción Enlace externo.

El elemento Imagen permite agregar contenido visual estático a tu página en Hotmart Pages, mientras que los GIF permiten mostrar contenido visual dinámico. Ambos siguen el mismo flujo de adición en el editor y pueden usarse de forma combinada a lo largo de la página, según el objetivo del contenido.

Para agregar Imágenes o GIF, sigue los pasos a continuación:

1. En la pantalla de Agregar estructuras y elementos, selecciona Imagen y arrástrala al lugar deseado de la página.
2. Haz clic en el elemento insertado para abrir el menú de configuración y personalización.

A continuación, ten en cuenta los siguientes puntos:

• Imagen: el elemento Imagen es ideal para mostrar banners, ilustraciones, fotos, mockups o cualquier otro contenido visual estático. Al configurar una imagen, puedes:
  • Seleccionar la imagen desde tu computadora o desde una URL.
  • Ajustar el tamaño, la alineación y el espaciado dentro de la estructura.
  • Definir bordes, esquinas redondeadas y sombras, según el estilo de la página.
  • Agregar un enlace a la imagen, dirigiendo al visitante a otra página, checkout o sitio externo.
  • Configurar la visibilidad de la imagen por dispositivo, eligiendo si aparece en desktop, mobile o en ambos.
• GIF: los GIF permiten mostrar animaciones cortas en la página y pueden usarse para destacar información, ilustrar acciones o hacer el contenido más dinámico.
  • Para insertar GIF, es necesario alojarlos en un servicio como GIPHY y usar el enlace generado.
  • En Hotmart Pages, los GIF se agregan mediante un enlace externo, utilizando el mismo elemento de Imagen.

Consejos y recomendaciones importantes para garantizar una buena experiencia del visitante:

• Prefiere imágenes optimizadas, entre 100 y 300 KB, con un límite de 1 MB.
• Evita el uso excesivo de imágenes muy grandes, especialmente en mobile.
• Para evitar recortes o distorsiones en diferentes dispositivos, usa los siguientes tamaños como referencia:
  • Favicon: 32 × 32 px
  • Imagen de compartición (Open Graph): 1200 × 630 px
  • Fondo de sección en pantalla completa: aproximadamente 1920 × 1080 px
  • Proporciones recomendadas: 16:9, 4:3 y 1:1

El elemento de Video permite mostrar contenido visual dinámico en tu página, como clases, testimonios, demostraciones o animaciones cortas.

Para agregar Videos, sigue los pasos a continuación:

1. En la pantalla de Añadir estructuras y elementos, selecciona Video y arrástralo al lugar deseado de la página.
2. Haz clic en el elemento insertado para abrir el menú de configuración y personalización.

El elemento Video puede usarse para insertar videos alojados tanto en Hotmart Player como en plataformas externas, como YouTube, Vimeo o Panda. Al configurar un video, puedes:

• Ingresar la URL del video alojado en la plataforma elegida.
• Definir si el video se reproducirá automáticamente o solo después de que el visitante haga clic.
• Elegir si los controles del reproductor estarán visibles.
• Ajustar el tamaño, la alineación y la adaptabilidad para diferentes dispositivos.

Consejos y recomendaciones importantes:

• La carga directa de videos no es compatible. Utiliza siempre URLs externas.
• Evita el exceso de videos o contenido pesado en la misma página.
• Si deseas agregar un video de una plataforma que no sea compatible, deberás hacerlo mediante HTML.

El Formulario de Send se utiliza para capturar datos como nombre, correo electrónico y teléfono. Es ideal para páginas de captura, listas de espera e inscripciones, con integración directa con Hotmart Send.

Para agregar un Formulario de Send en tu página, sigue los pasos a continuación:

1. En la pantalla de Agregar estructuras y elementos, selecciona Formulario de Send y arrástralo al lugar deseado de la página.
2. Haz clic en Haz clic aquí para configurarlo para configurar tu formulario.
3. Selecciona el formulario que recibirá los datos capturados. Si aún no existe un formulario, puedes crearlo durante la configuración.
4. Luego, haz clic en el elemento del formulario para abrir el menú de personalización.
5. Personaliza el texto del botón de envío, los mensajes que se muestran después del envío y el estilo visual del formulario, como colores, tipografía y espaciados.
6. Los cambios se guardan como borrador. Para comenzar a recopilar información, haz clic en Publicar.

Consejos y recomendaciones importantes:

• Los formularios con menos campos suelen tener mejores tasas de envío.
• Es posible usar más de un formulario por página.
• El formulario solo comienza a recopilar datos después de que la página se publica.
• Si realizas algún cambio en el Formulario, es importante actualizarlo en la página donde está insertado y volver a publicar para aplicar los cambios.

Importante: si deseas agregar un formulario externo, deberás hacerlo mediante código HTML. Consulta también en esta sección cómo insertar elementos HTML en tu página.

El elemento Ícono permite agregar símbolos visuales para reforzar mensajes, destacar beneficios u organizar información.

Para agregar Íconos, sigue los pasos a continuación:

1. En la pantalla de Agregar estructuras y elementos, selecciona Ícono y arrástralo al lugar deseado de la página.
2. Haz clic en el ícono insertado para abrir el menú de configuración.
3. Elige el ícono que deseas usar en la biblioteca disponible.
4. Ajusta el tamaño, el color y la alineación del ícono según el diseño de la página.
5. Personaliza el espaciado para mantener la alineación visual con los demás elementos.
6. Los cambios se guardan como borrador. Para aplicarlos en la página, haz clic en Publicar.

Para crear bloques informativos más completos, puedes combinar el ícono con textos, como títulos o párrafos. La forma más recomendada es usar una estructura de Caja, que ayuda a mantener la alineación y la organización visual. Un ejemplo de estructura:

• Selecciona la estructura de Caja y, dentro de ella, agrega:
  • Un Ícono.
  • Un Título o Párrafo justo debajo o al lado.

Este formato es ideal para listas de beneficios, explicaciones rápidas o presentación de funcionalidades.

El Cronómetro permite mostrar una cuenta regresiva para comunicar plazos, como el cierre de ofertas o inscripciones.

Para agregar el Cronómetro en tu página, sigue los pasos a continuación:

1. En la pantalla de Añadir estructuras y elementos, selecciona Cronómetro y arrástralo al lugar deseado de la página.
2. Haz clic en el Cronómetro insertado para abrir el menú de configuración.
3. En Tipo de conteo, elige cómo se mostrará el plazo:
4. Plazo al entrar en la página: la cuenta comienza en el momento en que cada visitante accede a la página. En este caso, el tiempo mostrado puede variar de una persona a otra.
5. Plazo por fecha específica: la cuenta se basa en una fecha y hora definidas por ti y será la misma para todos los visitantes.
6. En Acción al finalizar la cuenta, define qué sucederá cuando el tiempo termine:
7. Redirigir al visitante a otra página.
8. Mostrar un mensaje personalizado.
9. Ajusta el Formato de visualización, eligiendo si el Cronómetro mostrará días, horas, minutos y segundos, además de las etiquetas que acompañan los números.
10. Personaliza los aspectos visuales, como colores, tipografía, tamaño de los números, espaciados, bordes y visibilidad por dispositivo.
11. Los cambios se guardan como borrador. Para aplicarlos en la página, haz clic en Publicar.

Consejos y recomendaciones importantes:

• Si eliges la opción de redireccionamiento al final de la cuenta, verifica que el enlace de destino se haya ingresado correctamente. Sin el enlace, el redireccionamiento no se realizará.
• Al usar Plazo al entrar en la página, ten en cuenta que pruebas repetidas pueden presentar variaciones debido al caché del navegador.

El elemento FAQ permite crear una sección de preguntas y respuestas, mostrando el contenido solo cuando el visitante interactúa.

Para agregar el elemento FAQ, sigue los pasos a continuación:

1. En la pantalla de Añadir estructuras y elementos, selecciona FAQ y arrástralo al lugar deseado de la página.
2. Haz clic en la FAQ insertada para abrir el menú de configuración.
3. Agrega las preguntas y respuestas que deseas mostrar.
4. Personaliza el texto de las preguntas y respuestas según el contenido de la página.
5. Ajusta el estilo visual, como colores, tipografía, espaciado e íconos de apertura, si están disponibles.
6. Los cambios se guardan como borrador. Para aplicarlos, haz clic en Publicar.

El Pop-up es un recurso de Hotmart Pages que permite mostrar ventanas superpuestas en la pantalla del visitante después de una acción específica. Puede usarse para presentar avisos, ofertas, mensajes importantes o formularios, ayudando a dirigir la atención y aumentar el engagement con el contenido de la página.

Al configurar un pop-up, puedes elegir cómo se mostrará:

• Pop-up activado por botón: aparece cuando el visitante hace clic en un botón específico de la página. Es ideal para destacar ofertas, contenidos adicionales, inscripciones, descargas o acciones puntuales.
• Pop-up de salida: se muestra cuando el sistema detecta que el visitante está a punto de salir de la página, por ejemplo, al mover el cursor hacia el cierre del navegador. Este tipo de pop-up solo se muestra en la versión desktop y puede usarse para intentar retener al visitante con un último mensaje o incentivo.

Para agregar el elemento Pop-up, sigue los pasos a continuación:

1. En la pantalla de Agregar estructuras y elementos, selecciona Pop-up y arrástralo al lugar deseado de la página.
2. Durante la edición, se mostrará debajo de la primera sección.
3. Después de agregar el elemento, elige una de las opciones:
   • Reemplazar por plantilla prediseñada, para usar un diseño existente.
   • Agregar elementos, para crear un pop-up desde cero.
4. Haz clic en el pop-up insertado para abrir el menú de configuración.
5. Define un nombre interno para facilitar la identificación del pop-up.
6. En Cuándo mostrar, elige una de las opciones:
   • Al hacer clic en un botón.
   • Al intentar salir de la página.
7. Personaliza el contenido del pop-up agregando elementos como textos, botones, imágenes o formularios de Hotmart Send.
8. Ajusta el estilo, colores, espaciados y demás configuraciones visuales según el diseño de la página.
9. Los cambios se guardan como borrador. Para aplicarlos, haz clic en Publicar.

También puedes editar, reutilizar o eliminar un pop-up. Mira a continuación cómo hacerlo:

1. Para editar o eliminar un pop-up, accede a la Estructura de la página desde el ícono de capas en el menú lateral del editor.
2. Haz clic en el ícono de lápiz para editar o en la papelera para eliminar.
3. Es posible agregar nuevos pop-ups desde este mismo lugar, reutilizando plantillas prediseñadas, pop-ups guardados anteriormente o creando un pop-up en blanco.
4. Si deseas reutilizar el pop-up en otras páginas, utiliza la opción Guardar pop-up disponible en el menú lateral.

Consejos y recomendaciones importantes:

• Si el pop-up se muestra al hacer clic en un botón, recuerda vincular correctamente el botón con la acción de abrir el pop-up.
• El pop-up de salida funciona solo en desktop.

El elemento HTML permite incorporar contenidos externos en tu página de Hotmart Pages mediante fragmentos de código. Es ideal cuando necesitas agregar recursos que no están disponibles en los elementos nativos del editor, como formularios externos, reproductores específicos, mapas, widgets u otros contenidos incrustados.

A través del elemento HTML, puedes incorporar contenidos como:

• Formularios externos, creados en herramientas de email marketing o en Google Forms.
• Reproductores y contenidos incrustados mediante <iframe>.
• Otros fragmentos de código proporcionados por herramientas externas, utilizando etiquetas como <iframe>, <form>, <div>, <img>, <audio> o <video>.

El código siempre debe ser proporcionado por la plataforma externa que aloja el contenido.

Para agregar contenido externo mediante HTML, sigue los pasos a continuación:

1. En la pantalla de Agregar estructuras y elementos, selecciona HTML y arrástralo al lugar deseado de la página.
2. Haz clic en el elemento insertado para abrir el panel de configuración.
3. Selecciona la opción Editar HTML.
4. Pega en el campo indicado el fragmento de código HTML proporcionado por la plataforma externa.
5. Los cambios se guardan como borrador. Para aplicarlos, haz clic en Publicar.

Cuidados importantes al usar el elemento HTML:

• Utiliza solo fragmentos de HTML, no páginas completas. Los códigos que contengan <html>, <head>, <body> o <!DOCTYPE html> no son compatibles con el editor.
• Los scripts y códigos de seguimiento no deben insertarse mediante el elemento HTML. Estos códigos deben configurarse desde el menú de Scripts en la configuración de la página. Para más información, consulta este artículo
• Para formularios o contenidos incrustados, ajusta el atributo width a 100%, garantizando una buena visualización en dispositivos móviles.
• Siempre que sea posible, prioriza los elementos nativos de Hotmart Pages. El HTML debe usarse como complemento, cuando el resultado deseado no pueda lograrse con las opciones estándar.

Algunas configuraciones siempre están sincronizadas entre las versiones y no pueden modificarse por separado, como el contenido de los textos, la estructura de la página, las tipografías, los enlaces y las imágenes.

Otras configuraciones pueden personalizarse de forma independiente en computadora o en celular, como el tamaño de la fuente, el tamaño de los elementos (altura y ancho), los espaciados internos (padding), los márgenes y la alineación de los textos.

Cuando un ajuste se realiza solo para el celular, un ícono de mobile indica que esa configuración es específica de esa visualización.

Puedes definir si un elemento o sección se mostrará en cada dispositivo:

• Ocultar en computadora: el elemento aparece solo en el celular.
• Ocultar en celular: el elemento aparece solo en desktop.

Durante la edición, todos los elementos permanecen visibles. La visibilidad configurada solo se aplica en la versión publicada de la página. Este recurso es útil cuando un elemento funciona bien en desktop, pero no se adapta correctamente al mobile.

Con la página ya abierta en el editor de páginas de Hotmart Pages:

1. Verifica que estás en la vista de Computadora y organiza el diseño primero en esta versión.
2. En la barra superior, haz clic en el ícono de Celular.
3. Ajusta solo lo necesario para pantallas más pequeñas, como tamaño de fuentes, espaciados y alineaciones.
4. Para controlar la visualización de un elemento por dispositivo, haz clic en el elemento y accede a Visibilidad en el menú lateral.
5. Por defecto, el elemento aparece en ambas versiones. Si lo deseas, selecciona:
   • Ocultar en computadora (se muestra solo en el celular), o
   • Ocultar en celular (se muestra solo en la computadora).
6. Haz clic en Visualizar borrador para ver cómo se muestra la página en computadora y en celular.
7. Los cambios se guardan como borrador. Para aplicarlos, haz clic en Publicar.

Importante: durante la edición, todos los elementos permanecen visibles para facilitar la organización. Las configuraciones de visibilidad solo se aplican en la versión publicada de la página.

Para personalizar una sección, haz clic sobre ella en el editor y utiliza el menú lateral para ajustar las configuraciones disponibles. Es posible:

• Fijar la sección (opción disponible solo para la primera sección de la página): mantiene la sección fija en la parte superior durante el desplazamiento, siendo útil para menús, avisos o llamados importantes.

• Definir un efecto de visualización (delay):

  • Por tiempo: la sección aparece después de una cantidad de segundos.

  • Por fecha: la sección se muestra a partir de una fecha y hora definidas.

• Ajustar el espaciado interno, controlando márgenes y relleno entre el contenido y los bordes de la sección.

• Personalizar el estilo de fondo, eligiendo entre:

  • Transparente

  • Color sólido

  • Imagen de fondo

  • Degradado, combinando dos colores

• Controlar la visibilidad por dispositivo, definiendo si la sección se mostrará en desktop, en mobile o en ambos.

Durante la edición, la sección permanece visible en el editor. Las configuraciones de visibilidad se aplican solo en la versión publicada de la página.

Sí. Toda página de Hotmart Pages necesita secciones, ya que son la base donde se insertan los elementos (como textos, imágenes y botones). Sin una sección, no es posible agregar otros contenidos a la página.

Sí. Las estructuras pueden combinarse libremente. Por ejemplo, es posible usar secciones con filas, columnas y cajas para crear diferentes diseños y organizar mejor los elementos de la página.

Sí. Tanto las secciones como los pop-ups pueden guardarse para reutilización y agregarse en otras páginas, lo que facilita la estandarización y ahorra tiempo en la creación.

Sí. Es posible controlar la visibilidad por dispositivo, definiendo si un elemento o sección se mostrará en desktop, en mobile o en ambos. Esta configuración solo se aplica en la versión publicada de la página.

Los cambios se guardan automáticamente como borrador, pero solo serán visibles para los visitantes después de que la página se publique o actualice.

Sí. Utiliza la opción de vista previa para comprobar cómo se mostrará la página en desktop y en celular antes de publicarla.