Superposición de líneas de cuadrícula Elementor (Pro): una cuadrícula de diseño para diseños alineados
Grid Line es una extensión Master Addons Pro que dibuja una cuadrícula de columnas sobre su página dentro del editor Elementor. Estableces el número de columnas, el canalón, el ancho máximo y el desplazamiento en Configuración de página, luego alineas secciones y widgets con las columnas, la forma en que trabajan los diseñadores en Figma. La cuadrícula solo se muestra mientras editas y los visitantes nunca la ven en la página publicada.
Cómo utilizar la línea Grid en Elementor
Grid Line es una configuración por página, por lo que la activa solo donde la necesita.
- Con Master Addons Pro activo, vaya a Complementos maestros > Extensiones y encender Línea de cuadrícula.
- Abra una página en Elementor y haga clic en Configuración de página icono en la barra superior.
- En el Ajustes pestaña, expandir Línea de cuadrícula y conjunto Habilitar para seguir.
- Conjunto Columnas, Ancho máximo y Canalón para que coincida con su diseño, y agregue un Compensación si su diseño tiene márgenes laterales.
- Cambie a la vista de tableta y móvil para establecer valores para esas pantallas.
- Alinee sus secciones y widgets con las columnas. La cuadrícula no aparece en la página publicada.
Columnas, Canalón, Ancho y Desplazamiento
La sección Línea de cuadrícula en Configuración de página tiene un Habilitar cambiar, Color de cuadrícula (un gris translúcido claro de forma predeterminada), Columnas de 1 a 12, Ancho máximo, Compensación, Canalón y Índice Z. Las columnas, el ancho máximo, el desplazamiento y el canalón pueden tomar diferentes valores en computadoras de escritorio, tabletas y dispositivos móviles.
- Default: 12 columnas, 1140px de ancho máximo y canalón de 15px en escritorio, 1025px y 10px en tableta, 768px y 8px en móvil.
- Coincide con tu tema: establezca Max Width en el ancho del contenido de su sitio para que las columnas se alineen con el diseño real.
- Visibilidad: elija un color con transparencia para que su contenido siga siendo legible y mantenga el índice Z en 999 para que la cuadrícula se asiente encima del diseño.
Formas de comprobar un diseño contra una cuadrícula en Elementor
Elementor no tiene una superposición de cuadrícula de diseño propia. Estas son las opciones habituales.
| Característica | Elementor solo | Inspector de red del navegador DevTools | Línea de cuadrícula de complementos maestros |
|---|---|---|---|
| Precio | Gratis | Gratis | Complementos maestros Pro |
| Diseñe la cuadrícula de columnas sobre la página | No | Sólo en elementos que utilizan CSS Grid | Sí, en toda la página |
| Configurar dentro del editor Elementor | No | No, inspeccionas el marco de vista previa | Sí, en Configuración de página |
| Columnas, canalones y ancho por dispositivo | No | Sigue la propia cuadrícula del elemento | Sí |
| Visible para los visitantes | No | No | No |
Si su diseño ya utiliza el contenedor Grid de Elementor, el inspector de cuadrícula del navegador puede mostrar esas pistas de forma gratuita. Grid Line es para verificar cualquier diseño, incluidos los contenedores flexbox, con una cuadrícula de diseño fija como la de su archivo Figma.
Alte ayudante de editor: Qué elemento (gratis) y Posicionamiento (gratis).
Preguntas frecuentes sobre la línea Grid
¿la cuadrícula afecta el aspecto de mi sitio en la interfaz?
No. La cuadrícula solo se muestra dentro del editor Elementor. Los visitantes ven la página publicada sin él, incluso si deja Activar.
¿cuál es la diferencia entre canalón y compensación?
El canalón es el espacio entre columnas. El desplazamiento es el espacio entre el borde de la pantalla y donde comienza la cuadrícula. Junto con Max Width, le permiten copiar el ancho del contenido y el espaciado de las columnas de su tema.
¿puedo usar esto con el sistema de contenedor Flexbox propio de Elementor?
Sí. La cuadrícula se dibuja en toda la vista previa, por lo que funciona tanto con contenedores flexbox como con contenedores grid y secciones más antiguas. No encaja elementos en las columnas, por lo que usted mismo los alinea.
¿grid Line es gratuito?
No. Grid Line es parte de Master Addons Pro.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
Duplicador de publicaciones/páginas
