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.

Panel Grid Line con Enable activado y un selector Grid Color gris translúcido al lado del editor Elementor que muestra una superposición de columnas

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. Mira esto Documentos de extensión de línea de cuadrícula.

  1. Con Master Addons Pro activo, vaya a Complementos maestros > Extensiones y encender Línea de cuadrícula.
  2. Abra una página en Elementor y haga clic en Configuración de página icono en la barra superior.
  3. En el Ajustes pestaña, expandir Línea de cuadrícula y conjunto Habilitar para seguir.
  4. 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.
  5. Cambie a la vista de tableta y móvil para establecer valores para esas pantallas.
  6. Alinee sus secciones y widgets con las columnas. La cuadrícula no aparece en la página publicada.
Configuración de línea de cuadrícula en Configuración de publicación de Elementor con columnas, ancho máximo, desplazamiento, canalón e índice z al lado de una página con una superposición de columna de luz

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ísticaElementor soloInspector de red del navegador DevToolsLínea de cuadrícula de complementos maestros
PrecioGratisGratisComplementos maestros Pro
Diseñe la cuadrícula de columnas sobre la páginaprohibidoSólo en elementos que utilizan CSS GridSí, en toda la página
Configurar dentro del editor ElementorprohibidoNo, inspeccionas el marco de vista previaSí, en Configuración de página
Columnas, canalones y ancho por dispositivoprohibidoSigue la propia cuadrícula del elementoSí
Visible para los visitantesprohibidoprohibidoprohibido

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

Conozca las consultas más solicitadas que tienen los usuarios sobre Grid Line y encuentre respuestas en un solo lugar.
¿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.

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.

No. Grid Line es parte de Master Addons Pro.

Widgets y extensiones de Elementor de tendencia

Cree sitios web sofisticados en menos tiempo.

Master Addons Extensión Glassmorphism para Elementor: tarjetas de vidrio esmerilado con el control Blur Value configurado en 20px

Vidriomorfismo

Inicio Extensión de Glassmorphism Elementor gratuita: Efecto del vidrio esmerilado en un solo cambio El Glassmorphism es el esmerilado...
Ver detalles
Extensión Master Addons Container Extras para Elementor: contenedor con un límite de ancho máximo de 1400px, con controles de ancho máximo, alto máximo, ancho mínimo y alto mínimo

Extras de contenedores

Inicio Elementor Container Controles de ancho y alto máximo Container Extras es un maestro gratuito...
Ver detalles
Extensión de patrones de complementos maestros para Elementor: héroe con el estilo Purple Gradient Grid Left, tres estilos de patrones más y el panel Habilitar patrón

Patrones

Inicio 70+ Patrones de fondo de Elementor gratuitos Patrones es una extensión de complementos maestros gratuita que agrega...
Ver detalles
Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]

Duplicador de publicaciones/páginas

Inicio Duplicar páginas y publicaciones de Elementor en un clic Publicación/Duplicador de páginas es un maestro gratuito...
Ver detalles
Extensión de la barra de progreso de lectura de complementos maestros para Elementor: barra azul llena al 42% en la parte superior de una página de política de privacidad, con configuraciones de habilitar, colocar, altura y llenar color

Barra de progreso de lectura

Inicio Agregue una barra de progreso de lectura en WordPress (Elementor) La barra de progreso de lectura es gratuita...
Ver detalles