如何使用Elementor的进度条功能

如何使用Elementor的进度条功能

进度条功能可能在一般的B2B网站上比较少见,通常情况下Jack老师喜欢将进度条功能用在网站的产品采购流程介绍页面上,通过进度条的方式,让客户直观的感受到,整个采购流程具有多少个环节,每个环节占整个采购流程的多少比重。当然了Elemetor编辑器的进度条功能可不仅仅是上面Jack老师说的这一种用途,巧妙地运用进度条功能能够做出让人耳目一新的设计风格,这个留待给同学们自己去发挥。那么接下来Jack老师就和同学们一起来学习一下 如何使用Elementor的进度条功能 。

第一步:将Eleentor编辑器的进度条功能元素添加到内容编辑区域

如何使用Elementor的进度条功能

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

第二步:对进度条功能元素的主体功能进行设置

如何使用Elementor的进度条功能

2.1、“标题”:指的是出现在进度条上面用于表明该进度条内容的文字。除了自定义外,我们还可以点击右边的“动态标签”进行设置

2.2、“类型”:指的是进度条的表现形式,系统提供了默认、信息、成功、警告、危险五种表现形式,肉眼看上去他们之间的差别只是进度条颜色不同而已,但是在代码方面所包含的定义是有所区别的,希望同学们能够引起重视。(如果有bootstrap代码框架知识基础的同学可能理解的会更加容易一些)

2.3、“百分比”:指的是当前进度条占据整个项目总进度的百分比,具体表现为有颜色部分的进度条占据整条进度的比例

2.4、“内部文本”:指的是出现在进度条上的文字和2.1中的标题是有一定区别的。

第三步:对进度条功能元素的样式功能进行设置

如何使用Elementor的进度条功能

3.1、“颜色”:指的是进度条本身的颜色,注意在上面的主体功能2.2选项中有5种系统预设的类型,每一种类型对应着一种颜色,当我们想要选择一个自己需要的特殊颜色的时候,就可以在样式里面的颜色中进行专门设置

3.2、“背景颜色”:指的是整个进度条的颜色,注意:因为进度已经存在的话,那么开始部分是会被3.1中的颜色所遮盖的,也就是意味着3.2的背景颜色只出现在整个进度条中未完成部分的进度中

3.3、“高度”:指的是整个进度条的高度,高度越高,整个进度条显得越粗

3.4、“边框半径”:默认情况下进度条4个角都是直角,我们可以利用边框半径将4个之间变成圆弧角

3.5、“内部文本—颜色”:指的是显示在进度条内部中已完成部分的进度颜色块上的文字

3.6、“内部文本—排版”:指的是上面的内部文本的字体、字号大小、字体粗细这些方面的设置

如何使用Elementor的进度条功能

3.7、“文本颜色”:指的是显示在进度条上部的进度条标题文字颜色

3.8、“文字排版”:指的是对整个进度条标题的文字字体、字号大小、字体粗细等方面的设置

好了,以上就是本章关于 如何使用Elementor的进度条功能 的全部内容。下面我们来查看一下具体的进度条设置效果:

如何使用Elementor的进度条功能

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

原文来自邦阅网 (52by.com) - www.52by.com/article/48601

声明:该文观点仅代表作者本人,邦阅网系信息发布平台,仅提供信息存储空间服务,若存在侵权问题,请及时联系邦阅网或作者进行删除。

评论
登录 后参与评论
发表你的高见
  • 如何使用Elementor的视频元素 如何使用Elementor的视频元素
    如何使用Elementor的视频元素功能在前几章的教程中,我们实操讲解了图像、文字能Elementor编辑器元素,那么今天我们来学习另外一个非常重要的前端设计要...
    Jack SEO
  • 新手跨境卖家如何快速提升独立站转化率? 新手跨境卖家如何快速提升独立站转化率?
    ——从流量到下单的系统优化指南对刚搭建独立站的跨境卖家来说,最困惑的场景往往是:后台显示每天有几百甚至上千访客,但订单量始终停留在个位数,转化率长期低于0.5%...
    -UEESHOP
  • 推荐几个wordpress外贸建站主题 推荐几个wordpress外贸建站主题
    作为全球使用人数最多的建站程序,Wordpress已经走过了第18个年头,目前全球建站程序占有率达到了40%多,Wordpress能够占据这么大的市场份额,我觉...
    大卫搞跨境
  • Elementor新手教程:怎么使用elementor设计网站页面! Elementor新手教程:怎么使用elementor设计网站页面!
    Elementor是一款网页设计生成器,通过‘拖放’来设计我们的站页面,不需要任何代码知识就能完全设计出精美并且响应式的页面,通过这个工具让很多小白都能实现自己...
    Hoan外贸建站博客
  • 如何用Elementor设计网站页头 如何用Elementor设计网站页头
    Elementor是Jack老师从事网站设计多年一来遇到过的最出色的网页内容编辑器,没有之一!那么从今天这篇文章开始,Jack老师将会用一系列的教程文章来详细讲...
    Jack SEO
  • Elementor的第三方附加组件大全 Elementor的第三方附加组件大全
    尽管Elementor提供了80多种的组件,但你很有可能想要更高级更独特的东西来提升你的页面建设体验。
    我是Ben
  • 如何用Elementor设计banner 如何用Elementor设计banner
    如何用Elementor设计bannerBanner也可以称之为海报,一般出现在网页的顶部。因为前端设计采用的是Html语言,而Html语言采用的是从上往下依次...
    Jack SEO
  • 如何用Elementor修改标题文字样式 如何用Elementor修改标题文字样式
    如何用Elementor修改标题文字样式因为Elementor编辑器的强大功能,让我们在网站搭建的时候有更多的选择机会和述求表达。在本系列教程内容中,Jack老...
    Jack SEO
  • 如何使用Elementor编辑器Columns元素 如何使用Elementor编辑器Columns元素
    如何使用Elementor编辑器Columns元素从本章节开始,Jack老师将对Elementor编辑器中的所有元素逐一的进行详细实操讲解。今天讲解的是Elem...
    Jack SEO
  • 如何使用Elementor的图像元素 如何使用Elementor的图像元素
    如何使用Elementor的图像元素文字、图像、视频这三大元素构成了网页前端设计的绝大部分内容,相比较而言,图像的内容表达的精准性可能比其他两者要略逊一筹,但是...
    Jack SEO
  • 如何使用Elementor的文本编辑器元素 如何使用Elementor的文本编辑器元素
    如何使用Elementor的文本编辑器元素文本编辑器元素在Elementor编辑器中是最重要的文字内容表达形式,某种意义上来说,Jack老师认为文本编辑器的作用...
    Jack SEO
  • 如何使用Elementor的按钮功能 如何使用Elementor的按钮功能
    如何使用Elementor的按钮功能在前端页面设计中,按钮是非常重要的一个内容元素,它的功能不在于能够表达多少页面设计者的思想,按钮存在的意义为的就是更好的引导...
    Jack SEO
  • 如何使用Elementor的分隔线功能 如何使用Elementor的分隔线功能
    如何使用Elementor的分隔线功能Elementor编辑器的分隔线就是Html5代码中的<hr>标签,常见于页面设计和文章撰写过程中的内容分隔。...
    Jack SEO
  • 如何使用Elementor的谷歌地图功能 ? 如何使用Elementor的谷歌地图功能 ?
    如何使用Elementor的谷歌地图功能在外贸建站过程中,特别是B2B类型的企业网站,往往很重视展现自己的公司实力和形象,所以在做网站的时候,大部分的站长都会要...
    Jack SEO
  • 如何使用Elementor的图标功能 ? 如何使用Elementor的图标功能 ?
    如何使用Elementor的图标功能今天我们来讲一个简单但是经常会用到的网站搭建元素—图标。图标形式简单但是却能够代表很多潜在的意思,比方说一个电话的图标,就能...
    Jack SEO