Necesito saber cómo agregar una imagen al texto en Elementor ?
Elementor hizo posible que todos se convirtieran en diseñadores web sin necesidad de tener conocimientos avanzados de CSS. Su editor visual le permite crear una hermosa página web sin escribir una sola línea de código CSS. Puede agregar los elementos de diseño (widgets) que desee y personalizarlos en el panel de configuración.
Aun así, tener algunas habilidades de CSS sería una gran ventaja para usarElementor. Podrá aplicar estilos únicos a su página web usando la función CSS personalizado aElementor. En este artículo, le mostraremos cómo agregar una imagen al texto en Elementor usando la función CSS personalizada de Elementor.
Dans ciertas outils diseños como GIMP y Photoshop, generalmente necesita agregar un marcador de capa para agregar una imagen en el texto. En Elementor, puede lograr lo mismo agregando código CSS que el widget de título y el widget de texto de Elementor no tienen una opción de configuración para agregar una imagen como fondo.
Agregar una imagen a un texto de Elementor
Antes de comenzar, asegúrese de haber actualizado su versión de Elementor a la versión pro si no lo ha hecho, ya que la funcionalidad CSS personalizada solo está disponible en Elementor Pro. Una vez que esté listo, cree una nueva página o plantilla y edítela con Elementor. Por supuesto, también puede editar una página o plantilla existente.
Ver también: Elementor: Cómo agregar una tabla de contenido
Agregue el widget de título al cuadro de edición.
Vaya al panel de configuración para reemplazar el texto predeterminado debajo de la pestaña Contenido.
Lea también nuestra guía sobre: Elementor: Cómo usar el selector de color
Ir a la pestaña Estilo para personalizar el texto. Puede establecer el tamaño del texto, el estilo de fuente, etc ... haciendo clic en el icono de lápiz en Opción de tipografía debajo del bloque Título. Dado que desea utilizar una imagen como fondo para su texto, no es necesario establecer el color del texto.
Luego ve a la pestaña Avanzado y abre el bloque Personalizado CO y pegue el siguiente código CSS. Reemplace la URL de la imagen con su propia URL de imagen.
selector .elementor-heading-title
{
background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70% ;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}Aquí está el ejemplo.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo agregar una imagen al texto en Elementor. Si tiene alguna duda sobre cómo llegar favísanos en el comentarios.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
