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
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on whatsapp
Trucos para Wordpress

Trucos para WordPress

En este nuevo post vamos a ir añadiendo pequeños trucos para tu WordPress, trucos con los que posiblemente te podrás evitar tener que instalar plugins o plantillas específicas para una función en concreto. Esperemos que te ayuden. Índice de contenidos Redireccionar a una página después

Como añadir reseñas de Google a tu Wordpress

Cómo añadir las reseñas de Google a WordPress

Seguro que como internauta un factor que te hace decidirte por comprar un producto o un servicio de una empresa son las reseñas. En el post de hoy vamos a facilitarte esa tarea explicando cómo añadir las reseñas de Google a tu WordPress. Para llevar

Cómo crear botones para descargar archivos en Wordpress

Cómo crear botones para descargar archivos en WordPress

En este tutorial te vamos a explicar cómo crear botones para descargar archivos en WordPress. Y te vamosa a explicar a cómo crearlos de 4 formas distintas: DIVI, Gutenberg, Elementor y el editor clásico. Índice de contenidos Subimos el archivo a descargar a la biblioteca

Suscríbete a nuestro blog

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í.

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í.
Ir arriba