Webflow: как сделать кнопку CTA вне меню?

Создание эффективной кнопки призыва к действию (CTA) — один из наиболее важных элементов веб-дизайна. Кнопка CTA предлагает посетителям выполнить определенные действия, например подписаться на рассылку новостей, совершить покупку или связаться с вашей компанией. Хотя многие веб-сайты имеют кнопки CTA внутри меню навигации, размещение кнопки CTA за пределами меню может помочь ей выделиться и привлечь больше конверсий. В этой статье мы покажем вам, как спроектировать и разместить кнопку CTA за пределами меню в Webflow.

Зачем размещать кнопку CTA за пределами меню?

Размещение кнопки CTA за пределами главного навигационного меню может сделать ее более заметной для посетителей. Если эта кнопка стратегически размещена в областях с высокой посещаемостью, например в заголовке или вверху страницы, она может быстро привлечь внимание пользователей. Цель состоит в том, чтобы сделать призыв к действию более доступным и гарантировать, что его сразу заметят, не требуя от пользователей навигации по сайту.

Преимущества размещения кнопки CTA вне меню включают в себя:

• Повышенная видимость : разместив его на видном месте, например, в заголовке или сбоку, пользователи смогут легко его заметить.
• Повышенные показатели конверсии . Выделяющийся призыв к действию с большей вероятностью будет кликнут, что увеличит конверсию.
• Улучшенный пользовательский интерфейс : он предоставляет пользователям интуитивно понятный способ быстрого выполнения действий без перехода по различным разделам.

Шаги по созданию кнопки CTA вне меню в Webflow

Webflow предлагает удобный интерфейс для создания веб-сайтов без необходимости написания кода. Выполните следующие шаги, чтобы добавить кнопку CTA за пределами меню вашего проекта Webflow:

1. Настройте свой проект Webflow

Прежде чем начать, убедитесь, что у вас настроен проект Webflow и что вы находитесь в представлении дизайнера.

• Шаг 1.1 . Откройте проект Webflow и перейдите на страницу, на которую вы хотите добавить кнопку CTA.
• Шаг 1.2 . В режиме дизайнера убедитесь, что макет страницы готов, а меню навигации на месте (или там, где вы хотите добавить кнопку).

2. Создайте новую кнопку CTA

Чтобы создать новую кнопку CTA вне меню, вам необходимо стратегически расположить ее на странице.

• Шаг 2.1 . С левой панели перетащите элемент Button из панели «Добавить» на холст.
• Шаг 2.2 . Настройте текст кнопки в соответствии с действием, которое вы хотите, чтобы пользователь совершил (например, «Начать», «Зарегистрироваться», «Узнать больше»).
• Шаг 2.3 : Оформите кнопку в соответствии с вашими предпочтениями в дизайне. Вы можете настроить шрифт, размер, цвет, фон и радиус границы в соответствии с эстетикой вашего бренда.

3. Разместите кнопку CTA за пределами меню.

Теперь, когда у вас есть кнопка, пришло время разместить ее за пределами меню. Есть несколько способов сделать это, в зависимости от того, где вы хотите, чтобы кнопка отображалась.

Вариант 1. Плавающая кнопка призыва к действию.

Плавающая кнопка CTA — популярный выбор для видимости. Он прилипает к боковой или нижней части страницы, даже когда пользователь прокручивает ее.

• Шаг 3.1 . Выберите созданную кнопку и перейдите к настройкам Position на правой панели стилей.
• Шаг 3.2 : Установите Fixed положение. Это гарантирует, что кнопка останется на месте на экране при прокрутке пользователем.
• Шаг 3.3 . Отрегулируйте положение, задав значения Top , Right , Bottom или Left , чтобы разместить кнопку в нужном месте на экране (например, в правом нижнем или левом верхнем углу).
• Шаг 3.4 . Добавьте значение z-индекса, чтобы кнопка отображалась над другими элементами, например меню. Вы можете установить для 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 . Нажмите кнопку и перейдите на панель Interactions в Webflow.
• Шаг 4.2 . Добавьте взаимодействие при наведении, например изменение цвета фона или небольшое масштабирование кнопки, когда пользователь наводит на нее курсор.
• Шаг 4.3 . Настройте ссылку для кнопки. Вы можете связать его с другой страницей или внешним URL-адресом или настроить такое действие, как открытие модального окна или формы.

5. Предварительный просмотр и публикация

После настройки кнопки CTA важно просмотреть, как она будет вести себя на странице.

• Шаг 5.1 . Нажмите кнопку Preview в правом верхнем углу, чтобы увидеть, как кнопка выглядит и ведет себя на странице.
• Шаг 5.2 . Проверьте его отзывчивость на экранах разных размеров, чтобы убедиться, что он расположен правильно.
• Шаг 5.3 . Если вы удовлетворены результатом, нажмите Publish , чтобы кнопка появилась на вашем веб-сайте.

Лучшие практики для кнопок CTA вне меню

Хотя размещение кнопки CTA за пределами меню может быть очень эффективным, важно следовать некоторым рекомендациям, чтобы она работала хорошо:

1. Будьте проще : не перегружайте страницу слишком большим количеством кнопок CTA. Сосредоточьтесь на одном главном действии для достижения наилучших результатов.
2. Обеспечьте хорошую видимость . Убедитесь, что кнопка хорошо контрастирует с фоном и привлекает внимание пользователя.
3. Разместите ее стратегически . Разместите кнопку там, где пользователи могут ее заметить, например, в правом верхнем углу или сбоку.
4. Тестируйте на разных устройствах . Убедитесь, что ваша кнопка CTA отлично выглядит на мобильных устройствах, планшетах и ​​настольных компьютерах.

Заключение

Добавление кнопки CTA за пределами меню в Webflow может стать мощной стратегией для улучшения видимости и увеличения конверсий. Следуя шагам, описанным выше, вы можете легко создать и разместить кнопку CTA, которая будет выделяться среди остального содержимого вашей страницы. Независимо от того, выберете ли вы плавающую кнопку, липкую панель навигации или традиционное расположение заголовка, главное — убедиться, что ваш CTA расположен там, где пользователи его заметят и побудят к действию. Благодаря интуитивно понятным инструментам проектирования Webflow добиться этого стало проще, чем когда-либо!