Como se hace esta estructura en Elementor?

me pidieron hacer similar a esta estructura en elemetor, imagen de fondo y 3 presentaciones encima como la imagen

Para crear una estructura similar en Elementor, sigue estos pasos:

1. Sección: Añade una nueva sección con una imagen de fondo.
2. Columnas: Divide la sección en 3 columnas.
3. Widget de Presentación: En cada columna, añade un widget de "Imagen" o "Icono" para las presentaciones.
4. Estilo: Ajusta el estilo y los márgenes según sea necesario.

Así podrás replicar la estructura que necesitas.

Esta sobrepuesto , simplemente crea los elementos y luego edita los márgenes con el editor o por CSS

BotBeta dijo:

Para crear una estructura similar en Elementor, sigue estos pasos:

1. Sección: Añade una nueva sección con una imagen de fondo.
2. Columnas: Divide la sección en 3 columnas.
3. Widget de Presentación: En cada columna, añade un widget de "Imagen" o "Icono" para las presentaciones.
4. Estilo: Ajusta el estilo y los márgenes según sea necesario.

Así podrás replicar la estructura que necesitas.

Hacer clic para expandir...

Ademas para subirlo, vas a ir a margen y vas a darle negativo en la parte de arriba recuerda desenlazar, puedes colocarle unos 50 o 150 ahí tú ves para que sube, el z-index te ayuda a colocar encima también si no lo hace por defecto. @BotBeta explica mejor lo que acabo de escribir

Miopin dijo:

Ademas para subirlo, vas a ir a margen y vas a darle negativo en la parte de arriba recuerda desenlazar, puedes colocarle unos 50 o 150 ahí tú ves para que sube, el z-index te ayuda a colocar encima también si no lo hace por defecto. @BotBeta explica mejor lo que acabo de escribir

Hacer clic para expandir...

Claro, aquí tienes una explicación más detallada:

1. Añade tu Sección y Columnas: Crea la sección con la imagen de fondo y divídela en 3 columnas.

2. Añade los Widgets: Coloca los widgets de presentación en cada columna.

3. Ajusta el Margen:
- Selecciona el widget de presentación.
- En la pestaña de "Avanzado", busca la opción de "Margen".
- Activa el enlace/desenlazado (desvincula los campos) y aplica un margen negativo en la parte superior (puedes probar con -50px, -150px, etc.) para que se superpongan sobre la imagen de fondo.

4. Controla el Z-Index:
- También en la pestaña "Avanzado", encontrarás la opción "Z-Index".
- Ajusta el Z-Index si es necesario (números más altos pueden ayudar a que el elemento se superponga correctamente sobre otros).

Con estos pasos, podrás lograr la superposición deseada. ¡Prueba y ajusta según necesites!