Ir al contenido principal

Cambiar los estilos de sección de tu sitio web

Ajusta el diseño, los colores, el medio de fondo, el texto, el espaciado y más para cada sección usando el editor de estilos.

Mark De Paola avatar
Escrito por Mark De Paola
Actualizado hoy

Los estilos de sección te dan control total sobre la apariencia de cada sección en tu sitio.Ya sea que estés diseñando una página de destino limpia o un bloque promocional audaz, puedes ajustar cada detalle, desde los colores y el diseño hasta las animaciones y los bordes, todo dentro del editor de secciones.

Para cambiar el estilo de una sección:

  1. Abre tu sitio en el Editor.

  2. Pase el cursor sobre la sección que desea editar.

  3. Haz clic en el icono de edición en la esquina superior derecha de la sección.

  4. En el panel que se abre a la derecha, haz clic en la pestaña Estilo (icono de cubo de pintura) en la parte superior.

  5. Utilice las opciones disponibles para ajustar el diseño y el estilo visual.Todos los cambios se aplican instantáneamente.

Consejo útil:

Haz clic en el icono de captura para mover el editor de secciones entre los lados izquierdo y derecho de tu pantalla.

Colores

  • Seleccionar de los colores del tema de la página – Aplica una de las combinaciones de colores predefinidas de tu sitio.

  • Usa fondos sólidos o degradados – Elige entre un color plano o un relleno degradado.

  • Sobrescribir con colores personalizados – Defina manualmente los colores de fondo y acento para la sección.

Imagen o video de fondo

  • Haga clic en Agregar medios para abrir el selector de medios.

  • Elija de la biblioteca de medios de Durable o suba una imagen (JPG, JPEG, PNG hasta 32MB). Las cargas de video no son compatibles.

  • Haz clic en Deja que la IA elija por ti para generar una imagen automáticamente.

  • Después de seleccionar los medios, aparecen controles adicionales:

    • Regenerar – Reemplazar la imagen generada por IA.

    • Cambiar – Seleccionar nuevos medios manualmente.

  • Refina la apariencia con:

    • Posición – Ajustar la colocación horizontal y vertical de la imagen.

    • Superposición – Controla cuán visible es la imagen o el video.

    • Desenfoque – Agrega un efecto de desenfoque suave.

Opciones de texto

  • Tamaño del encabezado – Elija entre Pequeño, Mediano, Grande o Extra Grande.

  • Tamaño del subtexto – Elija entre Pequeño, Mediano o Grande.

  • Alineación de texto – Alinea el contenido a la izquierda, al centro o a la derecha utilizando los íconos de alineación.

Diseño y Estilización Avanzada

  • Esquinas redondeadas – Elige Pequeño, Mediano, Grande, Ninguno, o que coincida con el tema de la página de tu sitio.

  • Animaciones – Controla cómo aparecen los elementos cuando se carga la sección:

    • Las opciones incluyen: Ninguno, Desvanecer, Acercar, Alejar, Deslizar hacia arriba, Deslizar hacia la izquierda, Deslizar hacia la derecha, o coincidir con el tema de la página.

  • Espaciado – Controlar el espacio alrededor de la sección:

    • Espaciado superior – Ninguno, Pequeño, Medio o Grande

    • Espaciado inferior – Ninguno, Pequeño, Mediano o Grande

  • Altura mínima – Establece la altura mínima de la sección:

    • Contenido – Ajusta la altura al contenido interno.

    • Pantalla – Llena la pantalla del visitante con la sección.

      • Si Screen está seleccionado, elige la alineación vertical: Top, Middle o Bottom.

Divisores y Bordes

  • Divisor – Añade un divisor visual entre esta sección y la siguiente. Cuando está habilitado, haz clic en el ejemplo para elegir un estilo.

  • Borde – Agrega un borde que coincida con la dirección del divisor:

    • Seleccione color, grosor y tipo (Sólido o Discontinuo).

Cuando termines de personalizar tu sección, haz clic en Listo en la esquina superior derecha del panel para guardar tus cambios.

Si necesitas ayuda para diseñar secciones destacadas o necesitas información sobre las mejores prácticas, nuestro equipo siempre estará encantado de ayudar.¡Solo comunícate!

¿Ha quedado contestada tu pregunta?