Кнопка написать нам – Набор номера при нажатии на кнопку на сайте. Как добавить кнопку с номером телефона на сайт

Содержание

Виджет «Напишите нам»

Виджет «Напишите нам» ВКонтакте

Категория: Виджеты / Автор: Артём

Виджет «Напишите нам»

Для чего нужен виджет «Напишите нам»?

Виджет «Напишите нам» позволяет организовать на сайте быстрый и удобный способ связи клиентов с представителем компании в удобной обстановке социальной сети ВКонтакте.

Как работает виджет «Напишите нам»?

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

Как подключить виджет «Напишите нам» к сайту?

Виджет «Напишите нам»

  1. открываем страницу с виджетом — https://vk.com/dev/ContactUs;
  2. указываем нужную ссылку на группу или пользователя;
  3. задаем текст для кнопки виджета;
  4. выбираем высоту кнопки;
  5. копируем полученный код и устанавливаем в нужное место на вашем сайте;
  6. получаем готовый виджет.

Ссылка, как альтернативный вариант виджета

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

http://vk.me/[короткий адрес пользователя или адрес группы]

Пример

http://vk.me/artemsannikov — как только пользователь перейдет по этой ссылке, откроется окно в котором будет выбор: либо написать сообщение либо открыть страницу (результат можно увидеть на изображений в начале статьи).

 

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Теги: Виджеты, Вконтакте.

Как настроить цель на кнопку в Яндекс Метрике.

Цель Яндекс Метрики на кнопку — одна из самых распространенных задач, которую приходится решать при настройке веб-аналитики сайта.

Предположим, что на вашем сайте или лэндинге есть какая-либо кнопка.

Например:

+ Кнопка «Купить»

+ Кнопка «Написать нам»

+ Кнопка «Регистрация», «Отправить», «Добавить в корзину» 

и.т.д.

Задача стоит следующая: нужно при клике по такого рода кнопкам, передать данные о выполнении этого клика в систему Яндекс Метрика как выполнение цели.

Каким образом это можно сделать?

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

Шаг 1. В первую очередь, нужно понимать, что для настройки подобной цели, в Яндекс Метрике нужно создать цель на Javascript событие.

Для того, чтобы это сделать переходим в раздел «Настройки — Цели» и придумываем для этой цели какой-либо идентификатор.

К примеру, я создал цель с идентификатором «test».

Шаг 2. Когда цель на Javascript-событие создана, мы приступаем к самому сложному этапу. Нам нужно зафиксировать событие (подробнее про события в этом курсе) клика по элементу кнопки на сайте.

Эту фиксацию можно произвести двумя основными способами:

1 способ. С помощью языка Javascript.

2 способ. Воспользоваться диспетчером тэгов Google Tag Manager.

В этой заметке я хотел бы остановиться на самом простом методе, как это можно реализовать — методе использования HTML-атрибутов. Более подробно о других способах настройки здесь.

Основное преимущество этого метода в том, что для его реализации от вас не требуется особых знаний Javascript и каких-либо подготовительных работ на сайте. Все, что нужно иметь — это доступ к исходному HTML-коду этой кнопки.

В то же время этот метод имеет целый ряд недостатков:

  • Вы не всегда можете иметь доступ к исходному HTML-коду этой кнопки. Это может быть вызвано самыми разными причинами. Чаще всего это связано с тем «движком» на котором работает ваш сайт. Для редактирования исходного кода кнопки нужно будет вмешиваться в исходный код шаблона сайта. Делать это не всегда хочется.
  • Если на вашем сайте множество однотипных кнопок, то ставить цель на каждую из них, внедряя HTML-атрибут, может быть довольно затруднительным занятием.

Итак, давайте посмотрим, что нужно сделать, чтобы настроить выполнение цели Яндекс Метрики при клике по какой-либо кнопке на вашем сайте.

Находим исходный HTML-код той кнопки, на которую необходимо настроить цель Яндекс Метрики и готовимся к редактированию этого кода.

Чаще всего, если кнопка идет в составе HTML-формы ее исходный код может выглядеть вот так:

<input type="submit" value="Подать заявку">

Если кнопка является ссылкой, то ее исходный код может выглядеть так:

<a href="#" target="_blank" rel="nofollow noopener">Написать</a>

Добавляем специальный HTML-атрибут, который называется onClick для кнопки, на которую нужно настроить Javascript-цель.

Для 1-го варианта:

<input type="submit" value="Подать заявку"/>

Для 2-го варианта:

<a href="#" target="_blank" rel="nofollow noopener">Написать</a>

Этот атрибут позволит нам в качестве его значения указать Javascript-код, который передаст данные о выполнении цели в Яндекс Метрику.

Буквально, атрибут onClick переводится как «при клике». Т.е. при клике по элементу, будет выполнен тот Javascript-код, который мы посчитаем нужным.

Пока значение этого атрибута у нас пустое.

Шаг 4. Вызываем специальный метод, который передаст данные о выполнении цели в систему Яндекс Метрика.

Метод, который отвечает за отправку данных о выполнении цели в систему Яндекс Метрика — это метод reachGoal.

Соответственно, если мы с вами добавим этот метод к нашему атрибуту onClick, то исходный код кнопки будет выглядеть так:

Где:

<input type="submit" value="Подать заявку"/>

XXXXXXXX — идентификатор вашего счетчика Яндекс Метрики.

test — идентификатор Javascript цели, которую мы создали на шаге 1.

или так:

<a href="#" target="_blank" rel="nofollow noopener"onClick="ym('XXXXXX','reachGoal', 'TARGET_NAME'); return true;">Написать</a>

Собственно, на этом все. Сохраните страницу и покликайте по кнопке в другом браузере, где вы не входили в свой аккаунт Яндекс Метрики.

Если все настроено корректно, то в отчете «Конверсии» вы увидите зафиксированные выполнения кликов по кнопке на вашем сайте.

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

Техническая сторона настройки целей в Яндекс Метрике.

Создание HTML и CSS кнопок для сайта


09.01.2020 12:40


Мы сделали свой сократитель ссылок


Новый инструмент поможет при составлении отчетов и аналитике переходов по сокращенным ссылкам — http://s.be1.ru/068mh


16.12.2019 18:20


Навигация по нашим инструментам стала более удобной и быстрой


Наших инструментов становится много, но у каждого пользователя есть свои часто используемые. Теперь их можно выделить и очень быстро найти — http://s.be1.ru/8qsjn


03.12.2019 13:13


Добавили возможность сохранения галочки Google в чекере позиций


Нарастив ресурсы для съема позиций в Google, теперь мы можем дать возможность сохранять проекты с галочкой — https://be1.ru/s/kdx9o


28.11.2019 18:21


Дополнили функционалом инструмент по проверке позиций сайта


Добавилась возможность выбора домена и языка результата в проверке по Google.


12.08.2019 10:00


Разработали новый SEO-инструмент, определяющий частотность запросов!


Инструмент поможет определить базовые виды частотностей поисковых запросов, данные тянутся непосредственно из Яндекс Вордстат. Ссылка на инструмент: https://be1.ru/wordstat/


02.07.2019 12:00


Обновили дизайн старого инструмента!


Мы до неузнаваемости обновили инструмент определяющий IP адрес компьютера, теперь в нем куча плюшек и современный дизайн! Ссылка на инструмент: https://be1.ru/my-ip/


13.06.2019 14:34


Добавили новый SEO-инструмент!


Он умеет быстро и бесплатно определять систему управления контентом (CMS) сайта.


07.05.2019 10:05


Мы переехали на новый сервер!


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


26.03.2019 10:47


Падение сервера 25.03.18


Остановка в работе сервиса связанна c DDoS атакой, в данный момент работа Be1 полностью восстановлена. Будем укрепляться и ждать следующую волну. Извините за временные неудобства.


19.02.2019 10:00


Новое расширение для анализа сайтов!


Наше расширение помогает бесплатно в один клик провести глубокий SEO-анализ сайта. Рекомендуем: https://be1.ru/goto/extension

Виджеты «Сообщения сообщества» и «Напишите нам» от ВКонтакте

Виджеты от ВКонтактеВсем привет. Относительно недавно появилось два интересных виджета от Вконтакте.

Это «Напишите нам» и «Сообщения сообщества», но многие о них до сих пор не слышали. Сегодня поговорим о том, для чего они нужны и как их установить на свой landing page.

Виджет «Напишите нам»

Суть виджета «Напишите нам» заключается в том, что на сайте размещается кнопка (ссылка), перейдя по которой, пользователь попадает в диалог с сообществом где может задать интересующие его вопросы.

виджет от ВК напишите нам

Этот виджет работает для:

  • групп;
  • сообществ;
  • личных страниц.

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

Установка виджета «Напишите нам»

Для того, чтобы получить код виджета, нужно перейти по этой ссылке:

виджет напишите нам

Здесь всего несколько параметров для настройки. Текст кнопки, размер и ссылка на страницу, с которой будет диалог.

Для установки на сайт, копируем первый скрипт, между тегами head. А div и второй скрип в то место, где будет выводится сам виджет.

Виджет «Сообщения сообщества»

Более интересным вариантом, на мой взгляд, является виджет «Сообщения сообщества» Это некое подобие онлайн консультанта. У вас на сайте располагается кнопка, при нажатии на которую раскрывается окошко с диалогом с привычным интерфейсом ВКонтакте. При этом, можно не только написать текст, но и прикрепить документ или фото.

Чтобы добавить такой виджет на сайт, у вас должна быть создано сообщество и в нем включены «Сообщения сообщества» и «Виджет сообщении». Именно здесь производятся основные настройки.

Виджет «Сообщения сообщества»

  • «Приветствие» — это автоматическое сообщение, которое будет отправляться пользователю, когда он откроет диалог.
  • «Краткая информация» — это текст/приветствие, которое увидит пользователь. Нужно постараться сформулировать его таким образом, чтобы побудить посетителя вашего сайта написать вам.
  • «Статус не в сети» будет показан пользователю, если вы не отвечали ему в течении 30 минут.
  • «Разрешенные домены» — это домены, на которых будет показан виджет.

Установка виджета «Сообщения сообщества»

Для того, чтобы получить код виджета, нужно перейти по этой сслке. Установка аналогична предыдущему виджету:

Установка виджета «Сообщения сообщества»

Выбираем одно из своих сообществ и копируем скрипты и div на свой сайт.

Актуальность виджетов

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

“Напишите нам” – новый виджет ВКонтакте и шорткод в плагине Easy VKontakte Connect

ВКонтакте выпустили новый виджет, который представляет собой кнопку “Напишите нам”, нажав на которую, посетитель попадает на страницу-визитку пользователя или сообщества с двумя кнопками “Написать сообщение” и “Перейти к странице”. Предполагается, что эта страница облегчит установление контактов с сообществом (или пользователем). Запись в блоге ВКонтакте об этом.

Виджет работает для:

  1. личных страниц,
  2. групп,
  3. сообществ.

В группах и сообществ должна быть включена опция Сообщения сообщества: включены.

Мы разработали шорткод в плагине Easy VKontakte Connect, который облегчит установку данного виджета в любом месте сайта.
Для работы виджета на сайте должен быть настроен VK API для Виджетов (меню плагина EVC Настройки VK API – вкладка Для виджетов).

Чтобы разместить на сайте кнопку Напишите нам от ВКонтакте достаточно добавить шорткод

[vk_contact_us]

В этом случае кнопка будет вести на страницу, которая указана в меню плагина EVC Автопостинг – опция Ссылка на страницу. Если значение в этой опции отсутствует виджет показан не будет.

Доступные параметры:

  • title – текст на кнопке,
  • height – высота кнопки, возможны три значения 22, 24, 30 (если будет введено любое другое число, параметр будет проигнорирован),
  • url – урл группы сообщества (персональной страницы) на страницу-визитку которой должна вести кнопка.

Виджет со всеми возможными параметрами выглядит так:

[vk_contact_us title= "Связаться с нами" height ="30" url = "https://vk.com/wordpressvk"]

На кнопке будет написано Связаться с нами, ее высота будет 30px и она будет вести на страницу https://vk.me/wordpressvk.

TAGS: Easy VKontakte Connect

130+ примеров кнопок CTA: призывы к действию

Призыв к действию (CTA) — книжным языком означает краткое заявление нацеленное на немедленную реакцию со стороны читателя. По сути — это легкий толчок к покупке, переходу из email-рассылки на сайт или какому-то другому действию. Удастся маркетологу это или нет — во многом зависит от правильно подобранной формулировки.

Краткая отсылка к теории. СТА — это сумма следующих компонентов:


Активный глагол + Яркое оформление

 

СТА может быть в виде креативного словосочетания, также, для усиления, перед призывом, может быть ценностное предложение. Вот пример продающего блока из письма магазина Citrus:

Пример продающего блока от Цитруса

  1. Первый элемент: эмоциональный призыв на картинке.
  2. Второй элемент: подзаголовок, который подчеркивает достоинства и обрабатывает возможные страхи покупателей.
  3. Третий элемент: ценностное предложение, с выделением преимуществ техники.
  4. Четвертый элемент: СТА, который обеспечивает основную конверсию данного предложения.

Чтобы помочь вам подобрать ключ к высоким конверсиям email-маркетинга, мы собрали 130+ примеров СТА в зависимости от типа оформления и места размещения в письме.

50 универсальных СТА для eCommerce

К сожалению, полностью уйти от приевшихся: “Купить”, “Подписаться”, “Заказать”, “Узнать больше” — не получится. Часто именно они отражают суть действия, которое необходимо выполнить клиенту. Но минус подобных формулировок в отсутствии эмоции, ведь они преследуют интерес продавца и не предлагают никаких выгод покупателю. Поэтому всегда есть место для экспериментов.

В нашу подборку попали призывы к действию, которые можно встретить в ежедневных рассылках. В зависимости от цели письма — можно сразу брать готовый вариант или немного доработать. Ранее мы уже писали как оформить призыв к действию, сейчас же перейдем непосредственно к примерам текста call to action из рассылок интернет-магазинов:

1. Смотреть обзор.

2. Просмотреть товары.

3. Открыть товары.

4. Перейти.

5. Смотреть коллекцию.

 

Пример кнопки-CTA Adidas

6. Выбрать товары.

7. Напишите нам.

8. Вперед.

9. За скидками.

10. За [ночными/праздничными/летними/звездными] скидками.

Пример СТА от Фокстрот

11. К товарам со скидкой.

12. Получить секретную скидку.

13. К акционным товарам.

14. Поймать растаявшие цены.

15. Все акционные товары.

16. Узнать больше акций.

17. За покупками.

18. Найти ближайший магазин.

 

СТА: За покупками

19. Купить в рассрочку.

20. Оформить заказ.

21. Заказать.

22. Выбрать другой товар.

23. Выбрать свой гаджет.

24. Стать обладателем [Apple Iphone XR 64 Gb].

25. Выбрать [конструктор].

26. Хочу.

27. Выбрать и купить.

28. Примерить онлайн.

29. Узнать, что сегодня.

 

Пример СТА: Узнать то сегодня

30. Просмотреть.

31. Больше [товар/ТМ] для [детей/женщин/мужчин] (например, INTERTOP: Больше Geox для детей).

32. Оформить заказ.

33. Просмотреть всю витрину.

34. Купить для нее/Купить для него.

35. Больше предложений.

36. Успейте купить.

 

Пример СТА: Успей купить


37. Участвовать в розыгрыше.

38. Заглянуть в другие категории.

39. Начать поиск подарков.

40. Порадовать деток.

41. Найти свои [L.A.P.T.I.]

 

Пример СТА: Выберите свои L.A.P.T.I

42. Оформить заказ/предзаказ.

43. Начать шоппинг.

44. Скорее купить новинки.

 

Пример СТА: скорее купить новинки

45. Выбрать образ.

46. Купите образ.

 

Пример СТА: Купите образ

47. Беру!

48. Подобрать варианты.

49. Нужно брать.

50. Купите стили с Instagram.

 

Пример СТА: Купите стили

 

Конечно, это далеко не полный список вариантов, и то, что работает для одной аудитории — не работает для другой. Поэтому при выборе кнопок СТА для рассылки не забывайте об А/Б тестировании. Особенно это касается нестандартных вариантов. В отчетах системы eSputnik по карте кликов можно отслеживать самые конверсионные призывы, а также: проанализировать лучшее место СТА в структуре письма, определить работающие формулировки, цвет и графическое оформление.

Гармоничное оформление

Давайте посмотрим как с призывами к действию работают маркетологи из Shoko Smile. В своей welcome-серии они обыграли тему шоколада и похудения. Для них это было очень уместно потому, что основной сегмент покупателей — это женщины.

Купити шоколад для схуднення

Линия шоколадной диеты выдержана во всех блоках письма:

Пример СТА: Почати шоколадну дієту

Кроме прямого призыва “Начать…”, в письме использован триггер любопытства, специально для тех, кто так и не решился его приобрести после блока с доказательствами пользы шоколада.

Пример СТА: Дізнатися секретний спосіб

Заметьте, ни одна формулировка кнопки не повторилась — всё время используются разные обороты.

Учимся у Ив Роше

Открываем 10 писем подряд и видим, что они всё время используют разные призывы. Нет никаких навязчивых “Купи”.

Ив Роше: Открыть все подарки

Создать своё первое письмо

Примеры формулировок СТА:


1. Создать летний макияж.

2. Начать летний шоппинг.

3. Открыть все коллекции.

4. К покупкам.

5. Побаловать себя.

6. Хочу украшения в подарок.

7. Создать набор.

8. Голосовать.

9. Подобрать свой оттенок.

10. Подготовиться к празднику мам и т.д.

Пример СТА от Ив Роше

 

Согласитесь, в этих призывах нет никакой навязчивости. Скорее — это рекомендации к просмотру.

50 СТА для продажи услуг

Туристические фирмы, учебные центры, салоны красоты, маркетинговые агентства, СТО — все они очень разные, но продают исключительно услуги. Из-за специфики направлений достаточно сложно создать универсальную подборку СТА, но в этом списке вы обязательно найдете призывы для отдельных блоков своих писем.  

1. Получить скидку.

2. Забрать свою скидку.

3. Использовать промокод на 20% скидки.

4. Хочу с подарками.

5. Присоединиться.

6. Узнать цену.

7. Получить доступ.

8. Узнать больше.

9. Смотреть сейчас.

10. Забронировать место.

 

Пример рассылки Puzzle-English

11. Оставить заявку.

12. Подобрать самостоятельно.

13. Спросить на Facebook.

14. Хочу стать участником [тренинга/розыгрыша].

15. Хочу участвовать.

16. Выбрать лучший пакет для участия со скидкой 30%.

17. Оформить участие в тренинге прямо сейчас!

18. Забрать билет за 2019 грн!

19. Зайти в комнату вебинара.

20. Хочу [ставить цели правильно/овладеть ораторским искусством/…].

21. Нажмите, чтобы узнать больше.

22. Принять участие.

23. Прокачать свои знания.

24. Довериться профессионалам.

25. Мгновенный доступ к материалам.

26. Принять участие в online-встрече.

27. Присоединиться к [трансляции/группе].

28. Протестировать платформу в деле.

29. Получить консультацию эксперта.

30. Я буду участвовать!

31. Открыть для себя […].

32. Оставить заявку.

33. Найти свой идеальный [тур/тариф].

34. Подобрать [тур/тариф].

35. Больше информации.

36. Узнать больше.

37. Изучить программу [тура/встречи].

38. Воспользоваться возможностью.

39. Действовать!

40. Торопитесь, предложение заканчивается через [таймер].

41. Оформить [заявку/кредит/…] за 20 секунд.

42. Заказать [выезд мастера/консультацию эндокринолога].

43. Послушать подкаст.

44. Перейти к кейсу.

45. Заполнить опрос.

46. Поделиться мнением.

47. Стартовать вместе с […].

48. Выбрать время приема.

49. Записаться на […].

50. Провести время в […]

 

Оформление СТА

Вспоминая призывы к действию, первое, что приходит на ум — это старые-добрые кнопки и текст+ссылка. Также, в арсенал маркетологов добавились СТА-картинки и СТА-гифки.

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

1) Текст-ссылка

Пример СТА-ссылка

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

СТА-ссылка

2) СТА-кнопка

Позволю себе ошибиться в статистике, но хотя бы одна кнопка есть в 99,9% рассылок моего почтового ящика. Кто-то призывает просто “Посмотреть” или “Купить”, кто-то подходит к задаче более творчески.

Например, письмо в стиле “вечеринки” от интернет-магазина Киевстар. Маркетологи обыграли идею с ожиданиями Черной пятницы и единой тематической линией соединили текст письма, иллюстрации и призывы на кнопках. СТА умышленно продублировано, чтобы повысить число конверсий.

Пример СТА от Киевстар

Прогрев аудитории к черной пятнице также сделал Фокстрот. Призыв “Подготовиться к шопингу” мягко переводит читателей на сайт, где каждый может что-то присмотреть для себя.

Пример СТА от Фокстрот

Является ли креатив стопроцентным залогом достижением цели? Нет, конечно. В рассылке издательства МИФ используется обычный СТА “Купить”, но альтернативность вариантов осуществления покупки повышает вероятность продаж.

Пример с тремя кнопками СТА

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

Пример СТА для приложений

3) Призыв-баннер

Один из способов подвести клиента ближе к “корзине” на сайте — это использование кликабельных картинок. Данный способ визуализации call to action пришел из нейромаркетинга. Именитые компании пользуются тем, что большинство людей визуалы. Почему бы и нам не взять это на вооружении и сделать свои рассылки эффективней?)

Пара примеров из рассылки магазина “Антошка”:

Примеры СТА от магазина Антошка

“Оформи предзаказ” — конверсионный призыв для магазинов техники, ведь быть в ряду первых покупателей новинки для кого-то очень важно. Пример Citrus:

СТА предзаказ

Или другой пример от Citrus с баннером-призывом: “Выбери своего робота!”

СТА: Выбери своего робота

Пример из рассылки интернет-магазина Sea-tools:

Пример СТА-баннера

4) Гиф+Баннер с СТА

А вот и обещанные гифки. Динамичность и креативность gif-изображений способствуют повышению вовлеченности читателей. Такие рассылки выглядят ярко и современно.

В этом блоке не обойтись без примеров от Цитруса:

СТА-gif пример Цитруса

Как всегда, яркими и интересными рассылками радует Антошка:

Пример СТА-gif от магазина "Антошка"

Gif-СТА от европейского интернет-магазина:

СТА-Gif

Оригинальных идей можно подсмотреть в письмах Comfy:

CTA-gif пример Комфи

5) Gif+кнопка

К яркому оформлению призыва к действию относится и следующий пример:

Пример кнопка+анимация

Двигающийся курсор вдвойне привлекает внимание к кнопке СТА и стимулирует читателя выполнить нужное действие.


Вместо выводов оставляем мини чек-лист по добавлению СТА в email, чтобы повысить их эффективность:

  • Дублируем призывы в теле письма несколько раз (лучше в разных формулировках).
  • Тестируем текст, форму, цвет и место размещения призыва.
  • Добавляем кнопки на самом видном месте.
  • Оставляем достаточно пространства вокруг СТА для более легкого восприятия.
  • Помним о кликабельности элементов на мобильных устройствах.
  • Краткость и использование эпитетов делают призывы более привлекательными.

Чтобы каждый ваш призыв был услышан читайте также статью: CTA: 10 лучших практик, которые не подведут. Конверсий вам, да побольше!)

5.0
из 5 на основе 15
оценок

Создание кнопок для сайта

css создание кнопкиДобрый день. Вчера я рассказывал про онлайн сервис для создания кнопок. Там произошло небольшое недоразумение, и я обещал, что сегодня подробно опишу создание кнопок для сайта, без всяких сервисов на чистом CSS.

CSS создание кнопки актуально еще и потому, что несколько строчек кода весят куда меньше, чем картинка. Даже использование спрайтов лучше исключить в тех местах, где можно задать стиль элементу только при помощи CSS.

Вообще, почему я так много уделяю внимания быстрой загрузки сайта? Да потому, что при прочих равных условиях, в выдаче будет первым тот, который быстрее грузится. Но для лендинг пейдж – это не очень важно, ведь СЕО продвижение посадочных страниц в топ 10 – очень дорогое удовольствие. А кроме того, сложное и затратное по времени.

Поэтому, на лендинг пейдж, трафик, в основном, идет не с поисковой выдачи, а с разных рекламных площадок. (Яндекс Директ, GoogleAdwords, Баннеры и т.д.)

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

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

Создание кнопок для сайта – html разметка.

Будем делать такую кнопку c эффектом нажатия, при наведении.

создание кнопок для сайта

На этом этапе, нам необходимо написать html разметку кнопки. Для этого существует специальный парный тег «button».

<button> </button>

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

Если вы используете кнопку в форме обратной связи, то необходимо задать тип “submit”:

Это связано с тем, что раньше разные браузеры обрабатывали элемент button по-разному. Internet Explorer передавал текст между тегами “button”, а Mazilla – передавала то, что было прописано в атрибуте “Value”. Сейчас ситуация изменилась. Но все же я рекомендую писать так:

<button type=»submit»> </button>

Для того, чтобы кнопка понимала к какой форме она привязана, необходим элемент “form” и в нем должен быть задан идентификатор формы:

<form id=»zayavka»>
<button id=»firstButton» type=»submit»> ПОЛУЧИТЬ ПРАЙС </button>
</form>

Давайте теперь присвоим идентификатор кнопке для того, чтобы ей можно было задать уникальный стиль, в случае если на странице кнопок несколько, и они все разные:

<button id=»firstButton» type=»submit» form=»zayavka»> ПОЛУЧИТЬ ПРАЙС </button>

Теперь добавим стили нашей кнопки.

Создание кнопок для сайта – CSS разметка

Сначала создадим общий вид, а потом добавим пару строк кода, для эффекта при наведении и сымитируем эффект нажатия.

Поехали…

#firstButton {
display: block; /* Переводим в блочный элемент*/
margin:0 auto; /* Выравниваем по центру */
width: 300px; /* Задаем ширину */
height: 40px; /* Задаем высоту */
border: none; /* Убираем обводку */
background: #188B12; /* Задаем цвет кнопки */
color:#fff; /* Задаем цвет текста */
font:bold 15px ‘Arial’, sans-serif; /* Жирность, Размер, Шрифт */
cursor: pointer; /*Курсор меняется на пальчик, при наведении*/
box-shadow: 0 4px 0 #11620D; /*Задаем тень — х, у, размытие, цвет*/
border-radius: 3px; /*Скругление углов*/
}

Думаю, подробнее вряд ли получиться, но если нужна будет помощь, обязательно пишите в комментариях – помогу.

Теперь добавим стили для кнопки, которые будут применяться при наведении на нее курсора. Создадим эффект нажатия.

#firstButton:hover{
margin-top: 2px; /*опустим кнопку на 2 пикселя*/
box-shadow: 0 2px 0 #11620D; /*Делаем меньше тень на 2 пикселя*/
}

Можно сделать так, чтобы кнопка плавно меняла цвет:

#firstButton:hover{
transition: .5s; /* Скорость изменения цвета */
background: #F96400; /* Задаем цвет кнопки */
box-shadow: 0 4px 0 #BB4A00; /*Задаем тень — х, у, размытие, цвет*/
}

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

А на сегодня — все. Теперь, создание кнопок для сайта у вас не должно вызывать никаких проблем. До встречи на smartlanding

Author: admin

Отправить ответ

avatar
  Подписаться  
Уведомление о