Кнопка для тех кто в теме

ЯндДрайв кнопка в теме? Я конечно понимаю что тут так и написано «ДЛЯ ТЕХ кто в теме»

Кто в теме. Что за тема? В какой теме?))) интересно кто сталкивался?

Лучший ответ

Удалить мой аккаунт.

Андрей морозовМастер (1171) 1 год назад

Запрос принят, ожидайте ответа по почте в течении дня.
Спасибо за запрос
С уважением команда Яндекс Драйв

Остальные ответы

Для корпоративных клиентов

Похожие вопросы

Ваш браузер устарел

Мы постоянно добавляем новый функционал в основной интерфейс проекта. К сожалению, старые браузеры не в состоянии качественно работать с современными программными продуктами. Для корректной работы используйте последние версии браузеров Chrome, Mozilla Firefox, Opera, Microsoft Edge или установите браузер Atom.

130+ формулировок CTA

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

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

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

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

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

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

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

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

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

1. Смотреть обзор.
2. Просмотреть товары.
3. Открыть товары.
4. Перейти.
5. Смотреть коллекцию.

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.]

42. Оформить заказ/предзаказ.
43. Начать шоппинг.
44. Скорее купить новинки.

45. Выбрать образ.
46. Купите образ.

47. Беру!
48. Подобрать варианты.
49. Нужно брать.
50. Купите стили с Instagram.

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

Рассылки с тестированием CTA

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

Давайте посмотрим как с призывами к действию работают маркетологи из 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. Забронировать место.

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-СТА от европейского интернет-магазина:

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

5) Gif+кнопка

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

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

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

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

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

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

Как сделать кнопку в HTML

Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

Я кнопка 

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

Я кнопка 

Атрибут disabled блокирует доступ к кнопке.

Я заблокированная кнопка 

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

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

submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.

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

А как же input?

Создать кнопку можно и с помощью тега , если указать ему тип button :

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

Как сделать кнопку с иконкой

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

Так вы можете добавлять кнопки с эмодзи, лайками, дизлайками или чем-то ещё. Иконке нужно обязательно задавать размеры, чтобы кнопка зарезервировала место и не прыгала, когда загрузится иконка.

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег и добавляем в него код SVG-изображения.

   Просто кнопка 

Вставить фоном в CSS

Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:

Как добавить иконку в кнопку:

 Текст кнопки 

.icon-button < background-image: url("../images/icon.svg"); background-size: 90px 97px; >

Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.

Материалы по теме

• Что такое ссылки и как их ставить
• Как сделать картинку ссылкой
• Шаблон HTML-формы

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

• 22 ноября 2023

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

• 1 ноября 2023

Специальные символы в HTML

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

• 23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

• 18 октября 2023

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

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

• 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

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

• 14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

• 12 сентября 2023

Осмысленный alt-текст: 6 правил

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

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

• 31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

• 13 июня 2023

Как понять, что перед вами заголовок

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

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

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

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

• 8 июня 2023

Руководство по дизайну кнопок

Вы когда-нибудь задумывались о том, как сделать «идеальную кнопку»?

При создании интерфейсов для Android нет смысла проектировать кастомные компоненты. Вместо этого лучше обратиться к Material Guidelines и его официальной библиотеке дизайна.

Из статьи вы узнаете, как это сделать.

Типы кнопок

В Material Design есть девять типов кнопок:

1. Приподнятая кнопка
2. Кнопка с заливкой
3. Кнопка с более светлой заливкой и тёмным шрифтом
4. Контурная кнопка
5. Текстовая
6. Кнопка-иконка
7. Сегментированная кнопка
8. Плавающая кнопка действия (FAB)
9. Расширенная FAB

Иерархия кнопок

Кнопки в Material имеют 3 уровня акцента — низкий, средний и высокий.

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

Вот как следует обозначать кнопки в соответствии с иерархией:

Кнопки с высоким акцентом:
— Расширенная FAB — часто используется на больших экранах вместо FAB
— FAB — компонент по умолчанию для совершения основного действия на экране
— Кнопка с заливкой — предназначена для совершения завершающих действий на пути пользователя

Кнопки со средним акцентом:
— Кнопка с более светлой заливкой и тёмным шрифтом — менее заметная, чем кнопка с заливкой, и используется для тех же действий
— Приподнятая — предназначена для ситуаций, когда кнопку необходимо визуально отделить от фона
— Контурная кнопка — используется для таких действий, как «Посмотреть всё», «Читать далее», «Добавить в корзину» и т.д. Предназначена для совершения дополнительных действий

Кнопки с низким акцентом:
— Текстовая кнопка — используется для альтернативных вариантов
— Сегментированная кнопка — используется для совершения дополнительных действий или переключения между опциями в рамках одного экрана
— Кнопка-иконка — наиболее компактный и изящный тип кнопки, который предназначен для таких действий, как «Добавить в закладки», «Звезда» (добавить или убрать звезду у товара), «Сохранить», «Нравится» и других

Анатомия кнопок

Высота кнопок Material 3 составляет не менее 40 dp(px), а углы у них полностью закругленные. Их цветовые значения реализуются посредством дизайн-токенов.
Анатомия общего стиля кнопки:

FAB (Плавающая кнопка действия) теперь имеет 3 размера. Анатомия FAB:

И, наконец, анатомия расширенной FAB:

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