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 de destino.
- 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.
- 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.
- 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.
- 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.
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:
- Editar: edita el contenido de la línea de contenido directamente en la página o en el panel izquierdo. Para una experiencia de edición más envolvente, puedes
- 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.
- Copiar: hacer una copia de este módulo en tu página.
- Eliminar: eliminar este módulo de tu página.
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 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 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 Eliminar [fila/columna/sección].
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.
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.
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.- Si usas una plantilla de starter, puedes modificar las fuentes, los estilos y los colores aplicados a tu texto, formularios y botones en la pestaña Diseño en el panel izquierdo.
- Si estás usando una plantilla codificada creada por un desarrollador con una área de arrastrar y soltar, verás las opciones de estilo incluidas en tu plantilla por tu desarrollador.
- Si usas una plantilla de tema (solo CMS Hub), puedes acceder y editar tu configuración de tema.
