Webflow：如何在菜单外制作 CTA 按钮？

已发表: 2024-11-27

创建有效的号召性用语 (CTA) 按钮是网页设计中最重要的元素之一。 CTA 按钮会提示访问者采取特定操作，例如注册新闻通讯、进行购买或联系您的企业。虽然许多网站在导航菜单内都设有 CTA 按钮，但将 CTA 按钮放在菜单外部可以帮助其更加突出并带来更多转化。在本文中，我们将引导您完成如何在 Webflow 中的菜单外部设计和放置 CTA 按钮的步骤。

为什么将 CTA 按钮放置在菜单之外？

搜索引擎优化

将 CTA 按钮放置在主导航菜单之外可以使其对访问者更加可见。当策略性地放置在高流量区域（例如标题或页面顶部）时，此按钮可以快速吸引用户的注意力。目标是让 CTA 更易于访问并确保立即引起注意，而无需用户浏览网站。

将 CTA 按钮放置在菜单之外的优点包括：

  • 提高可见性：通过将其放置在显着位置，例如标题中或浮动在侧面，用户可以轻松发现它。
  • 提高转化率：突出的 CTA 更有可能被点击，从而提高转化率。
  • 改进的用户体验：它为用户提供了一种直观的方式来快速采取行动，而无需浏览不同的部分。

在 Webflow 的菜单外部制作 CTA 按钮的步骤

Webflow 提供了一个用户友好的界面，无需编写任何代码即可构建网站。请按照以下步骤在 Webflow 项目的菜单外部添加 CTA 按钮：

1. 设置您的 Webflow 项目

在开始之前，请确保您已设置 Webflow 项目并且位于设计器视图中。

  • 步骤1.1 ：打开您的Webflow项目并转到您要添加CTA按钮的页面。
  • 步骤 1.2 ：在设计器模式下，确保您的页面布局已准备就绪，导航菜单就位（或您想要添加按钮的任何位置）。

2. 创建新的 CTA 按钮

要在菜单外创建新的 CTA 按钮，您需要将其策略性地放置在页面上。

  • 步骤 2.1 ：从左侧面板中，将Button元素从“添加面板”拖放到画布上。
  • 步骤 2.2 ：自定义按钮文本以匹配您希望用户执行的操作（例如，“开始”、“注册”、“了解更多”）。
  • 步骤 2.3 ：根据您的设计偏好设置按钮的样式。您可以调整字体、大小、颜色、背景和边框半径以符合您的品牌美感。

3. 将 CTA 按钮放置在菜单之外

现在您已经有了按钮，是时候将其放置在菜单之外了。有几种方法可以做到这一点，具体取决于您希望按钮出现的位置。

选项 1：浮动 CTA 按钮

浮动 CTA 按钮是提高可见性的流行选择。即使用户滚动，它也会粘在页面的侧面或底部。

  • 步骤 3.1 ：选择您创建的按钮，然后转到右侧“样式”面板中的Position设置。
  • 步骤3.2 ：将位置设置为Fixed 。这可确保当用户滚动时按钮保持在屏幕上的适当位置。
  • 步骤 3.3 ：通过设置Top 、 Right 、 Bottom或Left值来调整位置，将按钮放置在屏幕上您想要的位置（例如，右下角或左上角）。
  • 步骤 3.4 ：添加 z-index 值以确保按钮显示在其他元素（例如菜单）之上。您可以将 z-index 设置为更高的值，例如10或100 ，以确保它位于顶部。

选项 2：位于标题部分

如果您希望 CTA 按钮位于菜单外更传统的固定位置，则可以将其放置在标题部分中。

  • 步骤 3.1 ：转到Navigator面板并找到标题部分。
  • 步骤 3.2 ：创建一个新的Div Block作为 CTA 按钮的容器。这将有助于相对于其他元素定位按钮。
  • 步骤3.3 ：将按钮拖到Div Block容器中。
  • 步骤 3.4 ：使用样式面板中的Margin或Padding设置将按钮移动到标题内的所需位置（例如，在主菜单外部但仍与标题对齐）。

选项 3：粘性导航栏上的 CTA 按钮

另一种选择是将 CTA 按钮放置在粘性导航栏上。这意味着按钮将跟随用户向下滚动页面，但它将保留在主菜单之外。

  • 步骤3.1 ：选择导航栏元素并在样式面板中将其Position设置为Sticky 。
  • 步骤 3.2 ：在您希望显示按钮的菜单项旁边添加一个新的Div Block 。
  • 步骤 3.3 ：将按钮放置在该Div Block内，并使用边距或填充调整其位置。

4. 使按钮具有交互性

网站

按钮定位后，您可以添加交互以使其更具吸引力。

  • 步骤 4.1 ：选择按钮并转到 Webflow 中的Interactions面板。
  • 步骤4.2 ：添加悬停交互，例如当用户悬停在按钮上时更改背景颜色或稍微缩放按钮。
  • 步骤 4.3 ：为按钮设置链接。您可以将其链接到另一个页面或外部 URL，或者设置打开模式或表单等操作。

5. 预览和发布

设置 CTA 按钮后，预览它在页面上的行为非常重要。

  • 步骤 5.1 ：单击右上角的Preview按钮以查看该按钮在页面上的外观和行为。
  • 步骤 5.2 ：测试其在不同屏幕尺寸上的响应能力，以确保其位置正确。
  • 步骤 5.3 ：对结果感到满意后，单击Publish以使按钮在您的网站上生效。

菜单外 CTA 按钮的最佳实践

虽然将 CTA 按钮放在菜单之外可能非常有效，但必须遵循一些最佳实践以确保其正常工作：

  1. 保持简单：不要用太多的 CTA 按钮使页面变得拥挤。专注于一项主要行动以获得最佳结果。
  2. 确保良好的可见性：确保按钮与背景形成鲜明对比，以吸引用户的注意力。
  3. 战略性定位：将按钮放置在用户可能注意到的区域，例如右上角或浮动在侧面。
  4. 在不同设备上进行测试：确保您的 CTA 按钮在移动设备、平板电脑和桌面设备上看起来很棒。

结论

在 Webflow 的菜单外部添加 CTA 按钮可能是提高可见性和促进转化的强大策略。通过执行上述步骤，您可以轻松创建并放置一个 CTA 按钮，使其从页面的其余内容中脱颖而出。无论您选择浮动按钮、粘性导航栏还是传统的标题位置，关键是要确保您的 CTA 放置在用户会注意到并鼓励他们采取行动的位置。借助 Webflow 直观的设计工具，实现这一目标比以往更简单！