Los diseñadores trabajan encima de una cuadrícula de columnas. Así es como los titulares, las cartas y los botones terminan alineándose en lugar de separarse unos pocos píxeles. Elementor no te muestra uno, por lo que la alineación suele ocurrir a simple vista. El Extensión de línea de cuadrícula en Complementos maestros Pro soluciona que con una superposición de cuadrícula de columnas puedes activar directamente dentro del editor.
Usted controla la cantidad de columnas, el canalón, el ancho máximo, el desplazamiento y el color de la superposición, directamente desde la Configuración de la página de Elementor. Aquí se explica cómo habilitarlo y qué hace cada opción.
Qué hace la extensión Grid Line #
Grid Line dibuja un conjunto de columnas verticales espaciadas uniformemente sobre su página dentro del editor Elementor. La superposición se encuentra encima de su diseño solo en el editor, por lo que los visitantes nunca la ven y puede verificar si sus secciones y widgets realmente se alinean en la cuadrícula que un diseñador usaría en Figma o Photoshop.
El valor predeterminado es una cuadrícula de 12 columnas con un ancho máximo de 1140px con un canalón de 15px, que se reduce a 1025px y 10px en la tableta y 768px y 8px en el móvil. Cada valor es ajustable por dispositivo y toda la superposición se enciende y apaga con un solo interruptor.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Nuevo en el complemento? Sigue el guía de instalación primero.
- A Complementos maestros Pro licencia, porque Grid Line es una extensión Pro.
Cómo habilitar la extensión Grid Line #
Paso 1: enciéndelo en la pestaña Extensiones #
Desde su panel de WordPress, vaya a Complementos maestros y abre el Extensiones pestaña. La línea de cuadrícula vive en el Mostrar widgets agrupa con una insignia Popular, junto a Glassmorphism y Patterns. Haga clic en su palanca para que se vuelva violeta.
Paso 2: guarda tus cambios #
Desplácese hacia arriba y haga clic Guardar cambios. Un aviso verde de “Configuración guardada correctamente” confirma que la extensión está activa. Si el editor Elementor estaba abierto, recárguelo una vez.
Cómo mostrar la cuadrícula en el editor Elementor #
Abra cualquier página con Elementor y haga clic en Configuración de página icono en la barra superior. Debajo del Ajustes pestaña encontrarás una nueva Línea de cuadrícula sección marcada con la insignia MA violeta. Voltear Habilitar to On, y la superposición de columnas aparece inmediatamente en el lienzo.
Debido a que la configuración se encuentra en Configuración de página, la cuadrícula es por página: usted decide dónde se muestra y no lo sigue en todos los documentos.
Se explican los ajustes de la línea de cuadrícula #
- Habilita: activa y desactiva la superposición de esta página.
- Color de cuadrícula: el color de las columnas. Elija la muestra global o establezca un color personalizado con el selector. Un valor de opacidad bajo mantiene su contenido legible bajo la superposición.
- Columnas: cuántas columnas dibujar, del 1 al 12. 12 es el estándar, pero puedes hacer coincidir cualquier cuadrícula que utilice tu diseño.
- Ancho máximo: el ancho total de la cuadrícula, 1140px de forma predeterminada. Haga coincidirlo con el ancho del contenido de su sitio para que las columnas se alineen con su diseño real.
- Compensación: empuja la cuadrícula desde los bordes cuando su diseño lo necesita.
- Canalul: el espacio entre columnas, 15px de forma predeterminada.
- Index Z: el orden de apilamiento de la superposición, 999 de forma predeterminada, para que la cuadrícula permanezca visible sobre su contenido.
Las columnas, el ancho máximo, el desplazamiento y el canalón son controles responsivos: haga clic en el ícono del dispositivo al lado de cada uno para establecer diferentes valores para escritorio, tableta y dispositivos móviles.
Cambia el color de la cuadrícula #
Haga clic en la muestra personalizada al lado Color de cuadrícula para abrir el selector de color. Cualquier valor HEXA funciona y el canal alfa es lo más importante: algo así como un 50 por ciento de opacidad te brinda columnas visibles sin ocultar el diseño debajo.
Sintoniza las columnas y canalones #
Arrastre los controles deslizantes y las actualizaciones superpuestas en vivo. En el siguiente ejemplo, el canalón tiene hasta 58 px y la cuadrícula tiene un tinte personalizado, por lo que se lee claramente sobre un fondo claro mientras las tarjetas de precios siguen siendo legibles.
Cuando el diseño está alineado, puedes voltearlo Habilitar retroceda para obtener un lienzo limpio. Dejarlo encendido no hace daño, porque la cuadrícula nunca aparece en la página publicada.
Cuando Grid Line le ahorra tiempo #
- Coincidencia de un archivo de diseño. Reconstruya un diseño Figma o XD en la misma cuadrícula de 12 columnas en la que fue diseñado, en lugar de distancias llamativas.
- Alineación de secciones. Verifique que los elementos de las diferentes secciones comiencen y terminen en la misma columna.
- Serie de páginas consistentes. Mantenga las páginas de destino creadas por diferentes miembros del equipo en una cuadrícula compartida.
- Pulido de plantillas importadas. Deje caer la superposición en una página desde a kit de plantilla y detecta los elementos que se encuentran fuera de la red.
- Decisiones de espaciamiento. Utilice las líneas de canalones como regla rápida al configurar el ancho y el acolchado de las columnas.
Vídeotutorial #
¿prefieres verlo en movimiento? Este video recorre habilitando Grid Line y ajustando la superposición en el editor Elementor.
Preguntas frecuentes #
¿qué es la extensión Grid Line en Master Addons?
Es una extensión Master Addons Pro que dibuja una superposición de cuadrícula de columnas en el editor Elementor. Estableces el número de columnas, canalón, ancho máximo, desplazamiento y color de Configuración de página, luego usas las columnas para alinear secciones y widgets como lo hacen los diseñadores en Figma.
¿dónde encuentro la configuración de la línea de cuadrícula?
En el editor Elementor, abra Configuración de página desde la barra superior y permanezca en la pestaña Configuración. Después de habilitar la extensión en el panel de complementos maestros, aparece allí una sección Línea de cuadrícula con una insignia MA, manteniendo presionada la tecla Habilitar y todas las opciones de cuadrícula.
¿puedo cambiar el número de columnas y el canalón?
Sí. El campo Columnas toma del 1 al 12, con 12 como predeterminado, y el control deslizante Canalón controla el espacio entre columnas. El ancho máximo y el desplazamiento dan forma al tamaño de la cuadrícula. Cada uno de ellos responde, por lo que el escritorio, la tableta y el móvil pueden usar valores diferentes.
¿se muestra la superposición de cuadrícula en cada página?
No. Grid Line es una configuración por página dentro de Configuración de página, por lo que la habilita solo en las páginas donde desea la superposición. Desactive el interruptor Habilitar cuando termine de alinearse y esa página volverá a un lienzo limpio. La cuadrícula nunca aparece en la página publicada de ninguna manera.
¿la extensión Grid Line es gratuita?
No. Grid Line es una extensión Pro en Master Addons, que figura en el grupo Display Widgets de la pestaña Extensiones. Ver el página de precios para los planes.
Envolviendo #
El Extensión de línea de cuadrícula le da a Elementor lo único que ya tiene cada herramienta de diseño: una cuadrícula de columnas real para construir. Habilítelo una vez en el panel, enciéndalo desde Configuración de página cuando lo necesite y ajuste las columnas, el canalón y el color para que coincidan con su sistema de diseño. Explora el resto del Widgets y extensiones de complementos maestros para más herramientas como esta, incluida la Qué elemento coloque etiquetas para el editor.
