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

Image[1]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

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

Imagen [2]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

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.

Imagen [3]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida
Imagen [4]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

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!

Imagen [5]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

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

Imagen [6]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

A continuación, vamos a hablar de la configuración y el método de dos dise?os

Imagen [7]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

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.

Imagen [8]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

Necesidad de cambiar el tama?o del texto, siga los pasos que he descrito anteriormente, el color se ajusta donde el contenido es

Image [9]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida
Imagen [10]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

Eso lo establece.

Imagen [11]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

?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

Imagen [12]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

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.

Imagen [13]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

Así son los dos dise?os

Por supuesto, los cuatro dise?os son los mismos

Imagen [14]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida
Imagen [15]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

Una vez configurados los cuatro dise?os, a?ada un título y un módulo de texto a cada uno de ellos.

Imagen [16]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida
Imagen [17]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparaciones de WordPress, Alcance Global, Respuesta Rápida

El color de fondo se establece en negro para un contenedor

Imagen [18]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida
Imagen [19]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07) - Photon Fluctuation Network | Servicio Profesional de Reparación de WordPress, Alcance Global, Respuesta Rápida

El fondo del módulo es blanco

Imagen [20]-Elementor and Astra Theme Layout Tips: Container and Grid Best Practices (07)-Photonflux.com | Professional WordPress Repair Service, Global Reach, Fast Response

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: info@361sale.com
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