Logo Marieu Corp
Tutorial

✅¡Solución al error Z-Index en Elementor y WordPress!

Aplicación Z-Index. Aprenderás a superponer adecuadamente los elementos en tu sitio web. Con vídeo paso a paso.

 

ELEMENTOR

Z-INDEX

Mar 18, 2024

Montoya A.

20min de lectura

Reproducir video acerca de Z-Index Elementor

Hola amigos de Marieú Technology Corporation, ¡solución al error Z-Index de superposición en Elementor y WordPress! Efectivamente, en esta guía, paso a paso, aprenderás a aplicar adecuadamente los elementos en tu sitio web en Elementor y WordPress.

Elementor es un maquetador de páginas  web o «page builder». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

¿Cómo solucionar el error Z-Index de superposición en Elementor y WordPress?

Entonces, aquí tenemos el diagrama de arquitectura. ¿Qué herramientas o aplicaciones vamos a utilizar?, vamos a utilizar WordPress, Elementor y, dentro Elementor, la opción de Z-Index. Dentro de Elementor, vamos a trabajar con secciones, vamos a ubicar dentro del header para revisar el menú, punto número uno. Punto número 2, vamos a levantar este bug dentro de la opción de editar sección, slash avanzado y slash Z-Index. Punto número 3, trabajaremos en modo adaptable, en versión mobile. Recuerden que el problema de menú, en este caso, es en la versión mobile, más no, en la versión de desktop. Ahora, si entramos, un poco, al Z-Index, especifica ese orden de la pila de elementos. Es decir, si tenemos como tres o cinco capas, mediante el Z-Index, nosotros vamos a poder levantar la capa que sea superficial, o sino, que esté metido dentro de las demás capas.

Diagrama de arquitectura Resolver bug de menu version mobile Marieu

Diagrama de Arquitectura Resolver bug de menú versión mobile.
Fuente: Propia, mediante software Miro.

Entonces amigos, estamos en WordPress. Vamos a ingresar a páginas. De todas las que tenemos, vamos a seleccionar contactos, ingresamos a contactos. Entonces, una vez que tengamos abierto la página de contactos en modo edición, vamos a ir en modo adaptable en la versión mobile. Recuerden que tenemos varios tipos de vistas, modo escritorio, modo Tablet y mobile. Seleccionamos la versión móvil y ¡ahí está! Si seleccionamos el menú, tenemos el problema de las capas, el Z-Index. De hecho, va a incomodar mucho el cliente. Si estamos, de repente, en principal, no va a poder trasladarse a otra página; solamente va a poder ver la página principal. Entonces, es un problema para el cliente y que tenemos que solucionarlo cuando antes.

¿Cómo corregimos este bug?, vamos a ir a avanzado, abrir el Navigator y seleccionamos la primera sección. Una vez estamos en la primera sección, vamos a ir avanzado y, en avanzado, nos vamos a ir a Z-Index, ¡aquí está! Entonces, en Z-Index vamos a ir subiendo, poco a poco, con el fin de ver cuál sería la capa adecuada, para ver el menú con todas las opciones y podemos seleccionala. Entonces, subimos el Z-Index, ¡ahí está!, vemos que hay algunas capas que se están desvaneciendo, es decir, se quedan atrás. Si nosotros bajamos un poco vemos que ya está todo corregido. De hecho, para que nosotros, de repente, evitemos algunos problemas con algunos cambios posteriores, ya lo podemos dejarlo en 10, ponemos 10, recuerden actualizar.

Z Index Elementor WordPress Marieu

Z-Index Elementor WordPress.
Fuente: Propia, mediante software MailerLite.

Resultados Finales

Y, ahora, vamos a poner vista previa para ver cómo quedó, entonces, ¡ahí está! Ya en la vista previa, nosotros, lo que vamos a hacer es lo siguiente: reducimos un poco nuestra ventana de Chrome y ¡ahí está! En el momento que nos aparezca el ícono para abrir el menú desplegable, ya lo podemos validar, ¡muy bien! ¡Listo, Gracias amigos de Marieú Technology Corporation!

Montoya Godenzi Daniel Alejandro escala 20

EL AUTOR

Daniel Alejandro Montoya Godenzi

Alejandro, con el grado de magíster en Administración y Dirección de Proyectos e Ingeniero Mecatrónico, dispone de experiencia en proyectos de entorno tecnológico digital. Forma parte del equipo de Marieú Technology Corporation. En su tiempo libre, le gusta crear nuevos proyectos, leer un libro o ver una serie.

SIGUE LEYENDO

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Logo Julio 2023 fondo transparente texto blanco

Marieú ofrece servicios de creación de páginas web, marketing digital, producción audiovisual y catering, que facilita los negocios en las empresas.

Boletín informativo

Al ingresar acepta nuestros T&C y las Políticas de privacidad.

Marieú Technology Corporation
©Todos los derechos reservados