Добавить кнопку призыва к действию в Weebly

Последнее обновление платформы Weebly включает торговую площадку, где разработчики могут продавать приложения пользователям Weebly. Приложение может быть бесплатным или премиальным, при этом вам нужно будет заплатить разовую или периодическую плату. Одно из бесплатных приложений в текущем центре приложений – «Call-out Box», которое помогает пользователям добавить кнопку призыва к действию на своем сайте Weebly. В этой статье мы подробно обсудим, как добавить кнопку призыва к действию на сайте Weebly, используя приложение из центра приложений, а также используя собственный код.

Что такое кнопка призыва к действию?

Призыв к действию или окно призыва – это элемент, размещаемый на веб-странице, чтобы побудить или привлечь пользователя к выполнению желаемого действия. Действительно полезно привлечь внимание пользователя к обычному содержанию страницы. Элемент призыва к действию может быть кнопкой, цветным текстовым полем или комбинацией различных элементов.

Примеры призыва к действию

Назначение кнопки призыва к действию зависит от владельца сайта, и некоторые из наиболее часто используемых примеров:

  • Привлекайте трафик на определенную страницу, чтобы увеличить количество просмотров.
  • Предложите скидку на продукт и привлечите пользователей на страницу этого продукта.
  • Используется для сообщения предложения о популярной бесплатной или платной загрузке.
  • Попросите пользователей попробовать демоверсию.
  • Предложите кнопку регистрации, чтобы быстро зарегистрироваться для членства на сайте.
  • Предложите вариант обратного звонка для таких служб, как рестораны.

Как добавить кнопку призыва к действию в Weebly

Есть два простых способа добавить элемент призыва к действию на сайт Weebly:

  • Использование бесплатного окна вызова из центра приложений
  • Использование настраиваемого окна вызова

Использование окна вызова из центра приложений Weebly

Самый простой способ добавить кнопку призыва к действию в Weebly – это подключить приложение «Call-out box» из центра приложений. Как только приложение подключено, вы можете перетаскивать его в любое место на странице. По сути, это цветное текстовое поле, в которое вы можете добавлять любые элементы по умолчанию. Ниже приведен пример окна призыва к действию с заголовком, текстом и кнопкой.

Окно вызовов в Weebly

Хотя кажется, что добавить поле выноски очень просто, недостатком является то, что элементы будут похожи на другие элементы на странице. Например, вы не можете настроить семейство шрифтов или цвет кнопки на другой, отличный от используемого по умолчанию на сайте. Вероятно, мы можем ожидать, что другой разработчик может предложить другой стиль окна вызова позже в центре приложений.

Использование настраиваемого виджета с призывом к действию

Независимо от элементов по умолчанию, всегда можно добавить в Weebly свои собственные пользовательские виджеты. Здесь мы объясняем виджет окна вызова, как показано ниже:

Это заголовок окна вызова

Вот ваше содержание – Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Aeneanmodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis disparturient montes. Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Aeneanmodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis disparturient montes.

Поле и кнопка имеют цвета по умолчанию и отображаются разными цветами при наведении курсора. Каждый элемент выноски можно настроить, и вы можете добавить приведенный ниже код CSS в свой «main_style.css» для централизованного использования на своем сайте или добавить его в раздел заголовка для использования на одной странице.

<style>
/* Call out box */
.call-out-box {
background: #097AC6;
color: white !important;
padding: 16px;
margin: 11px 6px 11px 6px;
border-radius: 3px;
position: relative;
float: left;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}
/* Call out box on hover */
.call-out-box:hover {
background: #E68AB8;
color: white !important;
padding: 16px;
margin: 11px 6px 11px 6px;
border-radius: 3px;
position: relative;
float: left;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}
/* Call to action button */
.cta-btn {
float:right;
color: #333333;
background-color:#fafafa;
border-color: #4cae4c;
padding: 6px 12px;
font-size: 20px;
font-weight: 600;
line-height: 25px;
text-align: center;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
}
/* Call to action button on hover */
.cta-btn:hover {
background: green;
color: #ffffff;
}
</style>

Добавьте приведенный ниже HTML-код внутрь элемента кода для встраивания в любое место на странице. Это может быть полноразмерный блок или размещенный рядом с другим элементом для создания двух или трех столбцов.

<div class="call-out-box">
<h2>This is a title of call out box</h2>
<p>Here is your content - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<button class="cta-btn">Action Button</button>
</div>

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *