Crear diseños de fondo de texto con CSS es una excelente manera de agregar un elemento de diseño impresionante a cualquier sitio web. La clave para crear estos fondos de texto personalizados es usar la propiedad CSS background-clip con un valor de texto. Debido a que este método ha ganado popularidad recientemente y es compatible con los navegadores, le mostraremos cómo usarlo en Divi . Esto abre una capa adicional de diseño que apunta a elementos de texto (como H1, H2, p, etc.) además de todas las otras maravillosas capacidades de diseño de Divi.
Empecemos.
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Aquí hay un ejemplo de un fondo de degradado lineal agregado al texto del encabezado usando background-clip
Aquí hay un ejemplo de un fondo de imagen agregado al texto del encabezado y un fondo de degradado lineal agregado al texto del párrafo usando background-clip
Y aquí hay un codepen que también demuestra este concepto.
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 el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Cómo usar un clip de fondo con texto
Antes de comenzar a construir nuestros ejemplos en Divi, primero comprendamos mejor el código CSS necesario para lograr un fondo de texto personalizado en CSS.
Digamos que tenemos un elemento de encabezado H2 que se ve así.
Primero, debe establecer el fondo que desea utilizar. En este ejemplo, vamos a agregar un fondo degradado a nuestro elemento h2 usando linear-gradient .
h2 { background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);} |
A continuación, agregamos background-clip:text junto con la versión de prefijo «-webkit» necesaria para mostrar el fondo del elemento solo detrás del texto.
h2 { background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%); background-clip: text; -webkit-background-clip: text;} |
Luego, agregamos -webkit-text-fill-color: transparent para anular el color del texto y hacerlo transparente.
h2 { background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} |
Luego agregamos los prefijos del navegador necesarios para que los gradientes lineales sean más amigables para el navegador:
h2 { background: -webkit-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%); background: -moz-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%); background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%); background-clip:text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} |
Como puede ver, este ejemplo usa tres colores para crear un degradado, pero puede agregar fácilmente tantos como desee.
Eso es realmente todo lo que hay que hacer. Por supuesto, ayuda tener una mejor comprensión de cómo usar la función de gradiente lineal para diseñar el tipo de fondo degradado que desea.
Para obtener más información, consulte la documentación sobre la función de gradiente lineal . También puede explorar este generador de degradado de texto CSS para explorar algunas opciones divertidas.
Y, si no quiere usar un degradado, puede usar un fondo de imagen real. El código sería algo como esto:
h2 { background: center / cover url("add image URL"); background-clip:text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} |
Ahora que tenemos una mejor comprensión de CSS, profundicemos en el tutorial.
Diseño de fondos de texto con clip de fondo en Divi
Parte 1: uso de background-clip para agregar un fondo degradado a un encabezado H1
Para nuestro primer ejemplo, vamos a agregar un fondo degradado a un encabezado H1.
La sección, la fila y la columna
Primero, abra la configuración de la sección y agregue un color de fondo:
- Color de fondo: #153243
Dentro de la sección, agregue una fila de una columna.
El módulo de texto con encabezado H1
Para agregar el encabezado H1, agregue un nuevo módulo de texto a la columna de la fila.
Abra la configuración de texto y pegue el siguiente HTML de encabezado H2 debajo de la pestaña de texto del contenido del cuerpo.
|
01
|
<h1>Creating CSS Text Backgrounds in Divi</h1> |
En la pestaña de diseño, actualice la configuración de diseño H1 de la siguiente manera:
- Fuente del encabezado: Montserrat
- Peso de la fuente del encabezado: Negrita
- Estilo de fuente de título: TT
- Alineación del texto del título: Centro
- Color del texto del título: #ffffff
- Tamaño del texto del encabezado: 100 px (escritorio), 55 px (tableta), 28 px (teléfono)
- Altura de la línea de encabezado: 1,2 em
NOTA: El color del texto del encabezado será anulado por el CSS personalizado, pero es bueno tener uno seleccionado como respaldo por si acaso.
En la pestaña avanzada, agregue la siguiente clase CSS:
- Clase CSS: texto-fondo-clip
Usaremos esta clase como selector en nuestro código CSS personalizado más adelante.
El código CSS
Para agregar el código CSS para darle al H1 un fondo degradado, agregue un nuevo módulo de código debajo del módulo de texto.
Luego pegue el siguiente CSS dentro del cuadro Código asegurándose de envolver el código en las etiquetas de estilo necesarias :
|
01
02
03
04
05
06
07
08
|
.text-background-clip h1 { background: -webkit-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f); background: -moz-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f); background: linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f); background-clip:text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} |
NOTA: Volveremos a este mismo módulo de código para agregar CSS adicional para nuestros siguientes ejemplos.
Resultado
Aquí está el resultado. Como puede ver, el fondo degradado se ha recortado para que solo se muestre a través del elemento de encabezado H1.
Parte 1: uso de background-clip para agregar un fondo de imagen a un encabezado H2
No estamos limitados a fondos degradados para diseñar nuestros fondos de texto. También podemos diseñar nuestros fondos de texto con imágenes de fondo.
En el siguiente ejemplo, vamos a usar el mismo método (usando «background-clip») para agregar un fondo de imagen a un encabezado H2.
La sección, la fila y la columna
Para comenzar, cree una nueva sección regular debajo de la sección existente de nuestro primer ejemplo.
Luego agregue una fila de una columna a la sección.
Abra la configuración de la sección y agregue una imagen de fondo oscuro a la sección.
A continuación, copie el módulo de texto existente en nuestro primer ejemplo anterior y péguelo en la columna de nuestra nueva sección.
Abra la configuración de texto para el módulo de texto duplicado y cambie el encabezado H1 a un encabezado H2 actualizando el HTML:
|
01
|
<h2>Creating CSS Text Backgrounds in Divi</h2> |
En la pestaña de diseño, haga clic con el botón derecho en la pestaña H1 y copie los estilos H1 del texto del título. Luego haga clic con el botón derecho en la pestaña H2 y pase los estilos H1 del texto del encabezado para que el encabezado H2 tenga el mismo estilo.
El código CSS
Para agregar el código CSS que necesita darle al H2 una imagen de fondo, abra el módulo de código existente que creamos anteriormente y pegue el siguiente CSS debajo del primer fragmento de CSS:
|
01
02
03
04
05
06
|
.text-background-clip h2 { background: center / cover url("https://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2021/04/gradient-background-img.jpg"); background-clip:text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } |
Esto agregará una imagen de fondo detrás del elemento H2. La abreviatura CSS de fondo incluye «centro» para la posición del fondo, «cubierta» para el tamaño del fondo y la URL de la imagen real.
Para encontrar la URL de una imagen en su propio sitio, puede abrir fácilmente su galería de medios de WordPress, seleccionar la imagen y copiar la URL del archivo.
Resultado
Parte 3: usar background-clip para agregar un fondo degradado al texto del párrafo
Para nuestro ejemplo final, vamos a usar background-clip para agregar un fondo degradado al texto del párrafo. El proceso es el mismo. La única diferencia será el código CSS que apuntará a la etiqueta p para nuestro texto de párrafo.
Agregar módulo de texto
Agregue un nuevo módulo de texto debajo del módulo de texto anterior en la misma sección que diseñamos en la parte 2.
Actualice el contenido del cuerpo con el siguiente texto de párrafo HTML:
|
01
|
<p>Cras luctus ornare est, sed pharetra mauris vestibulum in. In nulla sem. Consectetur et tristique non, pulvinar pretium ante. Cras aliquam risus ullamcorper odio interdum facilisis. Vestibulum vitae augue tempor, commodo sapien ut, condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus ornare est, sed pharetra mauris vestibulum in.</p> |
NOTA: asegúrese de que el texto esté envuelto con la etiqueta p porque este será el selector al que apuntaremos en nuestro código CSS personalizado.
En la pestaña de diseño, actualice los siguientes estilos de texto:
- Texto Color del texto: #ffffff
- Texto Tamaño del texto: 16px
- Altura de línea de texto: 2em
- Ancho máximo: 500px
- Alineación del módulo: Centro
En la pestaña avanzada, agregue la misma clase CSS utilizada anteriormente:
- Clase CSS: texto-fondo-clip
El código CSS
Finalmente, pegue el código CSS que apunta a la etiqueta p y agregue un fondo degradado al texto usando background-clip:text .
|
01
02
03
04
05
06
07
08
|
.text-background-clip p { background: -webkit-linear-gradient( to right,#ddd 0%,#ea7ea2 100%); background: -moz-linear-gradient( to right,#ddd 0%,#ea7ea2 100%); background: linear-gradient( to right,#ddd 0%,#ea7ea2 100%); background-clip:text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} |
Resultado
Aquí está el resultado del diseño del fondo del texto del párrafo.
Resultados finales
¡Ahora veamos los resultados finales de nuestros diseños!
Aquí hay un ejemplo de un fondo de degradado lineal agregado al texto del encabezado usando background-clip
Aquí hay un ejemplo de un fondo de imagen agregado al texto del encabezado y un fondo de degradado lineal agregado al texto del párrafo usando background-clip
Pensamientos finales
La capacidad de agregar fondos de texto personalizados a su sitio puede ser una herramienta de diseño útil. Y, si comprende mejor cómo usar la propiedad CSS de fondo en combinación con background-clip:text , las posibilidades son infinitas. Si necesita un poco de ayuda para crear su propio CSS, también puede explorar este Generador de degradado de texto CSS para ayudar a iniciar el proceso.
Además, si desea un efecto similar sin todo el CSS personalizado, consulte cómo aplicar el color de texto degradado con las opciones de modo de fusión de Divi .
Espero escuchar de usted en los comentarios.
¡Salud!