Cómo agregar un tamaño personalizado a su patrón de fondo con Divi
Los nuevos patrones de fondo de Divi agregan muchas opciones de diseño visual a cualquier diseño de Divi. Estos patrones de fondo repetitivos se ven geniales, pero se pueden usar para algo más que un patrón repetitivo. También podemos usarlos como un único gráfico de fondo para llamar la atención sobre áreas específicas de la pantalla o dividir elementos visuales. La configuración del patrón de fondo de Divi, en este caso, Tamaño personalizado, nos brinda muchas opciones de diseño. En esta publicación, veremos tres ejemplos y veremos cómo agregar un tamaño personalizado a su patrón de fondo con Divi para ayudarlo a obtener ideas para su propio sitio web Divi.
Avance
Primero, veamos qué vamos a hacer. Aquí hay un vistazo a cada patrón de fondo en tamaños de pantalla de escritorio, tableta y teléfono.
Resultados del primer patrón de fondo de tamaño personalizado
Escritorio
Tableta
Teléfono
Resultados del segundo patrón de fondo de tamaño personalizado
Escritorio
Tableta
Teléfono
Resultados del tercer patrón de fondo de tamaño personalizado
Escritorio
Tableta
Teléfono
Diseño de patrón de fondo de tamaño personalizado
Para nuestros ejemplos, estoy usando la primera sección de la página de inicio gratuita de Acai Bowl disponible en Divi. Agregaremos tres patrones de fondo diferentes y los personalizaremos para cada una de las opciones del dispositivo. La sección de mis ejemplos usa el color de fondo #f9f3fd. Mantendremos este color de fondo y le agregaremos patrones de fondo.
Primer ejemplo de patrón de fondo de tamaño personalizado
Nuestro primer ejemplo agregará franjas diagonales que solo aparecen en la parte inferior de la sección. Necesitaremos diferentes configuraciones para dispositivos de escritorio, tabletas y teléfonos.
Primero, abra el configuración de la sección haciendo clic en el icono de engranaje de la sección.
A continuación, desplácese hacia abajo hasta Fondo. Haremos ajustes a los tres tamaños de pantalla, así que comencemos seleccionando el icono de la tabletan que aparece cuando pasamos el cursor sobre las opciones de Fondo.
Elija el patrón de fondo
A continuación, asegúrese de que Desktop esté seleccionado, elija el Patrón de fondo pestaña y haga clic en Agregar patrón de fondo.
Selecciona el caja desplegable bajo el patrón de fondo.
Elegir la rayas diagonales patrón de fondo de la lista. Podemos modificar este patrón, para que no sea solo una pantalla llena de rayas. Entonces, usaremos esto para crear nuestro fondo único.
- Patrón de fondo: rayas diagonales
Configuración del patrón de fondo
Cambiar el Color del patrón a rgba(68,40,84,0.13). Este color combina bien con nuestro color de fondo.
- Color del patrón: rgba(68,40,84,0.13)
A continuación, abra el Tamaño del patrón cuadro desplegable y seleccione Tamaño personalizado. Establezca la altura del patrón en 41vh, el origen de la repetición del patrón en el centro inferior y la repetición del patrón en la repetición X (horizontal). Esto nos da control sobre el tamaño y el posicionamiento del patrón de fondo en la pantalla.
- Tamaño del patrón: Tamaño personalizado
- Altura: 41vh
- Repetir origen: centro inferior
- Repetir: Repetir X (horizontal)
Configuración de fondo de la tableta
A continuación, debemos hacer que el fondo funcione bien con diferentes tamaños de pantalla. Tendremos que ajustar la altura del patrón según el tamaño de la pantalla. Desplácese hacia atrás hasta la configuración de fondo y seleccione el icono de la tableta.
Cambiar el Altura del patrón a 30vh.
Configuración de fondo del teléfono
Finalmente, desplácese hacia atrás hasta la configuración de Fondo y seleccione el icono de teléfono.
Cambiar el Altura del patrón a 25vh. Cierre la configuración del módulo y guarde su página.
Segundo ejemplo de patrón de fondo de tamaño personalizado
Nuestro segundo ejemplo de patrón de fondo de tamaño personalizado agregará un círculo en el centro de la pantalla. Para nuestro diseño, aparecerá detrás del tazón de acai en nuestra imagen destacada.
Elija el patrón de fondo
En el configuración de la seccióndesplácese hacia abajo hasta Fondo y seleccione el icono de la tableta para abrir la configuración del tamaño de la pantalla del dispositivo. Elegir la Pestaña de escritorioSelecciona el Pestaña Patrón de fondoy haga clic en Agregar patrón de fondo.
Queremos Lunaress para este ejemplo. Esta es la opción predeterminada, por lo que en realidad no necesitará abrir el cuadro desplegable para esta. Estoy mostrando las opciones en caso de que esté cambiando de un patrón de fondo diferente a este. Los lunares aparecen automáticamente cuando hace clic en Agregar patrón de fondo. Haga doble clic en el patrón o use el cuadro desplegable para cambiarlo.
- Patrón de fondo: Lunares
Cambiar el Color al blanco Esto nos permite agregar un círculo blanco en el fondo.
Próximo. selecciona el Tamaño del patrón a la costumbre, la Altura a 400vh, y el Repetir origen al centro Estos ajustes controlan el tamaño y la posición de los puntos. En este caso, hemos creado un solo punto para que aparezca en el fondo.
- Tamaño del patrón: Tamaño personalizado
- Altura del patrón: 400vh
- Repetir Origen: Centro
Configuración de fondo de la tableta
A continuación, debemos asegurarnos de que funcione bien en todos los tamaños de pantalla. Elegir la pestaña de la tableta.
A continuación, cambie el Altura del patrón a 300vh.
Configuración de fondo del teléfono
Finalmente, regrese a la configuración de Fondo y seleccione el pestaña del teléfono para abrir la configuración del tamaño de la pantalla del teléfono.
Cambiar el Altura del patrón a 200vh. Cierre la configuración del módulo y guarde su página.
Ejemplo de patrón de fondo de tercer tamaño personalizado
Este ejemplo muestra una sola línea en zig-zag a través del medio de la sección. Para este, no necesitaremos ajustar el teléfono por separado. Permitiremos que siga la configuración de la tableta.
Elija el patrón de fondo
Para nuestro tercer ejemplo de patrón de fondo de tamaño personalizado, abra el configuración de la sección y desplácese hacia abajo para Fondo. Pase el cursor sobre la configuración de fondo y haga clic en el icono de tableta para abrir la configuración del dispositivo. Elegir la Pestaña de escritorio y seleccione el Pestaña Patrón de fondo. Hacer clic Agregar patrón de fondo.
Abre el Cuadro desplegable Patrón de fondo y elija Zig Zag 2. Este patrón llena la pantalla con líneas en zig-zag, pero lo ajustaremos para que solo muestre una línea.
- Patrón de fondo: Zig Zag 2
Cambiar el patrón de fondo Color a rgba(68,40,84,0.09). Este color no tiene un alto contraste con nuestro color de fondo, por lo que no distraerá la atención.
- Color del patrón de fondo: rgba(68,40,84,0.09)
Selecciona el Tamaño del patrón a Tamaño personalizado, el Altura del patrón a 20vh, el Origen de la repetición del patrón al Centro, y el Repetición de patrón para repetir X (horizontal). Al igual que los otros ejemplos, esto controla el tamaño y la posición del patrón.
- Tamaño del patrón: Tamaño personalizado
- Altura del patrón: 20vh
- Repetir Origen: Centro
- Repetición de patrón: Repetir X (horizontal)
Configuración de fondo de la tableta
Finalmente, desplácese hacia atrás hasta el comienzo de la configuración de Fondo y haga clic en el icono de tableta. La configuración del teléfono usará automáticamente esta configuración, por lo que no necesitaremos hacer ajustes en la pestaña del teléfono.
Desplácese hacia abajo para Altura del patrón y cambiarlo a 10vh. Cierre la configuración del módulo y guarde su página.
Resultados
Aquí hay un vistazo a cada patrón de fondo en tamaños de pantalla de escritorio, tableta y teléfono.
Resultados del primer patrón de fondo de tamaño personalizado
Escritorio
Tableta
Teléfono
Resultados del segundo patrón de fondo de tamaño personalizado
Escritorio
Tableta
Teléfono
Resultados del tercer patrón de fondo de tamaño personalizado
Escritorio
Tableta
Teléfono
pensamientos finales
Ese es nuestro vistazo a cómo agregar un tamaño personalizado a su patrón de fondo con Divi. Los nuevos patrones de fondo de Divi han abierto muchas opciones de diseño. Estos patrones se ven muy bien con nuestros diseños. El concepto de usar un tamaño personalizado para un patrón de fondo significa que no estamos obligados a repetir patrones. Los patrones de fondo de Divi se pueden usar para mucho más. Usando los conceptos que cubrimos aquí, puede usar cualquiera de los patrones de fondo de Divi para crear sus propios diseños de fondo únicos.
Queremos escuchar de ti. ¿Ha agregado un tamaño personalizado a su patrón de fondo con Divi? Cuéntanos tu experiencia en los comentarios.
