Primeros pasos con Elementor Containers: Explicación de los controles de estructura, orientación y diseño

A la hora de crear un sitio web con Elementor, es importante dominar losContenedorEl uso del contenedor es un paso clave hacia el diseño responsivo y los diseños personalizados. Este artículo detallará la configuración de la estructura, la orientación del contenido, el control de la anchura, el ajuste del espaciado y las técnicas de diseño responsivo para contenedores, apto para principiantes y para quienes estén en transición hacia el Contenedor Flexboxde nuevos usuarios.

I. Añadir embalajes y seleccionar estructuras

En el editor de Elementor, haga clic en la parte superior "+El icono "Widgets" permite abrir el menú Widgets.contenedores" para añadir una nueva estructura. Puede:

• Arrastre y suelte directamente en un contenedor predeterminado;

• A continuación, elija un diseño estructural (por ejemplo, una columna, doble columna, etc.).

Dirección de contenidos

Haga clic en la flecha hacia abajo: el contenido se organiza verticalmente (disposición en columnas verticales).

Haga clic en la flecha de la derecha: el contenido se organiza horizontalmente (disposición en filas horizontales)

Cuando vaya a la configuración del contenedor, también habrá otras direcciones de configuración de la alineación

Tomemos como ejemplo la alineación vertical. El contenedor alineará automáticamente el contenido en columnas, ocupando cada elemento hijo todo el ancho de la columna.

En segundo lugar, añade y ajusta los componentes de la imagen

Después de añadir el widget de imagen al contenedor, puedes añadirlo al contenedor utilizando el botón "tipoLas "Dimensiones de ajuste del panel:

• Recomendado para principiantespíxeles" o "por ciento"como una unidad;

• Establecer el ancho a 150px hace que el componente ocupe todo el ancho de la columna en el contenedor vertical, incluso si se establece un ancho fijo.

En este punto, si copia los componentes de la imagen, los encontrará ordenados en la línea siguiente.

Tercero, cambiar a diseño horizontal

Con el contenedor seleccionado, ajuste la dirección a "Fila", en este punto el sistema respetará la anchura establecida para cada elemento hijo y conseguirá una disposición horizontal de lado a lado.

Ajuste de la alineación

Ir a "apertura (jerga ajedrecística)La palabra "¡± en "¡± es" se utiliza en "¡±.Justificar el contenido" para controlar el espaciado entre elementos:

• Inicie: Por defecto se empieza por la izquierda;
• Centro: Centrado;
• FinAlineado a la derecha;
• Espacio entreAlineados en los extremos e igualmente espaciados en el centro.

Cuarto, el control de la anchura y la altura mínima del contenido

Anchura del contenido

• El valor por defecto es En caja(en caja), es decir, el contenedor se muestra a todo lo ancho, pero el contenido está restringido a la anchura especificada;

• modificar para Ancho totalel contenido ocupará todo el ancho del contenedor.

El efecto puede apreciarse añadiendo un borde para facilitar la observación.

Altura mínima

Si no se establece, la altura se ajustará automáticamente en función del contenido.
Establecer Altura mínima permite que el contenedor mantenga la altura especificada aunque haya poco contenido, y se utiliza a menudo en el diseño de un banner o de la primera zona de la pantalla.

V. Ajustes personalizados y contenedores anidados

En el "alto nivelLa pestaña "Personalización avanzada" permite establecer personalizaciones avanzadas, como la alineación de los distintos componentes.

Los contenedores también pueden anidarse, por ejemplo, colocando varios sub-221 en un contenedor principal con diferentes reglas de orientación y alineación para una tipografía responsiva más compleja.

VI. Optimización del diseño responsivo

La verdadera potencia del sistema de contenedores reside en su capacidad para adaptarse a distintos dispositivos. Puede configurarse por separado para ordenadores de sobremesa, tabletas, teléfonos móviles y otros dispositivos:

• Dirección del buque;
• Márgenes interior y exterior;
• Alineación;
• Anchura del contenido, etc.

Esto permite que la página mantenga un buen diseño y coherencia visual en cualquier pantalla.

resúmenes

Un dominio flexible de la estructura de contenedores y de las técnicas de maquetación no sólo puede mejorar drásticamente la eficiencia del diseño web, sino también lograr fácilmente un diseño de página responsivo y de alta calidad. Tanto si eres diseñador, desarrollador u operador de sitios web, los contenedores son una de las herramientas de maquetación más potentes de Elementor. Para más información y tutoriales relacionados con WordPress, presta atención aRed de fluctuación de fotonestiene los tutoriales de WordPress más completos y los más activos.Comunidad de intercambio de WordPress.

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