Как создать липкую подписку на электронную почту в Divi, которая привлекает внимание
Опубликовано: 2020-09-30Параметры закрепления в Divi позволяют сделать любой элемент на странице «липким». Это позволяет вам фиксировать элементы на странице через определенные промежутки времени, когда пользователь прокручивает страницу вниз, чтобы они оставались видимыми дольше. И для вас, блоггеров, имеет большой смысл добавить липкую подписку на электронную почту в свой шаблон сообщения, чтобы тонко, но эффективно, чтобы эта важная форма оставалась на переднем крае.
В этом уроке мы покажем вам, как добавить липкую подписку по электронной почте в шаблон сообщения блога Divi, чтобы привлечь больше внимания и, надеюсь, привлечь больше потенциальных клиентов. Мы даже покажем вам, как добавить всплывающий эффект наведения на подписку на прикрепленную электронную почту!
Давайте начнем!
Sneak Peek
Вот краткий обзор дизайна, который мы построим в этом уроке.
Загрузите шаблон сообщения Sticky Email Optin БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Как загрузить шаблон сообщения с прикрепленным электронным письмом на свой сайт
Чтобы загрузить шаблон, перейдите к Divi Theme Builder на бэкэнде вашего сайта WordPress.
Затем в правом верхнем углу вы увидите значок с двумя стрелками. Щелкните значок.
Перейдите на вкладку импорта, загрузите файл JSON, который вы смогли загрузить в этом посте, и нажмите «Импортировать шаблоны Divi Theme Builder».
После того, как вы загрузите файл, вы увидите новый шаблон с новой областью тела, которая была назначена для всех сообщений. Сохраните изменения Divi Theme Builder, как только захотите активировать шаблон.
Давайте перейдем к руководству, не так ли?
Часть 1. Импортируйте готовый шаблон сообщения в блоге
В этом уроке мы собираемся использовать шаблон сообщения в блоге для пакета макетов бизнес-консультанта Divi, который вы можете загрузить из этого сообщения в блоге.
После того, как вы загрузите zip-файл, вам нужно будет распаковать его и импортировать файл в Divi Theme Builder.
Вот как это сделать…
- перейдите в Divi> Theme Builder.
- Щелкните значок переносимости в правом верхнем углу.
- Выберите вкладку импорта во всплывающем окне переносимости.
- Выберите файл json из загруженного файла.
- Щелкните кнопку Импорт.
Часть 2: Добавление прикрепленного электронного письма к шаблону
После импорта файла JSON щелкните значок редактирования, чтобы изменить макет пользовательского шаблона основного текста.
Внизу макета шаблона сообщения вы найдете раздел с формой подписки по электронной почте, которую мы будем использовать для подписки на прикрепленную электронную почту.
В этом примере мы хотим, чтобы подписка на рассылку по электронной почте была закреплена в разделе, чтобы пользователь не видел подписку на рассылку по электронной почте до тех пор, пока не перейдет к разделу с подпиской на прикрепленную рассылку. Однако, поскольку подписка на рассылку электронной почты находится в отдельном разделе, для подписки на рассылку электронной почты не будет достаточно места для перемещения. Поэтому нам нужно перенести его в раздел выше, который содержит раздел комментариев, чтобы подписка на рассылку электронной почты зависала над этим разделом, прежде чем остановиться на своем исходном месте.
Добавить новую строку в разделе выше
Для этого создайте новую строку из одного столбца непосредственно под строкой, содержащей модуль комментариев.
Добавить стиль строки
Затем откройте настройки новой строки и добавьте цвет фона следующим образом:
- Цвет фона: # 282828
На вкладке дизайна обновите следующий размер и интервал строки:
- Ширина: 100%
- Максимальная ширина: 100%
- Маржа: 15vw сверху
- Padding: 0px сверху, 0px снизу
Перенести подписку на рассылку писем в новую строку
После того, как стиль строки настроен, переместите подписку на электронную почту в нижнем разделе в новую строку, которую вы только что создали.
Удаляем нижнюю часть (она нам больше не нужна).
Обновите подписку на электронную почту с закреплением позиции
Затем откройте настройки подписки по электронной почте сейчас внутри новой строки и обновите параметры положения стикера следующим образом:
- Липкое положение: придерживаться низа
- Верхний предел липкости: раздел
Это приведет к тому, что подписка на электронную почту останется в нижней части окна браузера при прокрутке раздела перед тем, как остановиться в его родительской строке.
Обновить стиль подписки на электронную почту
На вкладке «Дизайн» обновите макет подписки по электронной почте следующим образом:
- Макет: корпус сверху, форма снизу
Затем обновите следующий стиль:
- Размер текста заголовка: 32 пикселя
- Максимальная ширина: 600 пикселей
- Выравнивание модуля: по центру
Затем установите для стиля анимации значение «Нет».
Результат
На этом этапе мы можем проверить результат, просмотрев сообщение в другом окне браузера.
Добавление стиля липкой позиции
Когда подписка на рассылку электронной почты находится в закрепленном состоянии, мы можем добавить к модулю определенный стиль, который будет применяться только к закрепленному состоянию. Это позволяет нам добавлять различные цветовые схемы, чтобы компенсировать белый фон, чтобы он немного выделялся.
Чтобы добавить другой цвет фона для закрепленного состояния, откройте настройки электронной почты и выберите значок эскиза (закрепленный значок) рядом с опцией фона. Затем щелкните липкую вкладку и добавьте следующий цвет фона:
- Цвет фона (липкий): # 282828
Продолжайте тот же процесс, чтобы добавить липкий стиль к следующим параметрам на вкладке дизайна:
- Цвет текста заголовка (липкий): #ffffff
- Цвет основного текста (липкий): #ffffff
- Максимальная ширина (липкое): 500 пикселей
- Отступ (липкий): 18 пикселей сверху, 30 пикселей снизу, 30 пикселей слева, 30 пикселей справа.
Результат
Теперь давайте проверим результат в живом посте.
Добавить эффект всплывающего окна при наведении курсора на подписку на прикрепленную электронную почту
Чтобы добавить всплывающий эффект при наведении курсора на подписку на прикрепленную электронную почту, откройте настройки подписки на электронную почту и обновите перевод стикера преобразования следующим образом:
- Transform Translate Axis Y (липкая): 85%
Это приведет к тому, что подписка на рассылку электронной почты будет опускаться (за пределами области просмотра) на 85% от ее собственной высоты, обнажая ровно столько подписки на электронную почту, чтобы пользователь мог навести курсор на заголовок.
Затем добавьте состояние наведения к параметру преобразования, чтобы положение перевода преобразования возвращалось в исходное положение при наведении курсора:
- Преобразовать преобразовать ось Y (при наведении): 0%
Результат
Вот окончательный результат.
Окончательные результаты
Вот три версии нашего липкого заголовка, которые мы создали.
Последние мысли
К счастью, Divi упрощает добавление липкой подписки по электронной почте на ваш сайт. Это освобождает больше времени для настройки дизайна вашего липкого элемента для более уникальных способов отображения вашей формы. Надеюсь, эта техника пригодится вам в будущих блог-проектах.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!