Configuración de Fondo y Color
La configuración de fondo es una herramienta de diseño esencial que le permite controlar el aspecto y la apariencia de su sitio web. Le permite definir el tono visual de sus páginas aplicando diversos estilos, como colores sólidos, degradados, imágenes o videos.
Al establecer un color de fondo sólido, un degradado o una imagen, puede crear diseños visualmente atractivos que refuercen su marca y generen mayor interés en los visitantes.
La configuración de fondo le permite definir el aspecto general de su página. Con GemPages, puede:
- Aplicar colores sólidos para un estilo limpio y minimalista.
- Usar gradients para crear transiciones suaves y profundidad visual.
- Agregar las imágenes or los videos para hacer su diseño más dinámico.
Establecer color de fondo
En GemPages v7, es sencillo aplicar un color sólido o un degradado al fondo de su página o de una sección específica.
Establecer un Color de Fondo Sólido
Puede utilizar un color de fondo sólido para mantener su diseño limpio y enfocado. Esta es la opción más simple para dar a las secciones un aspecto uniforme y garantizar la legibilidad.
Paso 1: Seleccionar el Elemento
- Haga clic en la sección, fila o columna donde desea aplicar un color de fondo.
- Abra el panel de Configuración en la barra lateral izquierda.
Paso 2: Encontrar la Configuración de Fondo
- En el panel de configuración, localice la sección Fondo .
- Seleccione Color y elija Color sólido como el tipo de fondo.
Paso 3: Elegir un Color
Puede establecer el color de fondo sólido mediante las siguientes opciones:
- Haga clic en el selector de color para elegir un color manualmente.
- Ingrese un código hexadecimal específico (por ejemplo, #FCD6D6).
- Seleccione un color de los swatches de color.
- Elija entre las listas de Colores recientes or Colores sugeridos para usted.
Establecer un Fondo con Degradado
Un fondo con degradado le permite combinar dos o más colores para lograr un efecto moderno y dinámico. Es especialmente útil para destacar secciones clave o crear transiciones suaves.
Paso 1: Habilitar el Fondo con Degradado:
En la sección Configuraciones de Fondoelija Color y seleccione Gradient como el tipo de fondo.
Paso 3: Personalizar el Gradient:
- Elegir colores: Seleccione dos o más colores para el Gradient.
- Establecer la Dirección del Gradient: Ajuste el ángulo del degradado (por ejemplo, vertical, diagonal o radial).
- Ajustar la opacidad: Modifique los niveles de transparencia de los colores del degradado, si es necesario.
Establecer una Imagen de Fondo
Agregar una imagen de fondo puede mejorar el atractivo visual de su página incorporando texturas, patrones o elementos visuales temáticos.
Paso 1: Habilitar la Imagen de Fondo
En la pestaña Fondo , elija Imagen como el tipo de fondo.
Paso 2: Configurar la imagen de fondo
Pase el cursor sobre la imagen actual y haga clic en Subir imagen para cargar una nueva imagen.
También puede elegir desde su biblioteca de medios (archivos de Shopify) o pegar la URL de la imagen en el campo correspondiente.
Paso 3: Ajustar la Configuración de la Imagen
- Escala: Ajuste el tamaño de la imagen para que se adapte a su diseño.
- Cargo: Elija la alineación de la imagen, como centro, arriba a la izquierda o arriba a la derecha, para controlar cómo se muestra la imagen dentro del área de fondo.
- Repetición: Defina si la imagen debe repetirse en mosaico por todo el fondo o mantenerse como una sola instancia.
- Fijación: Configure si la imagen de fondo se desplaza con la página o permanece fija para crear un efecto parallax.
- Optimizar LCP: Utilice imágenes comprimidas para mantener una velocidad de carga rápida.
Combinar el Fondo de Color e Imagen
Puede mejorar la estética general de su diseño combinando un color de fondo con una imagen.
El color de fondo aparecerá debajo de la imagen, lo cual resulta eficaz cuando se utiliza una imagen con fondo transparente.
Paso 1: Agregar Imagen de Fondo
- En la pestaña Fondo , seleccione la opción Imagen .
- Suba o seleccione una imagen que tenga fondo transparente.
Paso 2: Agregar Color de Fondo
En la misma sección Fondo , haga clic en la opción Color . Elija el color que desea mostrar detrás de la imagen.
Al combinar un color de fondo adecuado con la imagen, puede crear un diseño armonioso y visualmente atractivo que mejore el tono general de su página.
Establecer un Vídeo de Fondo
Los videos de fondo son una excelente manera de crear elementos visuales dinámicos y atractivos para su sitio web.
Paso 1: Habilitar el Video de Fondo
En la sección Fondo, haga clic en el botón "Agregar…" junto al campo Vídeo para abrir el panel de configuración del video de fondo.
Paso 3: Agregar un video como fondo
En el campo Fuente, seleccione la fuente para adjuntar su video. Tiene dos opciones:
- YouTube: Seleccione un video de YouTube para reproducirlo como video de fondo.
- Alojamiento de videos: Elija un video cargado desde los archivos de Shopify.
Pegue la URL del vídeo para incrustarlo y convertirlo en el fondo.
Puede cambiar la opción Repetir video a Sí para habilitar la función de reproducción en bucle.
Más Opciones de Personalización
Para videos de fondo avanzados con mayor control sobre superposiciones, texto y botones de llamada a la acción, considere utilizar uno de los siguientes elementos:
- Consulte este artículo para personalizar su video de fondo usando un Banner de Hero.
- Si prefiere el elemento Banner de video , obtenga más información su documentación.
gracias por tus comentarios