Elementor教程-Sections概述

Section是Elementor中最重要的模块,因为Column和Widgets 都是包含在Section中,今天我们就来介绍一下Section。

我们可以看到,当Section属于激活状态时,在页面左侧,会出现编辑Section的面板,包含了3个属性分类:Layout / Style / Advanced。下面我们依次介绍每个属性的含义。

Section属性

Elementor教程 – Section – Layout

Elementor教程 – Section面板 Layout属性

Stretch Section:使用js来强制将Section设置为全屏宽度。

Content Width:Content层宽度的设置,有2种属性:Boxed / Full Width。如果设置为Boxed,则可以使用滑块来调整Content层的宽度。如果设置为Full Width,则Content层自动扩展为全屏。

Elementor教程 – Section面板 Layout属性 – Content Width 为Boxed

Columns Gap:用于设置列间距,包含以下几种属性:Default / No Gap / Narrow / Extended / Wide / Wider

Height:设置Section的高度,同样也包含了几种属性:Default / Fit to screen / Min Height。如果选择Min Height,可以通过手工来修改高度值。

Elementor教程 – Section面板 Layout属性 – Height为Min Height

Content Position:类似垂直方向位置设置,包含几种属性:Default / Top / Middle / Bottom。

Elementor教程 – Section – Layout – Structure

Elementor教程 – Section面板 Structure属性

Structure属性用于设置显示当前结构,并且可以快速的重置结构。

Elementor教程 – Section – Layout – Structure

Elementor教程 – Section面板 More Structure属性

More Structure属性可以在不重置结构的情况下,直接根据内置结构快速修改。


Elementor教程 – Section – Style

Style属性下包含了:Background / Border / Shape Divider / Typography。

Background:背景色设置部分,可以对默认背景&移动至背景色进行设置。设置可以是纯色 / 渐变色 / 视频3种类型。

Border Type:对边框的类型 / 边框宽度 / 边框圆角进行设置。类型分为:None / Solid / Double / Dotted / Dashed / Groove。

Shape Divider: 可以理解为给Section添加一个Shape作为背景,类型很多,可以看下图效果更加直接。

Elementor教程 – Section – Style

Typography:对字体的颜色设置


Elementor教程 – Section – Advanced

Advance属性下包含了:Advance / Motion Effects / Responsive / Attributes / Custom CSS。

Advance:Margin 和 Padding设置间距和边距;z-index设置层级

Motion Effects:专业版才有的功能;Entrance Animation包含N个属性,可以各自尝试一下。

Elementor教程 – Section – Advance

Responsive :自适应设置,Visibility部分可以设置为:在台式机 / 笔记本电脑 / 手机上隐藏


至此,对于Section的详细参数说明就完成了,更多的还是需要大家动手的实践一下。

发表评论

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