Как создать полноэкранные, прозрачные или полноэкранные формы подписки Bloom

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

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

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

Пример 1

Пример 2

Создание полноэкранной и прозрачной формы согласия с Bloom: советы

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

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

Сначала активируйте форму подписки

Когда вы разрабатываете форму подписки, у вас есть кнопка предварительного просмотра в верхней части вкладки «Дизайн». Это поможет вам предварительно просмотреть результаты, которые вы получаете при проектировании. Хотя изменения встроенного дизайна автоматически изменяются и в предварительном просмотре, это не учитывается для кода CSS. Если вы вносите определенные изменения в настраиваемое поле CSS на вкладке «Дизайн», возможно, некоторые из этих изменений не применяются к форме предварительного просмотра, но применяются к форме подписки на вашем веб-сайте.

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

(Или, конечно, на промежуточном / тестовом сайте.)

Начните с создания новой страницы и дайте ей имя. Вам не нужно ничего помещать на эту страницу; он просто должен существовать. Пока вы разрабатываете форму подписки, перейдите на вкладку «Параметры отображения». Установите время задержки на 1 секунду, чтобы вам не приходилось ждать формы подписки каждый раз, когда вы хотите проверить результат.

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

Внесите изменения в соответствии с вашей активированной формой

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

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

Начать создание первого примера

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

Добавить форму согласия

Давайте начнем с добавления новой формы подписки на ваш веб-сайт, перейдя в панель управления WordPress> Bloom> Нажмите «New Optin» в правом углу> выберите «Всплывающее окно».

Введите имя для формы и выберите поставщика услуг электронной почты на вкладке «Настройка». Когда это будет сделано, вы можете перейти на вкладку «Дизайн». Это основная вкладка, на которой мы сосредоточимся в этом посте. Выберите один из предоставленных шаблонов и продолжайте. Для примеров, которые мы делаем, мы выбираем первый в ряду.

Настройки дизайна

При предварительном просмотре формы на вкладке «Дизайн» без внесения каких-либо изменений вы увидите следующую форму согласия:

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

Заголовок и сообщение для подписки

Теперь, чтобы наша форма подписки выглядела так, как в примере, который мы показали вам выше, начните с внесения следующих изменений в стандартные настройки дизайна заголовка Optin и сообщения Optin на вкладке «Дизайн»:

• Цвет текста: #FFFFFF
• Стиль текста: полужирный
• Ориентация текста: по центру

Настройки изображения и стиль выбора

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

• Ориентация изображения: нет изображения
• Цвет фона: прозрачный
• Шрифт заголовка: Lato
• Шрифт тела: Lato
• Цвет текста: темный текст
• Угловой стиль: квадратные углы
• Ориентация границы: верхняя + нижняя граница
• Цвет границы: #FFFFFF
• Стиль границы: пунктирная граница

Стиль границы, настройка формы и стили формы

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

• Ориентация формы: форма снизу
• Поле (поля) имени: поле без имени
• Текст электронной почты: электронная почта
• Текст кнопки: ПОДПИСАТЬСЯ!
• Ориентация поля формы: составные поля формы
• Стиль углов поля формы: закругленные углы
• Цвет текста формы: светлый текст
• Цвет фона формы: прозрачный
• Цвет кнопки: # 6a18a0
• Цвет текста кнопки: светлый

Стиль кромки формы

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

Пользовательские CSS

Наконец, нам нужно внести в форму некоторые изменения CSS, чтобы все было на месте. Скопируйте и вставьте следующие строки кода в поле Custom CSS:

.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Измените код в соответствии с вашей собственной формой подписки Bloom

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

Число в конце выделенной части на приведенном выше экране печати - 6, потому что оно шестое в строке:

Итак, в зависимости от того, какое место он занимает в вашем списке форм, вам придется изменить это число.

Конечный результат

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

Настройки отображения

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

Начать создание второго примера

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

Настройки дизайна

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

Прокрутите вниз и выберите «Темный текст» для цвета текста формы и используйте «# 724501» в качестве цвета кнопки.

Пользовательские CSS

Наконец, нам нужно добавить несколько строк кода CSS в поле Custom CSS:

@media only screen and (min-width: 981px){ 
.et_bloom .et_bloom_popup:after{ 
margin-top: 12% !important; 
height: 50% !important; 
background: url(""); 
border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important; 
box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-webkit-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-moz-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
}
.et_bloom .et_bloom_form_container .et_bloom_close_button {
right: -250px !important;
top: -20% !important;
}}

@media only screen and (max-width: 981px){
.et_bloom .et_bloom_popup:after{
background: url("");
} }

.et_bloom .et_bloom_form_container .et_bloom_popup_input {
background: #FFFFFF !important;
}

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important; margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

Заменить фоновые изображения

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

Конечный результат

И вы сделали! Ваша вторая форма для подписки теперь должна выглядеть так:

Последние мысли

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!