提供基于WordPress外贸建站·技术支持·SEO咨询服务!
文章分类
文章标签

Elementor Containner超详细讲解教程(附视频)

文章导航

本文介绍最新Elementor Containner如何使用,是一篇超级详细的Containner使用教程,涉及到每一个配置项的功能介绍,Elementor Containner提供Flexbox和Grid两种布局模式,在布局上相对Section更加灵活。之前Section无法满足的布局需求,都能在Containner下轻松实现。

我自己在使用了一段时间之后,发现Containner确实提升了我工作效率。但是对于新手来说Containner在设置上相对Seciton会为复杂一点,所以我单独出了这篇教程,希望可以帮助大家理解和使用Elementor Containner。

本文会收录在本站的《Elementor教程(2023最全最详细的Elementor使用及建站教程)》中。

1 如何启用Elementor Containner?

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

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

升级插件到最新版本之后,进入Elementor设置页面的Features标签下

image 16 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

将Flexbox Container和Grid Containner设为Active。

如果你需要使用Elementor原生的Mega Menu也可以将Nested Elements和Menu设为Active。

Elementor Containner超详细讲解:将Flexbox Container和Grid Containner设为Active。

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

image 18 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

进入页面编辑之后选中你要转换成Containner的Section,并点击其转换按钮。

image 19 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

转换之后,会在转换的Section模块下方自动复制生成一个一模一样的Containner模块。

image 20 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

确认Containner模块没有问题之后,直接删除上方的Section模块即可完成Section到Containner的转换。

目前Elementor不支持一键整站转换为Containner,需要手动去转换。另外,一旦转换之后将不可逆。

3 Elementor Containner相对Section的一些优势

3.1 响应能力更强

Containner可以充分利用布局中的控件,自动做响应式调整,这意味着大多数情况下,你不需要再做过多的设置,就可以实现内容的自动响应式布局。

Seciton则需要切换到不同终端去配置修改才可以完美实现响应式的效果。

当然Containner也允许你自定义不同终端的响应式布局。

3.2 布局控制更强

Containner不再像Section那么受限制,它可以实现非常自由的布局和控制。并且可以嵌套更多层。

Elementor Containner允许自定义它们的宽度和高度,并且您可以将一个容器嵌套在另一个容器中。这样可以快速创建功能丰富的复杂模板。简而言之,与传统布局相比,使用容器可为您提供更大的灵活性,传统的Section布局仅允许您将小部件划分为部分和列。

刚开始你可能会不喜欢,一旦掌握了使用技巧你一定会爱上它!

3.3 页面速度的提升

一直会有人问我Elementor慢吗?

Seciton布局或许会让你觉得有点慢,但是Containner不会了!

Elementor Containner通过最小化使用的分隔符数量来提高页面速度。而Section则通常包含更多列和内部部分。后端代码中的分隔符越少意味着文档对象模型 (DOM) 越小,从而减少了页面加载时间。这是因为在浏览器中构建网页的数据请求较少。

image 21 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

3.4 可以直接为Containner添加链接

这个功能我做Loop Item的时候非常喜欢用,这样我可以直接为为Item添加链接,还不是为Loop Item中的每一个元素添加链接。

只需要将Containner的HTML Tag改a标签就可以为整个Containner添加链接。

image 22 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

4 Elementor Containner的基本设置

4.1 Elementor Containner的FlexBox 和Grid

FlexBox 和Grid是2中布局模式,FlexBox适合高度自由的布局方式,Grid则是按照网格进行布局,不同的布局方式适用不同的场景,你可以根据自己的需求选择对应的布局方式。

a、什么是FlexBox Containner?

FlexBox Containner是一个弹性的布局方式吗,可以为你的网站提供一种非常自由的布局的方式。

a、什么是FlexBox Containner?

b、什么是Grid Containner?

Grid是一种网格布局方式,他可以通过行列的设置来控制网格的排列,所有的网格可以保持高度的一致性,如果你的页面中有网格的布局需求,直接用它会更加方便。

什么是Grid Containner?

4.2 如何在页面中添加Containner?

a、通过画布添加

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

image 27 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

image 26 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

如果选择Flexbox,则选择一个预设好的FlexBox,让后点击添加到页面中。

image 40 - Elementor Containner超详细讲解教程(附视频) - NUTSWP
image 41 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

如果你点击的是Grid。

image 42 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

则选择一个预设好的Grid布局添加到页面中。

image 43 - Elementor Containner超详细讲解教程(附视频) - NUTSWP
image 44 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

这种方法适合添加页面中顶级的Containner(容器),也就是页面中最外部的布局容器。所有顶级Containner的外部就是页面画布了,不会嵌套别的Containner。

一个页面中可以有多个Containner容器,也可以是一个Containner容器,然后内部嵌套布局Containner,这取决于你对页面布局的规划。

image 28 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

在容器内添加嵌套的内部容器则通过拖拽布局元素的方法实现如下:

b、通拖拽布局元素添加

在Elementor画布左边的Elementor元素库中,找到Layout下面的Containner元素,拖拽到对应的区域。

image 29 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

image 30 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

image 12 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

4.3 Containner的布局设置

1)Containner通用设置

鼠标选中Containner,在左侧的窗口中切换到Layout标签,可以对Containner进行布局设置。

image 13 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

image 15 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Content Width用于设置Containner的宽度,可以用Boxed或者Full Width。默认设置是Boxed代表内容的宽度基于一个固定宽度,这个宽度你可以在下面的width里面设置,默认值是1140px,你可以在Elementor Site setting中设置一个全局的内容宽度

image 16 - Elementor Containner超详细讲解教程(附视频) - NUTSWP
image 32 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

image 33 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

image 34 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

MIn Height用来设置Containner的最小高度,当Containner中没有内容或者内容较少时,则以最小高度显示,如果Containner中的内容较多,则默认以匹配内容的高度显示。你可以通过滑动条或者输入数值的方式修改高度。

image 35 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

image 38 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Flexbox和Grid的Item设置项目有所不同,这里我分2个标题介绍:

2)Flexbox的Item设置

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

image 46 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

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

使用Direction可以改变你在Containner中排放元素的方向和顺序,举一个列子:

我在一个Containner中放了2个元素标题和文本,默认情况下如果Containner的Item Direction设置为从左到右,那么显示则按照1一张,切换不同的Direction之后就会有不同的显示方法和顺序。

image 49 - Elementor Containner超详细讲解教程(附视频) - NUTSWP
image 47 - Elementor Containner超详细讲解教程(附视频) - NUTSWP
image 50 - Elementor Containner超详细讲解教程(附视频) - NUTSWP
image 48 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Justify Content的设置是在和Direction方向垂直的方向上,设置Containner内部的元素对其效果。

如果Direction设置为水平的从左到右边或者从右到左边,则Justify Content的设置就是基于垂直方向的对其方式。

image 51 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

如果Direction设置为从上到下或者从下到上,则Justify Content的设置就是基于水平方向的对其方式。

image 52 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

简单来说就是Justify Content是基于Direction方向垂直方向上的Containner内部元素的对齐设置。

Justify Content有五个设置选项:

  • Start(开始):从Containner布局方向最开始的地方开始排列Containner内部的元素
  • Center(中间):基于Containner布局方向的垂直方向居中排列Containner内部的元素
  • End(结束):从Containner布局方向末尾结束的地方开始排列Containner内部的元素
  • Space Between(间距):首个元素放置于起点,末尾元素放置于终点均匀排列每个Containner内部的元素
  • Space Around(周围空间):为每个元素分配相同的空间,然后排列在Containner中
  • Space Evenly(空间均匀):每个元素之间的距离相同,然后排列在Containner中

具体每一个选项设置的效果如何,建议自己在网站中进行设置并观察,我这里就不做举例。

Align Items就是和Direction方向一致的Containner内部元素对其的设置。

Align Items包含四个选项:

  • Start(开始):基于Direction布局方向最开始的地方排列Containner内部的元素
  • Center(中间):基于Direction布局方向居中排列Containner内部的元素
  • End(结束):基于Direction布局方向结束的地方排列Containner内部的元素
  • Stretch(拉伸):基于以上三种任意一种对其方式拉伸布局Containner内部的元素(‘auto’-sized 的元素会被拉伸以适应容器的大小 ,如果设置了固定的大小则不会自动拉伸。)
image 54 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

对比上图和下图,观察标题和文本的背景颜色可以看到Stretch拉伸的布局效果。

image 55 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Gap between elements设置Containner内部元素之间的间距。

默认是20px,你可以根据自己的需求修改。

image 53 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Wrap用于设置Containner内部的元素是否换行。

默认是No Wrap不换行的,如果你Containner是从左到右排列方向的话,你想Containner中添加6个元素,这些元素都排列在一行中。

image 56 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

如果你希望Flexbox Containner中的元素换行,则设为Wrap即可。

image 57 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

3)Grid的Item设置

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

image 58 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

在Item设置的第一个项目是Grid Outline,也就是轮廓。

Grid Outline是用来控制显示或者隐藏网格线的,注意这个线也是一个虚线,只在画布中显示,用于展示Grid的网格布局排列,实际上是不存在的。

image 59 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

如果你关闭Grid Outline,则不显示网格线,但是Grid Containner的布局还是按照你设置的进行布局,所以你可以理解为它是一个辅助线。

image 60 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

然后是Columns和Rows,行和列数设置。

image 61 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

设置Grid为3列2行。

image 62 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Gaps用于设置Items之前的间距,你可以取消🔗,单独设置行的间距和列的间距。

默认情况下,Grid Containner中的Items之间会有一个默认的间距,大概10px,如果你想Items之间的间距为0像素,则需要手动设置Gaps为0.

image 64 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Auto Flow用于控制Grid Items自动流动的方向,默认情况下是Row自动流动,也就是说行数根据Items的数量会自动增加。

image 65 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

比如你设置Grid的Items布局为3列2行,并默认Row自动流动的话,默认是6个元素排列,但是如果你添加的元素超过6个,那么Grid就是自动添加一个行就继续排列。

image 66 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

如果设置Auto Flow为Column的时候,那么列就是会根据Items数量自动增加。

image 67 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Justify Items和Align Items用于设置Grid Containner内部的Items的对其方式的,每个Items的对其的参照为Grid Outline的虚线。

image 68 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

比如下面的示例,Grid中的每个Items参照Outline的左边和上面进行对其。

image 69 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

4)Additional Options其他选项设置

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

Overflow溢出设置

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

Overflow有三个选项:

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

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

image 71 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Default和Auto状态下可以通过左右滑动看到溢出的内容

image 72 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

HTML Tag HTML标签设置

image 73 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

你可以通过此选项修改Containner的HTML标签,比如讲Containner设为a标签之后可以给Containner添加链接。

image 74 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

4.4 Containner的风格设置

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

image 75 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

1)Background(背景)

你可以通过背景为Containner设置背景颜色。比如下图,我设置Containner的背景颜色为绿色。

image 76 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

当然你还可以为Containner的设置背景图。

image 77 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

设置Containner背景为渐变。

image 78 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

为Containner设置一个视频背景。

image 79 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

为Containner设置一个轮播相册背景,

image 80 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

这些不同的背景设置模式下还有一些细节的设置项目我就不展开说了,建议自己设置之后看效果。

另外你还可以切换到Hover属性标签下面设置Containner背景在鼠标移动上去的效果。比如设置Hover的背景颜色为黑色,或者设置一张Hover背景图片(鼠标移动到Containner之后将会切换到Hover设置的背景图片)。

image 81 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

2)Background Overlay(背景覆盖)

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

image 82 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

比如我给Containner添加了黑色覆盖,透明度为20%

image 83 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

在Hover标签中设置覆盖颜色为黑色,透明度为60%,那么用户将鼠标移动到Containner时,背景会变暗,这样Containner中浅色的文字内容将会更加凸显。

image 84 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

3)Border(边框设置)

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

image 85 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

一般情况下我不会设置最外面嵌套的Containner的边框和投影。

在是当Containner嵌套在内部的时候,通过边框和投影的设置可以凸显出Containner的内容,如果是并列排列的局部,可以让布局看上去更加整齐。

比如下图,我给内部的三个Containner都设置了投影和圆角,让他们看起整齐,并且凸显内部的内容。

image 86 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

4)Shape Divider(形状分割线)

形状分割线可以用来做一些Containner之间的分割效果,这是UAE插件提供的功能,本站读者可以免费领取一个终身授权,通过页脚二维码联系即可。

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

比如我在下图的Containner顶部设置了一个山峦的形状分割,当然它还有针对形状的宽度,高度等设置,这里就不细说了,自己亲自尝试这些设置选项。

image 87 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

4.5 Containner的高级设置

在高级设置中你可以设置当前元素的布局,运动效果,转换响应式,属性以及自定义CSS等等内容。在Elementor中所有元素都有高级设置,元素不同设置项目会有所不同。

下面的内容可以作为你学习其他元素的高级设置项目的参考。

1)Layout(布局)

这里是布局是针对Containner元素本身的布局,和前面的布局有所不同,前面的提到的布局是针对Containner内部的元素的布局设置。

Margin:用于设置元素和外部元素之间的距离。

Padding:用于设置元素和内部元素的间距。

image 88 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Align Self:用于设置元素基于自身的对齐。

Order:用于设置元素自身在同级元素中的排列顺序,可以通过自定义设置元素排列在第几的位置,排列顺序从0开始。

下图中我将内部的2个Containner一个设为0一个设为2,他们就会排列在相应的位置,而1的位置会空着。

image 89 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Size:设置元素本身的伸展(Grow)和收缩(Shrink)效果,伸展设置即元素撑满布局,收缩设置即元素收缩到内容的宽度或高度。

Position:设置元素的位置有三个选项:

  • Default 默认(根据容器布局和元素设置自然排列)
  • Absolute 绝对(将元素设置在浏览器中的一个固定位置,不会跟随页面滑动而滑动会固定在浏览器窗口中的某个位置)
  • Fixed固定的(将元素设置在页面中的一个固定位置,元素可以跟随页面滑动而滑动)

以上三条在我在制作页面时经常会用到,理解和掌握之后对制作丰富的页面内容布局非常有帮助。

image 90 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Z-index:用于设置元素的在页面中处于显示层级,数值越大,越在最上层,数值越小越在最底层,底层的元素可以被上层的元素覆盖。

CSS Classes:用于设置元素的自定义CSS类,设置自定义类之后你可以通过程序代码控制这个元素。

2)Motion Effects(运动效果)

Scrolling Effects(滚动效果):设置元素滚动特效。它包括垂直滚动、水平滚动、透明度、模糊、旋转、规模等内容,还可以设置在哪些终端生效,以及这些效果是基于整个页面还是基于当前窗口的。具体的参数设置你可以自己设置之后看效果,然后理解。

image 91 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Mouse Effects(鼠标效果):用于设置鼠标移动到元素的动态效果,它包含鼠标轨迹和3D倾斜2种效果。

image 92 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Sticky(粘性固定):用于设置元素粘性固定,可以黏在顶部,也可以设置黏在底部。同时可以设置它在哪些终端有效。

其中offset用于设置元素按照多少像素向下或向上移动(如果你设置为向下滚动时固定,并不希望它遮挡你的固定页眉时,可以设置其像素为一个大于页眉高度的像素);Effect Offset用设置在粘性效果开始之前用户必须滚动的像素数(通常设为0或者1即代表一旦向下或向上滚动即发生粘性效果)。

下图中我设置该元素黏在顶部,Offset设为120像素,这样它黏在页眉的下方,不会覆盖住页眉。

image 93 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

如果你希望元素在一个固定的内容区间粘性,那么开启Stay in Colum,代表这个元素只会在它的父级Containner内部有粘性效果,一旦页面滑动离开该Containner,则粘性效果不在生效。

image 94 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Sticky功能还可以帮助你实现固定页眉粘性侧边栏的效果。

Entrance Animation(进入动画):用于设置改元素进入视觉范围的动画效果。默认是不设置的,如果你需要设置点击开下拉选择你要的进入动画效果即可。

image 84 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

4)Transform(转换)

注意:避免在粘性Containner上应用转换属性。这样做可能会导致意想不到的结果。

转换属性可以设置Containner的旋转、倾斜、翻转等效果,通过对应选项的设置你可以在编辑窗口直观的看到Containner的变化。

你可以通过Normal和Hover来设置默认或者鼠标滑过的转换效果,只需要切换对应标签进行设置即可。

image 85 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

5)Responsive(响应式能见度)

Responsive 设置在不同终端的可见性,默认情况下Containner元素在任何终端都是可见的,你可以通过开启隐藏在某一个终端来实现当前Containner元素在对应终端对用户不可见。

image 86 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

我最常用的就是在制作页眉时,通过2个Containner来制作2个不同的页眉,然后通过Responsive设置,让其中一个Containner在移动端影藏,另外一个在PC段隐藏,这样就能实现PC端和移动端不同的Header效果。

5 Containner的其他常用功能和操作

5.1 Elementor导航器中的Containner

Elementor导航器中你可以看到你的Containner排列和嵌套。

同时你可以修改Containner在导航器中名称,这样可以方便通过导航器快速定位到对应的内容。

image 95 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

5.2 Containner的响应式设置

Elementor编辑器的所有元素都支持响应式设置,Containner也不例外,Containner的响应式比起老板版本的Section设置项目更多,更加灵活。

在编辑视图中你可以切换到响应式模式去调整Containner的响应式效果。

image 104 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

在Containner的所有设置项目中只要是带响应式标记的都是可以在不同终端设置不同的展示效果。并且你可以直接在对应设置项目的通过响应式标记来切换并修改参数。

image 105 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

由于设置项目较多,我这里介绍几个我常用的响应式设置。

1)修改Containner在不同终端的内容的排列顺序

这个我在响应式中经常会使用到,尤其是做图片文章布局时候,在PC端为了美观,我会一个段图片在左边文字在右边,下一段图片在右边而文字在左边。

但是到了移动端之后图片和文字是上线显示的,如果还是按照默认的排序方式显示,那么就会出现图片、文字、文字、图片的顺序,这种方式对于用户来说并不是正确的阅读顺序。

所以我会在移动端通过Containner的Direction设置项去修改内容的显示顺序。

比如说下面这样一个模块,一个Containner中上下排列了2个Containner,上面的Containner左边是图片右边是文字,下面的Containner左边的文字,右边是图片,在PC端显示如下:

image 106 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

但是到了移动端下面的Containner文字就会默认在上面,图片在下面,显示就会不协调,情况如下:

image 107 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

那么我们可以通过Direction选项来设置下面的Containner内容在手机端的显示顺序。

image 108 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

2)修改Containner在不同终端隐藏

在Containner元素的Avanced标签卡中的Visibility设置中你可以设置针对哪些终端显示和隐藏Containner元素。

image 109 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

3)设置Containner内的元素在响应式中的对齐方式

在Containner的Layout标签卡下面的Items设置项目中,有Justify Content和Align Items可以设置在不同终端的Containner内部的元素对其方式。

image 110 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

5.3 Containner的复制与粘贴操作

1) 复制一个Containner

在编辑窗口中选中你需要复制的Containner元素,右击菜单中点击Copy,即可复制当前选中的Containner。

复制是包含Containner内的所有元素内容的。

image 97 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

2)粘贴Containner元素

复制Containner之后,编辑页面移动到你需要粘贴Containner的位置。

如果需要粘贴到某一个Containner的上方位置,可以点击下面的Containner的+号。

image 98 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

在虚线内空白的地方右击,然后在下拉菜单中选择Past菜单。

image 99 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

如果要将复制的Containner粘贴到某一个Containner的内部,可以选中Containner,然后右击,在下拉菜单中选中Past。

说明:原来的Section是不允许这样嵌套粘贴的,这也是Containner灵活的地方。

image 100 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

3)创建Containner副本

选中Containner之后,可以右击点击下拉菜单中的Duplicate菜单,自动创建当前Containner的副本在页面中,并且副本会直接添加在原Containner的下方或者后面。

image 101 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

另外和其他元素一样Containner也支持苦跨站点复制粘贴。在当前网站复制Containner之后,在另外的站点的编辑页面需要粘贴的地方,右击菜单中选择Past Form Other Site。

image 102 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

5.4 Elementor嵌套元素中的Containner

Elementor目前支持了嵌套元素功能,基于这个功能你可以使用Mega 菜单元素,可以在Tab元素Item内部编辑内容。

我们以Tab元素为例子,以前Tab元素的Item内容只能是文本编辑,如果你想用Elementor编辑需要做一个Elementor模版来动态调用。

而现在通过Containner和嵌套元素功能,你可以直接在Tab元素Item内使用Elementor编辑内容,这给页面内容制作带来了很多便捷性。

image 103 - Elementor Containner超详细讲解教程(附视频) - NUTSWP

Elementor原生的Mage Menu也是用相同功能和原理。

总结

Flexbox和Grid布局实现了Containner更加灵活的布局效果,可能一开始使用会觉得设置项目相对Seciton来说更多,会不适应,但是用多了熟悉之后,你会更喜欢Containner。

0 0 投票数
文章评分
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
文章分类
文章标签
0
希望看到您的想法,请您发表评论x
文章导航

搜索你想找的内容

建站咨询请联系企业微信
感谢你的信任!
咨询和购买请通过微信和我联系!