¿Alguna vez ha deseado saber cómo mostrar texto encima de una imagen con Elementor ?
En este nuevo tutorial, le mostraremos cómo hacerlo.
Si no tienes idea de lo que queremos hablarte hoy, te invitamos a ver el siguiente video:
Entonces volvamos a por qué estamos aquí.
Para completar este tutorial, necesitará la versión Pro de Elementor, ya que usaremos un código CSS personalizado que solo es compatible con esta versión deElementor.
Descubra también nuestra guía sobre: Cómo crear una galería de imágenes con Elementor
Creemos una nueva sección con una estructura de 3 columnas, luego en el panel, definamos el hauteur en Altura mínimay luego Altura mínima hagamos clic en VH y coloque el control deslizante en 100.
Seleccionemos la columna del medio, y en la pestaña Estilo, en la sección Fondo hagamos clic en Clásico para tipo de fondoy, a continuación, seleccione un color oscuro.
Pongamos en esta columna el Widget de sección interna. El widget de la Sección Interna está configurado por defecto con 2 columnas, eliminemos una de ellas. Configuremos el resto en el panel modificando su hauteur en Altura mínima y Altura mínima pongamos el cursor en 400.
Lea también: Elementor: cómo hacer zoom en una tarjeta de perfil
Entonces, en Alineamiento vertical seleccionemos Medio.
Luego suelta el Widget de título en la sección interior ingresemos como Fotografía de Título, y en Alineación, Elijamos Centrar.
En la pestaña Estilo vamos a modificar el color del Título para que sea visible si no lo es,
dejemos caer un Widget de editor de texto bajo el Widget de título. Luego, en la pestaña Estilo, en Alineación elija Centrar. También cambiemos el color del texto para que sea visible.
Ver también: Elementor: Cómo agregar un divisor para crear una sección
Seleccionemos el columna central y en su pestaña Estilo, restablezca el color de fondo y cargue una imagen, luego Puesto de trabajo seleccionemos centrado centrado, repetición en no repetir, Cubrir en Tamaño español.
En la sección frontera vamos a modificar todo radios de borde de 12. En sombra de la caja, coloque el control deslizante en 0 para Horizontal, Para 0 para Vertical, a 40 en Desenfoque, para -10 en emisión. Debería ver un hermoso efecto de sombra debajo de su imagen.
Sobre superposición de fondo, Seleccione Clásico para tipo de fondo y los colores elige uno de color negro, en Opacidad, establezcamos el control deslizante en 0.55
En la pestaña Avanzadovamos a agarrar 20 para todos los márgenes.
Seleccionemos nuestro Sección interna y ve a su pestaña Avanzado en la sección Custom CSS copia y pega el siguiente fragmento de código:
/*Afficher ou masquer un contenu au survol*/
selector{
opacity: 0;
transition: 0.5s ease-in-out;
}
selector:hover{
opacity: 1;
}
Seleccionemos una vez más la columna del medio de nuestra sección, en su pestaña Estilo, y en la sección superposición de fondo, comprueba que estamos en la pestaña NORMAL, bajemos Opacidad à 0.
Luego haga clic en la pestaña INFORMACIÓN GENERALLuego, el Clásico para tipo de fondo y los colores, seleccione un color oscuro, entonces laopacidad en 0.55Y para Duración de la transición pongamos el control deslizante en 0.5.
Aquí está el resultado final de nuestra manipulación.
Duplicamos nuestra columna 2 veces y eliminamos las otras 2 columnas vacías. Todo lo que queda es cambiar la imagen de fondo y el contenido editores de texto para las 2 nuevas columnas.
Obtenga una vista previa de su trabajo en tabletas y teléfonos inteligentes para ver cómo se ve. Luego guárdelo o actualícelo.
Listo. Acaba de mostrar un texto encima de una imagen con el creador de página Elementor.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo mostrar texto sobre una imagen. Si tiene alguna inquietud sobre cómo llegar, háganoslo saber dentro de 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.
...
gracias sencillo y efectivo