Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)
Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

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

我们找到文本模块Edit Text Editor

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)
Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

这样就设置好了

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

这就是两布局的方式

当然四布局也是一样的

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)
Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)
Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)
Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

模块背景是白色

Elementor与Astra主题布局技巧:Container与Grid的最佳实践(07)

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

总结:

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


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/17827/

(1)
上一篇 2024年 8月 28日 下午6:02
下一篇 2024年 8月 29日 上午10:58

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
为方便全球用户注册登录,我们已取消电话登录功能。如遇登录问题,请联系客服协助绑定邮箱。