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: octubre 19, 2020

Requisitos

Todos los productos y planes

Con la edición arrastrar y soltar, puedes reorganizar fácilmente tu diseño y aplicar estilos de fondo personalizados a diferentes secciones de tu página. La edición con opción Arrastrar y soltar está disponible en páginas creadas con una plantilla de starter, una plantilla de tema de HubSpot predeterminada o una plantilla codificada con un área de arrastrar y soltar.

Este artículo cubre cómo editar el contenido y el diseño de tu página con características de arrastrar y soltar. Descubre cómo editar la configuración de tu página y publicar una página en tu sitio web.

Cómo funciona la edición con 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 estilos de fondo a un área completa de tu 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. Puedes editar el texto y las imágenes de tu página dentro de un módulo individual.
  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 para la acción deseada:

  • edit Editar: edita el contenido de la línea de contenido directamente en la página o en el panel izquierdo. 
  • styles Estilo: administra los estilos disponibles en este módulo dentro del panel Estilo a la izquierda. 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 dentro de la pestaña Opciones.
  • clonduplicate Copiar: hacer una copia de este módulo en tu página.
  • delete Eliminar: 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, la columna o la sección, luego haz clic en la flecha desplegable y selecciona styles Estilo [fila/columna/sección].
  • En el panel izquierdo, haz clic en Alineación y espaciado para personalizar el relleno y el margen alrededor de la fila, la columna o la sección.
  • Haz clic en Fondo para expandir las opciones de estilo para el fondo de esta sección:
    • Ninguno: selecciona este color para eliminar cualquier color o imagen de fondo.
    • Color: selecciona esta opción para establecer un color como color de fondo. Introduce un valor de color de fondo y un porcentaje de transparencia.
    • Imagen: selecciona esta opción para establecer una imagen como fondo. Si la plantilla contiene una imagen como opción predeterminada, haz clic en Reemplazar para cambiar la imagen. 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: selecciona un degradado para establecer dos colores que se desvanecen como fondo. Primero selecciona la dirección del gradiente. Luego ingresa un valor hexadecimal y establece la transparencia para cada color.
  • 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

A medida que editas tu página, las actualizaciones se guardan automáticamente. Para acceder a borradores guardados previamente de tu página no publicada, coloca el cursor sobre Autoguardado en la parte superior izquierda y haz clic en revisiones.

Agrega módulos a tu página

Puedes arrastrar y soltar un nuevo módulo para agregar otro elemento a tu página. Esto hace que sea fácil ajustar el diseño de una página para adaptarla a tu contenido.

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

Ajustar el diseño de tu página

A medida que agregues y edites módulos a tu disposición, 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.

design-tab-options