Ir a contenido principal
Nota: Este contenido se tradujo a través de un software y es posible que no haya sido revisado. La versión en inglés se considera, por tanto, la versión oficial y es posible que haya sido actualizada. Para acceder a la versión en inglés, haz clic aquí.
Landing Pages

Editar el contenido de la página en un espacio de arrastrar y soltar

Última actualización: septiembre 28, 2021

Requisitos

Todos los productos y planes

En el editor de arrastrar y soltar de páginas, los usuarios pueden reorganizar y aplicar estilos personalizados a diferentes secciones de una página. La edición de arrastrar y soltar está disponible en páginas creadas con plantillas de inicio, algunas plantillas de tema y plantillas codificadas con áreas de arrastrar y soltar

Comprender el editor de arrastrar y soltar

Las áreas de arrastrar y soltar se componen de módulos, que son bloques de contenido del sitio web. Los módulos pueden organizarse en filas horizontales o columnas verticales, que luego se pueden agrupar en secciones. 

Al crear filas, columnas y secciones, puedes reorganizar o aplicar estilo a varios módulos a la vez. Más información sobre cómo personalizar los estilos de contenido de arrastrar y soltar.  

  1. Módulo: un bloque individual de contenido de sitio web. Algunos módulos, como el módulo de texto enriquecido, pueden contener múltiples tipos de contenido. 
  2. Fila: una fila horizontal de módulos. Puedes aplicar el estilo a una fila completa o reorganizar su posición en una página. 
  3. Columna: una pila vertical de múltiples módulos. Puedes aplicar el estilo a una columna completa o reorganizar su posición en una página. 
  4. Sección: un grupo de múltiples filas o columnas que abarcan el ancho completo de la página. Puedes aplicar el estilo a una sección completa o reorganizar su posición en una página. 

edit-drag-and-drop-areas-in-page-editor

Utilice las secciones

En el editor de arrastrar y soltar, puede crear secciones de página reutilizables arrastrando módulos a un diseño de sección en blanco. Los desarrolladores también pueden crear estas secciones utilizando nuestra documentación para desarrolladores. Una vez creadas, las secciones pueden utilizarse en cualquier página que admita la edición de arrastrar y soltar. Las secciones guardadas que contienen reglas inteligentes utilizarán estas reglas cuando se añadan a una página. 

Tenga en cuenta que no se pueden guardar más de 25 secciones reutilizables desde el editor de arrastrar y soltar a la vez. Para guardar una nueva sección reutilizable, elimine una sección reutilizable existente

Crea una sección

  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • Coloca el cursor sobre una página y haz clic en Editar.
  • En el editor de contenido, coloca el cursor entre dos secciones y haz clic en el símbolo + símbolo más

add-a-page-section

  • En el panel derecho, haga clic en la pestaña Diseños y seleccione un diseño para su sección

add-blank-layout-to-page

  • En el editor de contenido, arrastre un módulo sobre el diseño y colóquelo en su posición. Repita la operación para cada módulo de su sección. 

arrastrar y soltar en el diseño

  • Pase el ratón por encima de la sección y haga clic en el icono de abajoCarat down, luego seleccione Guardar sección. 

guardar una sección

Tenga en cuenta que las secciones de página existentes y las creadas sin diseño también pueden guardarse como secciones reutilizables


  • En el panel de la derecha, introduzca un nombre y una descripción para su sección, y haga clic en Guardar

Añadir una sección

  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • Coloca el cursor sobre una página y haz clic en Editar.
  • En el editor de contenido, coloca el cursor entre dos secciones y haz clic en el símbolo + símbolo más

add-a-page-section

  • En el panel derecho, pase el ratón por encima de una sección y haga clic en Seleccionar. Las secciones guardadas desde el editor de arrastrar y soltar aparecerán en Secciones guardadas, mientras que las creadas por los desarrolladores aparecerán en Secciones temáticas.  
  • Al añadir una sección guardada que contenga reglas inteligentes se aplicarán esas reglas a la sección recién añadida. Estas secciones serán etiquetadas como Smart
  • Para eliminar una sección, haga clic en elicono + para añadir una sección, luego pase el ratón por encima de la sección y haga clic en el iconode eliminación.  En el cuadro de diálogo, haz clic en Eliminar

añadir-smart-sección

Editar filas, columnas o secciones

  • En el editor de páginas, coloca el cursor sobre la fila, columna o sección y luego haz clic en eledit icono editar
  • Para personalizar el relleno y el margen alrededor de la fila, la columna o la sección, en el editor de la barra lateral, haz clic en Alineación y espaciado.
  • Para editar el fondo de una sección, haz clic en Fondo en el editor de la barra lateral y selecciona una opción de estilo:  
    • Ninguno: eliminar cualquier color o imágenes de fondo.
    • Color: establece un solo color como color de fondo. Introduce un valor hexadecimal o haz clic en el selector de color y selecciona un color y luego escribe un valor de transparencia.
    • Imagen: establece una imagen como fondo. Para agregar una nueva imagen, haz clic en Cargar para agregar una imagen desde tu equipo o haz clic en Explorar imágenes para seleccionar una imagen de tus archivos
    • Gradiente: establece dos colores que se desvanecen y se mezclan como color de fondo. Haz clic en el menú desplegable Dirección y selecciona la dirección de gradiente. Para cada color, escribe un valor hexadecimal o haz clic en el selector de color y selecciona un color y luego escribe un valor de transparencia. 
edit-background-for-a-page-section
  • Para hacer una copia de un elemento existente, coloca el cursor sobre el elemento y haz clic en el duplicate ccsímbolo clonar.
  • Para eliminar un elemento de la página, coloca el cursor encima del elemento y haz clic en delete icono de eliminación

edit-column-icons

Agregar y editar módulos

  • Navega a tu contenido:

    • Páginas del sitio web: En tu cuenta de HubSpot, dirígete a Marketing > Sitio web > Páginas web.
    • Páginas de destino: En tu cuenta de HubSpot, ve a Marketing > Páginas de destino.
  • Coloca el cursor sobre una página y haz clic en Editar.
  • En el editor de contenido, haz clic en el módulo en el editor de la barra lateral y luego arrástralo a la posición en la página. 
  • Para ajustar el ancho de un módulo, haz clic en el separador vertical entre columnas y arrástralo a la posición.

adjust-column-size-in-drag-and-drop-editor

  • Para personalizar el contenido dentro de un módulo, coloca el cursor sobre el módulo y haz clic en el icono:
    • edit Editar módulo: edita el contenido del módulo
    • clonduplicate Clonar módulo: hace una copia de este módulo en tu página.
    • delete Eliminar módulo: eliminar este módulo de tu página.

edit-module-icons