向导航栏添加新链接就像复制和粘贴一样简单。好的,我们有一个简单的导航栏。让我们进入“主要部分”。我们想要重新创建当前的 Webflow 主页(或多或少),所以我们还需要在容器中添加一个网格。
添加网格后,我们可以右键单击它并删除默认的额外行。这样,我们的容器内就有一个简单的两列网格。
回到盒子模型,我们还想在每一列中添加一个 div,并为它们提供类(左列网格和右列网格),以便我们正确标记它们,并可以在以后设置它们的样式。
我们在右列网格中添加了
一个图像元素,现在我们可以在左列网格中添加内容。
我们从一个标题、一个段落和一个按钮开始。正如您 whatsapp 号码数据 在上面的视频中看到的,我们可以通过将元素拖放到画布上或直接将其拖放到导航器中来添加元素。
使用网格时,在导航器内对齐元素更加容易。如您所见,我们在导航器中而不是画布上添加了段落。这是因为元素没有到达我们想要的位置。
现在,我们可以添加内容并使用右侧的样式面板设置其样式。我们调整了字体大小并添加了填充。
好的让我们让它看起来更好一点
从 CTA(号召性用语)按钮开始。让我们改变按 手机号码 钮的颜色,并在按钮文本和实际按钮的内边缘之间添加更多填充。
我们使用 padding 在元素内部创建空间,使用 margin 在元素外部创建空间。对于分隔标题、段落和按钮之类的操作,我们使用边距,因为我们想在这些元素之间留出空间。但是对于我们的按钮,我们想在按钮元素内创建更多空间,所以我们使用了填充。
这将完美地带我们进入在主要部分添加 2024 年 seo 趋势:搜索的未来 填充的部分,从而让我们的网格与导航栏之间留出一些空间。
在向主要部分添加填充后
我们还希望将图像置于右列网格的中心,以使其与左列网格对齐。
为此,我们只需选择之前制作的右侧列网格,然后在“样式”面板中单击“居中对齐”。这将确保右列网格内的所有内容都落入框的中心。
现在我们将添加一个部分来显示我们拥有的所有客户。
创建五列网格后,让我们将类名设置为客户端徽标网格。现在,我们要将我们的徽标上传给我们的资产管理器。为了演示目的,我们将使用相同的标志五次。
需将您的徽标拖放到网格
的每一列中即可。放下第一张图片后,我们要确保我们的标志位于网格的中间。要将徽标置于中央,请选择图像,然后在样式面板中单击居中对齐。
我们刚刚建立了我们的第一个主页!
如果您能做到这一点,您的 Webflow 开发技能将很快得到提高。
但是等等,我们只知道这在桌面上看起来不错。那么平板电脑或手机怎么样?