Configuración de fondo y color
Los ajustes de fondo son una herramienta de diseño esencial que le permite controlar la apariencia de su sitio web. Le permiten definir el tono visual de sus páginas aplicando diversos estilos, como colores sólidos, degradados, imágenes o vídeos.
Al establecer un color de fondo sólido, un degradado o una imagen, puede crear diseños visualmente atractivos que mejoren su marca y atraigan a los visitantes.
La configuración del fondo te permite definir la apariencia general de tu página. Con GemPages, puedes:
- Aplicar Colores sólidos para un estilo limpio y minimalista.
- Usa gradientes para crear transiciones suaves y profundidad.
- Agregar la extensión de imágenes or videos para hacer tu diseño más dinámico.
Establecer color de fondo
En GemPages v7, es fácil aplicar un color sólido o degradado al fondo de su página o una sección específica.
Establecer un color de fondo
Puedes usar un color de fondo sólido para mantener tu diseño limpio y definido. Esta es la opción más sencilla para dar a las secciones un aspecto uniforme y garantizar la legibilidad.
Paso 1: seleccione el elemento
- Haga clic en la sección, fila o columna donde desea aplicar un color de fondo.
- Abra la Configuración en la barra lateral izquierda.
Paso 2: Encuentra la configuración de fondo
- En el panel de configuración, localice la sección Fondo .
- Seleccione Color y elige Color sólido como el tipo de fondo.
Paso 3: elige un color
Puede configurar el fondo de color sólido desde estas opciones:
- Haga clic en el selector de color para seleccionar un color manualmente
- Introduzca un código hexadecimal específico (por ejemplo, #FCD6D6)
- Seleccione un color de las muestras de color.
- Elige entre Colores recientes or Colores sugeridos listas si haces la campaña con varios autores.
Establecer un degradado de fondo
Un fondo degradado permite combinar dos o más colores para lograr un efecto moderno y dinámico. Es especialmente útil para resaltar secciones clave o crear transiciones suaves.
Paso 1: Habilitar el fondo degradado:
En la sección Configuraciones de Fondo, escoger Color y seleccione Gradiente como el tipo de fondo.
Paso 3: Personaliza el degradado:
- Elegir colores: seleccione dos o más colores para el degradado.
- Establecer la dirección del degradado: ajuste el ángulo del degradado (por ejemplo, vertical, diagonal o radial).
- Ajuste fino de la opacidad:Ajuste los niveles de transparencia de los colores del degradado, si es necesario.
Establecer imagen de fondo
Agregar una imagen de fondo puede mejorar el atractivo visual de su página al incorporar texturas, patrones o elementos visuales temáticos.
Paso 1: Habilitar el fondo de la imagen
En la pantalla Fondo ., escoger Imagen como el tipo de fondo.
Paso 2: Establece el fondo de la imagen
Coloque el cursor sobre la imagen actual y presione Subir imagen para subir una nueva imagen.
De lo contrario, puede elegir entre su biblioteca multimedia (archivos de Shopify) o pegar la URL de la imagen en el cuadro.
Paso 3: Ajustar la configuración de la imagen
- Escala: Ajuste el tamaño de la imagen para que se ajuste a su diseño.
- Posición: Elija la alineación de la imagen, como centro, superior izquierda o superior derecha, para controlar cómo se muestra la imagen dentro del área de fondo.
- Repetir: Decide si la imagen debe aparecer en mosaico sobre el fondo o permanecer como una única instancia.
- Datos adjuntos: Configure la imagen de fondo para que se desplace con la página o permanezca fija en su lugar para lograr un efecto de paralaje.
- Optimizar LCP: Utilice imágenes comprimidas para mantener una velocidad de página rápida.
Combina el color y el fondo de la 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 que resulta efectivo cuando se utiliza una imagen con un fondo transparente.
Paso 1: Agregar fondo de imagen
- En la pantalla Fondo sección, seleccione la Imagen .
- Sube o selecciona una imagen que tenga un fondo transparente.
Paso 2: Agregar fondo de color
Aún así, en el Fondo , Haga clic en el Color Opción. Elija el color que desea que aparezca 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 vídeo de fondo
Los fondos de video son una excelente manera de crear imágenes dinámicas y atractivas para su sitio web.
Paso 1: Habilitar el fondo de video
En la sección Fondo sección, haga clic en el botón “Agregar…” al lado de Vídeo Campo para abrir el panel de configuración de fondo de vídeo.
Paso 3: Agrega un video para usar como fondo
Desde la aplicación Fuente En el campo "Enviar", selecciona la fuente para adjuntar el vídeo. Tienes dos opciones:
- YouTube: Seleccione un vídeo de YouTube para reproducirlo como vídeo de fondo.
- Alojamiento de videos: Elija un video cargado desde los archivos de Shopify.
Pegar el URL del vídeo para incrustar el video y convertirlo en fondo.
Puedes cambiar el Vídeo en bucle a Sí para habilitar la función de bucle.
Más opciones de personalización
Para fondos de video avanzados con más control sobre superposiciones, texto y botones de llamada a la acción, considere usar uno de los siguientes elementos:
- Siganos este artículo Para personalizar el fondo de tu video usando un Banner.
- Si prefiere la opción de fondo Banner de video elemento, aprende más aquí.
gracias por tus comentarios