Добавление кнопки на баннер в Squarespace — это отличный способ привлечь внимание к определенному призыву к действию на вашем сайте. Кнопки можно использовать, чтобы побудить посетителей подписаться на вашу рассылку, купить товар или связаться с вами.
В этой статье мы покажем вам, как добавить кнопку на баннер в Squarespace. Мы также дадим вам несколько советов по оформлению кнопки, чтобы она отлично смотрелась на вашем сайте.
Добавление кнопки на баннер
Чтобы добавить кнопку на баннер, вам нужно воспользоваться функцией Code Block в Squarespace. Эта функция позволяет добавлять на сайт код HTML, CSS и JavaScript.
Чтобы добавить блок кода:
1. Войдите в свой аккаунт Squarespace и перейдите в главное меню. 2. Щелкните на странице, где вы хотите добавить кнопку. 3. В левой боковой панели нажмите на знак + рядом с «Добавить блок». 4. Прокрутите вниз и нажмите «Код». 5. Новый блок кода будет добавлен на вашу страницу.
6. В блок «Код» вставьте следующий код:
Текст кнопки
7. Замените «#» на URL, на который будет ссылаться кнопка. 8. Замените «Текст кнопки» на текст, который вы хотите отобразить на кнопке. 9. Нажмите «Применить». 10. Теперь ваша кнопка будет видна на вашей странице!
Стилизация кнопки
Теперь, когда вы добавили свою кнопку, вы, возможно, захотите придать ей нужный стиль, чтобы она выглядела на вашем сайте. Кнопки в Squarespace создаются с помощью CSS, который представляет собой код, управляющий отображением элементов HTML на веб-странице.
К счастью, Squarespace предоставляет несколько готовых классов CSS, которые можно использовать для стилизации кнопок. Чтобы посмотреть, какие классы доступны, войдите в свою учетную запись Squarespace и перейдите в раздел Дизайн > Стили > Кнопки и формы > Главные кнопки > Просмотреть все классы.
Вот некоторые из наиболее популярных классов:
- .button: Этот класс добавляет основной стиль к вашей кнопке.
1. Перейдите на вкладку Дизайн и нажмите на Баннер.
2. В редакторе баннеров перейдите на вкладку «Кнопки».
3. Здесь вы можете добавить кнопку на баннер, выбрав тип кнопки, цвет и размер.
4. После добавления кнопки нажмите на кнопку Сохранить, чтобы сохранить изменения.
-
.button-primary: Этот класс придает кнопке более выраженный вид.
-
.button-secondary: Этот класс придает кнопке более сдержанный вид
-
.button-ghost: Этот класс делает вашу кнопку прозрачной с контуром
-
.button-pill: Этот класс закругляет углы кнопки
-
.button-small: Этот класс делает кнопку меньше.
-
.button-large: Этот класс делает кнопку больше.
Чтобы использовать один из этих классов в вашей кнопке, просто добавьте его в код следующим образом:
Вы также можете оформить кнопки с помощью встроенных стилей CSS. Для этого добавьте атрибут style непосредственно в HTML-код, как показано ниже:
В этом примере мы устанавливаем черный цвет фона кнопки и белый цвет текста. Вы можете играть с различными свойствами CSS, пока не добьетесь желаемого вида вашего сайта!