En el último número, exploramos laTema Astrade algunos consejos básicos sobre tipografía. Hoy vamos a seguir profundizando en cómo laElementorUtiliza mejor los diseños de contenedor y cuadrícula en el editor para ayudarte a crear diseños web más flexibles y estéticamente agradables. Tanto si eres un principiante como un diseñador experimentado, estos consejos te ayudarán.
Si necesita configurar dos, cuatro o incluso más diseños
![图片[1]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082807282389.png)
Como se muestra arriba, primero tiene que añadir un contenedor (Container)
![图片[2]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082807285841.png)
Pasos: front-end del sitio web → Editar con Elementor → Diseño → Contenedor o cuadrícula.
Cómo elegir el Contenedor y la Rejilla, esto debe basarse en la situación real, pero se recomienda preferir el Contenedor.
![图片[3]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082807324353.png)
![图片[4]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082807330263.png)
Container puede elegir entre una variedad de diseños, por supuesto, Grid también funciona, pero Container siempre puede añadir módulos en su interior, mientras que Grid es fijo, como se muestra a continuación, la caja roja es Container, si necesita mostrar múltiples módulos, sin duda Container, la caja amarilla es Grid, ¡el resultado es obvio!
![图片[5]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082807354628.png)
Pero Grid también tiene sus propias ventajas, si usted ya tiene un contenedor, pero desea ser dividido en dos o incluso cuatro diseños, que restablecer el contenedor de dos diseños del contenedor no es capaz de arrastrar el contenedor a la primera, pero la cuadrícula se puede ajustar en cualquier momento, el siguiente gráfico, por lo que ir de acuerdo a la situación real para ajustar el
![图片[6]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082807405284.png)
A continuación, vamos a hablar de la configuración y el método de dos diseños
![图片[7]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082807490833.png)
El de arriba es un contenedor de dos diseños, el de la izquierda es un módulo de texto y título más un módulo de texto más un módulo de botón, el de la derecha es un módulo de una sola imagen
El primer módulo de texto a la izquierda ¿por qué la gente piensa que se puede ajustar tan pequeño
Encontramos el módulo de texto Editar Editor de texto
Pasos: Front-end → Editar con Elementor → Editar editor de texto.
![图片[8]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808012117.png)
Necesidad de cambiar el tamaño del texto, siga los pasos que he descrito anteriormente, el color se ajusta donde el contenido es
![图片[9]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808032014.png)
![图片[10]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808034042.png)
Eso lo establece.
![图片[11]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808525469.png)
¡Módulo de botón para establecer el texto y la posición puede ser, por supuesto, el estilo de color de fondo también se puede ajustar!
Pasos: Website Frontend→Edit with Elementor→Creative Button
![图片[12]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808512726.png)
El módulo de imagen de la derecha no ocupa toda la pantalla, simplemente recórtalo al tamaño adecuado si lo necesitas, en vertical, no en horizontal.
![图片[13]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808540671.png)
Así son los dos diseños
Por supuesto, los cuatro diseños son los mismos
![图片[14]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808560180.png)
![图片[15]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808561777.png)
Una vez configurados los cuatro diseños, añada un título y un módulo de texto a cada uno de ellos.
![图片[16]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808572676.png)
![图片[17]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082808574689.png)
El color de fondo se establece en negro para un contenedor
![图片[18]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082809032237.png)
![图片[19]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082809035750.png)
El fondo del módulo es blanco
![图片[20]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/uploads/2024/08/2024082809103587.png)
El módulo fija la anchura, así como la posición y el hueco
Resumen:
Al final de este artículo, usted debe tener una mejor comprensión de la utilización de contenedores y Grid y ser capaz de elegir el diseño adecuado para sus necesidades reales. Recuerda que Container es adecuado para necesidades de maquetación más flexibles, mientras que Grid puede ayudarte a dividir rápidamente la maquetación en contenedores existentes. En el próximo número, seguiremos ofreciéndote más consejos prácticos y trucos sobre el tema Astra, permanece atento.
| 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: [email protected] | |
| ④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres | |
Enlace a este artículo:https://www.361sale.com/es/17827/El artículo está protegido por derechos de autor y debe ser reproducido con atribución.




















![表情[wozuimei]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | WordPress教程、Elementor教程与故障修复](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

Sin comentarios