Continuamos la serie de vídeos sobre Elementor con un recurso de diseño bastante utilizado en la actualidad.
La superposición de imágenes en Elementor se puede lograr de una forma muy sencilla usando los márgenes negativos. Podemos superponer imágenes sobre imágenes, sobre texto, sobre fondos sólidos…lo que se nos ocurra.
Se pueden consiguen efectos tan chulos como los siguientes:
Como te comento, lo único que vamos a tener en cuenta para ello es el apartado de márgenes, dentro de la pestaña avanzado.
A continuación te muestro cómo hacerlo en vídeo.
26 comentarios
Hola Alberto!, lo primero muchas gracias por responderme a través del video de Youtube (Tutorial Elementor – Superponer imágenes o texto) lo que te comentaba, cuando el texto lo pongo a la derecha, y le meto el margin negativo, sí monta encima de la caja de la izquierda, pero si lo hago al revés, es decir, el texto a la izquierda y la imagen, a la derecha, choca contra la imagen y no permite montarlo encima… me estoy volviendo un poco loca con este tema, por que me resulta rarísimo, tengo fotos también para que lo veas. si necesitas. o si necesitas mas info me dices. muchas gracais!!
Hola tengo el mismo problema, no veo la respuesta. Tiene solución?
Hola Natalia, prueba en la de la izquierda poner el margen derecho a negativo y el mismo margen izquierdo en positivo. Saludos.
puedo poner un link a una imagen de fondo ??
Hola Manuel, echa un ojo a este otro vídeo mío a ver si es lo que quieres: https://www.youtube.com/watch?v=T9LNHx3_fKI
Hola. Me sumo a la pregunta de Nazareth porque me ocurre exactamente lo mismo. En mi caso tengo 3 columnas, con una imagen cada una de ellas, y quiero desplazar las de ambos lados un poco hacia el centro, de manera que la imagen central se coma un poco de las dos. Pues bien, la imagen de la columna de la derecha la puedo desplazar sin problemas, pero la de la columna izquierda no; en cuanto «choca» con la columna central empieza a cambiar su tamaño, pero no se mete dentro de la columna central.
¿Puedes ayudarme con esto?
Hola Jose, prueba en la de la izquierda poner el margen derecho a negativo y el mismo margen izquierdo en positivo. Saludos.
Ahora si! Con lo fácil que era, me siento estúpido. Estas cosas suelen ser así de simples pero no das con ellas hasta que alguien te lo dice. Muchas gracias!
Buenas tardes, y muchas gracias por dedicar tu tiempo a ayudarnos a los principiantes con elementor.
Me surge una cuestión que seguro te han expuesto…. Cuando intento superponer texto de derecha a izquierda, sin ningún problema, el texto monta encima de la imagen, pero al reves no. No es que no se desplace, sí lo hace, pero el texto queda DEBAJO de la imagen….
Como se define cual es la capa superior o la inferior?
Gracias!
Me contesto a mi mismo… seleccionando en la columna el Z-Index: 0 o 1 podemos variar la capa para que se muestre arriba o abajo.
Hola buenas noches, como estas muchas gracias por los tutoriales, estoy con un tema que llevo horas de horas y no consigo el resultado, necesito subir una fila con unos botones,,superponerla en la base de mi slider, no logro hacerla, no se deja,,mi columna queda debajo del slider pero yo necesito que este sobre, todo esto lo vi en un demo y fue hecho en wpbakery pero yo estoy tratando en elementor y no lo consigo,, podrias ayudarme? gracias
Hola Juan, intenta hacerlo con margen negativo superior. Te vas a la columna -> Avanzado y en la casilla del margen top le pones un valor negativo para que suba. También seguramente necesites retocar el z-index y darle un valor superior a 0. Saludos.
Buenas tardes Alberto, voy siguiendo tus tutoriales que me han ayudado mucho. El caso es que necesito hacer un texto alrededor de una imagen, lo he hecho de forma manual, haciendo un bloque de texto al lado de la imagen y otro a bajo de la imagen, quedando con un resultado pasable, pero a la hora de adaptarlo a la vista tableta….se ve un desastre. Hay alguna opción en elementor para eso que quiero hacer? Saludos
Hola Tania, puedes usar los parámetros de posición absoluta y ancho integrado para colocar el texto donde quieras, está dentro de Avanzado -> Colocación. Eso sí, en tablet y móvil seguramente vas a tener que modificar su posición..pero lo puedes hacer con los ajustes de responsive de estos atributos. Saludos.
Saludos Alberto, excelente tu explicación… Mi pregunta es la siguiente, si quiero darle a la superposición una forma de ola en una de las orillas para que haga la función de adornar mas la vista del diseño, como se podria hacer?…. gracias de antemano, exitos…
P.D.: el efecto de ola, es algo asi que las imágenes o la superposición no sea rectangular o cuadrada, sino que tenga una especie de redondeo en forma de ola, se entiende?
Hola Francisco, sí, creo que te entiendo. El tema es, a que le quieres superponer ese divisor de forma? Si lo pones en la parte de abajo de una sección y lo aplicas con «invertir» no te funciona? Saludos.
Hola, ¿Hay alguna forma de hacer esta composición pero logrando que se vea bien desde el móvil?
Hola Tatiana, puedes modificar el tamaño de cada columna si te vas al apartado de disposición. Quizá si las pones a 50% cada una te quede más o menos bien pero teniendo en cuenta los anchos de los móviles lo normal es tener una columna encima de otra. Saludos.
Hola Alberto, una pregunta. Tengo una imagen y quiero aplicarle un fondo de color que ocupe la mitad de la imagen. Como hago para ajustar el tamaño del background y que me quede alineado con la imagen?.
Gracias!
Hola Santiago, para hacer esto tienes que usar las columnas con las propiedades de Fondo. Haz una sección y en el fondo coloca una imagen, luego dentro de esa sección coloca dos columnas al 50% y rellena también el fondo de una de ellas con un color. Saludos.
Hola Alberto, necesito que en mi página del blog, donde aparecen todos mis artículos, el título aparezca sobre la imagen y no debajo. Es posible? No me refiero adentro de cada artículo en particular, sino en la versión resumida en la página del blog. Es posible? Gracias
Hola Nicanor, esto tendrías que hacerlo mediante código, aplicando un margen superior negativo a la clase del título para que subiera hacia arriba. Saludos.
Buenas tarde Alberto!
Muchas gracias por tus tutoriales ¡son de gran ayuda!
Estoy intentando hacer un carrusel que tenga «dos capas», una primera en transparencia que es como un marco que quiero dejar fijo y otra que es la que quiero que sea móvil y que vaya cambiando.
He intentado hacerlo de varias maneras, pero no lo consigo. ¿Es posible hacerlo? ¿Sabes de alguna manera para solucionarlo?
¡Gracias!
Hola Pau, no visualizo muy bien lo que quieres hacer, tienes algún ejemplo de alguna web para enseñarme?
Una cosa que puedes hacer es revisarte los addons de carrusel de terceros para Elementor a ver si alguno cumple con lo que quieres. Aquí tienes una ayuda: https://www.which-addon.com/elementor-widgets/carousel/
Cualquier cosa me comentas por aquí o al form de contacto.
Saludos.
Hola Albert,
Me gustaría hacer el ejemplo 2 del vídeo en el que sobrepones una imagen sobre un cuadro de texto, pero que el cuadro quede por encima en vez de por abajo y que sea a una imagen y la imagen inferior sea un carrusel.
Quizás así se entiende mejor.
Para que un elemento quede por encima de otro tienes que jugar con la opción z-index. Si tiene un z-index mayor quedará por encima.
Si pones el carrusel en una columna y la imagen en otra, puedes jugar con los márgenes negativos para hacer esa superposición.