{{l10n_strings.DRAG_TEXT_HELP}}

{{article.content_lang.display}}

{{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

Буфер обмена Excel расширяет возможности копирования

Практическое применение преимуществ инструмента «Буфер обмена» лучше всего продемонстрировать на примерах.

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

Копирование несколько элементов в буфер

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

Для быстрого заполнения ячеек с помощью буфера необходимо:

1. Открыть окно буфера обмена нажав на угловую кнопку вкладки «Главная» как показано на рисунке:
2. В ячейку C2 и C3 введем текст «логистика», «администрация».
3. Теперь копируем введенный текст комбинацией клавиш CTRL+C или через «Главная»-«Копировать» сначала с C2. Потом отдельно копируем значение из C3. Обратите внимание, в окне буфера появились новые элементы.
4. Выделяем диапазон ячеек C4:C5.
5. Щелкните по элементу «администрация». Выделенные ячейки заполнятся соответствующими значениями.
6. В такой же способ вставьте в диапазон ячеек C6:C8 слово логистика.

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

Управление буфером обмена Excel

Буфер обмена может содержать до 24 элементов. В Excel неважно, что копировать: таблицу, столбец, строку, содержимое одной ячейки или просто текст – все это является отдельными элементами в независимости от его объема их информации. При копировании 25-го элемента – первый удаляется автоматически.

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

Информация о количестве элементов выводится в заголовке окна. Там же находится кнопка закрытия бокового окна инструмента «X».

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

• щелкните по кнопке «Параметры», которая расположена в низу окна;
• выберите опцию «Собирать данные без отображения буфера обмена Office»;
• закройте окно буфера, щелкнув по крестику (х).

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

Так работать очень удобно, особенно когда нужно копировать данные на другие листы Excel или в другие программы пакета MS Office (например, Word). Каждая программа, которая входит в пакет MS Office обладает инструментом «Буфер обмена». А значит, в каждой из этих программ можно вызвать окно буфера для выборочной вставки элементов. Данный инструмент позволяет эффективно организовать одновременную работу с несколькими документами.

Примечание. Перемещение данных осуществляется в такой же способ, как и копирование. Только вместо комбинации клавиш CTRL+C следует нажимать CTRL+X, а вместо опций «копировать» нужно выбирать опцию «вырезать».

Пример: кнопка копирования — amp.dev

Введение

Это пример, показывающий, как добавить кнопку «копировать» на вашу страницу, позволяя пользователю копировать некоторые фиксированный элемент на странице. Здесь используется amp-iframe , на котором запущен пользовательский JS, который загружается в фоновом режиме. пока кнопка-заполнитель остается видимой.

Настройка

Мы используем amp-iframe для загрузки кнопки копирования, заменяя кнопку-заполнитель.

Как работает кнопка «Копировать»

Включив amp-iframe с настраиваемым JS (он находится в /static/samples/files/copier.html ), мы можем выполнять любые операции из vanilla JS, включая копировать.

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

Мы передаем данные для копирования через хеш. Вспомогательная страница копира всегда может обслуживать один и тот же HTML-код и может быть кэширована сама по себе.

  
  <заполнитель кнопки отключен> Копировать 

  

Динамически изменять значение для копирования

Мы можем использовать amp-bind для обновления значения, передаваемого копирующему iframe.Всякий раз, когда значение изменяется (через с дебаундом на входе), мы обновляем хэш-параметр в iframe, чтобы копировальный аппарат мог скопировать новое значение.

Сначала мы определяем поле ввода, которое обновляет переменную amp-state с именем textToCopy .

  
  
  
 Скопируйте содержимое ввода 

  

Затем мы привязываем атрибут src iframe к значению переменной textToCopy amp-state .

  
  <заполнитель кнопки отключен> Копировать 

  

Копия кнопки: убедите ваш CTA

Компания, занимающаяся виртуальной недвижимостью Empire Flippers, увидела увеличение конверсии на 33%, когда сменила копию кнопки с «Присоединяйтесь к нам!» на «Заработок на листании сайтов.Компания Sophos, производящая программное обеспечение для обеспечения безопасности, увеличила конверсию на 77%, когда сменила копию кнопки с «Запросить цену» на «Запросить цену». А компания Friendbuy, занимающаяся разработкой реферальных программ, увидела рост конверсий на 211%, когда они изменили свой CTA-текст с «Хотите увидеть? Поделись Friendbuy с друзьями! » на «Посмотреть демо».

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

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

Будь кратким, но информативным

Помните, ваша пуговица… ну, размером с пуговицу , так что вы точно не будете плавать в пространстве для своей копии.В лучшем случае у вас будет место для короткого предложения (около 5 слов).

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

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

Конечно, не зацикливайтесь на предостережениях Нейла, читая текст с секундомером и отбрасывая некоторые из своих лучших альтернативных слов из 6 слов. Но поскольку у вас настолько ограничен , каждое слово в вашем CTA должно иметь удар. Buffer предлагает список из 189 «слов, которые конвертируют», чтобы вы могли начать работу; но вы, , знаете своих потенциальных клиентов и клиентов лучше, чем кто-либо, поэтому вам следует составить свой собственный список «сильных слов».Какие слова вызывают их эмоции? Какие из них побуждают их действовать? Лучше использовать слова, которые сработали для вас в прошлом, чем доверять общему списку.

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

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

Рассмотрите возможность использования от первого лица

Как вы могли заметить, три приведенных выше примера имеют одну общую черту: все они используют вид от первого лица. «Я», «я» и «мой» могут быть одними из самых влиятельных слов, которые вы используете в своем тексте кнопки.

Michael Aagaard заметил, что CTR для Unbounce увеличился на 90%, просто изменив «Начните с бесплатную 30-дневную пробную версию » на «Начните с my free 30-дневную пробную версию». Copyblogger последовал их примеру и увидел рост на 24%, когда они изменили копию кнопки с «Попробовать Schedulicity Free» на «Конец My Scheduling Hassles» — даже при том, что вторая кнопка была меньше.

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

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

Во-вторых, это помогает вашему потенциальному клиенту визуализировать ценность, которую он собирается получить. , поскольку она вносит особый вклад в их жизнь. . Он проецирует ваших потенциальных клиентов на ближайшее будущее, позволяя им более эффективно представить, как их жизнь улучшится, как только они нажмут. Компания IMPACT, занимающаяся входящим маркетингом, отмечает этот особый психологический эффект в своем призыве к действию «Получи мой билет».(Они даже включают изображение, которое представляет собой будущее потенциального клиента для добавления — извините за каламбур — impact ):

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

Опять же, «Я копирую» не обязательно , будет вашим самым конверсионным, и многие примеры, которые мы показываем в этом контенте, не используют его.Но когда вы проводите A / B-тестирование текста на кнопках, абсолютно необходимо учитывать психологические эффекты выступления с точки зрения потенциального клиента в вашем тексте.

Тест «Я хочу ____»

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

Я хочу на _____.

Завершение предложения побудит вас написать такой текст, как «Уменьшите мои платежи по ипотеке, Fast .»И это помешает вам использовать копию, такую ​​как» Зарегистрируйтесь для получения дополнительной информации «.

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

Используйте слова действия

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

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

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

Unbounce дает нам пример датской компании, в которой количество конверсий увеличилось на 38%, просто изменив слово (или его датский эквивалент) с «Заказать» на «Получить».

Сосредоточьтесь на преимуществах

Мы не можем достаточно подчеркнуть важность желания ваших потенциальных клиентов, когда дело касается копии кнопки.

Подумайте, чего хотят ваши потенциальные клиенты и чего они хотят. стать (сильнее, умнее, счастливее, богатее, стройнее, мускулистее, уважаемее и т. Д.) Благодаря использованию вашего продукта или услуги.Вы уже изложили преимущества в тексте своей страницы; ваша копия пуговицы может быть тем местом, где их можно усилить.

Апеллируйте к бережливости, амбициям ваших потенциальных клиентов… возможно, даже к их лени. «Найди лучшее решение для меня» может быть лучше, чем «Покажи мне, как найти лучшее решение». «Давайте начнем!» вероятно, будет работать лучше, чем «Войдите в наш магазин». Откажитесь от «Загрузить мой счет» и попробуйте «Получить мой бесплатный счет». Вы уловили картину.

И если ваше предложение бесплатное, этот факт обязательно должен быть в вашей копии кнопки.

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

Создайте ощущение срочности

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

Возможно, самый надежный пример срочного призыва к действию — «Начни с ___ , сейчас ». Такие временные слова, как «сейчас», «сегодня», «немедленно» и «немедленно» ничем не хуже глаголов действия, потому что они подталкивают ваших потенциальных клиентов к действию.

Призыв к действию вверху на главной странице Instapage просто гласит «Создать мою страницу сейчас», и это последнее слово придает этому вопросу легкую срочность:

Срочность также может принимать форму предложения «ограниченное время» или «ограниченная доступность», увеличивая у ваших посетителей чувство, что они должны действовать немедленно.Ограничение времени на предложение заставит вашего потенциального клиента почувствовать, что вы ограничиваете его личный выбор и свободу.

склонны реагировать на это чувство ограничения, устраняя само ограничение… а для и это означает конверсии. Маркус Тейлор увеличил коэффициент конверсии страницы почти на 300%, когда добавил обратный отсчет с текстом «Оставшееся время для загрузки», а также счетчик «Купленные пакеты» рядом с призывом к действию. (Это так называемые «триггеры кликов»; мы рассмотрим их чуть позже.)

Дефицит — еще одна форма срочности. Мы склонны придавать большее значение вещам, которые нам скоро станут недоступны. WiderFunnel продемонстрировал 106% -ное увеличение конверсии по призыву к действию для компании по аренде жилых автофургонов, когда они добавили строку «Ограниченная доступность — бронируйте сейчас!»

При использовании стратегии дефицита рассмотрите возможность использования фактических чисел. Люди доверяют цифрам; и они с гораздо большей вероятностью подпрыгнут, когда увидят «Осталось всего 4 копии!» чем когда они видят «Осталось лишь несколько копий!»

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

Использовать триггеры кликов

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

Джоанна Вибе из Copyhackers называет это «триггерами кликов». Они могут включать в себя такие вещи, как гарантии возврата денег, отзывы, рейтинги, обзоры, значки безопасности, ключевые преимущества (т.е. «Бесплатная доставка»), а также информацию, снижающую беспокойство (например, «информация о кредитной карте не требуется» или «мы не будем отправлять вам спам»).

HubSpot есть отличный пример на своей домашней странице: справа от кнопки «Начать» потенциальному клиенту напоминается, что есть «БЕСПЛАТНЫЕ версии каждого продукта HubSpot», поэтому потенциальный клиент может «Начните сейчас и обновляйтесь по мере того, как [они ] расти »:

Информация, сводящая к минимуму риски, и, вероятно, сильный оптимизатор конверсии для HubSpot. Призыв к действию Sprout Social для их бесплатной пробной версии поддерживается двумя триггерами кликов, расположенными непосредственно под ним.Первый гарантирует потенциальным клиентам, что им не нужно будет сообщать информацию о своей кредитной карте; второй напоминает им о преимуществах использования продукта (нечего устанавливать):

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

Не копируйте эту копию

Мы не можем достаточно подчеркнуть, что эти «передовые методы» являются общими и не обязательно являются лучшими практиками для каждой из кнопок CTA вашего бизнеса . Как вы, наверное, заметили, выше мы привели множество примеров хороших текстов с призывом к действию — не все из них соответствуют всем нашим предложениям. Каждая компания должна провести собственное A / B-тестирование и определить, какие из этих элементов следует оставить, а какие опустить.

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

Вы будете вносить эти изменения по одному и следить за тем, какие изменения вносят изменения. A / B-тестирование — это терпеливая практика, но она многое расскажет вам о том, что заставляет ваших потенциальных клиентов тикать (и нажимать). Более того, каждый тестируемый призыв к действию даст вам лучшее представление о том, что должны предложить других призывов к действию на других страницах вашего сайта.

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

Как добавить кнопку «копировать в буфер обмена» на ваш веб-сайт

Задача

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

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

Процесс

Интернет предположил, что лучший способ настроить представление — поместить текст, который нужно скопировать, в «секретный» ввод, то есть: скрыть границу и сделать ее не кликабельной. , чтобы он выглядел как обычный текст.

Haml view

 % h4.upcase   Шаг 1. API Auth Token 

 % div.js-copy-контейнер 
 % input.js-text-to-copy {readonly: true, value: api_auth_token} 
 % div.float-left = link_to «Копировать», «#», class: «button js-copy-text-button»  

Я переместил кнопку «Копировать» вправо, а затем настроил свое событие слушатель в CoffeeScript. Когда была нажата кнопка «Копировать», я захватил значение ввода и отправил его в буфер обмена с помощью команды exec (спасибо за этот лакомый кусочек, переполнение стека!).

Я также добавил анимацию, чтобы на кнопке было написано «Скопировано!» в течение нескольких секунд, прежде чем вернуться к «Копировать».

CoffeeScript

  класс ZapierPage 
  конструктор:   -> 
  $ (документ) .ready   @initListeners 
  
  initListeners: => 
  $ (". Js-copy-text-button"). На "click", @onCopyTextButtonClick   
  
  onCopyTextButtonClick: (ev) -> 
  ев.preventDefault () 
  $ copyButton = $ (ev.target) 
  $ textToCopy = $ copyButton.closest (". Js-copy-container"). Find (". Js-text-to-copy") 
  $ textToCopy.select () 
  document.execCommand («копия») 
  $ copyButton.html («Скопировано!») 
  
  setTimeout -> 
  $ copyButton.html («Копия») 
 , 1000  

Пока все хорошо.

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

Решение

С небольшой помощью старшего разработчика Ten Forward Бретта мы добавили следующий код сразу после команды копирования:

  document.getSelection (). RemoveAllRanges ()  

Объяснение, почему через веб-документы MDN:

Метод Selection.removeAllRanges () удаляет все диапазоны из выделения, оставляя свойства anchorNode и focusNode равными null и не оставляя ничего выбранным .

Et voilá!

Инструкции кнопок

Добавьте кнопку «Скопируйте меня, что» начать копировать рецепты с любого сайта.

Не могу найти кнопку!

Нет? Введите about: addons в адресную строку.Вы попадете в менеджер расширений Firefox. Если вы видите там Copy Me That, убедитесь, что он включен (синий). Если его там нет, попробуйте обновить эту страницу и снова добавить кнопку.

Все еще не на месте? Щелкните трехстрочный значок меню Firefox> Выберите «Дополнительные инструменты»> «Выберите« Настроить … »> перетащите« Копировать меня »на место рядом с адресной строкой.

Не могу найти кнопку!

Нет? Введите about: addons в адресную строку. Вы попадете в менеджер расширений Firefox.Если вы видите там Copy Me That, убедитесь, что он включен (синий). Если его там нет, попробуйте обновить эту страницу и снова добавить кнопку.

Все еще не на месте? Щелкните трехстрочный значок меню Firefox> Выберите «Настроить …»> перетащите «Копировать меня» в место рядом с адресной строкой.

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

Sphinx-copybutton — Sphinx Copybutton

Sphinx-copybutton был разработан для работы с темой Sphinx по умолчанию, Алебастр. Если вы используете тему что не очень хорошо работает с CSS sphinx-copybutton, вы всегда можете добавить свои собственные правила CSS!

Настроить CSS

Чтобы настроить отображение кнопки копирования, вы можете добавить свои собственные файлы CSS. которые перезаписывают CSS в sphinx-copybutton правила CSS.Просто добавьте эти файлы в _static в папке документации, и он должен перезаписать поведение sphinx-copybutton.

Разделите и настройте запросы ввода для ячеек кода

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

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

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

 copybutton_prompt_text = "myinputprompt"
 

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

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

 copybutton_prompt_text = ">>>"
 

Использование идентификаторов подсказок регулярного выражения

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

Примечание

Имейте в виду, что RegExp ты пишешь это оценивается в JavaScript а не в Python. В некоторых крайних случаях это может привести к другим результатам.

Если вы заключите свое регулярное выражение в необработанную строку ( r "" ), вы можете легко проверить, что ваш RegExp соответствует всем желаемым запросам, то есть в RegEx101.

Например, в этой документации используется следующая конфигурация:

 copybutton_prompt_text = r ">>> | \. \. \. | \ $ | В \ [\ d * \]: | {2,5} \.\. \ .: | {5,8}: "
copybutton_prompt_is_regexp = Верно
 

Что соответствует следующим запросам и их продолжениям, если они существуют:

Пример использования: ipython -directive:

 стиль ipython и qtconsole:

.. кодовый блок :: ipython

   В [1]: первый
      ...: продолжение
   выход
   В [2]: второй

Стиль jupyter:

.. кодовый блок :: ipython

   В [1]: первый
         : продолжение
   выход
   В [2]: второй
 

ipython и qtconsole стиль:

 В [1]: первый
   ...: продолжение
выход
В [2]: второй
 

jupyter стиль:

 В [1]: первый
      : продолжение
выход
В [2]: второй
 

Если вам нужно подробное объяснение того, как работает RegEx, вы также можете использовать RegEx101 и прочитать врезку Explanation .

Настроить, копируются ли

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

Чтобы отключить это поведение, используйте следующую конфигурацию в conf.py :

 copybutton_only_copy_prompt_lines = Ложь
 

В этом случае все строки кодовых блоков будут скопированы после подсказок. раздеваются.

Укажите, следует ли удалять приглашения на ввод

По умолчанию sphinx-copybutton удаляет текст приглашения из строк согласно значению copybutton_prompt_text .

Чтобы отключить это поведение и скопировать полный текст строк с подсказками (например, если вы хотите скопировать только строк с подсказками, но не уберите подсказки), используйте следующую конфигурацию в conf.py :

 copybutton_remove_prompts = Ложь
 

Настройте копирование

По умолчанию sphinx-copybutton также копирует / пропускает пустые строки, определяется line.trim () === '' .

Чтобы отключить копирование пустых строк, используйте следующую конфигурацию в conf.py :

 copybutton_copy_empty_lines = Ложь
 

Учесть символы продолжения строки при копировании многострочных сниппетов

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

 $ datalad URL-адрес загрузки http://www.tldp.org/LDP/Bash-Beginners-Guide/Bash-Beginners-Guide.pdf \
- набор данных. \
-m "добавить руководство для начинающих по bash" \
-O книги / bash_guide.pdf
 

Предполагая, что вы указали $ в качестве приглашения, sphinx-copybutton будет копировать только первая строка по умолчанию.

Чтобы скопировать все строки выше, вы можете использовать следующую конфигурацию:

 copybutton_line_continuation_character = "\\"
 

Обратите внимание, что если мы хотим определить \ как символ продолжения строки, мы должны «экранировать» это с другим \ , как и с любой строкой Python, которая должна содержать литерал \ .

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

Соблюдайте синтаксис HERE-document при копировании многострочных сниппетов

ЗДЕСЬ-документы представляют собой форму многострочных строковых литералов. в котором сохраняются разрывы строк и другие пробелы (включая отступы). Например:

 $ cat << EOT> notes.txt
   Это пример предложения.
       Сделайте отступ на этой строке.

  EOT
 

Выполнение этого кодового блока в терминале создаст файл notes.txt с точным текст от второй строки кодового блока до (но не включая) последней строки, содержащей EOT .

Однако, если в качестве приглашения вы указали $ , sphinx-copybutton будет копировать только первая строка по умолчанию.

sphinx-copybutton можно настроить на копирование всего «ЗДЕСЬ-документ», используя следующие конфигурация:

 copybutton_here_doc_delimiter = "EOT"
 

Это продолжит поиск строк для копирования на основе правил выше, но если одна из копируемых строк содержит определенный разделитель (здесь: EOT ), то все последующие строки будут скопированы буквально до тех пор, пока следующий разделитель не будет встречается в строке.

Использовать другое изображение кнопки копирования

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

1. Поместите изображение в папку _static / вашего сайта.

2. Установите переменную copybutton_image_path в вашем conf.py как путь к вашему файлу изображения, относительно _static / .

Настроить селектор CSS, используемый для добавления кнопок копирования

По умолчанию sphinx-copybutton добавит кнопку копирования ко всем элементам. которые соответствуют следующему выбору:

Чтобы изменить этот селектор, используйте следующую конфигурацию в conf.py :

 copybutton_selector = "your.selector"
 

В этом случае все элементы, соответствующие your.selector , будут иметь кнопку копирования. добавил к ним.

40 примеров призыва к действию Вы не можете помочь, но нажмите кнопку

Вспомните, сколько раз вы подписывались на разные мероприятия в своей жизни. Вы когда-нибудь загружали Evernote? Dropbox? Spotify? Может быть, вы даже проходили курс по Генеральной Ассамблее.

Каждая из этих подписок, вероятно, является результатом эффективного призыва к действию (CTA).

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

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

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

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

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

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

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

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

Ниже приведены несколько примеров типов CTA, которые вы можете использовать в маркетинге:

Зарегистрируйтесь.

В этом типе CTA аудиторию могут пригласить подписаться на бесплатную пробную версию, онлайн-курс, будущее мероприятие или даже программный продукт. Все зависит от контекста CTA в объявлении или веб-сайте.

Подписаться.

Этот CTA не обязывает человека совершать покупку. Скорее, он предлагает им получать обновления от компании. Призывы к действию «Подписка» являются обычным явлением для корпоративных блогов, для которых бизнес хочет расширить круг читателей.

Попробовать бесплатно.

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

Начать.

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

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

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

Присоединяйтесь к нам.

Вы управляете онлайн-сообществом. Ваш продукт основан на сотрудничестве между пользователями? Вы можете обнаружить, что размещаете CTA «присоединяйтесь к нам» где-нибудь на своем веб-сайте.

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

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

Чтобы помочь вам определить, что эффективно, а что нет, мы перечислили 31 пример CTA, которые действительно потрясают. Эти примеры призыва к действию разбиты на три категории:

• Простые и эффективные CTA
• CTA с отличными призывами к действию
• CTA, уравновешивающие несколько кнопок на одной странице

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

1. HubSpot CTA
2. Evernote
3. Dropbox
4. OfficeVibe
5. Netflix
6. Квадрат
7. Prezi
8. Полный комплект
9. Пантера
10. EPIC
11. Aquaspresso
12. QuickSprout
13. Серый гусь
14. Дом на дереве
15. OKCupid
16. Ведение блога.org
17. IMPACT Брендинг и дизайн
18. Huemor
19. Брукс Бег
20. Округ Гумбольдт
21. Убер
22. Spotify
23. Угмонк
24. Pinterest
25. Madewell
26. Instagram
27. Баркбокс
28. т.с. Фарма
29. Генеральная Ассамблея
30. благотворительность: вода
31. Бегун
32. MakeMyPersona
33. TeuxDeux
34. Betabrand
35. Fabletics
36. Эшли Стюарт
37. Amazon
38. Барнс и Нобл
39. Слабина
40. Нинтендо

1.Призывы к действию HubSpot [бесплатные шаблоны]

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

2. Evernote

CTA: Зарегистрироваться

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

3. Dropbox

CTA: Зарегистрируйтесь бесплатно

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

Благодаря такому простому дизайну и отрицательному пространству синяя кнопка с призывом к действию «Зарегистрируйтесь бесплатно» выделяется среди всего остального на странице.Поскольку CTA и логотип Dropbox одного цвета, посетитель может легко интерпретировать этот CTA как «Зарегистрироваться в Dropbox». Это эффективный призыв к действию.

4. OfficeVibe

CTA: Подписаться

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

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

5. Netflix

CTA: Присоединяйтесь бесплатно на месяц

Есть один большой страх, который испытывают пользователи перед тем, как подписаться на что-то? Что будет больно отменить их подписку, если она им не понравится.Netflix подавляет этот страх в зародыше с помощью копии «Отменить в любое время» прямо над призывом к действию «Присоединяйтесь бесплатно на месяц». Рискну предположить, что одно только заверение увеличило количество регистраций. Кроме того, вы снова заметите, что красный цвет основного и дополнительного призывов к действию здесь соответствует цвету логотипа Netflix.

6. Квадрат

CTA: Начало работы

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

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

7. Prezi

CTA: Попробуйте Prezi

Ребятам из Prezi нравится минималистичный дизайн на своем веб-сайте.Помимо зеленого динозавра и темно-коричневого кофе, единственным другим цветом, сопровождающим преимущественно черно-белый дизайн, является ярко-синий — тот же синий, что и их основной логотип. Этот ярко-синий цвет стратегически размещен на главной странице: основной призыв к действию «Дайте Prezi попробовать» и дополнительный призыв к действию «Начать работу», оба из которых направляют пользователей на одну и ту же страницу с ценами.

8. Полный комплект

CTA: Наша работа

Full Bundle — еще одна компания, которая использует отрицательное пространство, чтобы сделать свой основной призыв к действию.Белый призыв к действию «Наша работа» выделяется на темно-сером фоне. Их выбор призывов к действию тоже является стратегическим. Учитывая, что они в первую очередь существуют для создания онлайн-присутствия клиентов, для них важно продемонстрировать свою работу — и именно для этого большинство людей ходят на их веб-сайты.

9. Пантера

CTA: Присоединиться к

Люди в Panthera ищут пользователей, которые действительно заботятся о диких кошках по всему миру и хотят присоединиться к группе людей, которые думают так же.В частности, чтобы ориентироваться на этих людей, нам нравится, как они используют язык, который обращался бы к большим любителям кошек: «Присоединяйтесь к прайду сегодня». Сама страница очень проста: форма на странице с двумя простыми полями и кнопка с просьбой (снова) «Присоединиться».

10. EPIC

CTA: Давайте вместе начнем новый проект

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

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

11. Aquaspresso

CTA: присылайте мне специальные предложения прямо сейчас!

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

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

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

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

12. QuickSprout

CTA: Вы неправильно делаете SEO? Введите свой URL, чтобы узнать

Никто не хочет ошибаться. Вот почему кнопка с призывом к действию, такая как выдвижной CTA QuickSprout в их блоге, так привлекательна. Он спрашивает читателя: «Вы неправильно делаете SEO?» Хорошо, я? Все, что мне нужно сделать, это ввести мой URL-адрес, чтобы узнать — кажется, достаточно просто. Такой язык действительно может побудить посетителей перейти по ссылке.

Кроме того, наличие слайда с призывом к действию в середине сообщения блога — отличная тактика для привлечения читателей, прежде чем они отскочат от страницы.Традиционно во многих блогах CTA есть в самом низу каждого сообщения, но исследования показывают, что большинство читателей просматривают статью только на 60%. (Щелкните здесь, чтобы узнать, как добавить в сообщения в блоге выдвижные призывы к действию.)

13. Серый гусь

CTA: Откройте для себя коктейль на свой вкус

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

14. Дом на дереве

CTA: Получите бесплатную пробную версию

Многие веб-сайты компаний предлагают пользователям возможность начать бесплатную пробную версию. Но CTA на веб-сайте Treehouse не просто говорит «Начать бесплатную пробную версию»; там написано: «Получите бесплатную пробную версию.«

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

15. OKCupid

CTA: Продолжить

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

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

16. Blogging.org

CTA: Часы обратного отсчета

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

Как и в случае с Aquaspresso в № 10, это классическое использование психологической тактики, называемой дефицитом, которая заставляет нас придавать большее значение вещам, которые мы считаем дефицитными. Ограничение времени, которое кто-то должен заполнить, заставляет людей захотеть заполнить ее и заявить о своем предложении, пока они могут.

Любопытно, что происходит, когда заканчивается время? Я тоже. Как ни странно, ничего не происходит. Всплывающий CTA остается на странице, когда таймер достигает нуля.

17. IMPACT Брендинг и дизайн

CTA: Что мы делаем

CTA могут показаться действительно напористыми и продажными (да, это слово…) если используется неправильный язык. Мне нравится образовательный подход IMPACT, когда посетители бросают вызов, чтобы узнать, чем занимается компания, прежде чем подталкивать их к каким-либо дальнейшим действиям. Этот призыв к действию особенно меня заинтриговал, потому что они даже не используют глагол действия, но им все же удается побудить людей щелкнуть.

18. Хьюмор

CTA: Запуск (не нажимать)

Если вы зашли на веб-сайт и увидели призыв к действию «Запуск», сопровождаемый копией «Не нажимать»… что бы вы, сделали? Давайте будем честными: вы бы очень хотели его нажать. Безобидная обратная психология здесь используется в шутливой форме, что очень соответствует голосу бренда Хьюмора.

19. Брукс Бег

CTA: Узнай, когда у нас будет больше

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

Brooks Running использует умный призыв к действию, чтобы гарантировать, что их клиенты не откажутся от их веб-сайта только потому, что их любимая обувь отсутствует в наличии. На скриншоте ниже вы можете увидеть, как Брукс рекламирует потрясающе выглядящую обувь с призывом к действию: «Узнай, когда у нас будет больше». Мне нравится, как эта кнопка превращает плохие новости в возможность удержать клиентов. Без этого покупатели Brooks, скорее всего, забудут об обуви и посмотрят где-нибудь еще.

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

20. Округ Гумбольдт

CTA: Следуй за волшебством

округа Гумбольдт великолепен сам по себе: он приветствует вас полноэкранным видео с потрясающе красивыми кадрами. Но что мне действительно нравится, так это нетрадиционная кнопка с призывом к действию, размещенная в центре внизу, со значком кролика и надписью «Следуй за магией».

Это усиливает фантастическое ощущение отснятого материала, заставляя вас чувствовать, что вы собираетесь шагнуть в сказку.

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

21. Убер

CTA: Зарегистрируйтесь, чтобы водить | Начать поездку с Uber

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

Мне тоже нравится текст с призывом к действию водителя вверху: он не может быть намного проще, чем «Зарабатывайте деньги, управляя своей машиной». Вот это говорит на народном языке.

22. Spotify

CTA: Перейти на премиум | Играть бесплатно

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

Это не только заголовок; это также цвет их кнопок CTA.Призыв к действию «Перейти на премиум» имеет салатовый цвет, поэтому он появляется со страницы, а призыв к действию «Играть бесплатно» — просто белый и сливается с остальной частью текста на странице. Этот контраст гарантирует, что посетители будут привлечены к премиальному призыву к действию.

23. Угмонк

CTA: Пришлите мне купоны | Меня не интересует

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

Ugmonk имеет отличный призыв к действию для выхода, предлагая пользователям два варианта в качестве последнего призыва перед тем, как они покинут сайт. Во-первых, они предлагают скидку 15% на свои продукты, а затем следуют два варианта: «Да, пожалуйста, пришлите мне купон» и «Нет, спасибо: мне это не интересно». Очень полезно, что каждый призыв к действию разъясняет, что на самом деле означают «Да» и «Нет», и мне также нравится, что они не использовали выражения, вызывающие чувство вины, такие как «Нет, спасибо: я ненавижу природу», как я видел на других веб-сайтах.Наконец, обратите внимание, что кнопка «Да, пожалуйста» намного ярче и привлекательнее по цвету, чем другой вариант.

24. Pinterest

CTA: Продолжить через Facebook | Зарегистрироваться

Хотите зарегистрироваться в Pinterest? У вас есть несколько вариантов: зарегистрироваться через Facebook или по электронной почте. Если у вас есть учетная запись Facebook, Pinterest хочет, чтобы вы сделали это в первую очередь. Откуда мне знать? С эстетической точки зрения я знаю, потому что синий призыв к действию Facebook идет первым и намного более заметен, красочен и узнаваем благодаря фирменному логотипу и цвету.Логично, что я знаю, потому что, если вы входите в систему через Facebook, Pinterest может извлекать данные API Facebook и получать больше информации о вас, чем если вы входите в систему через свой адрес электронной почты.

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

25. Мадуэлл

CTA: Отведи меня туда | Что дальше?

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

Когда вы впервые попадаете на страницу, вас приветствует заголовок «Я ищу …», за которым следует категория, например «Одежда, которая повсюду путешествует». Ниже этой копии два варианта: «Да, отведи меня туда» или «Хм … Что дальше?» Пользователь может выбрать один из двух CTA, чтобы либо просмотреть одежду, подходящую для путешествий, либо перейти к следующему типу одежды, где он может снова поиграть.

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

26. Instagram

CTA: Загрузить в App Store | Скачать в Google Play

Поскольку Instagram — это в основном мобильное приложение, вы увидите два черных CTA одинакового размера: один для загрузки Instagram в Apple App Store, а другой для загрузки в Google Play. Причина, по которой эти призывы к действию имеют одинаковый калибр, заключается в том, что не имеет значения, загружает ли кто-то приложение в App Store или в Google Play … загрузка — это загрузка, и это именно то, для чего Instagram оптимизирует.Если у вас уже есть Instagram, вы также можете нажать CTA, чтобы «Войти», если вы тоже предпочитаете этот вариант.

27. Barkbox

CTA: Начало работы | Подарить подарок

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

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

28. т.с. Фарма

CTA: Узнать больше | Просмотреть товары

Оказалось, что Red Bull не является собственной материнской компанией: она принадлежит таиландской компании t.c. pharma, компания, которая производит популярные энергетические напитки, напитки с электролитами, а также функциональные напитки и закуски.

На его домашней странице есть две кнопки с призывом к действию равного размера: «Узнать больше» и «Посмотреть продукты», но по ярко-желтому цвету первой кнопки ясно, что они предпочли бы направлять людей на «Узнать больше». более.»

29. Генеральная Ассамблея

CTA: Просмотр дневных курсов | Подписаться

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

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

30. благотворительность: вода

CTA: Выдача кредитной картой | Раздайте через PayPal

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

CTA, представленные на их домашней странице, используют действительно уникальный подход к предложению различных способов оплаты, предварительно заполняя 60 долларов США в однострочную форму и включая два одинаково важных CTA для оплаты с помощью кредитной карты или PayPal.Обратите внимание, что оба CTA имеют одинаковый размер и дизайн — это потому, что charity: water, вероятно, не волнует , как вы жертвуете , если вы делаете пожертвование.

31. Бегемот

CTA: Авиабилеты | Гостиницы | Автомобили | Пакеты

Когда вы приземляетесь на сайте Hipmunk, вашим основным вариантом является поиск рейсов. Но обратите внимание, что есть четыре вкладки, которые вы можете пролистывать: авиабилеты, отели, автомобили и пакеты.

Когда вы нажимаете на одну из этих опций, форма изменяется, и вы можете заполнить дополнительную информацию.Чтобы быть на 100% уверенным, что вы знаете, что ищете, Hipmunk поместил ярко-оранжевый CTA в дальнюю правую часть формы. На этом призыве к действию вы увидите узнаваемый значок самолета рядом со словом «Поиск», чтобы быть уверенным, что вы ищете авиабилеты, а не отели. Когда вы находитесь на вкладке отелей, этот значок меняется на значок отеля. То же самое и с автомобилями и пакетами.

32. MakeMyPersona

CTA: Возьмите шаблон! | Нет, спасибо

Вот еще один пример отличного всплывающего окна с несколькими призывами к действию — за исключением этого случая, вы заметите, что размер, цвет и дизайн двух пользовательских опций сильно отличаются друг от друга.В этом случае люди из MakeMyPersona делают «Захватите шаблон!» CTA намного привлекательнее и кликабельнее, чем CTA «Нет, пока все в порядке, спасибо» — который даже не похож на кликабельную кнопку.

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

33. TeuxDeux

CTA: Начните бесплатно | Попробуйте бесплатно

Еще один пример упрощенного дизайна. На основном веб-сайте TeuxDeux есть одна фраза и две кнопки CTA.

Вот и все.

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

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

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

34. Betabrand

CTA: Примите участие

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

Однако призыв к действию на домашней странице Betabrand уникален тем, что привлекает аудиторию. Здесь пользователи могут голосовать и влиять на дизайн новых продуктов.

Это интересный способ вовлечь аудиторию и заняться чем-то другим.

35.Fabletics

CTA: ограниченная серия

Этот CTA Fabletics использует несколько маркетинговых тактик: дефицит и праздники.

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

Кроме того, CTA использует яркий цвет, поэтому CTA выделяется на простой домашней странице.

36. Эшли Стюарт

CTA: Купить лукбук

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

Кроме того, CTA-копия прямо к делу, что полезно для посетителей, которые хотят просматривать.

37. Amazon Music

CTA: 3 месяца бесплатно

Это отличный пример нескольких элементов, о которых мы говорили в одном призыве к действию.

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

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

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

38. Барнс и Нобл

CTA: Купить сейчас

Barnes and Noble использует простой призыв к действию, чтобы побудить посетителей сделать покупки из ограниченной коллекции во время праздника Дня матери.

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

Кроме того, графика и шрифты интересны и соответствуют посланию бренда.

39. Слабина

CTA: Подробнее | Свяжитесь с нами

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

Мне нравится этот пример, потому что в Slack есть две кнопки CTA для двух разных аудиторий.Если вы только начинаете свое исследование, вы можете нажать «Узнать больше». Однако, если вы являетесь постоянным посетителем и знаете, что хотите поговорить с продавцом, вы можете нажать «Связаться с нами».

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

40. Нинтендо

CTA: Сравнить характеристики

На веб-сайте Nintendo компания отвечает на любые вопросы, которые могут возникнуть у посетителя.

Фактически, одним из основных призывов к действию является «Сравнить функции.«Этим призывом к действию Nintendo отвечает на один из самых популярных вопросов, потому что они понимают, что многие посетители все еще проводят исследования перед покупкой продукта.

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

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

Хотите больше вдохновения для дизайна CTA? Ознакомьтесь с некоторыми из наших любимых примеров призыва к действию HubSpot.

Примечание редактора: этот пост был первоначально опубликован в июне 2014 года и был обновлен для полноты.

Добавление кнопки «копировать» в контент · GitHub

 контент · GitHub
 Мгновенно делитесь кодом, заметками и фрагментами.
 Добавление кнопки "копировать" к содержимому 
. Предварительная упаковка {
 позиция: относительная;
}
. Предварительная упаковка {
 padding-top: 25px;
}
.предварительная упаковка .copy-snippet {
 border-radius: 0;
 min-width: 55 пикселей;
 фон: нет повтора прокрутки 0 0 прозрачный;
 граница: сплошная 1px #bbb;
 цвет: # 26589F;
 Семейство шрифтов
: 'HELEVETICA', без засечек;
 font-size: 12px;
 font-weight: normal;
 line-height: 1.42rem;
 маржа: 0;
 отступ: 0px 5px;
 выравнивание текста: по центру;
 оформление текста: нет;
 отступ текста: 0;
 позиция: абсолютная;
 фон: #ccc;
 верх: 0;
 осталось: 0;
}
.предварительная упаковка .copy-snippet: disabled {
 цвет: # 555;
}
 jQuery (документ) .ready (функция ($) {
 var copyid = 0;
 $ ('pre'). Each (function () {
 copyid ++;
 $ (это).attr ('data-copyid', copyid) .wrap ('
');
 $ (это) .parent (). Css ('маржа', $ (это) .css ('маржа'));
 $ (' Копировать ') .insertAfter ($ (this)) .data ('copytarget', copyid);
});
 $ ('body'). On ('click', '.copy-snippet', function (ev) {
 ev.preventDefault ();
 var $ copyButton = $ (это);
 $ pre = $ (документ) .find ('pre [data-copyid =' + $ copyButton.data ('copytarget') + ']');
 if (предварительная длина $) {
 var textArea = document.createElement ("textarea");
 // Поместите в верхний левый угол экрана независимо от положения прокрутки.
 textArea.style.position = 'фиксированный';
 textArea.style.top = 0;
 textArea.style.left = 0;
 // Убедитесь, что у него небольшая ширина и высота. Установка на 1px / 1em
 // не работает, так как в некоторых браузерах это дает отрицательное значение w / h.
 textArea.style.width = '2em';
 textArea.style.height = '2em';
 // Нам не нужны отступы, уменьшая размер, если выполняется флэш-рендеринг.
 textArea.style.padding = 0;
 // Очистить границы.
 textArea.style.border = 'нет';
 textArea.style.outline = 'нет';
 textArea.style.boxShadow = 'нет';
 // Избегайте вспышки белого квадрата, если визуализируется по какой-либо причине.
 textArea.style.background = 'прозрачный';
 // Установить значение текста для копирования
 textArea.значение = $ pre.html ();
 document.body.appendChild (textArea);
 textArea.select ();
 попробовать {
 document.execCommand ('копия');
 $ copyButton.text ('Скопировано').prop ('disabled', true) ;;
} уловка (ошибка) {
 $ copyButton.text ('FAILED: не удалось скопировать'). Prop ('disabled', true) ;;
}
 setTimeout (функция () {
 $ copyButton.text ('Копировать'). Prop ('отключено', false) ;;
}, 3000);
}
});
});
 Вы не можете выполнить это действие в настоящее время.Вы вошли в систему с другой вкладкой или окном. Перезагрузите, чтобы обновить сеанс.
 Вы вышли из системы на другой вкладке или в другом окне. Перезагрузите, чтобы обновить сеанс. 
 .