Добавьте фоновое изображение в шаблон электронной почты HubSpot
Уровень сложности: средний. Этот пост предполагает хорошее понимание инструментов HubSpot и некоторые технические знания. Инструкции подробные и могут быть применены по мере их появления на почте.
Дизайн шаблонов электронной почты похож на веб-дизайн в 90-х: немного кошмар! К сожалению, каждый почтовый клиент сильно различается по тому, что он будет поддерживать, а что нет. Однако, как только вы потратите достаточно времени на шаблоны электронной почты, вы начнете разбираться в хитростях.
На протяжении многих лет клиенты HubSpot часто просят меня создать шаблон электронной почты с фоновым изображением.
Теоретически, фоновые изображения не поддерживаются во многих почтовых клиентах (при разработке шаблона я рекомендую обращаться к этой странице для поддержки CSS электронной почты). Однако я нашел полезный обходной путь для этого, который прошел лакмусовые бумажки. Проверьте это!
Читайте дальше, чтобы узнать, как добавить фоновое изображение в шаблон электронной почты HubSpot.
Пуленепробиваемые фоновые изображения
Код, который я использую, основан на пуленепробиваемых фоновых изображениях Campaign Monitor, которые, как мне кажется, действительно пуленепробиваемые (хотя я сделал некоторые настройки для Outlook).
1/ Создайте пользовательский модуль
Чтобы использовать это в HubSpot, мы создадим пользовательский модуль для шаблонов электронной почты.
- Перейдите в Маркетинг > Файлы и шаблоны > Инструменты дизайна
- Нажмите на папку, в которую вы хотите добавить модуль справа
- Нажмите «Файл» > «Новый файл».
- Выберите «Модуль» в разделе «Компоненты»
- Выберите «Шаблоны электронной почты» в разделе «Где вы хотите использовать этот модуль?»
- Назовите свой модуль и нажмите «Создать».
2/ Добавить редактируемые поля
Поскольку мы хотим иметь возможность обновлять содержимое каждый раз, когда используем модуль в электронном письме, мы добавим поля для обновления фонового изображения и содержимого.
Вы можете сделать это из опции «Добавить поле» справа:
- Добавьте поле изображения и назовите его «Фоновое изображение»
- Добавьте поле форматированного текста и назовите его «Содержание»
Ваша боковая панель должна выглядеть так:
3/ Вставьте код
Приведенный ниже код включает логотип в верхнем левом углу, три значка социальных сетей и место для содержимого заголовка.
См. Pen Untitled Стефани О’Гей Гарсия (@stephanieogaygarcia) на CodePen.
Скопируйте и вставьте его в раздел кода вашего пользовательского модуля.
Если вы нажмете «Предварительный просмотр», он будет выглядеть не так уж и много, но сейчас мы перейдем к тому, чтобы сделать его потрясающим 🙂
4/ Настроить модуль
Есть несколько частей модуля, которые мы можем настроить сейчас, чтобы он выглядел красиво.
а.
Фоновое изображение по умолчаниюДавайте добавим фоновое изображение по умолчанию в поле «Фоновое изображение», наведя указатель мыши на поле «Фоновое изображение» справа и нажав «Изменить». В разделе «Изображение по умолчанию» у вас должна быть возможность выбрать изображение.
Позже пользователи смогут обновлять этот образ для каждого отдельного модуля.
б. Содержимое по умолчанию
Аналогично, наведите указатель мыши на поле «Содержимое» с правой стороны (если вы все еще находитесь в разделе «Фоновое изображение», вы можете щелкнуть значок инструментов в верхнем меню хлебных крошек, чтобы вернуться), нажмите « Редактировать».
Нажмите на поле «Форматированный текст по умолчанию» и введите содержимое. Будет лучше всего выглядеть, если вы сделаете текст белым (после его написания) и выровняете его по центру (я выделил его ниже, чтобы вы могли видеть белый текст).
в. Логотип и значки социальных сетей
В этой части кода (строки 27–34 в коде, который вы вставили в модуль), вы можете обновить свой логотип и значки социальных сетей:
Я выделил разделы над вами захочет обновить.
«#» в «href» следует заменить ссылкой на страницу, на которую вы хотите сделать ссылку, а «#» в «src» следует заменить ссылкой на значок, который вы хотели бы использовать в каждом case (вы можете загрузить свои значки в файловый менеджер и получить ссылку оттуда).
Например, когда я добавляю собственный логотип и значки социальных сетей, этот фрагмент кода выглядит следующим образом:
png">< /a>
Теперь, если вы нажмете «Предварительный просмотр», вы увидите, что модуль фонового изображения вашей электронной почты начинает выглядеть намного лучше:
д. Цвет фона по умолчанию
Если по какой-либо причине наше фоновое изображение не загружается, мы хотим убедиться, что цвет, который появляется на его месте, соответствует нашему бренду.
В настоящее время у меня установлен этот оттенок красного ( #F73E4B ), но вы можете заменить его своим собственным цветом. Вы можете найти и заменить это в шаблоне, удерживая Ctrl + F, вставив #F73E4B в строку поиска, щелкнув первый значок, чтобы переключить «заменить», и используя опцию «Заменить все».
д. Расширенная настройка
Если вы хотите еще больше углубиться в код, вы можете обновить другие аспекты кода (необходимы некоторые базовые знания HTML).
- Обновите ширину электронного письма : вы можете использовать функцию «Найти и заменить» выше, чтобы заменить «600» на другую ширину, если это то, что вы используете в своем шаблоне электронной почты
- Обновить высоту модуля : для корректного отображения в Outlook мне пришлось добавить в код несколько фиксированных высот (строки 19, 21, 26, 36-39), которые можно соответствующим образом отрегулировать.
- Обновить ширину логотипа : я обновил ширину логотипа, изменив «ширину» в строке 28 кода.
- Увеличить отступ : вы можете обновить отступ вокруг содержимого, чтобы добавить к нему больше отступов
- Удаление логотипа и значков социальных сетей : если вам просто нужно фоновое изображение с содержимым перед ним, вы можете удалить HTML между тегами
в строках с 26 по 35 (и любой CSS в разделе стилей для них) - …и т.д.
Использование модуля фонового изображения электронной почты HubSpot
Я проверил это на почтовых клиентах и обнаружил, что это работает.Однако, если у вас возникнут какие-либо проблемы, обращайтесь!
Сценарист: Стефани О’Гэй Гарсия Первоначально опубликовано: 21 сентября 2019 г. Последнее обновление: 9 февраля 2022 г.
Как создать кликабельное фоновое изображение в WordPress
Перейти к содержимому
Источник изображения: UnboxScience — Pixabay.com / Лицензия: CC0 Public DomainПрежде чем приступить к реализации интерактивного фона, сначала установите фоновое изображение или фоновый рекламный баннер.
Чтобы загрузить фоновое изображение в WordPress, перейдите к Внешний вид => Фон на панели управления WordPress и выберите подходящий фон для вашего сайта.Реализация HTML
Теперь приступим. Создайте свою дочернюю тему, включая все необходимые файлы, и скопируйте исходный файл header.php вашей темы WordPress в дочернюю тему. Сначала вам нужно добавить тег привязки, который содержит целевой URL-адрес — веб-сайт, на который должна ссылаться ваша фоновая реклама:
Разместите указанный выше код непосредственно под вашим открытием
5 9lt ;тело>1
тег, но до div, который содержит содержимое вашего сайта. Обычно этот div может называться wrapper или container , но может отличаться, поэтому вам нужно будет убедиться, что вы выбрали правильный контент div.
В ссылке также есть 9К нему применен класс 0165 takeover , так что вы можете манипулировать им с помощью CSS. Ваш код должен выглядеть примерно так:<дел>
...Добавьте пользовательский CSS
Чтобы сделать ваше фоновое изображение кликабельным, вам теперь нужно расположить тег ссылки за содержимым вашего веб-сайта — поверх фонового изображения. Вы можете добиться этого, добавив несколько строк простого CSS в style.css файл вашей дочерней темы, например:
.takeover { положение: абсолютное; дисплей: блок; ширина: 100%; высота: 100%; z-индекс: 1; курсор: указатель; } .контейнер { положение: родственник; z-индекс: 999; }Используя приведенный выше код CSS, вы применили абсолютное позиционирование к ссылке и относительное позиционирование к div, содержащему ваше содержимое.
Установить фоновое изображение
Все, что вы сделали до сих пор, — это разместили ссылку поверх существующего фонового изображения, чтобы вы могли продолжать использовать параметр фонового изображения по умолчанию, как обычно. Это позволяет вам легко изменить рекламное изображение, которое вы хотели бы использовать на своем веб-сайте, без изменения кода.
Источник изображения: Саймон – Pixabay.com / Лицензия: CC0 Public DomainКстати, если вы предпочитаете использовать кликабельное фоновое изображение для своего веб-сайта с помощью внешнего источника, а не создавать дочернюю тему самостоятельно, вы также можете использовать подходящие плагины, такие как WP-Backgrounds Lite или Custom Backgrounds.
для Вордпресс. Но обратите внимание, мы не тестировали ни один из этих плагинов. Для получения помощи при использовании этих плагинов вы можете напрямую связаться с разработчиками плагинов.Вывод: Создание интерактивных фоновых изображений
Вот и все. Какое бы фоновое изображение или фоновую рекламу вы ни выбрали для своего веб-сайта WordPress, теперь оно будет интерактивным, направляя посетителей веб-сайта на URL-адрес, указанный вами в файле header.php вашей пользовательской дочерней темы.
Предлагая потенциальным спонсорам и рекламодателям возможность поглощения ваш сайт является очень привлекательным каналом воздействия, с которым не может сравниться никакая другая рекламная позиция. В сочетании с дополнительной рекламой в лучших местах, таких как заголовок, боковая панель и нижний колонтитул, вы можете предлагать несколько рекламных пакетов, позволяющих получать дополнительный доход в Интернете.
Категории: УчебникТеги: Дочерние темы, CSS, Учебник, Веб-дизайн, WordPressОставайтесь с нами на связи!
Подпишитесь на нашу рассылку, и мы сообщим вам о выпуске новых тем,
, а также о важных обновлениях и скидках.
Я проверил это на почтовых клиентах и обнаружил, что это работает.
В ссылке также есть 9К нему применен класс 0165 takeover , так что вы можете манипулировать им с помощью CSS. Ваш код должен выглядеть примерно так:
для Вордпресс. Но обратите внимание, мы не тестировали ни один из этих плагинов. Для получения помощи при использовании этих плагинов вы можете напрямую связаться с разработчиками плагинов.
