回到所有的课程
课程库

连接块

了解如何使用链接块将任何元素,如图像,或任何布局,如横幅,成为一个链接。

本视频采用了旧的用户界面。更新版本即将到来!

链接块类似于Div块因为它们可以用于结构和布局,但链接块内部的区域变成了链接。链接块可以将任何元素,如图像,或任何布局,如横幅,转化为链接。

图中并排显示了一个Div块和一个Link块。它们都包含图像、标题和段落文本。

在这节课中:

  1. 添加Link块
  2. 在Link块中添加其他元素
  3. 设置链路类型
  4. 设置Link块的样式
  5. 将Div块转换为链接块,反之亦然

添加链接块

链接块图标缩略图

要向项目添加链接块,请打开元素面板(快捷方式:A)在左边栏,并拖动一个链接块元素到您的页面。

包括在基本部分的五个元素是Div块,列表,列表项,链接块(高亮显示)和按钮。

向Link块添加元素

除了其他链接外,任何元素都可以从Add面板或画布拖动到Link块。

一个包含粉色花朵图片的链接块,一个副标题“摄影”和一个H1“鲜花”。
专家提示:其他链接不允许嵌套在链接块中,但您可以做的是放入一个文本块元素,并将其样式设置为看起来像一个按钮或使用按钮类。

配置链路类型和链路值

就像文本链接而且按钮,链接块有相同的链接选项- URL,页面,收集页面(适用时)页面部分,电子邮件,电话和文件。了解更多关于链接设置的信息。

链接设置面板显示了六个链接类型的图标,一个URL文本字段,一个“在新标签中打开”的复选框,一个Preload的下拉菜单和一个显示所有设置按钮。
对于Link块,您还可以通过选择元素并按enter键来访问链接设置。

风格链接块

在创建布局和结构时,链接块与Div块一样灵活。它们通常被用来创建布局,比如链接到其他页面的博客文章列表。

设置Link块的悬停状态样式

链接块是交互式的,所以最好设置一个不同的悬停状态以向用户显示它是可点击的。按照以下步骤设置悬停状态:

  1. 选择连接块
  2. 点击并选择徘徊
  3. 添加一个盒阴影或任何其他样式属性
  4. 进入none/default状态
  5. 创建一个过渡盒阴影属性或在悬停状态下设置的任何其他样式属性
类选择器部分的状态下拉菜单显示了五种不同的状态:无、悬停、按下、聚焦和访问。
第一步在左边,选择框阴影效果。第二步在右边,盒子阴影设置面板显示类型,角度,距离,模糊,大小和颜色定制。

尝试改变悬停时的背景图像:

  1. 添加一个背景图像链接块
  2. >徘徊
  3. 改变背景图像
  4. 没有/默认状态
  5. 创建一个过渡背景图像财产

覆盖蓝色文本

在默认情况下,当任何文本放置在Link块中时,它都会显示蓝色和下划线,因为这是默认的文本样式所有的链接标签

你可以通过覆盖文本装饰和字体颜色来改变特定link块的默认链接样式:

  1. 选择连接块
  2. 风格的面板
  3. 改变文本装饰没有一个
  4. 改变字体颜色黑色的
样式面板的排版部分显示了一个高亮区域,显示黑色文本和装饰中选择的none样式。
将text元素本身的文本装饰设置为“none”不会从文本中移除下划线。要删除下划线,您需要直接设计Link块的样式。

将Div块转换为链接块,反之亦然

当您意识到使用的是Div块而不是组元素的链接块时,将Link块更改为Div块或反之亦然。如果您需要更改块的作用方式,快速地将其中一个替换为另一个也是很有用的。

在左侧的Convert to Link块按钮在Div块设置面板中突出显示。在右边,Convert to Div块在链接块设置面板中高亮显示。

将链接块转换为Div块

要将Link块更改为Div块,请右键单击Link块并将其转换为Div块。

将Div块转换为链接块

要将Div块更改为链接块,请右键单击该Div块并将其转换为链接块。

注意,如果您的Div块包含任何链接元素,您将看到一个错误,您将无法将Div块转换为链接块。这是因为,不可能嵌套链接。首先需要删除Div块中嵌套的所有链接元素,或者将link块转换为Div块。

尝试Webflow——它是免费的
Baidu
map