En Divi, puede agregar máscaras de fondo a cualquier elemento en Divi. Esto crea una gran oportunidad para impulsar el diseño del pie de página de su sitio web con Divi . En este tutorial, le mostraremos lo fácil que es agregar una máscara de fondo a su plantilla de pie de página usando Divi Theme Builder . Una vez hecho esto, tendrá un nuevo diseño de pie de página que es fácil de modificar para su propio sitio web.
Empecemos.
Aquí hay un vistazo rápido a los diseños de pie de página con una máscara de fondo que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar la plantilla de pie de página a su Biblioteca Divi, haga lo siguiente:
- Navega hasta Divi Theme Builder .
- Haga clic en el botón Importar en la parte superior derecha de la página.
- En la ventana emergente de portabilidad, seleccione la pestaña de importación
- Elija el archivo de descarga desde su computadora (asegúrese de descomprimir el archivo primero y use el archivo JSON).
- Luego haga clic en el botón importar.
Una vez hecho esto, la plantilla estará disponible en Theme Builder. Para editar la plantilla, haga clic en el icono de edición en la plantilla de pie de página.
Vayamos al tutorial, ¿de acuerdo?
Si desea utilizar su propio pie de página existente para este tutorial, no dude en omitir este paso e ingresar y editar su plantilla de pie de página. Puede aplicar una máscara de fondo a cualquier diseño de pie de página existente.
Para este tutorial, vamos a utilizar la plantilla gratuita de encabezado y pie de página diseñada para el paquete de diseño para consultores. Vaya a la publicación del blog y descargue la plantilla ingresando su dirección de correo electrónico en la suscripción del boletín y haciendo clic en el botón Descargar los archivos que aparece inmediatamente después.
Una vez que se haya descargado el archivo zip, descomprímalo.
Para cargar el archivo JSON descomprimido en el generador de temas, haga lo siguiente:
- Navega hasta Divi Theme Builder.
- Haga clic en el botón Importar en la parte superior derecha de la página.
- En la ventana emergente de portabilidad, seleccione la pestaña de importación
- Elija el archivo de descarga desde su computadora (asegúrese de descomprimir el archivo primero y use el archivo JSON).
- Desmarque las opciones que anularán sus plantillas actuales.
- Luego haga clic en el botón importar.
- Selecciona la opción “Importarlos como diseños estáticos…”.
- Luego haga clic en el botón Importar nuevamente.
Una vez que la plantilla se haya cargado en Theme Builder, elimine el encabezado de la plantilla (no lo necesitaremos para esto) y haga clic para editar el pie de página de la plantilla.
Este pie de página en particular está construido con una sola sección. Como vamos a agregar el diseño de la máscara de fondo a todo el fondo del pie de página, podemos agregar la máscara a la sección que contiene el contenido del pie de página.
Para hacer esto, abra la configuración de la sección. En las opciones de fondo, seleccione la pestaña Máscara y agregue una máscara de fondo a la sección de la siguiente manera:
- Máscara: Triángulos
- Color de la máscara: #2c98ff
- Transformación de máscara: Voltear horizontalmente, Invertir
Aquí está el resultado.
Ajuste de la máscara para dispositivos móviles
Para que el diseño de la máscara de fondo también se vea bien en los dispositivos móviles, necesitaremos hacer algunos ajustes. Cada máscara puede necesitar ajustes diferentes, pero en general, el siguiente ajuste debería funcionar para la mayoría.
Active las configuraciones/pestañas receptivas para las opciones de fondo y seleccione la pestaña de la tableta. Luego actualice las siguientes opciones de máscara:
- Transformación de máscara: Rotar
- Tamaño de la máscara: Ajuste
- Posición de la máscara: arriba a la derecha
Ahora la mascarilla tiene un bonito diseño para móvil.
Probar nuevas máscaras y colores
Una vez que se completa el diseño inicial de la máscara, podemos probar diferentes máscaras y colores de máscara para obtener nuevas opciones de diseño de fondo de pie de página. Dado que puede cambiar las máscaras con un simple clic, también podríamos ver cómo se verán algunas otras.
Máscara de cuchillas
Abra la configuración de la sección y cambie la máscara de fondo a Blades .
Aquí está el resultado.
Líneas diagonales
Seleccione la máscara Líneas diagonales para una apariencia diferente.
Aquí está el resultado.
Panal (sutil)
Para hacer una máscara de fondo más sutil (y más oscura) usando Honeycomb, actualice lo siguiente:
- Máscara: Panal
- Color de máscara: rgba (44,152,255,0.18)
- Transformación de máscara: Invertir
Aquí está el resultado.
Corner Blob (encuadre sutil)
Puede usar la máscara Corner Blob para agregar un diseño de marco sutil alrededor del formulario de contacto dentro del pie de página. Simplemente actualice lo siguiente:
- Máscara: Mancha de esquina
- Color de máscara: rgba (44,152,255,0.18)
- Transformación de máscara: rotar, invertir
Aquí está el resultado.
Resultados finales
Echemos un vistazo a los resultados finales.
Pensamientos finales
Crear un diseño de máscara de fondo para su pie de página es bastante simple usando Theme Builder y las opciones de fondo integradas de Divi. Simplemente haga clic en las diferentes máscaras y transforme las opciones para experimentar y encontrar la adecuada para su pie de página. No olvides hacer los ajustes necesarios para el móvil. Con suerte, esto será útil para su propio sitio web o su próximo proyecto.
Espero escuchar de usted en los comentarios.
¡Salud!