Cómo agregar efectos de filtro de fondo CSS a un encabezado fijo en Divi

Agregar efectos de filtro de fondo de CSS es una forma divertida y única de mejorar el diseño de un menú de encabezado pegajoso. Lo que hace que la propiedad CSS del filtro de fondo sea tan única es que le permite aplicar efectos de filtro al área detrás de un elemento. Esta es una opción perfecta para encabezados fijos porque el diseño de su página se puede cambiar mágicamente detrás del encabezado mientras se desplaza hacia abajo en la página. Es posible que haya visto este efecto en sitios populares como apple.com.

En este tutorial, le mostraremos cómo agregar efectos de filtro de fondo CSS a un encabezado fijo en Divi. Primero, explicaremos el proceso simple de agregar efectos de filtro de fondo a un encabezado existente que implica 3 sencillos pasos. Después de eso, analizaremos cómo construir todo el encabezado desde cero.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Observe los efectos de filtro de saturación y desenfoque que se aplican a los elementos detrás del encabezado a medida que se desplaza.

Para obtener una demostración en vivo simple de este efecto de filtro de fondo agregado a un encabezado, consulte este codepen.

Descargue la plantilla de encabezado global GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Cómo cargar la plantilla

Ir a Divi Theme Builder

Para cargar la plantilla, navegue hasta Divi Theme Builder en el backend de su sitio web de WordPress.

Cargar plantilla de sitio web predeterminada global

Luego, en la esquina superior derecha, verá un ícono con dos flechas. Haga clic en el icono.

Navegue a la pestaña de importación, cargue el archivo JSON que pudo descargar en esta publicación y haga clic en 'Importar plantillas Divi Theme Builder'.

Guardar cambios en Divi Theme Builder

Una vez que haya cargado el archivo, notará un nuevo encabezado y pie de página global en la plantilla de sitio web predeterminada. Guarde los cambios de Divi Theme Builder tan pronto como desee que se active la plantilla.

Vayamos al tutorial, ¿de acuerdo?

Agregar efectos de filtro de fondo CSS a un encabezado existente

La forma más sencilla de demostrar el proceso es agregar efectos de filtro de fondo CSS a un encabezado existente en Divi. Realmente, se reduce a estos tres sencillos pasos:

1. Agregue un color de fondo semitransparente a la sección del encabezado
2. Agregue el CSS personalizado del filtro de fondo a la sección de encabezado
3. Agregar una posición fija a la sección del encabezado

He aquí cómo hacerlo en Divi.

Editar encabezado en Theme Builder

Navegue hasta Theme Builder y haga clic para editar la plantilla de encabezado existente.

Agregar color de fondo semitransparente a la sección

Abra la configuración de la sección que contiene los elementos del menú de encabezado. Luego agregue un color de fondo semitransparente a la sección. En este ejemplo le damos a la sección el siguiente color de fondo:

• Color de fondo: rgba (0,0,0,0.8)

Agregar CSS personalizado de filtro de fondo

A continuación, podemos agregar los efectos de filtro de fondo (usando la propiedad CSS de filtro de fondo) con un fragmento de CSS personalizado en el elemento principal de la sección. En la pestaña avanzada, pegue el siguiente CSS en el elemento principal:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Estos efectos de filtro son similares a los efectos de filtro integrados en todos los elementos Divi. La principal diferencia es que el filtro de fondo agrega el efecto a los elementos detrás de él, mientras que los efectos de filtro integrados de Divi agregan el efecto al elemento en sí.

Aquí estamos usando 2 efectos de filtro (saturar y desenfocar) que aplicarán el efecto de filtro a cualquier elemento de diseño detrás de la sección.

Siéntase libre de explorar la adición de otros valores de función de filtro (o una combinación de estos) para crear su propio diseño único. Los más útiles de estos incluyen:

• difuminar()
• brillo()
• contraste()
• escala de grises ()
• matiz-rotar ()
• invertir()
• sepia()
• saturar()

Agregar posición fija al encabezado

Finalmente, asegúrese de darle a la sección del encabezado una posición fija.

Resultado final

Aquí hay un vistazo al resultado final en una página en vivo. Observe los efectos de filtro de saturación y desenfoque que se aplican a los elementos detrás del encabezado a medida que se desplaza.

Creación de un encabezado con efectos de filtro de fondo CSS desde cero

Si desea construir todo el encabezado con efectos de filtro de fondo CSS desde cero, aquí le mostramos cómo hacerlo.

Crear encabezado global en Theme Builder

Navegue hasta el generador de temas y haga clic para crear un nuevo encabezado global.

Creación de una sección fija con efectos de filtro de fondo CSS

Comencemos creando una sección pegajosa con los efectos de filtro de fondo de CSS como hicimos en la primera parte de este tutorial.

En el Editor de diseño de encabezado global, agregue una fila de una columna a la sección.

Abra la configuración de la sección. Luego agregue el siguiente color de fondo semitransparente a la sección:

• Color de fondo: rgba (0,0,0,0.8)

Actualice el relleno de la siguiente manera:

• Relleno: 0px arriba, 0px abajo

A continuación, podemos agregar los efectos de filtro de fondo (usando la propiedad CSS de filtro de fondo) con un fragmento de CSS personalizado en el elemento principal de la sección. En la pestaña avanzada, pegue el siguiente CSS en el elemento principal:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

Finalmente, asegúrese de darle a la sección del encabezado una posición fija.

• Posición adhesiva: adherirse a la parte superior

Editar configuración de fila

Ahora que la sección está terminada, abra la configuración de la fila y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho: 95%
• Relleno: 20px superior, 20px inferior

Agregar imagen de logotipo

Después de actualizar la configuración de la fila, agregue un módulo de imagen a la fila / columna para crear el logotipo.

Sube la imagen del logo al módulo de imagen.

Actualice la configuración del diseño de la imagen de la siguiente manera:

• Ancho: 50px
• Margen: 0px a la derecha

Crear menú

A continuación, agregue un módulo de menú debajo del módulo de imagen.

En la pestaña de contenido, seleccione un menú y dé al menú un color de fondo transparente.

• Color de fondo: rgba (0,0,0,0)

En la pestaña de diseño, actualice la configuración de diseño del menú de la siguiente manera:

• Estilo: alineado a la izquierda
• Color de enlace activo: #fff
• Fuente del menú: Montserrat
• Peso de la fuente del menú: Semi negrita
• Color del texto del menú: #fff
• Alineación de texto: centro
• Color de fondo del menú desplegable: # 333
• Color de la línea del menú desplegable: #fff
• Color del texto del menú desplegable: #fff
• Enlace activo del menú desplegable: #fff
• Fondo del menú móvil: # 333
• Color del texto del menú móvil: #fff
• Color del icono del carrito de compras: #fff
• Color del icono de búsqueda: #fff
• Color del icono del menú de hamburguesas: #fff
• Ancho: 80% (escritorio y tableta)

Crear botón con módulo de texto

Para crear el pequeño botón para el encabezado, usaremos un módulo de texto. Agrega un módulo de texto debajo del menú.

Actualice el contenido del cuerpo con la obra “Tienda”. Luego, dale al módulo de texto un color de fondo blanco.

• Texto del cuerpo: "Tienda"
• Color de fondo: #fff

En la pestaña de diseño, actualice lo siguiente:

• Fuente de texto: Montserrat
• Peso de la fuente del texto: Semi negrita
• Texto Color del texto: # 333
• Altura de la línea de texto: 2em
• Alineación de texto: centro
• Ancho: 50px
• Esquinas redondeadas: 5px

Aquí el módulo de texto tiene el mismo ancho que la imagen del logo. Esto ayudará a alinear los elementos perfectamente cuando usamos la propiedad flex en la columna con CSS personalizado.

Alinear módulos en columna con la propiedad CSS Flex

Una vez que el logotipo, el menú y el módulo de texto se hayan agregado a la columna, abra la configuración de la columna y pegue el siguiente CSS personalizado en el elemento principal:

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

Guardar diseño de encabezado y plantilla

Una vez hecho esto, asegúrese de guardar el diseño y la plantilla.

Resultado final

Aquí hay otra mirada al diseño final. Observe los efectos de filtro de saturación y desenfoque que se aplican a los elementos detrás del encabezado a medida que se desplaza.

Soporte del navegador

Desafortunadamente, la propiedad CSS de filtro de fondo actualmente no funciona bien en IE y Firefox. Sin embargo, la alternativa será el color de fondo semitransparente dado a la sección, que aún funciona y se ve muy bien.

Pensamientos finales

Con suerte, su próximo proyecto se beneficiará de un encabezado con un bonito efecto de filtro de fondo. Realmente es fácil de agregar a cualquier encabezado en Divi y es divertido explorar todos los diferentes valores de función de filtro que están disponibles.

Espero tener noticias tuyas en los comentarios.

¡Salud!