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 21, 2022

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

Organiza tu contenido

En el editor de la barra lateral, puedes ver un resumen de las secciones, filas, columnas y módulos de tu contenido. Desde allí, puedes cambiarles el nombre, editarlos, clonarlos, eliminarlos u ocultarlos: 

  • 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 la barra lateral, haz clic en la pestaña Contenido. 
  • Puedes controlar qué elementos de página son visibles en el editor de la barra lateral: 
    • Para ver solo las secciones de tu página, haz clic en Contraer todo. Esto contraerá todas las filas, columnas y módulos para que solo las secciones sean visibles en el editor de la barra lateral. 
    • Para ver todo el contenido en tu página, haz clic en Expandir todo. Esto mostrará todas las secciones, filas, columnas y módulos en el editor de la barra lateral. 
    • Para ver un elemento de página o contenedor individual, haz clic en el signo + más junto a su nombre.
    • Para ocultar un elemento o contenedor, haz clic en el signo - menos que está junto a su nombre. 
  • También puedes editar, cambiar el nombre, clonar, eliminar y ocultar elementos de página: 
    • Para editar un elemento, haz clic en su nombre
    • Para cambiar el nombre de un elemento, haz clic en las elipses de tres puntos junto a su nombre y luego selecciona Cambiar nombre [elemento]. En el cuadro de diálogo, escribe un nombre para el elemento y haz clic en Guardar
    • Para clonar un elemento, haz clic en las elipses de tres puntos junto a su nombre y luego selecciona Clonar. Esto creará una copia exacta del elemento original adyacente a él. 
    • Para eliminar un elemento, haz clic en los puntos suspensivos situados a tres puntos junto a su nombre y luego selecciona Eliminar
    • Para ocultar un módulo, haz clic en las elipses de tres puntos junto a su nombre y luego selecciona Ocultar este módulo. Esto ocultará el módulo en la vista previa de la página, pero no en el editor de la barra lateral. Para mostrar un módulo oculto en la página, haz clic en las elipses de tres puntos junto a su nombre y luego selecciona Mostrar este módulo

Usa secciones

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

Nota: no se pueden guardar más de 50 secciones reutilizables del 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

Puedes guardar una sección para que sea reutilizable en otras páginas usando el mismo tema.

  • 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, haz clic en la pestaña Diseños y selecciona un diseño para tu sección

add-blank-layout-to-page

  • En el editor de contenido, arrastra un módulo sobre el diseño y colócalo en su posición. Repite para cada módulo de tu sección. 

diseño-onto-arrastrar y soltar

  • Coloca el cursor sobre la sección y haz clic en el icono DownCarat Down y luego selecciona Guardar sección

guardar-una-sección

Ten en cuenta: las secciones de página existentes y las creadas sin un diseño también pueden guardarse como secciones reutilizables.  


  • En el panel derecho, escribe un nombre y una descripción para tu sección y luego haz clic en Guardar

Agregar o eliminar 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, coloca el cursor sobre una sección y haz clic en Seleccionar. Las secciones guardadas desde el editor de arrastrar y soltar aparecerán en las secciones Guardadas, mientras que las creadas por los desarrolladores aparecerán en las secciones Tema.  
  • Añadir una sección guardada que contenga reglas inteligentes aplicará esas reglas a la sección recién añadida. Estas secciones se etiquetan como inteligentes. 
  • Para eliminar una sección, haz clic en el ícono  + más para agregar una sección, luego coloca el cursor sobre la sección y haz clic en el ícono  eliminar eliminar. En el cuadro de diálogo, haz clic en Eliminar

add-smart-section

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

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.