Última actualización: enero 19, 2023
Disponible con cualquiera de las siguientes suscripciones, a no ser que se indique lo contrario:
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.
- 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.
- Fila: una fila horizontal de módulos. Puedes aplicar el estilo a una fila completa o reorganizar su posición en una página.
- 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.
- 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.
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 de sitio 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 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 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 tres puntos junto a su nombre y luego selecciona Eliminar.
- Para ocultar un módulo, haz clic en las 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 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 de sitio 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.
- En el panel derecho, haz clic en la pestaña Diseños y selecciona un diseño para tu sección.
- 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.
- Coloca el cursor sobre la sección y haz clic Down y luego selecciona Guardar 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 de sitio 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.
- 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.
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 elicono 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.
- Para hacer una copia de un elemento existente, coloca el cursor sobre el elemento y haz clic en el símbolo clonar.
- Para eliminar un elemento de la página, coloca el cursor encima del elemento y haz clic en icono de eliminación.
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 de sitio 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.
- Para personalizar el contenido dentro de un módulo, coloca el cursor sobre el módulo y haz clic en el icono:
-
- Editar módulo: edita el contenido del módulo
- Clonar módulo: hace una copia de este módulo en tu página.
- Eliminar módulo: eliminar este módulo de tu página.
