En Elementor , los elementos superpuestos pueden darles una apariencia distintiva, experta y moderna. Además, le permite incluir más información en un espacio compacto sin que parezca estéril o poco interesante.

La buena noticia es que el uso de Elementor hace que sea tan simple como superponer imágenes, texto y otros elementos. Le mostraremos cómo crear una sección superpuesta en Elementor en el tutorial de hoy.

Hacer secciones de Elementor superpuestas

Vaya a las páginas de su tablero e inicie cualquier página usando Elementor. Luego seleccione Editar con Elementor.

Establezca Diseño de página en Elementor Canvas en Configuración de página una vez que su página se haya cargado. luego presione el signo más (+) para agregar una nueva sección con una sola columna.

En su nueva sección, agregue un widget; haga clic en el ícono widget’s y en la búsqueda, escriba divisor para obtener el widget divisor, arrástrelo a su sección.

Establezca Altura en Altura mínima de 400 píxeles en la ventana Editar sección a la derecha después de seleccionar la sección. Dale un color de fondo a continuación en Estilo (mi elección es rojo). Dale al separador un fondo blanco en Estilo después de elegir el separador.

Ahora seleccione la sección y duplíquela.

Ahora diseña la sección de clonación por separado de la anterior y dale un color de fondo diferente.

El siguiente paso es superponer sus dos partes una vez que las tenga.

Comenzaré demostrando cómo apilar las secciones azul y roja.

Necesitará Elementor Navigator para esto. El símbolo de navegación está a la izquierda, cerca de la parte inferior de su sección de edición.

Su navegador aparece cuando hace clic en el icono de navegación. Puede acceder rápidamente a sus secciones con el navegador, que también ayuda a navegar a través de ellas. Además, una parte se oculta cuando hace clic en el "ojo" al lado.

Seleccione la sección azul, elija Avanzado en el menú Editar sección a la izquierda, luego, en Márgenes, asígnele un Margen superior de -100 píxeles. Esto traerá la sección azul a (encima de) la primera sección.

Elija la parte roja, elija Avanzado, seleccione Índice Z y ajústelo a 10 para que la sección roja aparezca encima de la sección azul. Como resultado, la sección roja se coloca automáticamente sobre la sección azul.

Inicialmente, la parte azul es más grande que la roja porque se le da prioridad. Si la parte azul tiene un índice Z de 1, está en la parte superior si la sección roja tiene un índice Z de 0. En esencia, la parte con el índice Z más alto se desliza automáticamente por encima de la inferior.

Imaginemos que tiene más secciones que solo dos.

Debes hacer otra sección para ver cómo funciona esto.

Elige la sección azul y duplícala. Luego elija la sección clonada y establezca su índice Z y Márgenes en 0 píxeles en Avanzado. Puede cambiar su color en Estilo.

Por ejemplo, necesitaría darle a la parte azul un índice Z que sea más alto que las partes roja y verde si desea que esté encima de ambas secciones.

Por ejemplo, el área verde y la sección roja tienen un índice Z de 1 (el valor predeterminado). Decide darle a la sección azul un índice Z de 3 y luego selecciónalo.

Seleccione la parte verde y asígnele un Margen de -20 en Avanzado para que pueda moverse a la sección superior para ver claramente esta modificación. La sección azul es entonces visible por encima de ambas áreas.

Incluso en configuraciones receptivas, este efecto de superposición funciona. Por ejemplo, puede seleccionar el dispositivo móvil en el menú Modo de respuesta y decidir aumentar el índice Z de cualquier parte que desee ver primero.

Terminando

En Elementor , puede hacer eso para superponer áreas, y la superposición incluso funcionará en diferentes dispositivos.

Utilice la sección a continuación para cualquier comentario o consulta. Además, corra la voz entre sus conocidos y siga a CodeWatchers.