全面解析Elementor Container:从基础设置到高级应用的详细教程

什么是Elementor Container

全面解析Elementor Container:从基础设置到高级应用的详细教程

Elementor Container是Elementor页面构建器中的一个新功能,用于创建高度灵活和响应式的网页布局。与传统的Section布局相比,Container提供了更强大的控制和更多的布局选项。它支持两种主要布局模式:Flexbox和Grid。

1. 如何启用Elementor Container?

首先你需要将你的Elementor Page Builder插件和Elementor Pro插件升级到最新版本。

升级插件到最新版本之后,导航至Elementor>设置页面的Features标签下

全面解析Elementor Container:从基础设置到高级应用的详细教程

在Stable Features中将Grid Container激活:

全面解析Elementor Container:从基础设置到高级应用的详细教程

激活Flexbox Container,如果你想使用Elementor自带的Mega Menu,还需要激活Nested Elements和Menu功能。

全面解析Elementor Container:从基础设置到高级应用的详细教程

设置完成之后将页面拖拽到最下方点击保存按钮。

全面解析Elementor Container:从基础设置到高级应用的详细教程

2. 如何将页面中的Section转换成Container?

进入页面编辑之后选中你要转换成Container的Section,拖动Container进入选择的滑块。

全面解析Elementor Container:从基础设置到高级应用的详细教程

转换之后,会在转换的Section模块下方自动复制生成一个一模一样的Container模块。确认Container模块没有问题之后,直接删除上方的Section模块即可完成Section到Container的转换。

3. Elementor Container相对Section的一些优势

全面解析Elementor Container:从基础设置到高级应用的详细教程

3.1 响应能力更强

Container可以充分利用布局中的控件,自动进行响应式调整。这意味着在大多数情况下,你不需要做过多的设置,就能实现内容的自动响应式布局。而Section需要你手动为不同设备进行配置和调整,才能完美实现响应式效果。

Container也允许你自定义不同设备的响应式布局,以满足特定需求。

3.2 布局控制更强

Container相比Section具有更大的自由度和灵活性。你可以嵌套多个层次的Container,并自定义它们的宽度和高度。这使得创建功能丰富且复杂的模板变得更加快捷简单。与传统布局相比,Container提供了更高的灵活性,而Section布局则只能将小部件分为部分和列。

全面解析Elementor Container:从基础设置到高级应用的详细教程

3.3 页面速度的提升

Elementor会不会很慢?Section布局可能会让你觉得有些慢,但Container则不会!

Elementor Container通过减少使用的分隔符数量,提高了页面速度。而Section通常包含更多的列和内部部分,分隔符越多,文档对象模型 (DOM) 就越大,从而增加了页面加载时间。使用Container可以减少数据请求,缩小DOM,从而显著提升页面加载速度。

3.4 直接为Container添加链接

在做Loop Item时,你可以直接为整个Container添加链接,而不是为每个元素添加链接。只需将Container的HTML标签改为<a>标签,即可实现。这使得链接管理更加简单高效。

全面解析Elementor Container:从基础设置到高级应用的详细教程

4 Elementor Container的基本设置

4.1 Elementor Container的FlexBox 和Grid

FlexBox和Grid是两种布局模式,适用于不同的设计需求。FlexBox适合高度自由的布局,而Grid则按照网格进行布局。你可以根据具体需求选择合适的布局方式。

a、什么是FlexBox Container?

FlexBox Container是一种灵活的布局方式,为你的网站提供高度自由的布局选项。

全面解析Elementor Container:从基础设置到高级应用的详细教程

b、什么是Grid Container?

Grid Container是一种网格布局方式,通过设置行和列来控制元素的排列,使所有网格保持高度一致性。如果你的页面需要网格布局,使用Grid Container会更加方便和高效。

全面解析Elementor Container:从基础设置到高级应用的详细教程

4.2 如何在页面中添加Container?

a、通过画布添加

在Elementor画布中需要添加Container的地方,点击下方的模块的+号,在弹出区域点击+号。

全面解析Elementor Container:从基础设置到高级应用的详细教程

然后在弹出的布局中点击Flexbox或者Grid,添加对应的Container添加到页面中。

全面解析Elementor Container:从基础设置到高级应用的详细教程

这种方法适用于添加页面中的顶级Container,即页面的最外层布局容器。顶级Container的外部是页面画布,不会嵌套其他Container。

你可以根据页面布局的需求,选择在一个页面中使用多个Container,或者使用一个Container并在其内部嵌套其他布局Container。这取决于你的布局规划。

b、通拖拽布局元素添加

在容器内添加嵌套的内部容器则通过拖拽布局元素的方法实现如下:在Elementor画布左边的Elementor元素库中,找到Layout下面的Container元素,拖拽到对应的区域。

全面解析Elementor Container:从基础设置到高级应用的详细教程

拖拽之后可以你还可以通过导航器观察到这个拖拽的Container,嵌套到一个Container内部。

全面解析Elementor Container:从基础设置到高级应用的详细教程

下面添加的Container默认都是Flexbox模式,你可以在Layout设置中根据你的需要修改成Grid模式。

全面解析Elementor Container:从基础设置到高级应用的详细教程

4.3 Container的布局设置

1、Container通用设置

要设置Container的布局,请按照以下步骤操作:

  1. 用鼠标选中你要设置的Container。
  2. 在左侧的窗口中,切换到“Layout”标签。
  3. 你可以在这个标签下对Container进行布局设置,如调整宽度、高度和对齐方式等。
全面解析Elementor Container:从基础设置到高级应用的详细教程

Container Layout用于切换Container的布局方式,有Flexbox和Grid两个选项,默认的选项是Flexbox。

Content Width用于设置Container的宽度,你可以选择“Boxed”或“Full Width”。默认情况下,设置为“Boxed”,即内容宽度基于一个固定值。你可以在Elementor的站点设置中设定全局的内容宽度。

全面解析Elementor Container:从基础设置到高级应用的详细教程

Boxed默认宽度是你在Site Setting全局中设置好的内容宽度,可以通过滑动条修改宽度。

Full Width它的默认宽度会基于包裹的Container铺满,如果是画布中顶级的最外部的Container,则宽度默认基于浏览器窗口铺满。你可以通过滑动条调整宽度。

全面解析Elementor Container:从基础设置到高级应用的详细教程

Min Height用于设置Container的最小高度。当Container中没有内容或内容较少时,它会显示为最小高度;如果Container中的内容较多,则会根据内容的高度自动调整。你可以通过滑动条或输入数值的方式来修改高度。

Container Layout可以将Flexbox切换为Grid,Flexbox和Grid的Item设置有所区别。

全面解析Elementor Container:从基础设置到高级应用的详细教程

2、Flexbox的Item设置

当你将Container Layout设为Flexbox的时候,你可以看到Item设置如下:

全面解析Elementor Container:从基础设置到高级应用的详细教程

Direction代表显示方向,有4个选项,按照箭头指示风别为:从左到右,从上到下,从右到左,从下到上。

使用Direction可以改变你在Container中排放元素的方向和顺序

Justify Content用于设置Container内部元素在主轴上的对齐方式。如果Direction设置为水平(从左到右或从右到左),则Justify Content用于设置元素在水平方向上的对齐方式;如果Direction设置为垂直(从上到下或从下到上),则Justify Content用于设置元素在垂直方向上的对齐方式。

全面解析Elementor Container:从基础设置到高级应用的详细教程

Justify Content用于设置Container内部元素在主轴上的对齐方式,有以下五个选项:

  1. Start(开始):从Container布局方向的起点开始排列元素。
  2. Center(中间):在Container中居中排列元素。
  3. End(结束):从Container布局方向的终点开始排列元素。
  4. Space Between(间距):第一个元素放在起点,最后一个元素放在终点,其余元素均匀分布。
  5. Space Around(周围空间):每个元素的周围空间相同。
  6. Space Evenly(空间均匀):每个元素之间的距离相等。

Align Items用于设置Container内部元素在与主轴方向一致的对齐方式。它包含以下四个选项:

全面解析Elementor Container:从基础设置到高级应用的详细教程
  1. Start(开始):基于Direction布局方向的起点对齐Container内部的元素。
  2. Center(中间):基于Direction布局方向居中对齐Container内部的元素。
  3. End(结束):基于Direction布局方向的终点对齐Container内部的元素。
  4. Stretch(拉伸):拉伸元素以适应容器的大小。如果元素是‘auto’-sized,它们会被拉伸以适应容器的大小;如果设置了固定大小,则不会自动拉伸。

4、Additional Options其他选项设置

在Container的Additional Options中有2个选项。

Overflow溢出设置

全面解析Elementor Container:从基础设置到高级应用的详细教程

控制Container的内容是否不适合浏览器器窗口,溢出的内容是否应该隐藏或可见,从而导致水平滚动。

Overflow有三个选项:

  • Default 允许容器外的项目溢出。
  • Hidden 隐藏溢出的项目,无法访问溢出的项目。
  • Auto 在内容溢出时创建滚动条以保持项目可访问,此设置允许在移动视图中滑动内容。

Hidden状态下,如果内容溢出了,是看不到溢出的内容的。

4.4 Container的风格设置

切换到Container的Style选项卡可以设置Container的风格。

全面解析Elementor Container:从基础设置到高级应用的详细教程

1)Background(背景)

你可以通过背景为Container设置背景颜色。

全面解析Elementor Container:从基础设置到高级应用的详细教程

你还可以为Container的设置背景图。

全面解析Elementor Container:从基础设置到高级应用的详细教程

2)Background Overlay(背景覆盖)

背景覆盖可以实现给你设置的背景叠加一层颜色或者图片蒙板,你可以设置颜色或者图片的透明度来匹配你想要实现的效果。

全面解析Elementor Container:从基础设置到高级应用的详细教程

3)Border(边框设置)

Border用于设置Container的边框和投影效果。

全面解析Elementor Container:从基础设置到高级应用的详细教程

4)Shape Divider(形状分割线)

形状分割线可以用来做一些Container之间的分割效果,这是UAE插件提供的功能。

你可以通过切换Top和Bottom来选择设置Container顶部还是底部的分割形状,在Type中你可以选择一个你喜欢的形状(只能选择提供的)

全面解析Elementor Container:从基础设置到高级应用的详细教程

总结:

本文带你学习如何启用Elementor Container、将页面中的Section转换为Container,以及了解Container相较于Section的优势,如更强的响应能力、灵活的布局控制和提升页面速度。教程还涵盖了Container的布局设置,包括使用Flexbox和Grid布局模式,以及如何为Container添加链接和自定义样式。无论是初学者还是有经验的网页设计师,这篇教程都能帮助你充分利用Elementor Container的强大功能,提升网页设计效率和效果。


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

(0)
上一篇 2024年 5月 25日 上午11:31
下一篇 2024年 5月 26日 下午1:16

相关推荐

发表回复

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

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

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

客服微信
购买我们的托管服务器,享受免费运维!