如何使用Elementor的基本画廊功能

跨境头条 2年前 (2022) iow
12.7K 0 0

如何使用Elementor的基本画廊功能

如何使用Elementor的基本画廊功能

当你在设计网站前端页面效果的时候,有没有遇到过这样的情况—在某块区域范围内,我们想用多张相同类型内容的图片来对某一事物进行表达,但是却没有很好的办法将这些图片统一集中起来进行展现?Elementor编辑器给我们提供了一个非常好用的功能叫做basic gallery,翻译过来就是基本画廊。它的功能有点像淘宝的主图一样,以缩略图的形式进行展示,当我们点击之后显示完整尺寸的图片,但是淘宝上是鼠标悬停就会图像切换,而基本图库这一元素是需要点击才能进行切换的。那么今天Jack老师就和同学们一起来学习 如何使用Elementor的基本画廊功能 。

第一步:将Elementor编辑器的基本画廊功能元素添加到内容编辑区域

如何使用Elementor的基本画廊功能

如上图所示,我们在左侧的Elementor编辑器中找到箭头1所指的“basic gallery,也就是基本画廊”功能元素,然后按住鼠标左键不松开,慢慢的拖到上图箭头2所指的地方,也就是内容编辑版块中。注意在没有将”基本画廊”功能元素添加到内容编辑版块区域之前,内容编辑版块外面是一个灰色的虚线框,只有当出现了一个蓝色的虚线外边框之后才代表着我们已经成功的将“基本画廊”功能元素添加到了内容编辑版块中!

第二步:对basic gallery(基本画廊)元素的主体功能进行设置

如何使用Elementor的基本画廊功能

2.1、“图像库”:也就是说我们需要添加的图片,点击之后就会出现我们的wordpress媒体库,然后选择我们需要展现的图片即可

2.2、“图像尺寸”:系统已经预设了13种图片的尺寸,点击之后,我们在上一步选择的图片大小会随之改变

2.3、“栏”:指的是基本画廊以几列进行图像展示,如上图所示,Jack老师选择了4栏,那么在前端页面上就是4个列进行展示

2.4、“链接”:指的是点击基本画廊中的图片之后,图片会跳转到什么地方,系统给出了三种预设方式,分别是:媒体文件、附件页面以及不跳转三种。那么这三种方式有什么不一样呢?

2.4.1、“媒体文件”:指的就是点击图片之后,图片由原来的缩略图变成原始尺寸图片

2.4.2、“附件页面”:指的是点击图片之后,系统自动生成一个该图片的文章页面

2.5、“灯箱”:注意如果我们在2.4选项中选择的是附件页面或者不跳转的话,这里是不会出现灯箱的。只有选择了媒体文件才会出现灯箱的功能设置。那么灯箱是什么效果呢?当我们开启灯箱之后,点击基本画廊里面的缩略图就会展现图片的原始尺寸,这时候如果想看第二张图片,那么点击图片旁边的导航箭头按钮即可。如果没有开启灯箱的话,那么需要先点击关闭当前的完整图片然后点击第二张缩略图才能查看完整图像

2.6、“排序”:系统提供了2中缩略图片排序方式,分别是默认排序和随机排序。随机排序之后,页面的缩略图排版会有一定的变化哦!

第三步:对basic gallery(基本画廊)元素的样式功能进行设置

如何使用Elementor的基本画廊功能

3.1、“间距”:系统给的是默认间距20像素,当然我们也可以选择自定义间距,点击自定义之后,拖动滑动条就可以进行缩略图间的横向与纵向间距调整

3.2、“边框类型”:指的是所有缩略图的外边框线的样式,有实线,双实线,圆点,虚线等样式可供选择

3.3、“边框半径”:指的是原本4个直角的缩略图片,通过边框半径调整成4个圆弧角,理论上我们甚至可以调整成圆形图片

3.4、“宽度”:指的是边框线的粗细

3.5、“颜色”:指的是边框线的颜色

如何使用Elementor的基本画廊功能

3.6、“显示”:指的是缩略图的文字要不要进行展现

3.7、“对齐”:指的是与缩略图配套的文字与缩略图的对齐方式

3.8、“文本颜色”:指的就是对应文字的颜色

3.9、“排版”:这个就是对文字的粗细、字号、字体等方面进行设置。

如果我们在3.6的显示选项中选择了“隐藏”,那么下面这些对齐、文本颜色和排版功能就都不会展现了

好了,以上就是本章关于 如何使用Elementor的基本画廊功能 的全部内容。Basic Gallery也就是基本画廊功能能够让我们在设计前端页面效果的时候,提供一种完全不一样的图像展现方式。通过点击缩略图从而展现完整尺寸原始图片的效果。

如果还有不理解的地方,请使用百度或者谷歌浏览器搜索关键词--Jack外贸建站,排名首页首位的就是我的网站,网站上有更多外贸建站、谷歌SEO优化、外贸客户开发等实操干货内容在等着你哦!

来源:Jack SEO

版权声明:iow 发表于 2022年8月3日 am8:39。
转载请注明:如何使用Elementor的基本画廊功能 | 蘑菇跨境

相关文章