Как создать сайт или блог в 2020 году - бесплатное и простое руководство по созданию сайта

Как создать "Следуйте за нами на Twitter«Всплывающее окно, чтобы получить больше последователей

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

Twitter Это началось почти как поток информации, сайт микроблогов, но превратился в маркетинговый центр, где такие бренды, как Wendy's и Skittles, среди прочего, поддерживают неформальную атмосферу для привлечения клиентов таким образом, что традиционный маркетинг просто не может. Или я не буду.

в то время как Facebook Это, несомненно, матриарх социальных сетей, который представляет 57% глобальной деятельности по обмену контентом, социальных сетей, таких как Twitter, Instagram и даже Snapchat не следует игнорировать.

Twitter в конце концов, он по-прежнему возглавляет электронную почту для общего социального обмена на 18%.

поделиться твиттером

Вот как будет выглядеть наше всплывающее окно в конце этого урока:

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

Готовы? Давайте начнем.

Шаг 1. Создайте свою кампанию

Войдите в свою панель управления OptinMonster и нажмите Создать кампанию,

create_campaign "width =" 620 "height =" 161 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/03/1584871091_155_Como-crear-un-cuadro-de-caracteristicas-de-Optin -step-to.png 620 Вт, https://optinmonster.com/wp-content/ uploads / 2018/06 / create_campaign-300x78.png 300w "sizes =" (максимальная ширина: 620 пикселей) 100 Вт, 620 пикселей "></p>
<p>Выберите тип кампании. В этом руководстве мы будем использовать один из самых популярных типов конверсионных кампаний: <strong>возникать</strong>,</p>
<div class=

вид редактирования кампании по умолчанию

Давайте добавим индивидуальную коробку. Чтобы добавить это, просто перетащить к предварительному просмотру кампании.

draganddrop_column_block

После того, как вы поместили блок столбцов в свою кампанию, вы увидите Элементные блоки доступны.

add_element_blocks "width =" 620 "height =" 373 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/04/1585931951_670_Como-create-a-character-como-nosotros-en-FacebookPopup-Window.png 620w, https://optinmonster.com/wp-content/ uploads / 2018/07 / add_element_blocks-300x180.png 300w "sizes =" (максимальная ширина: 620px) 100vw, 620px "></p>
<p>Мы собираемся добавить <strong>HTML</strong> Блок элементов Снова просто перетащите элемент блока в свою кампанию.</p>
<h3><span class="ez-toc-section" id="%D0%A8%D0%B0%D0%B3_3_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C_Twitter_%D0%BA%D0%BE%D0%B4"></span>Шаг 3. Получить Twitter код<span class="ez-toc-section-end"></span></h3>
<div class=

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

Начните с выбора Twitter кнопки вариант.

выбрать следовать за кнопкой из вариантов, которые появляются.

выберите кнопку продолжить

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

добавить имя пользователя

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

установить параметры настройки

Установите флажок рядом с Большая кнопка и нажмите на синий обновление кнопка.

выберите опцию большой кнопки и обновите

Нажмите синий Скопировать код кнопка.

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

Шаг 4. Добавьте Twitter Следуйте коду кнопки вашей кампании

Вернитесь к построителю кампании и вставьте код, с которого вы скопировали Twitter, Если вы хотите, вы можете центрировать свою кнопку, добавив

все вокруг в кодах div.

вставьте код Twitter в кампании

сохранить ваша кампания

сохранить вашу кампанию

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

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

добавить новый блок

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

перетаскивать элементы в кампанию

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

редактировать текст

Когда вы нажимаете кнопку Follow, они приветствуют вас Twitter краткое изложение профиля и возможность подписки или подтверждение того, что вы уже подписаны на учетную запись.

профиль в Твиттере

Это здорово, но если вы хотите немного пофантазировать, вы можете добавить собственный CSS, чтобы добавить интерес к кнопке Follow.

Шаг 5. Создайте кампанию с помощью специального CSS

Если вы хотите пропустить этот шаг, проблем нет. Вы добавили кнопку и текст, который довольно интересен. Просто перейдите к шагу 6. ​​В противном случае, давайте погрузимся.

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

OptinMonster Twitter кнопка

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

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

/* Move the Twitter Follow Button to the right side of the Campaign */
html div#om-{{id}} .twitter-follow-button {
    float: right;
    margin: 0 !important;
}

/* Reposition the close link */
html div#om-{{id}} .{{ns}}-close:before {
    display: block;
    background-color: #000;
    color: #fff;
    padding: 10px 5px 5px 10px;
}

/* Add a border around the Campaign and the background image of our Twitter profile summary */
html div#om-{{id}} .Campaign__content {
    border: 1px solid #eaeaea;
    background-image: url('https://www.yoursite.com/image.jpg') !important;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    height: 250px;
    width: 475px;
}

Чтобы добавить CSS в свою кампанию, перейдите на Дизайн »Настройки Optin» Пользовательский CSS,

добавить собственный CSS в кампанию

Еще раз, сохранить ваша кампания

Шаг 6. Установите правила отображения

Теперь мы будем выбирать, когда «Следуйте за нами на Twitter"Появится всплывающее окно.

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

display_rules_default "width =" 620 "height =" 351 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/04/1585931952_404_Como-create-a-custom-como-nosotros-en-FacebookPopup-Window.png 620w, https://optinmonster.com/wp-content/ uploads / 2018/07 / display_rules_default-300x170.png 300w "sizes =" (максимальная ширина: 620px) 100vw, 620px "></p>
<div class=

Но лучший вариант – показать «Следуйте за нами на Twitter«Всплывающее окно только для посетителей, которые уже показали, что они заинтересованы.

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

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

изменить настройки вывода кампании

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

advanced_output_settings "width =" 495 "height =" 700 "srcset =" https://blogging-techies.com/wp-content/uploads/2020/04/1585931953_573_Como-create-a-custom-como-nosotros-en-FacebookPopup-window.png 495 Вт, https://optinmonster.com/wp-content/ uploads / 2018/07 / advanced_output_settings-212x300.png 212w "размеры =" (максимальная ширина: 495 пикселей) 100 Вт, 495 пикселей "></p>
<p>Когда вы закончите, нажмите <strong>Сохранить настройки</strong> чтобы ваши изменения вступили в силу.</p>
<p><img class=

Вот и все! Теперь вы можете легко расширить свою социальную сеть с высокой конверсией Следуйте за нами Twitter возникают.

Все еще не используете OptinMonster? Начните сегодня и конвертируйте больше посетителей в подписчиков и клиентов, чем когда-либо прежде!

Table of Contents