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

在上期的文章中,我们探讨了Tema Astra的一些基本排版技巧。今天,我们将继续深入探讨如何在Elementor编辑器中更好地利用Container和Grid布局,帮助你创建更加灵活且美观的网页设计。无论你是初学者还是有经验的设计师,这些技巧都将助你一臂之力。

如果你需要设置二个或者四个甚至更多的布局

图片[1]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

如上图,你需要先加入一个容器(Container)

图片[2]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

步骤:网站前端→Edit with Elementor→Layout→Container或Grid

怎么去选择Container和Grid,这个需要根据实际情况,但建议优先选择Container

图片[3]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[4]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

Container可以选择多种布局,当然Grid也行,但是Container可以在里面一直添加模块,而Grid是固定的,如下图,红色框是Container,如果你需要展示多个模块,肯定是Container,黄色框是Grid,很明显的结果

图片[5]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

但Grid也有自己的优点,如果你已经有一个容器了,但你想分为二个甚至四个的布局,那重新设置的Container两布局的容器是无法拖动到第一个的容器的,但是Grid就可以随时调整,如下图,所以大家根据实际情况去调整

图片[6]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

接下来来讲一个两个布局的设置和方法

图片[7]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

以上就是一个Container两布局的,左边是有文本和标题模块再加一个文本模块再加一个按钮模块,右边则是单张图片模块

左边的第一个文本模块大家觉得为什么能调整到那么小

我们找到文本模块Edit Text Editor

步骤:网站前端→Edit with Elementor→Edit Text Editor

图片[8]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

需要调整文本的大小,按照我上述的步骤,颜色在内容哪里调整

图片[9]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[10]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

这样就设置好了

图片[11]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

按钮模块设置一下文字和位置就可以了,当然背景颜色样式也是都可以调整的

步骤:网站前端→Edit with Elementor→Creative Button

图片[12]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

右边的图片模块不是霸占全屏的,如果需要的话,裁剪合适的尺寸就行了,竖图,而不是横图

图片[13]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

这就是两布局的方式

当然四布局也是一样的

图片[14]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[15]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

设置好四布局后,在每一个单独的加入标题和文本模块

图片[16]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[17]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

背景色是设置一个容器的黑色

图片[18]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应
图片[19]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

模块背景是白色

图片[20]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应

模块设置好宽度,以及位置,还有空隙

Resumen:

通过本文的介绍,你应该对Container和Grid的使用有了更深的理解,并能够根据实际需求选择合适的布局方式。记住,Container适用于更灵活的布局需求,而Grid则可以帮助你在现有容器中快速分割布局。下一期,我们将继续为你带来更多关于Astra主题的实用技巧与攻略,敬请期待。


Contacte con nosotros
¿No puede leer el artículo? ¡Póngase en contacto con nosotros para obtener una respuesta gratuita! Ayuda gratuita para sitios personales y de pequeñas empresas
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