对于总部位于贝尔格莱德的大型机构 OSM 来说,Elementor 3.2 发布的时机再好不过了——是时候进行改造了。了解他们的设计师如何使用新的文本路径、蒙版、粘性列和渐变按钮为他们的网站赋予清新时尚的外观。
![/></figure>
<p>我们<a href=](https://elementor.com/cdn-cgi/image/f=auto,w=1200,h=629/marketing/wp-content/uploads/sites/9/2021/05/25.05.2021_OSM-CASE-STUDY_BLOGWOOH-05.png)
我们已经存在超过 12 年了,尽管我们的团队位于贝尔格莱德,但我们欢迎来自世界各地的客户。我们的大多数客户都是初创公司和小型企业,但我们的投资组合中也有一些成熟的企业。
作为一家设计和开发机构,我们认为紧跟最新趋势并为我们的客户提供最佳解决方案非常重要。我们的网站一直是我们的名片:一个我们可以展示我们的创造力并为访问者提供 OSM 体验的地方。
我们的新网站一年前推出,现在是时候进行改造了。
Elementor 3.2发布的时机恰到好处!我们的主要网站设计师Jovan Lakić使用文本路径小部件、蒙版选项、渐变按钮和粘性列来更新我们的主站点页面。
看看他到目前为止做了什么:
如果您正在寻求有关如何充分利用 Elementor 新功能的灵感和指导,那么您来对地方了。我写这篇文章的目的是展示如何在不编写任何代码的情况下获得这些惊人的效果。但说实话——这就是你一开始就开始阅读它的原因,对吧?????
让我们潜入水中。如何知道是否该重新设计您的网站
波浪式副标题,感谢文本路径小部件
网站开发服务页面是我们网站上访问量最大的页面之一,因此我们希望它更具吸引力。使用文本路径小部件,我们设法获得了这些令人惊叹的波浪形副标题。看一看。
前:
![文本路径之前 文本路径之前](https://elementor.com/cdn-cgi/image/f=auto,w=600,h=224/marketing/wp-content/uploads/sites/9/elementor/thumbs/text-path-before-p7q28b5z5c9beyilg441vn36a8v4uhsmwv18t847ze.png)
后:
![/></figure>
<h3 class=](https://elementor.com/marketing/wp-content/uploads/sites/9/2021/05/Gradient-CTA.gif)
1. 在 Elementor 编辑器中 – 搜索Text Path小部件并将其拖入:
![/></figure>
<p>2. 将占位符文本替换为您自己的。 </p>
<p>3. 在<strong>样式</strong> 选项卡中,调整字体系列、大小和颜色。</p>
<p>4. 单击<strong>显示路径</strong>切换,这样您就可以更好地可视化您的文本路径。如有必要,您可以稍后将其关闭。</p>
<p>5. 在<strong>路径类型</strong>中选择一个选项。我们选择了“Wave <em>”。</em>如果您想要更弯曲的外观,您可以随时选择“自定义”选项。只需单击<strong><em>+</em></strong>按钮,上传您之前绘制或下载的曲线:</p>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=300,h=219/marketing/wp-content/uploads/sites/9/2021/05/text-path-widget-300x219.png)
![/></figure>
<p>6. 对齐文本路径小部件的位置——我们选择将其对齐到中心。500 像素的默认小部件大小占据了整个列 – 因此在更改大小之前您可能无法看到对齐方式的变化。</p>
<p>7. 选择<strong>文本方向</strong>。我们把事情搞混了,第一行文本是 LTR(从左到右),第二行是 RTL(从右到左):</p>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=251,h=300/marketing/wp-content/uploads/sites/9/2021/05/upload-SVG-251x300.png)
![/></figure>
<p>就那么简单!</p>
<p>以下是我们如何使用这个简洁功能的更多示例。</p>
<p><strong>前:</strong></p>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=194,h=300/marketing/wp-content/uploads/sites/9/2021/05/edit-text-path-widget-194x300.png)
![之前-1 之前-1](https://elementor.com/marketing/wp-content/uploads/sites/9/elementor/thumbs/Before-1-p7q3tev0c0feq5kl0ap4uqc9fxevgjhlrhs5ddg8us.png)
![前 2 前 2](https://elementor.com/marketing/wp-content/uploads/sites/9/elementor/thumbs/Before-2-p7q3twpxxv3uuqun40f1o3u0q8yuisgi5y6dhmprka.png)
后:
如何将图案变成具有渐变感的形状
用形状创建图案是陈词滥调。让我们反过来。
我们必须吹嘘一下,并说每个人都被我们主页上的模式所震撼。
前:
但是,在使用了遮罩 功能后,我们对图案进行了一些改造。你觉得我们图案的新外观怎么样?
后:
![/></figure>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=720,h=448/marketing/wp-content/uploads/sites/9/2021/05/screenshot-3.png)
![/></figure>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=720,h=474/marketing/wp-content/uploads/sites/9/2021/05/screenshot-4.png)
![/></figure>
<p><a href=](https://elementor.com/cdn-cgi/image/f=auto,w=720,h=459/marketing/wp-content/uploads/sites/9/2021/05/screenshot-5.png)
惊人的网站开始使用将您的愿景变成像素完美的网站开始设计
如何使用蒙版选项创建这样的形状
1. 从编辑器中拖动图像小部件并上传您选择的图像(或图案,如我们的例子)。
2.在Advanced选项卡中找到Mask选项并单击以将其打开:
![/></figure>
<p>3. 从列表中选择一个形状(我们使用“Blob”),或上传您自己的 SVG 或 PNG 格式:</p>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=146,h=300/marketing/wp-content/uploads/sites/9/2021/05/Mask-widget-146x300.png)
![/></figure>
<p>4. 设置Mask 的大小以指定它应该如何适合其容器。选择“适合”或“填充”选项,或在“<strong>自定义尺寸</strong>”部分使用蒙版尺寸:</p>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=300,h=267/marketing/wp-content/uploads/sites/9/2021/05/Blob-shape-300x267.png)
![/></figure>
<p>5. 通过单击设备图标调整不同屏幕(平板电脑、手机)的掩码:</p>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=300,h=266/marketing/wp-content/uploads/sites/9/2021/05/Mask-size-300x266.png)
![/></figure>
<p>6. 添加一些<a href=](https://elementor.com/cdn-cgi/image/f=auto,w=300,h=270/marketing/wp-content/uploads/sites/9/2021/05/different-device-mask-300x270.png)
![/></figure>
<p>而已!</p>
<p>啊,还有一件事——你注意到我们改进后的 CTA 按钮了吗?我们添加了渐变按钮效果,使它们更具吸引力。毕竟,2021 年的设计趋势很大程度上与渐变有关。</p>
<p>我们当前网站上的按钮只有一个带有纯色<a href=](https://elementor.com/cdn-cgi/image/f=auto,w=157,h=300/marketing/wp-content/uploads/sites/9/2021/05/Mask-animation-157x300.png)
前:
![/></figure>
<p><strong>后:</strong><video src=](https://elementor.com/marketing/wp-content/uploads/sites/9/2021/05/Old-CTAs.gif)
如何将渐变按钮效果添加到您的按钮
1. 转到样式选项卡,然后单击背景类型选项 中的渐变图标,将纯色背景变成渐变背景:
![/></figure>
<p>2. 选择两种颜色并调整每种颜色的位置。这样,您可以控制渐变之间的过渡,以及渐变的锐利或微妙。</p>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=240,h=300/marketing/wp-content/uploads/sites/9/2021/05/Gradient-icon-240x300.png)
![/></figure>
<p>3. 选择渐变类型:“线性”或“辐射”。我们实现了线性的,但您应该测试并决定最适合您的网站设计。</p>
<figure class=](https://elementor.com/cdn-cgi/image/f=auto,w=298,h=300/marketing/wp-content/uploads/sites/9/2021/05/Gradient-location-298x300.png)
![/></figure>
<p>4. 使用滑块或输入精确值来调整渐变“角度”。</p>
<p>5.添加悬停效果,使按钮更具交互性。</p>
<h2 class=](https://elementor.com/cdn-cgi/image/f=auto,w=300,h=94/marketing/wp-content/uploads/sites/9/2021/05/Linear-gradient-300x94.png)
通常情况下,当访问者向下滚动页面时,他们只是忘记了他们最初出现在页面上的原因。即使不是这种情况,想象一下有粘性子标题或重要信息会有多有用。这是我们在品牌发展页面上测试过的。看看这个。
前:
后:
如何实现粘性列
1. 选择内部部分 小部件(在主小部件内)并转到高级选项卡。
2. 在运动效果 部分,选择粘滞效果 -> 顶部。
3. 在偏移量中, 添加值 100(0 是默认值)。
4. 选择“留在列中” 。这意味着内柱保留在主要部分内。
没那么难,对吧?
利用新功能展示创造力!
希望我们鼓励您探索 Elementor 3.2,并使用我们描述的这些很酷的功能。我们仍在更新我们的网站,迫不及待地想看看您为您的网站想出了什么——也许我们可以得到更多的想法!