外贸独立站About Us页面团队成员介绍模块搭建

本文介绍如何使用Elementor的CTA功能元素搭建外贸独立站About Us页面的团队成员展示模块,包括图片设置、样式调整及悬停动画配置,并完成FAQ版块设计,帮助卖家完善独立站公司介绍页面。

Elementor独立站团队介绍
自建站

“Get To Know Us”这个大版块的一部分内容和前面的“Know The Industry”相似,除了一部分文字说明,其他几乎是一样的,所以不再解释。

独立站页面搭建

接下来是具体团队成员的介绍。有很多方法可以实现该效果,但是为了和案例模板一样,这里选用CTA功能元素进行设计。

首先,将“内部区段”功能元素拖动到刚刚添加的大型待编辑内容块,并将内部区段的宽度设置为1400px,然后在内部区段复制一个新的小内容块。完成后,将CTA功能元素添加到待编辑的小内容块中。我们先做第一个样板,然后复制到另外两个小内容编辑块,这样可以节省很多重复操作。

在CTA内容中,我们设置“Image”的“Skin”模式为Classic,然后将第一个团队成员Shaun Curry的照片添加进来,将“图像尺寸”设置为“完整的”。然后在“Content”中的“Title”和“Description”文本框输入所需的文本,并将其“Title HTML Tag”设置为H3。

主要内容设置完成后,还需要在样式功能中设置一些效果。在“Box”的“Height”中,设置高度为115px,水平和垂直对齐为中间对齐,然后将图片高度设置为300px。

然后在“样式”的“Content”中将“Title”文字字体设置为Montserrat,“尺寸”设置为18px,“重量”设为400,“Spacing”设置为5;将“Description”文字字体设置为Montserrat,“尺寸”设置为15px,“重量”设置为200。在设置字体和字体大小后,我们还需要更改字体的颜色。在“NORMAL”状态下,设置背景颜色#FFFFFF,“Title Color”为#011640,“Description Color”为#848484。

上述操作完成后,当鼠标指针悬停在人物照片上时,照片没有变化。因此,我们在“样式”中的“Hover Effects”中,将“Hover Animation”(悬停动画)设置为Zoom In(也可选择其他特效),将“Blend Mode”设置为Normal,然后切换到“Hover”状态进行相关设置。

这样一个完整的人物介绍就完成了。案例模板中有两行三列,共6个人物介绍。我们只需要做好刚才的工作,将第一个模板复制到其他待编辑的内容块中,然后替换每个小内容块中的人物图像和相关文本介绍。

(本文内容根据网络资料整理,出于传递更多信息之目的,读者需判断其时效性,不代表连连赞同其观点和立场)

更多