01- Elementor入门之网页布局

主题的作用一文中讲到了一个网页最终呈现出来的样式由两部分构成:

  • 网页模板(页头,页脚,侧边栏)
  • 网页主体内容

网页模板部分由主题控制,而网页的主体则由我们在创建网页时定义。当我们在wordpress后台新建一个网页的时候,除了网页模板外,默认是没有任何内容的。

mark

接下来我们从单个网页开始,了解Elementor编辑器中的网页布局和设置。

一、模板显示控制

如果使用的是Astra主题,在新建网页时可以单独控制网页模板中的header、sidebar、footer区域是否显示。

mark

为了方便展示,以下所用演示页面取消了侧边栏,只保留了网页模板的页头和页脚部分。

点击上图中的“使用Elementor编辑”即可进入网页主体内容编辑模式。左侧为elementor编辑器工具区,右侧为当前编辑网页的实时显示效果和编辑区域。

mark

二、Elementor布局基础

在Elementor中,所有的网页最终都由布局元素和实体元素组成。

布局元素由section段和column列(栏)组成。这两个元素在最终的网页中不会体现出来,只是辅助实体元素的显示,相当于给网页画格子。

Widget元素则是呈现到网页中最终看到的部分,包括图片,标题,文字等。

他们之间的逻辑关系如下:

  • Section段,一个section占用一整行,即页面有多宽,Section就有多宽。Section的高度由自定义属性或者其中的填充元素高度决定。
  • columns列,一个Section可以分成多列,用于更精细化布局,column中可以嵌套column。
  • Widget元素,必须位于columns中。
mark
mark

一个成型的网页的布局示例:

mark

Section和Column属性

添加完Section和Column后,可以通过左侧的菜单栏,进一步对它们进行精细化设置,如背景颜色,与其他section或Column的间距等。

mark
mark

具体每一项设置的意义,可参考: Elementor官网文档

三、响应式布局

所有Elementor布局默认都具有自适应屏幕大小功能,Elementor称为响应式布局responsive。自适应功能主要是为了适配网页在不同尺寸的屏幕上的显示效果。

当我们使用大屏显示器和手机打开网页时,Elementor会将其中的部分元素自动缩放,或者变换排列组合,以便更符合人的视觉体验。

以如下排版为例:

采用1行2列方式布局,内容由标题、文字、图片组成。

mark

在笔记本和大屏幕显示器上,呈现出的效果如下:

mark

当在手机上浏览网页时,会看到如下效果,由于手机屏幕的宽度小,2列布局会让内部的字体和图片变得很小,不适合阅读,此时布局会自动变化为单列显示:

mark

如想更精细化控制每个元素在不同尺寸屏幕上的表现,可以通过元素的属性菜单单独控制。

mark

所有具备以上标志的属性都可以单独设置不同屏幕的显示效果。

mark

元素的隐藏和显示

如需要控制某个元素在不同屏幕上是否显示,可通过元素的“高级设置”菜单中的“响应”进行控制。

mark

或者通过左下角的实时预览功能切换至不同的显示视角。

mark

三、实体元素Element

在Elementor中提供了近100种widget元素,足够我们外贸B2B、B2C等网站使用了。其中部分widget元素需要Elementor Pro专业版支持。

elementor入门

具体每个元素的demo演示效果可查看Elementor元素组件demo演示网页。

元素属性设置

每个实体元素都具有独立的属性设置,通过这些属性设置可以非常方便的控制每个元素的不同显示效果,足以应对大部分网页制作需求了。
以“标题”元素为例,可设置的属性包括:

  • 字体类型,尺寸、颜色、对齐、文字特效等
  • 动画效果
  • 与其余元素的“外距”和“内距”、边框等。
mark

这些设置选项大多和office办公工具中的概念一样或类似,理解起来并不难。内距、外距、定位等部分属性为网页排版独有,这部分的设置具体请参考TTVPS后续文章。

End

Table of Contents

欢迎关注TTVPS公众号,一起交流探讨学习!

欢迎关注TTVPS公众号,及时接收最新文章!