Aprende a dar un toque personal y exclusivo a tus diseños. En este post te explicamos cómo añadir degradados y imágenes en los textos con Elementor.
Índice de contenidos
Arrancaremos este tutorial explicando cómo personalizar tus textos con la versión Pro de Elementor. Si no tienes la versión de pago no te preocupes, en este mismo post te explicamos cómo hacerlo con la versión gratuita.
Estos son algunos de los ejemplos que podremos conseguir mediante este tutorial.

Degradados en textos con Elementor pro
Primero explicaremos como añadir un degradado. Accedemos a Elementor y creamos el texto a personalizar y después de ello nos vamos al apartado avanzado del widget. Ya allí en el campo ID de css le damos el identificador que queramos. En nuestro caso utilizaremos degrader.

Lo siguiente que haremos será definir los estilos que se aplicarán a la clase con la que hemos asociado nuestro texto. Para ello, sin movernos del apartado avanzado nos iremos a css personalizado y pegaremos el siguiente código, pero recuerda modificar el ID si no has definido el mismo que en el ejemplo:
#degrader {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent;
background-image: linear-gradient(to left, #3703af,#f2995b, #f2295b);
}
El atributo con el que personalizaremos tanto la dirección del degradado como los colores es esta: background-image: linear-gradient(to left, #3703af,#f2995b, #f2295b);
Con el primer parámetro definimos la dirección y el resto son los hexadecimales de los colores. Puedes averiguar los hexadecimales de los colores con los que quieras personalizar clicando aquí.

Ya tenemos personalizado nuestro texto con un degradado. Recuerda que si vas a usar el degradado en varios textos puedes definirlo con una clase en lugar de un ID y simplemente asociando la clase en el apartado avanzado del widget de texto se aplicará el degradado.
Imágenes en textos con Elementor pro
El proceso para añadir imágenes al fondo de los texto es practicamente igual que el de añadir degradados, el único cambio es un atributo en las reglas css. Sigue los mismos pasos que hemos explicado en los degradados y cuando pegues el código en los css personalizados modifica esta línea :
background-image: linear-gradient(to left, #3703af,#f2995b, #f2295b);
por esta otra:
background-image: url(https://magisbyteweb.es/wp-content/uploads/2020/06/playa.png);
Lo que deberemos hacer a continuación es modificar la url de la imagen de fondo. Para averiguar la url de tu imagen solo tienes que subir la imagen a la biblioteca de medios desde el administrador.

Copias la Url de la imagen y la modificas en el código css, es decir la sustituyes por la parte del codigo que esta de color verde:
background-image: url(https://magisbyteweb.es/wp-content/uploads/2020/06/playa.png);
Y ya tenemos nuestro texto personalizado con una imagen de fondo.

Degradados y imágenes en textos con la versión gratuita de Elementor
Pues aplicar estos efectos en nuestros textos con la versión gratuita de Elementor no puede ser más fácil. En lugar de pegar el código de los estilos CSS en los CSS personalizados de Elementor los pegaremos en los css adicionales de WordPress.
Para ello, desde nuestro administrador nos vamos a apariencia/personalizar/ css adicionales y pegamos el código css.
Importante: recuerda que para que estos estilos se apliquen debes tener definida la ID o la clase en los ajustes avanzados del widget de texto.

Repasa todo lo que hemos explicado en el siguiente vídeo.

Hasta aquí este post en el que te hemos explicado cómo añadir degradados y imágenes en los textos con Elementor. Si tienes cualquier duda o pregunta puedes dejarlos en los comentarios y te responderemos lo antes posible.