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:

activeContenedor 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 una 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 agiliza y facilita la creación de plantillas complejas y repletas de funciones. 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

?Será Elementor lento? Los dise?os de sección pueden ser un poco lentos para ti, ?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

En el lienzo de Elementor donde tienes que a?adir el Contenedor, haz clic en el signo + del 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 optar por utilizar varios Contenedores en una página, o utilizar un Contenedor y anidar otros Contenedores de maquetación dentro de él, en función de su plan de 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 a la zona 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 el dise?o del Contenedor, siga estos pasos:

1. Seleccione con el ratón el Contenedor que desea fijar.
2. En la ventana de la izquierda, pase a la pesta?a "Dise?o".
3. 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:

1. Inicio: Ordena los elementos desde el inicio de la dirección de dise?o del Contenedor.
2. Centro: Centra los elementos en el Contenedor.
3. Fin: Ordena los elementos desde el final de la dirección de disposición del Contenedor.
4. Espacio entre: El primer elemento se coloca al principio, el último al final, y el resto de elementos se distribuyen uniformemente.
5. Espacio alrededorCada elemento tiene el mismo espacio circundante.
6. 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:

1. Inicio: Alinea los elementos dentro del Contenedor basándose en el punto inicial de la dirección de dise?o Dirección.
2. CentroAlinea centralmente los elementos dentro del contenedor basándose en la dirección del dise?o.
3. FinAlinea los elementos dentro del contenedor basándose en el punto final de la dirección de dise?o Direction.
4. 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其他選項設(shè)置

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, dando lugar al 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 el contenedor de Elementor, convertir una sección de una página en un contenedor y conocer las ventajas del contenedor frente a una sección, como una mayor capacidad de respuesta, un control flexible del dise?o y un aumento de la 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.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres