spot_img
HomeDivi主题使用教程WordPress的Divi主题教程15:Divi主题的Supreme Card Carousal图片滚动模块编辑使用

WordPress的Divi主题教程15:Divi主题的Supreme Card Carousal图片滚动模块编辑使用

在使用WordPress做外贸网站的时候,有时候需要展示多张图片(比如客户的LOGO循环展示)。

使用DIVI中的supreme card carousal图片滚动模块,可以调整和设计图片样式,能够在网站上可以很好的展示图片效果。

Supremecard carousal图片滚动模块可以放置在您创建的任何WordPress的页面中。

在这篇文章中,

WP花园将会为您深入解如何使用divi主题中的图片滚动模块。

在使用Divi主题模块之前,你需要购买正版的Divi主题,这里是我们WP花园的Divi主题70%折扣购买通道。

什么是supreme card carousal图片滚动模块

在DIVI主题里,supreme card 模块不是默认安装的。

你要先安装好divi正版主题,然后再安装一个divi supreme付费插件才能启用和激活这个图片滚动模块。

carousal图片滚动模块是用来展示多张照片展示,

例如合作商的LOGO图片展示,

让整个网页页面图片的设计和展示上更加清晰简洁,

向网站访客展现您公司的强大实力。

贷款申请在线申请,高额度,快速下款!

案例需求

我们WP花园在使用WordPress帮助客户建站的网站时,

客户需要在WordPress的页面中展示多张合作商的LOGO图片展示。

那么使用divi的图片滚动模块,

就能够非常轻松快速的解决这个问题。

使用divi图片滚动模块,

做出来的效果大概为这个样子:

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

图片滚动模块编辑

好的,

现在我们WP花园将会将用使用divi来演示如何编辑制作如下的图片滚动模块。

进入到divi主题的可视化编辑器中。

先在页面中点击灰色+号按钮插入“Supreme Caldera Carousel”模块(此模块只能在row行的内部添加)添加模块成功之后将为您提供模块的选项。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

我们可以看见divi的模块编辑页面。

WordPress建站服务

那么接下来我们就需要手动来添加我们想要的图片,

点击灰色按钮【添加新项目】进行图片编辑。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

若不需要文字信息时可以将文字信息删除即可。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

在模块内容中“Image&Badge”中插入图片,

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

将图片下方Use Image as Background按钮关闭,

才可展示图片合适的尺寸大小,Badge Text可以为图片输入文字信息,

WordPress divi主题

若不需要将文字删除即可。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

在按钮选项中,

可以设置按钮样式,

若不需要将文字删除即可。

wordpress建站公司

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

设置好之后保存,

在模块设置页面复制好刚刚设置完成的图片设计样式。

替换第二张图片。

注意:

后续添加图片时步骤和上面一样,

可同时添加多张图片。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

点击第二张图片将图片更换,

在模块内容中“Image&Badge”中替换图片。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

添加完成之后,点击进入模块设置,在内容设置中设置相对应的图片滚动模块设计。

Centered Mode:图片居中对齐

Slides to show:页面展示的图片数量。

Slides to scroll:幻灯片数量

slider speed:图片滚动速度

Spacing:图片与图片之间的间距

Equal height:等高设置

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

若是不需要图片下方的圆点导航可以点击“Show Pagination”关闭即可。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

在页面中,

需要图片保持统一时在模块设置—设计中“Layout&Alignment”选择“inline”

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

“Width”可设置图片大小。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

在“Supreme Caldera Carousel”模块编辑—设计中可以对图片滚动模块进行文字、图片大小及间距等进行编辑设计。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

独立站教程教程 siteground

设置完成后点击保存,

可在页面展示图片滚动模块效果展示。

Divi主题的Supreme Card Carousal图片滚动模块编辑使用教程

WP花园结语

如果你想使用本文中的Divi模块,可以从这里购买Divi正版主题,享受70%的折扣。

在使用WordPress为客户做外贸网站的时候,

通常需要加入大量的图片和合作客户的LOGO图片时,

使用DIVI主题的“Supreme Caldera Carousel”可以方便的添加和设置,使画面更加干净整洁的同时也可以让海外买家提升对你们公司网站的信任感。

信任感增加了,在投放谷歌广告的时候,就能节省更多的广告费,从而提升转化率。

通过学习使用divi主题的“Supreme Caldera Carousel”模块,

能够让您的网站增加更多有趣的元素。

在使用divi主题开发网站的过程中,如果你遇到任何问题,欢迎给我们留言!

 

siteground 小红书电商教程
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES
spot_img

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据