Как создать фон в html: Как сделать фон в html: порядок действий

Руководство по фоновым изображениям в электронных письмах – Email Uplers

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

[Этот блог был первоначально опубликован 24 июня 2016 г. и был обновлен, чтобы продемонстрировать новые примеры]

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

Зачем отправлять фоновые изображения по электронной почте?

Наш мозг может обрабатывать изображения с невероятной скоростью — 0,013 секунды. Другое исследование показывает, что 92,6% людей говорят, что визуальное измерение является основным фактором, влияющим на их решение о покупке. Таким образом, бренды часто полагаются на изображения и графику продуктов, чтобы вызвать интерес к маркетинговым электронным письмам; и добавление фоновых изображений является одним из таких мощных инструментов, используемых ими. Проще говоря, фоновые изображения писем подчеркивают визуальную привлекательность вашего письма и стимулируют ваших читателей к взаимодействию с контентом.

Этот метод дизайна хорошо применяется в мире Интернета, но, к сожалению, что касается электронной почты, маркетологи все еще неохотно используют этот действительно привлекательный маркетинговый инструмент. Почему?
Основная проблема с добавлением фонового изображения в сообщение электронной почты заключается в том, что оно поддерживается не во всех почтовых клиентах (блокировка изображения). Например, рендеринг фонового изображения Outlook — это полторы задачи. Так что, если вы хотите создать вау-фактор с фоновыми изображениями в шаблоне электронной почты, вам нужно знать, какие ESP будут поддерживать ваши изображения, а какие потребуют от вас дополнительных усилий, чтобы убедиться, что ваш дизайн выглядит именно так, как вы этого хотите. к. Это означает ознакомление с правилами рендеринга, которые связаны с каждым клиентом. Например, фоновое изображение Outlook отображается правильно, только если для всего письма используется один фон. Если вы попытаетесь использовать разные фоны для разных элементов электронной почты, ошибки начнут заявлять о себе.

Блокировка изображений электронной почты является результатом настроек по умолчанию многих провайдеров электронной почты или предоставленных ими личных предпочтений. Блокировка может помешать вашей маркетинговой кампании и даже не повлиять на потенциальных клиентов; в некоторых крайних случаях вы можете просто произвести неблагоприятное впечатление на своих читателей.
Неправильное соотношение текста и изображения (которое не равно 80:20) может иметь катастрофические последствия для вашей кампании по электронной почте, если почтовый клиент заблокирует ваши изображения. Рекомендации для идеального соотношения текста и изображения в электронных письмах >>

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

Как добавить фоновые изображения — пуленепробиваемый инструмент

Главным виновником, похоже, является Outlook 07/10/13, который не поддерживает ни фоновые изображения электронной почты таблицы, ни стили фонового изображения. Метод пуленепробиваемого фонового изображения Campaign Monitor может стать хорошим решением этой проблемы. Убедитесь, что вы проверили, поддерживают ли ваши ESP кодирование VML (язык векторной разметки), если у вас есть одно целое фоновое изображение для вашего электронного письма. Но на всякий случай, если вы повторяете фоновое изображение шаблона электронной почты, вы можете применить его в теге body и top table со свойством повторения, и оно будет отображаться в Outlook 7, 10, 13 даже без кода VML.
Вы можете проверить это на backgrounds.cm

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

Единственная проблема, которая может возникнуть, — это размер образа. Если Outlook 2000 и более поздние версии посчитают ваше изображение слишком большим (размер или размер), может произойти сбой. Поэтому, прежде чем перейти к фоновому изображению электронной почты в формате HTML, очень важно проверить правильность размера изображений. Кроме того, проверьте свою электронную почту в активной копии Outlook. Чтобы увидеть больше привлекательных шаблонов писем, нажмите здесь.

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

ВАУ-фактор

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

SALESFORCE

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

MINTEL

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

Источник изображения

NATIONAL GEOGRAPHIC

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

MAMMUT

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

Источник изображения

AMC STUBS

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

ACNE

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

BLANCA RESORT AND SPA

Это письмо от BLANCA Resort and Spa дает реальное представление о курорте благодаря фоновым изображениям в ячейках таблицы (а не всему тексту письма). В этом случае фоновое изображение впечатляюще передает атмосферу и возможности, которые они предоставляют.

PELOTON

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

Источник изображения

Выводы

• Визуальное измерение является основным фактором, влияющим на решение о покупке
• Таким образом, фоновые изображения могут помочь в конверсии
• Изображения поддерживаются не во всех почтовых клиентах, особенно в Outlook
• Проверьте свое HTML-письмо с фоновым изображением в активной копии Outlook; большие изображения могут привести к сбою
• Добавьте текст ALT для ваших изображений
• Укажите размер изображения; ваш текст ALT будет находиться в этом фрейме
• Установите цвет фона в качестве запасного

Вам понравился этот пост? Поделись!

• Скопировано в буфер обмена

Изображение-Слайдер-Ин-Хтмл-Сорс-Код-Google Suce

ALLBILDERVIDEOSBüchermApsNewshopping

Sucoptionen

Image Slider в Javascript Sockecript-Scode-CODIM-HIM

Image Image in Image in javascript-Scode-Code-CODHIM
3

.

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

Фрагмент кода: лучший слайдер изображений на чистом JavaScript

03.09.2022 · В этом руководстве рассказывается, как создать автоматический слайдер изображений в HTML CSS, чтобы вы могли уделять больше времени содержимому!

Как создать слайд-шоу — W3Schools

www.w3schools.com › howto › howto_js_slideshow

Узнайте, как создать адаптивное слайд-шоу с помощью CSS и JavaScript. … Полноразмерные изображения с номером и текстом подписи —>