回到所有的课程
课程库

连接块

学习如何使用链接块将任何元素,如图像,或任何布局,如横幅,变成链接。

这个视频的特点是一个旧的UI。更新版本即将发布!

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

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

在这节课中:

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

添加一个链接块

链接块图标缩略图

要向项目中添加链接块,请打开元素面板(快捷方式:A),并将链接块元素拖到页面上。

基本部分包含的五个元素是Div块、列表、列表项、链接块(突出显示)和按钮。

向Link块中添加元素

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

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

设置链路的类型和值

就像文本链接而且按钮链接块具有相同的链接选项—URL、页面、集合页(适用时)页节、电子邮件、电话和文件。了解有关链接设置的更多信息。

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

风格链接块

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

样式链接块的悬停状态

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

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

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

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

覆盖蓝色文本

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

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

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

将Div块转换为Link块,反之亦然

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

在左侧,转换为链接块按钮突出显示在Div块设置面板中。在右侧,转换为Div块在链接块设置面板中突出显示。

将链接块转换为Div块

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

将Div块转换为Link块

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

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

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