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: abril 30, 2021

Requisitos

Todos los productos y planes

En el editor de páginas de arrastrar y soltar, los usuarios pueden reorganizar y aplicar estilos de fondo 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, plantillas de tema de HubSpot predeterminadas o 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. Estos módulos pueden organizarse en filas o columnas verticales. Las filas y las columnas se pueden agrupar en secciones de elementos.

Al agrupar estos elementos juntos, puedes aplicar un conjunto de estilos de fondo a una sección de una página. También puedes arrastrar y soltar filas completas, columnas o secciones para reorganizar el diseño de tu página.

  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. Columna: una pila vertical de múltiples módulos o filas. Puedes mover o reorganizar columnas en tu página y aplicar un color de fondo o estilo a una columna completa.
  3. Fila: una fila horizontal de módulos o columnas. Puedes mover o reorganizar filas en tu página y aplicar un color de fondo o un estilo a una fila completa.
  4. Sección: un grupo de múltiples filas o columnas. Puedes mover una sección completa o aplicar un color de fondo o un estilo a una sección completa.

overview-of-drag-and-drop

Editar contenido del módulo

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 de tu módulo en el editor de contenido o en el panel izquierdo. 
  • styles Módulo de estilo: administrar el estilo de este módulo en el editor de la barra lateral. La mayoría de los estilos de módulo se pueden administrar en la pestaña Estilo, pero algunas opciones de estilo específicas de tu tema pueden estar disponibles en la pestaña Opciones.
  • 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

Editar filas, columnas o secciones

Puedes editar estilos de una fila entera, columna o sección de elementos. Por ejemplo, puedes centrar tu contenido, aplicar una imagen de fondo o un espacio de edición en torno a elementos de tu página.

Para editar estilos para una fila, columna o sección:

  • En el editor de páginas, coloca el cursor sobre la fila, columna o sección, luego haz clic en el icono flecha y selecciona styles Estilo [fila/columna/sección].
  • En el editor de la barra lateral, haz clic en Alineación y espaciado para personalizar el relleno y el margen alrededor de la fila, la columna o la sección.
  • 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, 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, luego escribe un valor de transparencia. 
  • Para hacer una copia de un elemento existente, coloca el cursor sobre el elemento y haz clic en el símbolo de flecha, luego selecciona duplicate Copiar [fila/columna/sección].
  • Para eliminar un elemento de tu página, coloca el curso sobre el elemento y haz clic en el icono de flecha, luego selecciona delete Eliminar [fila/columna/sección].

remove-a-column

Agrega módulos a tu página

Para agregar un módulo a tu página, haz clic en el módulo en el editor de la barra lateral, luego arrastra el módulo a lo largo de tu página y suéltalo en la posición deseada. 

add%20a%20common%20module%20to%20a%20page

Ajustar el diseño de tu página

Puedes ajustar el ancho de los elementos en tu página haciendo clic y arrastrando el separador vertical entre columnas.

edit%20column%20width%20in%20page

Editar estilos de página

Para editar los colores, las fuentes o el espaciado en tu página, haz clic en la pestaña Diseño en la barra lateral del editor

design-tab-options