Rellenar el texto con imágenes es una excelente manera de agregar un diseño moderno a su sitio web. Con los modos de fusión de Divi, puede mostrar imágenes de fondo a través de cualquier texto que desee. Y, al usar márgenes personalizados dentro de Divi Builder, puede colocar el texto lleno de imágenes para que sirva como fondo para su contenido.
En este tutorial, le mostraré cómo usar el modo de combinación de pantalla para agregar fondos de texto llenos de imágenes coloridas usando Divi. También le mostraré cómo agregar divisores que coincidan con el diseño de su texto de fondo y secciones que transicionan sin problemas entre los divisores.
Empecemos.
Aquí hay un adelanto de lo que se creará hoy.
Preparándose
Para ayudarlo a completar este tutorial, necesitará lo siguiente:
- Tema Divi (instalado, activo y actualizado)
- 4 Imágenes a utilizar para cada fondo de texto. Para obtener los mejores resultados, sugiero usar imágenes más oscuras con mucha textura y al menos 1920 × 1080 de tamaño.
- Modo de interacción de cuadrícula Visual Builder: dado que vamos a superponer módulos y crear un diseño más complejo, sugiero usar el modo de interacción de cuadrícula para que pueda evitar confusiones al intentar pasar el mouse sobre elementos que se superponen dentro del generador visual.
Cómo rellenar texto con imágenes para fondos creativos usando Divi
Suscríbete a nuestro canal de Youtube
Crear primera sección
Cree una nueva página e implemente el generador visual. Luego agregue una sección regular con una fila de una columna (o simplemente use la que ya está allí de manera predeterminada) y agregue un módulo de texto a la columna de la fila.
Actualizar la configuración del módulo de texto
Abra la configuración del módulo de texto y actualice lo siguiente:
Contenido…
Contenido: 01 (este será el número utilizado para nuestro fondo)
Color de fondo: #ffffff
Diseño…
Fuente del texto: Poppins Peso de la fuente del texto:
Texto
pesado Tamaño del texto: 40em (escritorio), 25em (tableta), 15em (teléfono inteligente)
Color del texto del texto: rgba(131,0,233,0.65)
Orientación del texto: Centro
Relleno personalizado: 288px arriba, 288px Ancho
del borde inferior : 1px
Color del borde: #ffffff
Modo de fusión: Pantalla
Nota: El fondo blanco y el modo de fusión de pantalla es lo que crea el efecto de ver el fondo de la fila (aún no creado) a través del módulo de texto.
A continuación, agregue una nueva fila de una columna debajo de la fila actual y luego agregue un módulo de llamada a la acción.
Actualice la configuración del módulo de llamada a la acción
Actualice el módulo Llamado a la acción con lo siguiente:
Contenido…
Título: Botón Descubrir
Texto: Más información
URL del botón: #
Color de fondo: rgba(255,255,255,0) (esto es transparente)
Diseño…
Color del texto: Oscuro
Orientación del texto: Izquierda
Fuente del título: Poppins
Peso de la fuente del título: Pesado
Estilo de fuente del título: TT
Tamaño del texto del título: 70px (escritorio), 50px (tableta), 40px (teléfono inteligente)
Color del texto del título: rgba(0,0, 0,0.62)
Espaciado entre letras del título: 4px
Fuente del cuerpo: Poppins
Peso de la fuente del cuerpo: Ligero
Tamaño del texto del cuerpo: 32 px (escritorio), 24 px (tableta)
Color del texto del cuerpo: #333333
Altura de la línea del cuerpo: 1,3 em
Usar estilos personalizados para el botón: SÍ
Color del texto del botón: #8300e9
Color de fondo del botón: rgba(255,255,255,0.85)
Margen personalizado: -600px arriba, 40% abajo
Nota: configuré el margen superior con un valor de píxel porque quería limitar el movimiento del módulo al ajustar el ancho del navegador. Configuré el margen inferior al 40% para evitar que la sección inferior se superponga a la fila que contiene este módulo. Establecerlo en un porcentaje ayuda a ajustar el margen inferior en los dispositivos móviles.
Actualizar configuración de fila
Ahora que tenemos nuestro contenido en su lugar, editemos la configuración de nuestra primera fila de la siguiente manera.
Contenido…
Columna 1 Imagen de fondo: Insertar imagen
Aquí está la imagen que estoy usando…
Diseño…
Hacer esta fila de ancho completo: SÍ Ancho
de medianil personalizado: 1
Relleno personalizado: 10 % superior, 7 % inferior Ancho
del borde: 1 px
Color del borde: #ffffff
En la segunda fila , actualice la configuración de la siguiente manera:
Relleno personalizado: 0px arriba, 0px abajo
En este punto hemos terminado con nuestro primer texto de fondo exitoso.
Estamos limitados a un fondo blanco que rodea el texto debido a la forma en que funciona el modo de combinación de pantalla. Pero podemos agregar algo de color agregando algunos divisores a nuestra sección.
Agregue divisores a su sección
Para agregar un divisor, vaya a la configuración de la sección en la pestaña de diseño y actualice lo siguiente.
Divisor superior…
Estilo del divisor: vea la captura de pantalla
Color del divisor: rgba(131,0,233,0.65)
Altura del divisor: 127px
Disposición del divisor: En la parte superior del contenido de la sección
Divisor inferior…
Estilo del divisor: vea la captura de pantalla
Color del divisor: rgba(131,0,233,0.65)
Altura del divisor: 249 px (escritorio), 127 px (tableta)
Inversión del divisor: vertical y horizontal
Disposición del divisor: En la parte superior del contenido de la sección
Agregar la sección de transición
Antes de comenzar nuestra próxima sección, primero debemos crear una sección regular para que sirva como una transición suave de color entre los divisores inferior y superior. Para crear la transición, debemos usar el color del divisor inferior arriba y el divisor superior debajo (lo siento, eso puede ser un poco confuso). Con esos dos colores, crearemos un degradado de fondo para pasar del divisor de arriba al divisor de abajo.
Continúe y agregue una nueva sección regular, pero elimine la columna de la fila porque no usaremos ninguna fila para esta sección. Luego, en la pestaña de contenido, agregue un degradado de fondo con el primer color del mismo color que usamos para la sección anterior: rgba (131,0,233,0.65).
Para el segundo color, use lo siguiente: rgba(233,0,255,0.65)
Este será el color de nuestros próximos separadores de sección.
En este punto, se ha hecho todo el trabajo duro. Todo lo que queda por hacer para completar las próximas 3 secciones es duplicar la sección que ya tenemos y actualizar algunos contenidos y colores.
Crear la segunda sección
Para la segunda sección, copie nuestra primera sección que creamos y péguela debajo de la sección de transición.
Complete lo siguiente:
- Actualice la sección Colores de los divisores superior e inferior a rgba(233,0,255,0.65).
- Cambie la imagen de fondo de la columna de la fila superior 1.
- Actualice el módulo de texto con el número 02 y luego cambie el color del texto a rgba(233,0,255,0.65).
- Cambie el título del módulo de propaganda para que diga «Diseño».
- Actualice el color del texto del botón del módulo de publicidad a #e900ff.
- Agregue otra sección de transición a continuación con estos dos colores para el fondo degradado:
rgba(233,0,255,0.65) , rgba(12,113,195,0.65)
Crear la tercera sección
Para la tercera sección, copie una de las secciones que ya creamos y péguela debajo de la segunda sección de transición.
Complete lo siguiente:
- Actualice la sección Colores de los divisores superior e inferior a rgba(12,113,195,0.65).
- Cambie la imagen de fondo de la columna de la fila superior 1.
- Actualice el módulo de texto con el número 03 y luego cambie el color del texto a rgba(12,113,195,0.65).
- Cambie el título del módulo publicitario para que diga «Desarrollar».
- Actualice el color del texto del botón del módulo de publicidad a #0c71c3.
- Agregue otra sección de transición a continuación con estos dos colores para el fondo degradado:
rgba(12,113,195,0.65) , rgba(124,218,36,0.65)
Creando la Cuarta Sección
Para la cuarta sección, copie una de las secciones que ya creamos y péguela debajo de la tercera sección de transición.
Complete lo siguiente:
- Actualice la sección Colores de los divisores superior e inferior a rgba(124,218,36,0.65).
- Actualice el módulo de texto con el texto «Ir» y luego cambie el color del texto a rgba (124,218,36,0.65).
- Cambie la imagen de fondo de la columna de la fila superior 1.
- Cambie el título del módulo publicitario para que diga «Entregar».
- Actualice el color del texto del botón del módulo de publicidad a #68d800.
Aquí esta el resultado final:
es receptivo
El proceso de diseño utilizado en este tutorial incluye la configuración de elementos de espaciado personalizados (margen y espaciado) y tamaños de texto para cada dispositivo móvil. De esta manera, cualquier personalización avanzada establecida en el escritorio también se verá bien en el móvil.
Así es como se ve nuestro diseño en tabletas y teléfonos inteligentes.
Crear una versión oscura
El Modo de fusión de pantalla funciona combinando los elementos del módulo de texto con la imagen de fondo de la fila y luego mostrando una mezcla más clara de los dos elementos. De manera similar, el Modo de fusión múltiple mezcla los dos pero, en lugar de mostrar una versión más clara, muestra una versión más oscura de los elementos mezclados. Esto es obvio si alterna entre Multiplicar y Pantalla al editar su configuración.
Puede usar el modo de combinación múltiple en lugar del modo de combinación de pantalla para crear una versión oscura de este diseño. Para hacer eso, todo lo que deberá hacer es configurar el color de fondo de la sección y el color de fondo del módulo de texto en negro (y también los colores de los bordes si tiene bordes). Cambie el modo de fusión del módulo de texto a Multiplicar. A continuación, cambie el texto del título y el cuerpo de la llamada a la acción a un color más claro/blanco.
Eso es todo. Aquí hay un ejemplo de cómo se verá una versión oscura.
Limitaciones y alternativas a este diseño
Debido a la forma en que funcionan la pantalla y los múltiples modos de fusión, este efecto funciona mejor con fondos blancos y negros. Es muy probable que cualquier otro color muestre la imagen de fondo en todo el módulo, no solo el texto. Sin embargo, es posible que los ninjas que diseñas conozcan algunos trucos que yo desconozco, así que no dudes en compartirlos con nosotros en los comentarios.
Además, el modo de mezcla de pantalla utilizado para crear nuestros fondos de texto llenos de imágenes no funciona bien en IE, Edge y Opera mini. Esto no es un gran problema porque, aunque el fondo no se mostrará a través del texto y el color del texto aún se mostrará. Esta es una gran alternativa, por lo que debe tener esto en cuenta cada vez que configure el color del texto para el texto de fondo.
Aquí hay un ejemplo de cómo se ve el diseño en IE.
Pensamientos finales
Con Divi, puede completar cualquier texto que desee con cualquier imagen que desee, todo desde la comodidad de Visual Builder. El diseño de ejemplo utilizado en este tutorial realmente pretende ser inspiración para mucho más. Entonces, pruébelo usted mismo y construya algo increíble.
Este tutorial se inspiró en la serie de publicaciones sobre cómo recrear los efectos de los filtros de color y los ejemplos del modo de fusión .
Espero escuchar de usted en los comentarios.
¡Salud!