Qué es Elementor Container
Elementor Container es una nueva función del constructor de páginas Elementor para crear diseños de página muy flexibles y adaptables. Container proporciona un control más potente y más opciones de diseño que los tradicionales diseños de sección. Es compatible con dos modos de diseño principales: Flexbox y Grid.
1. ¿Cómo activar Elementor Container?
En primer lugar, debe combinar su plugin Elementor Page Builder con el pluginPlugin Elementor ProActualiza a la última versión.
Después de actualizar el plugin a la última versión, vaya aElementor>estableceren la pestaña Características
En Características estables ponerContenedor de rejillaActivación:
activarContenedor FlexboxSi quieres usar el Mega Menu que viene con Elementor, también necesitas activar las funciones de Elementos Anidados y Menú.
Una vez completados los ajustes, arrastre y suelte la página en la parte inferior y haga clic en el botón Guardar.
2. ¿Cómo convertir una sección de la página en un contenedor?
Después de entrar en el editor de páginas seleccione la Sección que desea convertir en Contenedor y arrastre el Contenedor al deslizador seleccionado.
Tras la conversión, se copiará automáticamente un módulo Contenedor idéntico bajo el módulo Sección convertido. Tras confirmar que no hay ningún problema con el módulo Contenedor, puede eliminar directamente el módulo Sección para completar la conversión de Sección a Contenedor.
3. Algunas ventajas de Elementor Container sobre Section
3.1 Mayor capacidad de respuesta
Container aprovecha al máximo los controles de la maquetación para realizar automáticamente los ajustes necesarios. Esto significa que, en la mayoría de los casos, no es necesario realizar muchos ajustes para conseguir un diseño adaptable automático del contenido. Section, por otro lado, requiere que configures y ajustes manualmente para diferentes dispositivos para lograr el efecto responsive perfecto.
Container también permite personalizar el diseño adaptable a distintos dispositivos para satisfacer necesidades específicas.
3.2 Mayor control del diseño
Container tiene más libertad y flexibilidad que Section. Puede anidar varios niveles de Contenedores y personalizar su anchura y altura. Esto hace que la creación de plantillas complejas y ricas en funciones sea mucho más rápida y sencilla. Container ofrece más flexibilidad que los diseños tradicionales, mientras que los diseños Section sólo pueden dividir los widgets en secciones y columnas.
3.3 Mejora de la velocidad de la página
¿Lentitud de Elementor? Los diseños por secciones pueden resultar un poco lentos, pero no Container.
Elementor Container mejora la velocidad de la página reduciendo el número de separadores utilizados. Las secciones, por otro lado, suelen contener más columnas y secciones internas, y cuantos más separadores haya, más grande se hace el Modelo de objetos del documento (DOM), lo que aumenta los tiempos de carga de la página. El uso de Container reduce el número de peticiones de datos y encoge el DOM, lo que se traduce en un aumento significativo de la velocidad de carga de la página.
3.4 Añadir enlaces directamente al contenedor
Al crear un elemento de bucle, puede añadir enlaces a todo el contenedor en lugar de añadir enlaces a cada elemento. Simplemente cambie la etiqueta HTML del Contenedor para que diga<a>etiquetas. De este modo, la gestión de enlaces resulta más sencilla y eficaz.
4 Ajustes básicos de Elementor Container
4.1 FlexBox y Grid para Elementor Container
FlexBox y Grid son dos modos de maquetación para diferentes necesidades de diseño, FlexBox es adecuado para una maquetación muy libre, mientras que Grid sigue una cuadrícula. Puede elegir el modo de diseño adecuado en función de sus necesidades específicas.
a. ¿Qué es el contenedor FlexBox?
FlexBox Container es un diseño flexible que ofrece opciones de diseño muy libres para su sitio web.
b. ¿Qué es un contenedor Grid?
Grid Container es un método de diseño de rejilla que controla la disposición de los elementos estableciendo filas y columnas para mantener todas las rejillas altamente consistentes. Si su página requiere un diseño de cuadrícula, el uso de Grid Container le resultará más cómodo y eficaz.
4.2 ¿Cómo añadir un contenedor a una página?
a. Añadir a través del lienzo
Cuando necesites añadir el Contenedor en el lienzo de Elementor, haz clic en el signo + para el módulo de abajo y haz clic en el signo + en el área emergente.
A continuación, haga clic en Flexbox o Grid en el diseño emergente para añadir el contenedor correspondiente a la página.
Este método se utiliza para añadir el Contenedor superior en la página, que es el contenedor de diseño más externo de la página. El contenedor superior es externo al lienzo de la página y no anida otros contenedores.
Puede utilizar varios Contenedores en una página, o utilizar un Contenedor y anidar otros Contenedores de maquetación en su interior, en función de la planificación de su maquetación.
b, mediante elementos de diseño de arrastrar y soltar para añadir
Para añadir un contenedor interno anidado, arrastra y suelta el elemento de diseño de la siguiente forma: en la biblioteca de elementos de Elementor, a la izquierda del lienzo de Elementor, busca el elemento Container en Layout y arrástralo al área correspondiente.
Después de arrastrar y soltar también puede observar este Contenedor arrastrado a través del navegador, anidado dentro de un Contenedor.
Los Contenedores añadidos a continuación son todos por defectoFlexbox, que puede modificar en los ajustes de Diseño según le convenga a laRejillaModo.
4.3 Configuración del diseño del contenedor
1. Configuración general del contenedor
Para configurar la disposición de los contenedores, siga estos pasos:
- Seleccione con el ratón el Contenedor que desea fijar.
- En la ventana de la izquierda, pase a la pestaña "Diseño".
- En esta pestaña puede realizar ajustes de diseño para el Contenedor, como ajustar la anchura, la altura y la alineación.
Container Layout se utiliza para cambiar el diseño del contenedor, hay dos opciones Flexbox y Grid, la opción por defecto es Flexbox.
Anchura del contenidoSe utiliza para establecer el ancho del Contenedor, puede elegir "En Caja" o "Ancho Completo". Por defecto, se establece en "Boxed", lo que significa que el ancho del contenido se basa en un valor fijo. Puedes establecer el ancho global del contenido en la configuración del sitio de Elementor.
La anchura por defecto de Boxed es la anchura del contenido que ha configurado globalmente en Configuración del sitio, y puede modificar la anchura a través del control deslizante.
Ancho totalSu anchura por defecto se extenderá en función del contenedor envuelto, o si es el contenedor más exterior del lienzo, la anchura se extenderá en función de la ventana del navegador por defecto. Puede ajustar la anchura mediante el control deslizante.
Altura mínimaSirve para fijar la altura mínima del Contenedor. Cuando no hay contenido o hay menos contenido en el Contenedor, mostrará la altura mínima; si hay más contenido en el Contenedor, se ajustará automáticamente según la altura del contenido. Puede modificar la altura deslizando la barra o introduciendo un valor.
Container Layout puede cambiar de Flexbox a Grid, con una diferencia en la configuración de Item entre Flexbox y Grid.
2、Configuración de Flexbox
Cuando se establece Container Layout a Flexbox, se puede ver la configuración del elemento de la siguiente manera:
Dirección representa la dirección de visualización, hay 4 opciones, según el viento de dirección de la flecha: de izquierda a derecha, de arriba a abajo, de derecha a izquierda, de abajo a arriba.
Utilice Dirección para cambiar la dirección y el orden de los elementos que coloque en el Contenedor.
Justificar el contenidoSe utiliza para establecer la alineación de los elementos dentro del Contenedor en el eje principal. Si Dirección se establece como Horizontal (de izquierda a derecha o de derecha a izquierda), Justificar contenido se utiliza para establecer la alineación del elemento en la dirección horizontal; si Dirección se establece como Vertical (de arriba a abajo o de abajo a arriba), Justificar contenido se utiliza para establecer la alineación del elemento en la dirección vertical.
Justificar contenidoPermite definir la alineación de los elementos internos del Contenedor sobre el eje principal, con las cinco opciones siguientes:
- Inicio: Ordena los elementos desde el inicio de la dirección de diseño del Contenedor.
- Centro: Centra los elementos en el Contenedor.
- Fin: Ordena los elementos desde el final de la dirección de disposición del Contenedor.
- Espacio entre: El primer elemento se coloca al principio, el último al final, y el resto de elementos se distribuyen uniformemente.
- Espacio alrededorCada elemento tiene el mismo espacio circundante.
- Espacio uniformeLa distancia entre cada elemento es igual.
Alinear elementosSe utiliza para establecer la alineación de los elementos internos del Contenedor en línea con la dirección del eje principal. Contiene las cuatro opciones siguientes:
- Inicio: Alinea los elementos dentro del Contenedor basándose en el punto inicial de la dirección de diseño Dirección.
- CentroAlinea centralmente los elementos dentro del contenedor basándose en la dirección del diseño.
- FinAlinea los elementos dentro del Contenedor basándose en el punto final de la dirección de diseño Dirección.
- EstireEstirar elementos para ajustarlos al tamaño del contenedor. Si los elementos tienen un tamaño "automático", se ajustarán al tamaño del contenedor; si tienen un tamaño fijo, no se ajustarán automáticamente.
4、Opciones adicionales其他选项设置
Hay 2 opciones en las Opciones Adicionales del Contenedor.
Desbordamiento Desbordamiento Ajustes
Controla si el contenido del Contenedor no cabe en la ventana del navegador, y si el desbordamiento debe estar oculto o visible, lo que provoca el desplazamiento horizontal.
DesbordamientoHay tres opciones:
- Por defecto permite que los elementos fuera del contenedor se desborden.
- Oculto Ocultar elementos desbordados, sin acceso a elementos desbordados.
- Auto Crea una barra de desplazamiento para mantener los elementos accesibles cuando el contenido se desborda, un ajuste que permite deslizar el contenido en una vista en movimiento.
Estado oculto, si el contenido se desborda, no se puede ver el contenido desbordado.
4.4 Configuración del estilo del contenedor
Cambie a la pestaña Estilo del contenedor para establecer el estilo del contenedor.
1）Fondo(fondo)
Puede establecer el color de fondo para el Contenedor a través del fondo.
También puede establecer una imagen de fondo para los Contenedores.
(2) Superposición de fondo)
La superposición de fondo te permite superponer una máscara de color o imagen al fondo que establezcas, y puedes ajustar la transparencia del color o la imagen para que coincida con el efecto que quieras conseguir.
3) Borde (ajuste del borde)
Borde se utiliza para establecer el borde del Contenedor y el efecto de proyección.
4) Divisor de formas (Shape Divider)
Línea de división de forma se puede utilizar para hacer un poco de contenedor entre el efecto de división, que es una función proporcionada por el plugin de EAU.
Puede elegir si desea establecer la forma dividida de la parte superior o inferior del contenedor seleccionando Superior e Inferior, y en Tipo puede elegir la forma que desee (sólo las proporcionadas).
Resumen:
En este artículo se explica cómo activar Elementor Container, convertir una sección de una página en un contenedor y conocer las ventajas de los contenedores frente a las secciones, como una mayor capacidad de respuesta, un control flexible del diseño y una mayor velocidad de la página. El tutorial también cubre la configuración del diseño del contenedor, incluido el uso de los modos de diseño Flexbox y Grid, y cómo añadir enlaces y estilos personalizados al contenedor. Tanto si es un principiante como un diseñador web experimentado, este tutorial le ayudará a aprovechar al máximo la potencia de Elementor Container para mejorar la eficiencia y la eficacia del diseño web.
