首页 » elementor » academy » Build a Blog in Elementor » Elementor Pro制作博客网站 [10] 创建链接

Elementor Pro制作博客网站 [10] 创建链接

在上一课中,我们学习了如何编辑和启用 404 页面,在本课中,我们将创建一个特殊的登录页面来展示我们网站上最重要的链接。通常也称为“生物链接”页面,此页面的链接可用于社交媒体资料,您可能仅限于一个链接,例如 Instagram。

我们将首先创建一个新页面,并将其命名为 Links。然后我们将单击使用 Elementor 编辑。

首先,让我们隐藏页眉和页脚,并从空白页开始。为此,我们将转到页面设置,并将页面布局更改为 Elementor Canvas。完美的。

接下来,我们将创建一个包含一列的新部分。我们将宽度设置为 500,并将高度更改为适合屏幕。

然后我们将选择 Column,并将 Widgets space 设置为 0 以删除 widgets 之间的默认空间。

很好,现在我们有了页面结构,我们可以开始添加内容了。首先,我们将拖入一个图像小部件……然后选择……并插入我们的图像。
接下来,我们将向其添加一个链接,以将访问者带到网站主页。单击自定义 URL > 动态标记,然后选择站点 URL。

接下来,我们将通过转到“高级”>“蒙版”并将其打开来使图像变圆。默认形状是圆形,所以我们都设置好了。分数!

接下来我们将拖入一个按钮小部件。我们将添加我们的社交媒体句柄作为文本,并输入我们的社交链接。然后我们将文本居中对齐。

在样式中,将排版更改为文本,并添加一个边框半径以圆角。在高级中,我们将取消链接并在按钮的顶部和底部添加一些填充。

我们将拖入另一个 Button 小部件,并输入我们的文本。然后我们将链接添加到清单。将对齐设置为对齐。然后,在样式中,将文本颜色设置为主要颜色,并将按钮颜色设置为完全透明。

接下来我们将设置按钮悬停状态。我们将文本颜色更改为白色,将按钮颜色更改为强调色。好的。

现在我们将在我们的按钮周围添加一个边框。将类型更改为 Solid,并将宽度更改为 1。我们将颜色设置为 Accent。然后我们将边界半径设置为零以锐化按钮角。

现在我们将添加一些填充。单击链接图标以取消链接填充,然后更新填充值以增加按钮文本周围的间距。转到高级选项卡,让我们取消边距值的链接并在底部添加边距,这将在按钮之间增加一些空间,因为我们将更多按钮添加到页面。

添加更多按钮将变得轻而易举。我们需要做的就是右键单击并选择复制。再重复两次。好的!那是多快啊!?

现在我们将选择每个复制的按钮,并更新其文本和链接。对于最后一个按钮,单击“高级”,然后取消链接……并删除边距以将按钮设置回默认值。完美的。

桌面视图已全部设置。让我们检查响应式视图。我们将使用快捷键 Control 或 Command Shift M 切换到移动视图,然后从顶部栏中选择平板电脑。它看起来很完美,所以现在让我们从顶部栏中选择它来切换到移动设备。

这里的元素切割得非常靠近边缘,所以让我们在它们周围添加一些空间。选择该列,然后在“高级”中取消链接填充。现在添加一些填充,瞧,我们的页面已经针对移动设备进行了优化。

好的,让我们发布和预览。伟大的!现在剩下要做的就是登录 Instagram、编辑个人资料并更新我们的网站 URL。现在,只要关注者点击此 URL,他们就会直接进入链接页面。

(因此,现在无需每次我们在 Instagram 上发帖或在个人简介页面中创建第三方链接并阻止关注者访问我们的网站时都更新个人简介中的链接。)非常方便!

下一节课,我们将学习如何在我们的网站上管理多个作者,所以一定要继续观看。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top