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

Hola amigos de Marieú Technology Corporation, ¡solución al error Z-Index 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: ¿Cómo solucionar el error Z-Index en Elementor?
Fuente: Propia, mediante software Miro.

Entonces amigos, 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 solucionamos el problema y entender el Z-Index en diseño web?, 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, para llegar a solucionar Z-Index Elementor, 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, conflictos de capas en Elementor que 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

Ahora, para validar los resultados finales, de corregir el posicionamiento de elementos en Elementor, 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 *

Marieú Technology Corporation 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