Wordpress插件与设计 - Elementor 基础教程 2 - 内部区段 小工具的使用方法 - 特色图片

Elementor 基础教程 2 - 内部区段 小工具的使用方法

Elementor 的内部区段小工具是一个强大的工具,它可以帮助你在页面上创建复杂的网站设计。

使用此工具可以轻松掌握网站的布局,并大大提高网站设计的自由度。

内部区段小工具可以创建更多的编辑栏,在容纳各种小工具的同时,还可以对背景,边框等外观进行细致的自定义设置。

本教程将详细介绍内部区段小工具的功能设置以及使用方法。

在深入介绍之前,建议你阅读《Elementor 通用教程 – 编辑段,编辑栏,内部区段是什么?》。这篇文章将帮助你理解编辑区域的组件概念及其之间的关系。

Elementor 内部区段小工具

内部区段小工具是用于在编辑栏内设置编辑段功能的小工具。

点击内部小工具上方的双层三点按钮,就可以进入设置页面,如下图所示。

Elementor jiaocheng neibuquduan2-1

1.内部区段小工具的布局标签

布局标签的设置选项如下:

  1. 内容宽度
  2. 栏间距
  3. 高度
  4. 垂直对齐
  5. 溢出
  6. HTML标签
  7. 结构

1-1 内容宽度

内容宽度是设置编辑栏内显示内容元素的宽度选项,如下图。

Elementor jiaocheng neibuquduan2-2

内容宽度可以选择“方框”或“全宽度”。

  • 方框:自定义内部区段宽度的设置项
  • 全宽度:内部区段贴合编辑栏最大宽度(无需设置)

默认情况下(即对“方框”不做任何数值设置时),内部区段的宽度将自动贴合编辑栏的宽度。

如果需要调整“方框”的宽度,可以自定义设置宽度,如下图。

Elementor jiaocheng neibuquduan2-3

上图中可以看到,当内部区段宽度选择“方框”并设定特定数值时,编辑栏内的内部区段宽度根据设定的宽度进行变化。你可以根据设计需求输入数值来设定宽度。

需要注意的是,“方框”的设置值再高也不会超过编辑栏的最大宽度。

当设定的数值超过编辑栏的最大宽度时,内部区段的宽度将自动切换到全宽度。

1-2 栏间距

栏间距是设置编辑栏和编辑栏之间的间隔距离设置项。

为了方便理解,我们给编辑栏添加了背景颜色。如下图。

栏间距的设置选项如下:

  • 没有间隙
  • 扩展
  • 宽阔
  • 自定义
● 1-2-1 没有间隙

“没有间隙”指的是内部区段内的编辑栏边框与小工具边框之间间隔为零的选项,如下图。

从上图中可以看到,内部区段内编辑栏之间的间隙距离为零。

● 1-2-2 窄

“窄”指的是内部区段内编辑栏边框到小工具边框之间的间隔变窄的设置。

● 1-2-3 扩展
● 1-2-4 宽
● 1-2-5 宽阔
● 1-2-6 自定义

自定义指的是可以自定义设置内部区段内编辑栏边框到小工具边框之间的距离。

上图中我们可以看出,内部区段内编辑栏边框到小工具边框的距离可以自由设定。

需要注意的是,设定值不能超过编辑栏的宽度,以及当小工具的形状不是正方形时,自定义设置的数值会优先设定为小工具长边到编辑栏边框之间的宽度值。

1-3 高度

“高度”是设置内部区段高度的设置选项。一般情况下为默认。

高度设置选项包含如下:

  • 默认
  • 适应屏幕
  • 最小高度
● 1-3-1 默认

默认是根据小工具高度自动适应的高度。根据小工具的高度变化自动调节内部区段的高度。

● 1-3-2 适应屏幕

“适应屏幕”是将内部区段的高度设置为与显示屏幕高度相同的选项。

如果屏幕的分辨率高度为1080px时,内部区段的适应屏幕高度也是1080px。

● 1-3-3 最小高度

“最小高度”是设置内部区段的最小高度设置选项。默认最小高度数值为400。如下图。

图中的内部区段高度是400px。你还可以根据设计需求滑动按钮或者输入数值进行高度设置。

需要注意的是,当内部区段的设置高度低于小工具的高度时,内部区段的高度设置将无效,并会优先采用小工具的高度作为内部区段的高度。

1-4. 垂直对齐

垂直对齐指的是当内部区段的高度高于小工具的高度时,进行垂直方向对齐的选项

垂直对齐选项包括:

  • 顶部
  • 中部
  • 底部
  • 之间的间距
  • 周围的空间
  • 均匀空间
● 1-4-1 顶部

顶部是将内部区段编辑栏的位置垂直方向顶部对齐的选项。如下图:

默认状态与顶部对齐是相同的。

※只有当内部区段的高度高于小工具的高度时,垂直对齐选项才会正常运行显示。

● 1-4-2 中部

中部是将内部区段编辑栏的位置垂直方向中央对齐的选项。如下图:

● 1-4-3 底部

底部是将内部区段编辑栏的位置垂直方向底部对齐的选项。如下图:

● 1-4-4 之间的间距

之间的间距是内部区段内编辑栏之间的距离均等对齐的选项。如下图:

● 1-4-5 周围的空间

周围的空间是在内部区段内编辑栏之间间距均等对齐的前提下,也会对齐顶部和底部到上下编辑栏之间的距离的选项。如下图:

● 1-4-6 均匀空间

均匀空间是指内部区段内编辑栏之间和上下编辑栏到内部区段上下边框间距相同对齐的选项。如下图:

1-5 溢出

溢出是指内部区段编辑栏内小工具的显示溢出内部区段框外时,设置是否隐藏的功能。

通常情况下,小工具的显示溢出编辑栏的情况较少,但并非没有。比如弹窗显示、菜单显示等都有可能溢出编辑栏外。此时如果使用隐藏的话,弹窗显示或者菜单显示就无法正常使用。因此,一般情况下选择默认即可。

1-6 HTML标签

HTML标签是给内部区段设定一个HTML标签的功能。

如果您对HTML不是很了解,此项设置可以忽略。选择默认即可。

1-7 结构

结构是重新设定内部区段编辑栏宽度的默认模板。

有3种模板可以选择。点击其中一个模板,内部区段的编辑栏宽度会同步指定模板的宽度。如下图:

结构内的数值是整体宽度的百分比。

例如,33,66的结构是,左边的编辑栏的宽度为内部区段总宽度的33%,右边编辑栏的宽度为66%的意思。

点击下方的重置按钮,即可回到选择结构模板前的状态,或者默认状态(默认状态就是50,50)

2.内部区段的样式标签

关于内部区段的样式标签,请参考《Elementor 通用教程 – 小工具样式标签的通用设置和使用方法

3.高级设置

Elementor小工具的高级设置标签基本上是通用设置。关于高级设置,请参考《Elementor基础教程 – 高级标签的设置和使用方法》。

以上就是内部区段小工具的功能和设置以及使用方法的说明。

希望本篇教程对您使用Elementor有帮助。

用户评论
{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}
副业时代 站内使用 图像内容 LOGO图像 4
fuyeshidai

做点副业,为生活加点料

相关 文章
Wordpress插件与设计 - Elementor 专业教程 4 - Gallery小工具的设置和使用方法 - 特色图片
Elementor 专业教程 4 - Gallery小工具的设置和使用方法
Wordpress插件与设计 - WP教程 18 - 设置自定义静态首页,打造吸引眼球的网站门面! - 特色图片
WP教程 18 - 设置自定义静态首页,打造吸引眼球的网站门面!
Wordpress插件与设计 - Elementor 专业教程 13 - Flip Box小工具的设置和使用方法 - 特色图片
Elementor 专业教程 13 - Flip Box小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 16 - 图标列表小工具的设置和使用方法 - 特色图片
Elementor 基础教程 16 - 图标列表小工具的设置和使用方法
Wordpress插件与设计 - Elementor 专业教程 17 - Review小工具的设置和使用方法 - 特色图片
Elementor 专业教程 17 - Review小工具的设置和使用方法
Wordpress插件与设计 - WP教程 31 - 不可不知的WP工具功能,让站点管理和维护更高效! - 特色图片
WP教程 31 - 不可不知的WP工具功能,让站点管理和维护更高效!
Wordpress插件与设计 - Elementor 专业教程 1 - Post小工具的设置和使用方法 内容标签篇 - 特色图片
Elementor 专业教程 1 - Post小工具的设置和使用方法 内容标签篇
Wordpress插件与设计 - Elementor 基础教程 23 - 社交媒体小工具的设置和使用方法 - 特色图片
Elementor 基础教程 23 - 社交媒体小工具的设置和使用方法
Wordpress插件与设计 - Elementor 基础教程 18 - 进度条小工具的设置和使用方法 - 特色图片
Elementor 基础教程 18 - 进度条小工具的设置和使用方法
Wordpress插件与设计 - Elementor 通用教程 4 - 高级标签的设置和使用方法 - 特色图片
Elementor 通用教程 4 - 高级标签的设置和使用方法
快速 搜索
站长 推荐
副业时代 站内使用 推广图像 - PR-image.webp

Elementor

建站必备插件推荐
Elementor是一款WordPress平台上的可视化页面构建器插件,无需编程即可设计网页

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Astra Theme

建站主题推荐
Astra Theme是一个快速、轻量级且高度可定制的WordPress主题,适合各种网站

访问官网
副业时代 站内使用 推广图像 - PR-image.webp

Crocoblock

建站功能插件推荐
Crocoblock是一系列高功能的Elementor附加插件,用于创建动态内容和专业级网站

访问官网
副业时代 站内使用 elementor 免费教程 横板图像 - image-2.webp

Elementor Free Widget

Elementor 免费版小工具
是设计网页时所需的基础类工具。
大约包含30多个小工具

访问课程页
副业时代 站内使用 elementor 专业教程 横板图像 - image-2.webp

Elementor Pro Widget

Elementor 专业版小工具
是面向专业熟练用户的高级设计套件。
大约包含30多个小工具

访问课程页
已阅读 文章
您还没有阅读任何文章
AI Tools Post
AI工具与服务推荐 - Stability AI开发者平台 - 生成式AI工具和服务 - 特色图片
Stability AI开发者平台 - 聚合多模态AI工具,激发创意开发无限可能
AI工具与服务推荐 - Photo AI - 人像摄影AI照片生成器 - 特色图片
Photo AI - AI照片生成器,112秒打造专属写真,记录美好瞬间
AI工具与服务推荐 - Mootion - AI原生内容创作平台 - 特色图片
Mootion - AI驱动创意实现,将想象转化为现实之美!
AI工具与服务推荐 - STORYD - AI商业演示文稿生成工具 - 特色图片
STORYD - 商业PPT智能制作平台,高效出图,赢得广泛赞誉
AI工具与服务推荐 - Copy.ai - AI营销和销售操作系统 - 特色图片
Copy.ai - GTM AI平台,引领销售营销自动化新纪元
AI工具与服务推荐 - SeaArt AI - 免费AI绘画生成器 - 特色图片
SeaArt AI - 用文字描绘心中所想,见证AI为艺术带来的无限可能,开启创意之旅!
Canva Post
Canva使用教程 - Canva 新手指南 6 - 无需专业软件!用Canva制作高质量动态视频 - 特色图片
Canva新手指南6 - 无需专业软件!用Canva制作高质量动态视频
Canva使用教程 - Canva 新手指南 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍! - 特色图片
Canva 使用教程 9 - 如何巧妙地利用建组功能,让你的设计效率翻倍!
Canva使用教程 - Canva 新手指南 1 - 全面解析Canva文本框的基本功能! - 特色图片
Canva新手指南1 - 全面解析Canva文本框的基本功能!
Canva使用教程 - Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘! - 特色图片
Canva 相关教程 1 - 未来的设计在这里!Canva「Magic Studio」AI工具包大揭秘!
Canva使用教程 - Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择? - 特色图片
Canva 相关教程 2 - Canva免费版与付费版的详细解析,助你做出最明智的选择?
Canva使用教程 - Canva 新手指南 5 - 掌握Docs的功能和技巧,使文档创作更简单! - 特色图片
Canva新手指南5 - 掌握Docs的功能和技巧,使文档创作更简单!
Smm Post
社媒运营推广 - Youtube - 从0到10万!12个实用技巧快速提升YouTube频道的订阅量 - 特色图片
从0到10万!12个实用技巧快速提升YouTube频道的订阅量
社媒运营推广 - Lemon8 - 一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地! - 特色图片
一文带你解析海外版小红书Lemon8!Z世代的社交新宠,品牌营销新阵地!
社媒运营推广 - Youtube - 解密YouTube用户互动策略!掌握频道人气的秘诀 - 特色图片
解密YouTube用户互动策略!掌握频道人气的秘诀
社媒运营推广 - Youtube - 新手必看!解锁YouTube视频广告投放优化技巧,提升转化率 - 特色图片
新手必看!解锁YouTube视频广告投放优化技巧,提升转化率
社媒运营推广 - Youtube - YouTube运营全攻略 从零到一打造你的油管频道 - 特色图片
YouTube运营全攻略:从零到一打造你的油管频道
社媒运营推广 - Youtube - YouTube Shorts!解析短视频创作和收益的秘密 - 特色图片
YouTube Shorts!解析短视频创作和收益的秘密
AI工具 分类筛选
AI Main Category checkbox