Consejos de maquetación para temas Elementor y Astra: Mejores prácticas para contenedores y cuadrículas (07)

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教程与故障修复

Como se muestra arriba, primero tiene que añadir un contenedor (Container)

图片[2]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复

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教程与故障修复
图片[4]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复

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教程与故障修复

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教程与故障修复

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教程与故障修复

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教程与故障修复

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教程与故障修复
图片[10]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复

Eso lo establece.

图片[11]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复

¡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教程与故障修复

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教程与故障修复

Así son los dos diseños

Por supuesto, los cuatro diseños son los mismos

图片[14]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复
图片[15]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复

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教程与故障修复
图片[17]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复

El color de fondo se establece en negro para un contenedor

图片[18]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复
图片[19]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复

El fondo del módulo es blanco

图片[20]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | WordPress教程、Elementor教程与故障修复

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
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
© Declaración de reproducción
Este artículo fue escrito por Harry
EL FIN
Si le gusta, apóyela.
felicitaciones0 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios