Añadir Degradados y imágenes a los textos con Elementor

Añadir degradados y imágenes en los textos con Elementor

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.

ejemplos de imagenes elementor

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.

Imagen en texto WordPress

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.

imagenes dentro de encabezados Elementor WordPress

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.

 

Imagenes y degradados en texto con Elementor gratis

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.

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor? Dejalo en comentarios, prometemos responderte.

Compártenos en tu red social favorita

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Scroll al inicio