在上期的文章中,我们探讨了Tema Astra的一些基本排版技巧。今天,我们将继续深入探讨如何在Elementor编辑器中更好地利用Container和Grid布局,帮助你创建更加灵活且美观的网页设计。无论你是初学者还是有经验的设计师,这些技巧都将助你一臂之力。
如果你需要设置二个或者四个甚至更多的布局
![图片[1]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082807282389.png)
如上图,你需要先加入一个容器(Container)
![图片[2]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082807285841.png)
步骤:网站前端→Edit with Elementor→Layout→Container或Grid
怎么去选择Container和Grid,这个需要根据实际情况,但建议优先选择Container
![图片[3]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082807324353.png)
![图片[4]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082807330263.png)
Container可以选择多种布局,当然Grid也行,但是Container可以在里面一直添加模块,而Grid是固定的,如下图,红色框是Container,如果你需要展示多个模块,肯定是Container,黄色框是Grid,很明显的结果
![图片[5]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082807354628.png)
但Grid也有自己的优点,如果你已经有一个容器了,但你想分为二个甚至四个的布局,那重新设置的Container两布局的容器是无法拖动到第一个的容器的,但是Grid就可以随时调整,如下图,所以大家根据实际情况去调整
![图片[6]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082807405284.png)
接下来来讲一个两个布局的设置和方法
![图片[7]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082807490833.png)
以上就是一个Container两布局的,左边是有文本和标题模块再加一个文本模块再加一个按钮模块,右边则是单张图片模块
左边的第一个文本模块大家觉得为什么能调整到那么小
我们找到文本模块Edit Text Editor
步骤:网站前端→Edit with Elementor→Edit Text Editor
![图片[8]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808012117.png)
需要调整文本的大小,按照我上述的步骤,颜色在内容哪里调整
![图片[9]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808032014.png)
![图片[10]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808034042.png)
这样就设置好了
![图片[11]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808525469.png)
按钮模块设置一下文字和位置就可以了,当然背景颜色样式也是都可以调整的
步骤:网站前端→Edit with Elementor→Creative Button
![图片[12]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808512726.png)
右边的图片模块不是霸占全屏的,如果需要的话,裁剪合适的尺寸就行了,竖图,而不是横图
![图片[13]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808540671.png)
这就是两布局的方式
当然四布局也是一样的
![图片[14]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808560180.png)
![图片[15]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808561777.png)
设置好四布局后,在每一个单独的加入标题和文本模块
![图片[16]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808572676.png)
![图片[17]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082808574689.png)
背景色是设置一个容器的黑色
![图片[18]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082809032237.png)
![图片[19]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082809035750.png)
模块背景是白色
![图片[20]-Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/uploads/2024/08/2024082809103587.png)
模块设置好宽度,以及位置,还有空隙
Resumen:
通过本文的介绍,你应该对Container和Grid的使用有了更深的理解,并能够根据实际需求选择合适的布局方式。记住,Container适用于更灵活的布局需求,而Grid则可以帮助你在现有容器中快速分割布局。下一期,我们将继续为你带来更多关于Astra主题的实用技巧与攻略,敬请期待。
Enlace a este artículo:https://www.361sale.com/es/17827El artículo está protegido por derechos de autor y debe ser reproducido con atribución.
Sin comentarios