Как изменить фон сайта на картинку, шаблон 1704 — Вопрос от Sad Zvezdohcka
- Вопросы
- Горячие
- Пользователи
- Вход/Регистрация
>
Категории вопросов
Задать вопрос +
Основное
- Вопросы новичков (16358)
- Платные услуги (2089)
- Вопросы по uKit (81)
Контент-модули
- Интернет-магазин (1430)
- Редактор страниц (236)
- Каталоги (805)
- Блог (дневник) (111)
- Фотоальбомы (432)
- Видео (255)
- Форум (575)
Продвижение сайта
- Монетизация сайта (218)
- Раскрутка сайта (2446)
Управление сайтом
- Работа с аккаунтом (5291)
- Поиск по сайту (425)
- Меню сайта (1755)
- Домен для сайта (1529)
- Дизайн сайта (13443)
- Безопасность сайта (1463)
- Доп.
функции (1304)
Доп. модули
- SEO-модуль (225)
- Опросы (62)
- Гостевая книга (98)
- Почтовые формы (318)
- Статистика сайта (196)
- Мини-чат (91)
постинг (212)Вебмастеру
- JavaScript и пр. (642)
- PHP и API на uCoz (233)
- SMS сервисы (10)
- Вопросы по Narod.
- Софт для вебмастера (39)
- Вопросы
- Дизайн сайта
- Как изменить фон сайта на…
- фон-сайта
- дизайн
голоса: 0
Перейти в Панель управления — Главная — Дизайн — Управление дизайном(CSS), удалить все содержимое, после вместо удаленного содержимого установить содержимое с файла http://yurgazvezdochka.my1.ru/.s/src/css/1704.css — Сохранить.
После найти строку номер 54:
body.base{background-color:#FAFAFD;border:none}
замените ее на:
body.base{background:#FAFAFD url(http://good-surf.ru/forum/urok/css/fon/images/big.jpg)no-repeat 0%0%/cover fixed;border:none}
вместо ссылки http://good-surf.ru/forum/urok/css/fon/images/big.jpg пропишите ссылку на ваше фото для фона сайта.
…
Как сделать картинку на задний фон в html
Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background , которое в свою очередь добавляется к селектору body .
Общий синтаксис добавления фона следующий.
Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif) .
При добавлении фоновой картинки учтите, что изображение загружается не сразу, поэтому цвет фона должен быть таким, чтобы сохранить достаточный контраст между цветом текста и фона.
Лучше всего устанавливать цвет фона близким к цвету фонового рисунка, здесь опять же поможет универсальное свойство background , как показано в примере 1.
Пример 1. Добавление фона
HTML5 CSS 2.1 IE Cr Op Sa Fx
В данном примере фон веб-страницы задан цветом хаки, а текст — белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.
В прошлой статье мы говорили о том, как изменить цвет фона на сайте с помощью атрибутов тега body и CSS-стилей: Фон в HTML. В текущей статье речь пойдет об использовании изображений в качестве фона на сайте, о том как растянуть фон на всю ширину страницы и зафиксировать его.
Картинка в качестве фона страницы — HTML
Рассмотрим сначала способ задания фонового изображения на сайте с помощью атрибута background тега body:
Как в примере выше, рекомендуется помимо картинки указывать и цвет фона (он будет отображаться на сайте во время загрузки страницы), который будет максимально сочетаться с фоновым изображением и создавать контраст с текстом на сайте.
Например, если вы используете белый цвет текста на сайте, то стоит указать темный цвет фона и задать темное фоновое изображение. В таком случает текст будет легко читаться.
Примечание: Фоновое изображение и цвет фона рекомендуется задавать не с помощью HTML, а с помощью CSS. В таком случае код будет валидным и более правильным.
Картинка в качестве фона страницы — CSS
В CSS фоновый цвет и фоновое изображение можно задать одним свойством background:
Здесь с помощью свойства background-attachment фиксируется фон страницы, а с помощью свойства background-repeat устанавливается повторение изображения по горизонтали. Но стоит учесть, что фоновое изображение должно хорошо «сшиваться» по краям.
Если вы хотите растянуть фоновое изображение на весь размер окна браузера, используйте свойство background-size: 100%;
В конструкторе сайтов «Нубекс» для любого сайта можно использовать большое изображение в качестве фона и закрепить его.
Доброго времени суток всем желающим узнать и усвоить что-то новое! Вы когда-нибудь обращали внимание на внешний вид сайтов, при разработке которых создатели поленились оформить фон страниц? И я обращал. Это выглядит убого. Часто из-за отсутствия привычных нам разделений между разными видами информации она смешивается и просто отпадает желание далее что-либо смотреть на таком веб-ресурсе.
Чтоб такой беды не случилось с вашим проектом я решил написать статью на тему: «Как сделать фон страницы в html». Прочитав публикацию, вы узнаете, с помощью каких инструментов можно задавать фоновое оформление, как сделать фон фиксированным или меняющимся и многое другое, что поможет сделать привлекательным ваш сайт. А теперь начнем!
Основные инструменты для задания фона веб-страниц
Для установки фонового изображения разработчиками веб-языков был предусмотрен атрибут background. Он имеется как в html, так и в css.
В языке разметки – это атрибут тега body, а в стилевых таблицах – универсальное свойство, которое позволяет задать до 5 характеристик заднего плана одновременно.
Background – достаточно гибкий элемент, который можно использовать для задания фона в виде одного цвета, цветной картинки или даже анимации.
Так, для установки фонового изображения через единицу html <body> достаточно написать такой код: <body background=»адрес файла»>. </body> и вместо слов «адрес файла» вставить путь к картинке.
Однако заметьте! Если в виде фона вы хотите видеть однотонное полотно, заданное значением из палитры цветов, то это делается при помощи атрибута bgcolor.
Например, <body bgcolor=»#000000″>. </body>, мы задали черный фон для нашего сайта.
Цвета в css и html задаются либо английским словом (например, red), либо специальным кодом, который состоит из знака # и шести символов после него (например, #FFDAB9).
При наборе второго варианта в специализированных программных продуктах для разработчиков, палитра автоматически появится перед вами.
Если же вы только начали изучать данные веб-языки, то код цвета можно подсмотреть в интернете.
Background как свойство в каскадных стилевых таблицах
Он задается или в отдельном файле с css стилями, или в элементе <style>. С помощью данного свойства можно устанавливать фоновые рисунки или цвет, указывать начальное местоположение на странице, задавать повторяющиеся и фиксированные изображения. Для большей наглядности я оформил определения в таблице.
| Параметры | Предназначение |
| background-attachment | Используется для установки фиксированного или прокручиваемого изображения вместе с контентом сайта. Бывает fixed, scroll и inherit |
| background-image | Задает изображение фона. Может указываться одновременно с цветом. Тогда последний будет отображаться, пока полностью не загрузится картинка |
| background-position | Задает начальное расположение объекта для предыдущего параметра. Горизонтально указывается right, left и center, а по вертикали – bottom, top и center. Помимо этого, можно наследовать положение (inherit), задавать в процентах, пикселях и других размерностях |
| background-repeat | Применим при использовании атрибута background-image. Регламентирует, каким образом будет повторяться изображение. Можно указывать 2 значения: для горизонтали и вертикали. Существуют такие характеристики: no-repeat, repeat, repeat-x, repeat-y, inherit, space |
| background-color | Устанавливает цвет заднего плана из палитры. Цвет наследника всегда совпадает с цветом элемента-предка. |
| inherit | Наследует все характеристики родительского элемента |
Время для практического занятия
Разобрав главные элементы управления задним фоном, а также их атрибуты, приступим непосредственно к разбору конкретного примера. В коде программы, представленной ниже, я попытался включить все описанные элементы.
Итак, перед нами стоит задача установить задний фон из двух картинок: анимации и обычного изображения. При этом gif-анимация будет фиксирована, а рисунок прокручиваться вместе с содержимым страницы.
Также мы используем блоки больших размеров для того, чтобы отследить разницу между параметрами fixed и scroll. Обязательно попробуйте запустить пример самостоятельно и посмотреть, что выйдет!
На этой ноте можно подытожить нашу работу. Вступайте в ряды моих верных подписчиков, задавайте вопросы, если что-то непонятно, и не жадничайте ссылкой на мой блог, а делитесь ею с друзьями. Желаю приятного обучения. Пока-пока!
Как сделать картинку фоном в html, код, примеры, background, image.
Прежде чем ставить картинку на задний фон, то нужно учитывать, что в зависимости от разрешения картинки, задний фон будет на весь экран, либо будет занимать всего лишь часть!
Картинку на задний фон можно поставить несколькими способами:
1.Вставить код в саму страницу.
Для того, чтобы это увидеть, как это будет выглядеть, будем создавать новую страницу для каждого варианта.
Как поставить картинку на задний фон страницы?
Пропишем в самой странице код заднего фона.
Опять же, для этого есть несколько вариантов решения:
Изменим код на странице:
Код страницы будет такой:
С использованием стилей css, но все равно в самой странице.
После титлов вставляем такой код:
Код страницы будет такой:
Как поставить на задний фон картинку с помощью css.
Здесь имеется ввиду css = отдельный файл css.
2.Задний фон с помошью css.
Для этого нам потребуется:
А.Создать файл стилей css .
Б.Прописать код с задним фоном а файле стилей.
>В.Прикрепить файл стилей css к нашей странице.
А.
Для использования css для заднего фона, создадим отдельный файл стилей css, назовём его
В самом файле стилей css, делаем такую надпись:
Прикрепим его к странице, написав такой текст ниже титлов:
<link rel=»stylesheet» href=»http://axmara.narod.ru/_page/primer/zadniy_fon_kartinka.
css» type=»text/css»>
Код страницы будет такой:
Смотрим, что у нас получилось.
Если у вас разрешение больше картинки, то оно должно повториться, а как это решить, мы поговорим как-то в другой раз!
Как с сайта сохранить фон
Главная » Разное » Как с сайта сохранить фон
Сохранение любой картинки в Chrome, Opera, FireFox
Многие уже услышали или уже знают, что поисковик Google убрал кнопку “Открыть в полном размере” в поиске картинок. Теперь добраться до нужной картинки стало немного сложнее, необходимо зайти на сайт где она расположена и скачать.
Но что делать если вы хотите сохранить картинку себе на компьютер, но нажав правую мышку в браузере на картинке нету опции “Сохранить картинку как”? Почему для одних изображений есть такая возможность, а для других — нет? Сейчас мы во всем разберемся…
Пример сайта Cassina
Часто бывают такие случаи даже у коллег по цеху, найдя текстуру или референс на каком нибудь сайте, к примеру Cassina, если нет опции сохранить картинку — они просто делают скриншот в браузере а после сохраняют через Photoshop или другой редактор.
Как бы это не плохо, быстрый вариант, но не идеальный, поскольку на сайте могут быть изображения большего размера чем вы получите на скриншоте.
Давайте разберемся почему иногда нету кнопки “Сохранить картинку как”?
В Web есть несколько способов как можно вставить картинку и в зависимости от поставленных задач программист/веб-дизайнер решает каким способом пользоваться.
Самый обычный способ использование тега <img> — в таком случае обычно кнопка “Сохранить картинку как” активна в контекстном меню браузера.
Другой способ использование блока <div> и назначение картинки в качестве его фона — в таком случае кнопка для сохранения картинки не будет активна. Это похоже что-то на опцию в Photoshop “Наложение узора” для фигуры или элемента.
Этот способ удобный тем, что картинка может быть больше размера и выходя за границы блока div она не видна (обрезается), а при использовании некоторых параметров стилей картинка может всегда вписываться в блок независимо от размеров самого блока.
Использование <div> с фоном
Блокировка кнопки “Сохранить картинку как” или контекстного меню также может зависеть из за javascript. Или же какой то невидимый блок <div> будет поверх самой картинки <img> и пункт меню с сохранением так же не будет доступен.
Иногда изображение делают фоном блока <div>, что бы она не попала в индекс поисковиков, но это уже другая история. Тем не менее, в любой непонятной ситуации делайте как описано в следующем разделе.
Сохранение любой картинки в Chrome, Opera, FireFox
Если вы внимательный читатель, то наверное заметили что на сайте Cassina есть красная кнопка с иконкой развернуть на весь экран и там все же доступна опция скачивания.
Но способом, который я приведу ниже вы всегда можете скачать нужный вам контент и не важно есть ли там какая то “красная кнопочка”.
Последние версии Opera и Chrome работают идентично, и принцип будет тот же, думаю дополнительные скриншоты тут не понадобится делать.
Принцип прост, нужно зайти в режим разработчика, перейти во вкладку “Сеть”/”Network”, найти нужную картинку и скачать.
Теперь более подробно на примере сайта 3dground.net.
Шаг 1.
Откройте сайт в браузере, затем запускаем режим разработчика.
Нажмите на клавиатуре сочетание горячих клавиш Ctrl + Shift + I(Работает для всех 3-ех браузеров).
Вы увидите следующее окно:
Режим разработчика в Chrome
Режим разработчика в FireFox
Режим разработчика в Opera
Шаг 2.
Перейдите во вкладку “Network”/”Сеть” и обновите страницу (F5)
Chrome
FireFox
Шаг 3.
Включите фильтр по изображениям [1] и отсортируйте контент по размеру [2]:
Chrome
FireFox
Шаг 4.
Если вы ищите большие изображения, обычно они находятся в начале списка.
Переключайтесь между элементами списка чтобы найти нужное изображение.
Вы можете включить увеличенный предварительный просмотр нажав на вкладку “Preview” в Chrome/Opera или “Ответ” в FireFox (Этот набор вкладок доступен после выделения пункта из списка файлов).
Быстро переключаться между элементами списка файлов можно при помощи клавиш “Вверх“ или “Вниз” на клавиатуре.
Обращайте также внимание на размер и разрешение файла, иногда может попадаться уменьшенная копия основной картинки (thumbnail).
Chrome
FireFox
Шаг 5.
Теперь осталось сохранить файл.
Для Chrome/Opera вызовите контекстное меню на превью изображения и нажмите “Save”.
Для FireFox вызовите контекстное меню на выбранном файле из списка и нажмите “Сохранить изображение как”.
Chrome
FireFox
Итак, еще раз повторим:
1. Открываем нужную страницу в браузере
2.
Нажимаешь Ctrl + Shift + I
3. Переходим в Network (Сеть)
4. Обновляем страницу
5. Достаем любую картинку
Надеюсь урок был полезен, вы почерпнули для себя что-то новое и стали немного более продвинутым не только в 3D ;). Не забываем ставить лайки, если вам понравился урок 🙂
web, image, chrome, firefox, opera, download, access
Как сохранить фоновое изображение с веб-страницы
Я наткнулся на красивое изображение на веб-странице. Кажется, я не могу это скопировать. Похоже, это фоновое изображение. Как мне его сохранить?
Прейта Гой
Загрузить изображение с веб-страницы достаточно просто — все, что вам нужно, это программа веб-браузера, и в зависимости от того, какая из них используется, вы выбираете соответствующий вариант и сохраняете изображение в папку на своем компьютере. Если вы столкнулись с проблемами — да, даже в этом простом процессе могут быть некоторые препятствия — обратитесь за помощью, почему я не могу загрузить изображение с веб-страницы.
Рекламные ссылки
Однако могут встречаться случаи, когда в браузере не отображается опция « сохранить » при щелчке правой кнопкой мыши по изображению — это, друзья, совсем другая история!
А вот пример. Наведите на него курсор мыши и щелкните правой кнопкой мыши… ваш браузер предлагает вам прямой вариант сохранения изображения?
Использование изображений на веб-страницах
Изображение в основном используется на веб-страницах двумя способами:
- как отдельные объекты.Это делается с помощью тега HTML .
- в качестве фона других элементов страницы или, что чаще всего, веб-страницы в целом. Обычно разработчики используют каскадные таблицы стилей (CSS) для использования изображения в качестве фона, потому что это обеспечивает большую гибкость.
Теперь, сохранение копии фона веб-страницы или изображения, которое использовалось в качестве фона элемента, является более сложной проблемой. В зависимости от вашего веб-браузера параметры могут быть относительно простыми или действительно запутанными.
Теперь мы рассмотрим, как сохранить фон веб-страницы с помощью самых популярных веб-браузеров на базе Windows — Internet Explorer, Firefox, Google Chrome, Safari и Opera.
Сохранение фона веб-страницы через Internet Explorer — веб-браузер Windows по умолчанию
Internet Explorer — это веб-браузер по умолчанию в операционной системе Windows, который также является самым популярным из всех. Чтобы сохранить изображение, которое является фоном веб-страницы, вам просто нужно навести на него курсор мыши и выбрать опцию « Сохранить фон как… ».Просто и быстро! Internet Explorer также позволяет копировать фоновое изображение в буфер обмена с помощью параметра « Копировать фон ».
Сохранить фоновое изображение веб-страницы в Firefox
В Firefox вы не найдете прямой опции для сохранения фонового изображения. Вместо этого вам нужно сначала выбрать « Просмотр фонового изображения », который будет загружать ТОЛЬКО изображение в окне.
Теперь вы можете скопировать изображение на свой жесткий диск, щелкнув его правой кнопкой мыши и выбрав « Сохранить изображение как… ».
Google Chrome — сохранение фонового изображения
Это двухэтапный процесс для сохранения фонового изображения в Google Chrome, потому что браузер не предоставляет прямых параметров при щелчке правой кнопкой мыши по изображению. Сначала вам нужно выбрать « Проверить элемент » из контекстного меню, которое открывает небольшое окно с большим количеством информации, и вы можете быть ошеломлены, если вы не веб-разработчик… Я понимаю. Но, используя немного здравого смысла, вы получите желаемое изображение. Например, поскольку мы знаем, что графика является фоном, вам нужно найти строку background-image в разделе стилей — см. Ниже.При нажатии на активную ссылку изображение загружается в новую вкладку, и вы можете затем сохранить его обычным способом (щелкните правой кнопкой мыши и выберите « Сохранить изображение как… ».
Сохранить фон изображения веб-страницы в Safari и Opera
Как и в случае с Google Chrome, в Safari и Opera нет прямой опции для сохранения фона изображения веб-страницы. Единственный способ сделать это — просмотреть источник, найти URL-адрес изображения и загрузить его в отдельной вкладке.Очевидно, что для людей, не являющихся веб-разработчиками, это действительно сложная процедура. В любом случае, для пользователей Opera и Safari на платформе Windows я предлагаю использовать Internet Explorer (ваш браузер по умолчанию) для сохранения фонового изображения.
,
Более простой способ изменить фон изображения в Интернете
Я буду краток: вы можете заменить фон фотографии без необходимости глубоких навыков Photoshop. На самом деле, вам вообще не нужны навыки редактирования фотографий. Как это может быть?
«Эта фотография идеальна, за исключением фона, который …» ну, скажем так, «плохой». У вас когда-нибудь возникала такая мысль? Вы, наверное, даже пытались отредактировать изображение с испорченным фоном в фоторедакторе, но безрезультатно.
Конечно, не все из нас дизайнеры или, по крайней мере, разбираются в ИТ. Итак, у остального человечества есть способ изменить фоновую сцену любой фотографии — онлайн-инструмент PhotoScissors.
Шаг 1. Выберите фотографию, которую хотите отредактировать
Откройте PhotoScissors в Интернете, нажмите кнопку «Загрузить» и выберите файл изображения. Программа удалит фон с изображения и отобразит его в браузере:
Левая часть экрана предназначена для редактирования, а правая часть отображает окончательный результат.
Обычно вам придется возиться с различными инструментами выделения, но PhotoScissors автоматически удаляет фон из изображения за вас, и даже если нейронные сети допустили ошибку, вы можете исправить результат, используя красный и зеленый маркеры. Щелкните зеленый маркер на панели инструментов и отметьте объекты на переднем плане. Затем выберите инструмент «Красный маркер» и таким же образом отметьте фоновые объекты.
Все просто, правда? Зеленый — для объектов, которые должны остаться, красный — для фона, который нужно изменить.
Обратите внимание, что когда вы помечаете изображение зелеными и красными инструментами, предварительный просмотр с правой стороны отражает любые внесенные вами изменения. По умолчанию PhotoScissors применяет к изображению прозрачный фон.
Шаг 2: Смена фона
Теперь, чтобы заменить фон фотографии, переключитесь на вкладку Фон в правом меню.
На вкладке «Фон» выберите «Изображение» из раскрывающегося списка, затем нажмите кнопку «Выбрать изображение» и выберите изображение, которое вы хотите использовать в качестве нового фона.
Ницца! Этот фон выглядит намного лучше. И это не заняло много времени. Наконец, сохраните фотографию с замененным фоном, нажав кнопку «Сохранить» на панели инструментов.
Попробовать сейчас: загрузить изображение или Скачать PhotoScissors ,
Как сохранить картинку из Интернета в качестве обоев рабочего стола
Обновлено: 02.06.2020 компанией Computer Hope
Любое изображение в Интернете можно установить в качестве обоев рабочего стола компьютера, выполнив указанные ниже действия в зависимости от используемого Интернет-браузера.
Пользователи Chrome
В отличие от большинства других браузеров, Google Chrome не поддерживает возможность сохранения изображений в качестве обоев. Однако любое загруженное изображение можно установить в качестве обоев, следуя нашим инструкциям по использованию сохраненного изображения в качестве обоев.
Пользователи Mozilla Firefox
Пользователи Mozilla Firefox имеют возможность установить любое изображение, которое они просматривают в Интернете, в качестве обоев. Для этого щелкните правой кнопкой мыши изображение, которое вы хотите установить в качестве обоев, а затем выберите Установить как фон рабочего стола из раскрывающегося меню.
Firefox также может позиционировать картинку обоев (по центру, плитке, растягивать, заливать и подогнать) и устанавливать цвет фона.
пользователей Internet Explorer
Пользователи
Microsoft Internet Explorer могут установить любое изображение, которое они просматривают в Интернете, в качестве обоев.
Для этого щелкните правой кнопкой мыши изображение, которое вы хотите установить в качестве обоев, а затем выберите Установить как фон из раскрывающегося меню. Если вы уверены, что хотите установить изображение в качестве фона, нажмите Да .
Дополнительная информация
При установке изображения из Интернета в качестве фона, изображение сохраняется на жесткий диск. Ниже приведен пример места, где можно сохранить этот файл.
C: \ Documents and settings \ \ Application Data \ Microsoft \ Internet Explorer Имя файла = "Обои для рабочего стола Internet Explorer.bmp "
Заметка
Папка «Данные приложения» по умолчанию скрыта. Если вы не видите эту папку, вы должны включить отображение скрытых файлов. Для получения дополнительной информации см .: Как просмотреть скрытые файлы в Windows?
Пользователи Microsoft Edge Legacy
В отличие от большинства других браузеров, в Microsoft Edge Legacy нет возможности сохранять изображения в качестве обоев.
Однако любое загруженное изображение можно установить в качестве обоев, следуя нашим инструкциям по использованию сохраненного изображения в качестве обоев.
Пользователи Opera
Пользователи Opera имеют возможность щелкнуть изображение правой кнопкой мыши и выбрать Использовать изображение в качестве обоев в раскрывающемся меню. Однако этот параметр загружает только изображение, но не устанавливает его в качестве обоев. После загрузки изображения следуйте инструкциям по использованию сохраненного изображения из Интернета в качестве обоев.
Использование сохраненного Интернет-изображения в качестве обоев
Если браузер не поддерживает возможность сохранения изображения в качестве обоев, любое загруженное изображение все равно можно установить в качестве обоев, выполнив следующие действия.
- Загрузить изображение.
- После загрузки откройте папку загрузок и скопируйте изображение в более постоянное место, например в папку «Мои изображения» или в другую папку.
- Настройте фон Windows и наведите компьютер на загруженное изображение.
,
Полное руководство по поиску идеального фонового изображения для вашей целевой страницы
Вы решили, что потрясающее фоновое изображение для вашей целевой веб-страницы — это правильная идея. Большой! Но как и где найти то, что подходит для вашего бизнеса?
При выборе правильного фонового изображения необходимо учитывать несколько факторов.
В этой статье вы узнаете, что искать, где искать и как оптимизировать фоновые изображения.
Следите за каждым шагом, а также давайте отличные советы, которые вы не захотите игнорировать.
Отличное фоновое изображение — это мощный способ повысить ценность любого предложения.Что искать в фоновом изображении
Выбор идеального фонового изображения начинается с понимания того, что искать в отличном фоновом изображении. Конечно, вы можете выбрать любое старое изображение для своей целевой страницы, но доказано, что тщательно подобранное изображение дает гораздо лучшие результаты.
Прежде чем вы приступите к поиску идеального изображения, вам необходимо принять во внимание несколько соображений, чтобы убедиться, что вы выбрали наилучшее изображение. Вот некоторые из лучших практик по выбору идеального фонового изображения.
Убедитесь, что ваше изображение:Привлекает внимание
У вас есть всего несколько секунд , чтобы действительно привлечь внимание ваших посетителей. Ваши фотографии нужны для того, чтобы вызвать первоначальный интерес и заставить зрителя прочитать вашу рекламную копию.
Привлекательное изображение заставит людей оставаться на странице и может быть использовано для побуждения их к желаемому действию.
Ням! Это выглядит вкусно! Используйте изображения, перед которыми не может устоять ваша целевая аудитория.Только не делайте это слишком отвлекающим …
Вам нужно найти идеальный баланс между красивым и отвлекающим. Если изображение слишком смелое, оно может отвлечь внимание от вашего основного призыва к действию, что негативно скажется на коэффициенте конверсии.
Соответствует вашей личности
Рассмотрите цветовую схему, которую вы выбрали для своей целевой страницы. Образ будет конфликтовать? Или он будет дополнять общий дизайн?
Обратите внимание, что KISSmetrics использует общую синюю цветовую схему для своей целевой страницы. Лучше, чтобы фоновое изображение соответствовало вашей целевой странице и цветовой гамме бренда.
Таким образом, вы привлечете внимание к CTA и , чтобы повысить узнаваемость бренда 🙂
Контрасты с вашим текстом
Иногда фон изображения может конфликтовать с цветом шрифта и затруднять чтение того, что находится на странице. Ваш текст должен легко читаться на фоне фонового изображения.
Это фоновое изображение может отлично работать, если оно имеет затененную рамку вокруг текста или затемняет/размывает фоновое изображение для повышения читабельности копии.Дополняет ваш макет
Макет невероятно важен для повышения коэффициента конверсии. При правильном размещении ваше изображение привлечет внимание к определенным аспектам вашего текста.
Используйте фоновое изображение, которое дополняет макет и подчеркивает CTA. Не центрируйте форму в фокусе изображения. Чего вы хотите избежать, так это того, чтобы ваше изображение отвлекало внимание от вашего основного призыва к действию или формы регистрации.
Передает сообщение
Не выбирайте изображение, которое привлекает больше внимания, чем основная цель страницы.
Вместо этого выберите фоновое изображение, которое дополнит или даже поможет объяснить ваш бизнес, не отвлекая от основного призыва к действию. Используйте свое фоновое изображение, чтобы усилить общее сообщение, а не как попытку сообщить все сразу!
Эта страница отлично показывает посетителям, о чем продукт, не отвлекая при этом внимание.Использует реальных людей
В зависимости от характера вашего продукта или бизнеса, включение людей (или практически всего, у кого есть лицо) на ваших изображениях может оказать сильное влияние.
Существует несколько отчетов и тестов, которые могут подтвердить, что фотографии людей положительно влияют на первое впечатление о достоверности посетителей.
Новое исследование утверждает, что лица не всегда привлекают столько внимания, как мы думаем…
Пример: веб-сайт поиска отелей, на котором изображена невероятно счастливая пара с четко видимыми лицами.
Тем не менее, пользователей, похоже, волнует только окно поиска и призыв к действию в центре. Хотя это отличное исследование, я случайно заметил одну ключевую черту на большинстве изображений: лица смотрят на что-то!
Как люди, мы склонны смотреть на лица (они могут быть очень сильными и убедительными), но большее влияние на нас оказывает направление, в котором смотрят люди.
Думайте об этом как о форме социального доказательства: человек на изображении говорит глазами: «Эй! этот продукт великолепен!»
Используйте этот тип подсказки направления в своих интересах при выборе фонового изображения и направьте внимание посетителей на вашу основную цель.
Обратите внимание, в каком направлении смотрят ребята? БУМ! Введите ваш адрес электронной почты. Тщательно отобранные изображения реальных человек добавляют на страницу человеческий элемент и могут помочь повысить уровень доверия посетителей.
Один совет при использовании изображений людей; избегайте использования стоковых изображений и отдавайте предпочтение неоплачиваемым изображениям или изображениям, сделанным самостоятельно, это выглядит более подлинным.
Нет изображения? Без проблем.
Возможно, он вам не нужен. Используйте силу убедительного текста, чтобы донести свое сообщение.
Вы можете создать поразительные эффекты, используя простую типографику с успокаивающим однотонным фоном.На самом деле мне нравится этот маршрут, потому что он заставляет вас прилагать дополнительные усилия для написания вашего текста.
Где найти изображения
В Интернете есть несколько мест, где вы можете найти потенциальные изображения для своей целевой страницы. Как и в случае с большинством веб-сайтов или бизнес-вариантов, существуют платные и бесплатные версии.
У каждого есть свои плюсы и минусы, но, в конечном счете, преимущества платных изображений (по крайней мере, с точки зрения бизнеса) намного перевешивают недостатки.
Стоит… Платить?!
Давайте посмотрим на доступные платные варианты, а именно потому, что наши клиенты добились большого успеха со следующими услугами. Платный вариант имеет явное преимущество в скорости и простоте:
PROS
- Экономьте время . Изображения из многих платных сервисов часто делятся на категории и теги, что позволяет очень быстро фильтровать выбранную область.
- Правильный размер . Большинство платных опций предлагают изображения разных размеров. В большинстве случаев вам действительно нужна только версия среднего размера размером примерно 1600 × 1200 пикселей. Не нужно пытаться оптимизировать, обрезать или изменять размер изображения самостоятельно.
- Качество и разрешение — Вообще говоря, платные сервисы будут иметь большее количество изображений более высокого качества в разных размерах, что значительно упростит дизайн. Разрешение будет очень высоким, поэтому вам не нужно беспокоиться о размытых, пиксельных изображениях.
- Тестовые изображения . Большинство этих сервисов позволяют загрузить уменьшенную фирменную версию изображения… чтобы проверить, будет ли хорошо выглядеть полноразмерное изображение.
- Права на использование — Что делать, если вы случайно неправильно прочитали правила использования или если однажды вас неожиданно оштрафуют? Неа. Вы заплатили за это… без суеты, без суеты.
- Более интеллектуальный поиск и просмотр . Излишне говорить, что поставщики платных изображений стремятся предложить лучший сервис, чем их бесплатные аналоги. Большинство из этих торговых площадок предлагают возможность поиска похожих снимков, как только вы найдете те, которые вам нравятся. Если вы цените свое время, вы оцените это по сравнению с бесплатным подходом.
МИНУСЫ
- Не эксклюзив – Многие стоковые изображения уже были замечены в Интернете и разыграны. Люди могут сказать , если вы используете старые стоковые изображения.
- Предсказуемость . Иногда стоковые фотографии выглядят так же, как стоковые.
- Это стоит денег — Вы должны заплатить за это :), но если вы действительно занимаетесь бизнесом, это не должно быть проблемой.
_У кого хорошее стоковое фото?
_
Shutterstock
Библиотека Shutterstock, содержащая более 35 миллионов изображений, векторов и видеороликов, является популярным вариантом. Для изображений по требованию ($19за одного, 49 долларов за пять — или подписка за 249 долларов в месяц) Shutterstock предлагает разумные цены и достаточную гибкость для более крупных операций.
Большое стоковое фото
По цене $12,99 за xl/векторные изображения Bigstock предлагает еще один выбор изображений для целевых страниц. Приятной особенностью этого являются дополнительные категории, такие как типографика.
iStockphoto
Еще один сайт с миллионами изображений. Оплата варьируется в зависимости от того, платите ли вы по мере использования или используете экономичные подписки (как и на многих других сайтах).
У этого сайта сильное сообщество, так как для фотографий присутствует множество оценок и отзывов.
Fotolia
На нашем последнем сайте Fotolia.com доступно чуть более 16 миллионов фотографий. Сравните низкие цены вместе с тегами, категориями и другими преимуществами, чтобы сделать это еще одной достойной остановкой при поиске бесплатных стоковых фотографий.
Getty Images
Библиотека Getty содержит миллионы стоковых изображений и иллюстраций, а также тысячи часов видео. Недешевый вариант, так как цена может зависеть от ряда переменных, таких как время, в течение которого вы собираетесь использовать изображение, однако выбор велик, а пользовательский интерфейс очень прост в навигации.
Свобода от комиссий
Не так уж без ума от траты денег на потрясающее фоновое изображение? Я не виню вас, мы знаем, каково это — держать его в тонусе.
Бесплатное получение фона вашей целевой страницы не означает, что вы дешевы — вы просто человек, который делает все сам.
Ну, по крайней мере, вы сами находите изображения:
PROS
- Бесплатно — Все изображения бесплатны и, как правило, остаются такими, если вы их правильно выбрали.
- Расширение выбора . Выбор бесплатных изображений по-прежнему не так велик, как у платного аналога, однако становится все больше сайтов, предлагающих бесплатные изображения, что значительно увеличивает ваш выбор.
ПРОТИВ
- Требует времени – Нет возможности сортировать изображения. Приготовьтесь потратить массу времени на сортировку изображений, которые не так важны для вашего видения, как вам хотелось бы.
- Внесение корректировок — Для того, чтобы фоновое изображение было «идеальным по пикселям», вам, возможно, придется выполнить дополнительную обрезку или масштабирование изображения.
- Сложное лицензирование — Приходится иметь дело с различными типами лицензирования и атрибуции. Бесплатно не бывает без затрат. Взгляните на сложные лицензии Creative Commons.
Бесплатно не бывает без затрат. Взгляните на сложные лицензии Creative Commons.Bing и Google Image Search
Как вы понимаете, этот вариант требует гораздо больше работы. Это, безусловно, потребует больше времени и охоты за идеальной картинкой.
Для начала попробуйте поискать в Bing или Google Images изображения «<Ваша тема/ТЕМА> обои».
Обе поисковые системы имеют опции для фильтрации по размеру (Вы хотите X-Large), цвету (в соответствии с вашей схемой) и типу изображения.
Creative Commons Search
Хотя он немного менее интуитивно понятен, чем Bing или Google Image Search, он по-прежнему является золотой жилой библиотеки. Этот сайт позволит вам отфильтровать результаты поиска, чтобы включить только результаты с определенных сайтов. Если вам не нравится пользовательский интерфейс на этом сайте, вы всегда можете просто перейти на исходный сайт, указанный на их главной странице.
Flickr
Я заметил сильную тенденцию многих компаний искать изображения на Flickr.
Это (по моему скромному мнению), возможно, один из лучших вариантов для поиска изображений бесплатного качества. Большая часть контента — это фотографии, сделанные реальными людьми — здесь нет стоковых фотографий.
Хорошие места для начала здесь и здесь.
Еще крутые бесплатные варианты
Есть также несколько действительно хороших предложений от пары пользователей на Quora (где вы можете найти меня, отвечающую на интересные вопросы):
- Pexels
- Маленькие визуалы
- Убрать брызги
- Смерть для Stock Photo
- Новый старый запас
- Суперизвестный
- Пикжумбо
- Библиотека шаблонов
- Гратисография
- Гетрефе
- IMCreator
Сделай сам
Я уверен, что некоторые из вас являются начинающими фотографами. Возможно, в вашей библиотеке уже есть идеальное изображение. Возможно, стоит заглянуть, и преимущество в том, что это будет более личным для вас.
С бесплатными изображениями вы получаете то, за что платите. Можно найти странный драгоценный камень, но, вероятно, вы будете искать некоторое время. При использовании изображений из бесплатных источников убедитесь, что у вас есть надлежащая аккредитация, чтобы предотвратить негативную реакцию в будущем.
Эксклюзив для клиентов KickoffLabs
Если вы еще не нашли подходящее фоновое изображение для своей кампании. Не беспокойтесь, мы обеспечим вас…
Недавно мы добавили более 150 БЕСПЛАТНЫХ фоновых изображений, которые вы можете использовать на ЛЮБОЙ целевой странице. Есть большой выбор людей, мест, размытых изображений и удивительных текстур дерева на выбор. Не возитесь с платными или нужны бесплатные параметры поиска!
Войдите сейчас, чтобы начать использовать бонусные изображения или загрузите свои собственные.
Как оптимизировать изображения
Вы выполнили описанные выше шаги и выбрали идеальное фоновое изображение для своего веб-сайта.
Оптимизация ваших изображений для максимального коэффициента конверсии на этом не заканчивается. Вот что нужно сделать после того, как у вас будет готово идеальное изображение:
Уменьшить размер изображения
Знаете ли вы, что 47% потребителей ожидают, что веб-страница загрузится за 2 секунды или меньше? Очевидно, что время загрузки страницы оказывает огромное влияние на коэффициент конверсии вашей страницы.
Тем более, что фоновые изображения, как правило, намного больше по размеру файла, это может значительно увеличить время, необходимое для загрузки вашей страницы.
Используйте инструмент оптимизации изображений, такой как Kraken.io или Yahoo! Smushit, чтобы уменьшить размер файла.
Во многих случаях мне удавалось легко уменьшить размер файлов более чем на 75%. Сделайте своим посетителям одолжение и уменьшите изображения, прежде чем загружать их на свою страницу.
Кстати, вы всегда должны оптимизировать изображения для небольшого размера файла, независимо от того, для фонового изображения это или нет.
Назовите и пометьте свое изображение
Ваше текущее изображение, вероятно, имеет общее имя, например «person_standing_facing_front_1600x120.jpg» или что-то в этом роде. Если вы хотите получить какие-либо SEO-сопровождения из недавно выбранного фонового изображения, вам нужно изменить название изображения и теги alt в коде.
Добавьте описательный заголовок с ключевыми словами, чтобы поисковые системы могли сканировать ваше имя файла изображения.A/B тестирование
Если быть до конца честными, существует ряд различных вариантов и соображений, которые необходимо учитывать для обеспечения успеха ваших целевых страниц. Потребуется некоторое время и немного проб и ошибок, чтобы выяснить, какая комбинация лучше всего резонирует с вашей аудиторией.
Лучший способ измерить и улучшить коэффициент конверсии — провести A/B-тестирование. Создайте несколько разных страниц и посмотрите, какая из них дает наилучшие результаты, настройте менее успешные страницы, чтобы получить наилучший общий результат.
Что нужно проверить?
Вот несколько советов для начала:
A/B-тест #1
Если вы хотите повысить доверие к странице, попробуйте поэкспериментировать с человеческими лицами на фоновых изображениях.
Посмотрите, как ребята из Basecamp (ранее 37Signals) увеличили количество регистраций на 102,5%, используя большое фоновое изображение человека.
A/B-тест #2
Если цель страницы — привлечь внимание людей к основному призыву к действию, я бы поэкспериментировал с различными фоновыми изображениями, используя подсказки направления, чтобы сосредоточить внимание на основной цели страницы. Будь то заголовок, призыв к действию или форма регистрации.
Как вы можете получить больше информации о том, как ваши изображения могут влиять на взаимодействие с пользователем?
Использовать тепловые карты и пользовательские записи в качестве дополнительных данных для A/B-тестирования:
- Inspectlet
- Ококвант
- ClickTale
- Сумасшедшее Яйцо
В заключение
Вы уже на пути к блаженству оптимизации коэффициента конверсии! Но если ваш текст, CTA, форма или макет страницы отсутствуют, отличное фоновое изображение НЕ спасет вас от провала CRO.
Это всего лишь одна часть головоломки оптимизации коэффициента конверсии.
Отличное фоновое изображение в сочетании с хорошим дизайном целевой страницы — это лишь один из основных шагов на пути к успеху ваших целевых страниц, веб-сайтов и маркетинговых кампаний.
Со всем этим… как вы ищете лучшие изображения для своих сайтов?
Что еще вы бы проверили со своими фоновыми изображениями?
Мы ничего не пропустили? Дайте нам знать!
– Джош, соучредитель KickoffLabs
P.S. Теперь у вас есть идеальное, высокооптимизированное фоновое изображение 🙂 Когда вы будете готовы увидеть большее увеличение лидогенерации и коэффициента конверсии, попробуйте KickoffLabs. Мы даем вам инструменты «сделай сам» (целевые страницы, виджеты для захвата электронной почты, формы подписки и многое другое), чтобы вы перестали создавать целевые страницы и начали создавать более эффективные кампании.
Протестируйте бесплатную учетную запись сегодня!{.btn.btn-warning.btn-lg.btn-block}
Фоновые изображения | Документы Asciidoctor
Вы можете добавить фоновое изображение ко всем страницам содержимого в документе, установив атрибут документа page-background-image .
Вы также можете установить фоновые изображения для лицевых и оборотных страниц отдельно, используя атрибуты документа page-background-image-recto и page-background-image-verso .
Вы можете установить (или переопределить) фоновое изображение, применяемое к титульному листу, используя атрибут документа title-page-background-image .
На этой странице объясняется, как используются эти атрибуты. Все атрибуты документа, представленные на этой странице, должны быть определены в заголовке документа.
В качестве альтернативы использованию атрибутов документа вы можете определить эти фоновые изображения в своей теме.
Атрибут page-background-image
Фоновые изображения можно применять ко всем страницам содержимого с помощью атрибута документа page-background-image .
Страница содержимого определяется как каждая страница документа, за исключением обложки и импортированных страниц.
Список страниц содержимого включает титульную страницу, а также неразвернутые страницы допечатного документа.
Атрибут page-background-image принимает встроенный макрос изображения.
Целью макроса изображения может быть абсолютный путь или путь относительно imagesdir.
= Название документа :page-background-image: image:bg.png[]
Вы также можете назначить фоновое изображение страницы для каждой стороны или макета страницы.
Когда вы установите page-background-image , указанное изображение будет применено и к титульному листу.
Вы можете указать другое изображение для титульного листа с помощью title-page-background-image атрибут документа.
= Название документа :doctype: книга :page-background-image: изображение:bg.png[] :title-page-background-image: image:title-bg.
png[] Кроме того, вы можете отключить фоновое изображение на титульном листе, присвоив значение none .
= Название документа :doctype: книга :page-background-image: изображение:bg.png[] :title-page-background-image: none
По умолчанию фоновые изображения страниц автоматически масштабируются, чтобы соответствовать границам страницы (т. е. fit=contain ) и по центру (т. е. position=center ).
Чтобы изменить это поведение, вы можете установить атрибуты подгонки, размера и положения в макросе изображения.
Атрибут подгонки
Фоновые изображения, включая изображения передней и задней обложки, могут быть изменены по размеру относительно страницы с помощью атрибута подгонки в макросе изображения.
Атрибут fit работает аналогично свойству object-fit в CSS.
Его значение должно быть указано как одно ключевое слово, выбранное из таблицы ниже.
Начальный размер изображения определяется явной шириной, если она указана, или неявной шириной.
Высота всегда получается из ширины при соблюдении неявного соотношения сторон изображения.
Доступное пространство — холст — для фонового изображения — это страница.
Если атрибут fit не указан, по умолчанию содержит .
Значение , содержащее , автоматически масштабирует изображение, чтобы оно соответствовало границам страницы.
| Значение | Назначение |
|---|---|
содержат | Изображение масштабируется вверх или вниз с сохранением соотношения сторон, чтобы оно соответствовало доступному пространству. (по умолчанию) |
крышка | Изображение масштабируется вверх или вниз с сохранением соотношения сторон, поэтому изображение полностью закрывает доступное пространство, даже если это означает, что изображение должно быть обрезано в одном направлении. |
в уменьшенном масштабе | Изображение уменьшено с сохранением соотношения сторон, чтобы оно соответствовало доступному пространству. Если изображение уже подходит, оно не масштабируется. |
заполнение | Изображение масштабируется в соответствии с доступным пространством, даже если для этого требуется изменить соотношение сторон изображения.
Значение |
нет | Изображение не масштабируется. |
Если вы хотите масштабировать изображение, используя один из атрибутов размера ( pdfwidth , scaledwidth , ширина ) в макросе изображения необходимо установить для атрибута fit значение none (т. е. fit=none ).
= Название документа :page-background-image: image:bg.
png[fit=none,pdfwidth=50%] (1) | 1 | fit должно быть присвоено значение none при использовании pdfwidth или любого другого атрибута размера. |
9Атрибут 0434 fit часто сочетается с атрибутом position , описанным далее, для управления размещением изображения на холсте.
атрибут позиции
В дополнение к масштабированию фоновые изображения для титульных страниц, страниц содержимого и титульной страницы поддерживают позиционирование с использованием атрибута позиции в макросе изображения.
Атрибут position принимает синтаксис, аналогичный свойству background-position в CSS, за исключением того, что поддерживаются только ключевые слова position.
Положение состоит из двух значений: положения по вертикали и положения по горизонтали (например, верхний центр ).
Если указано только одно значение (например, top ), предполагается, что другое значение равно center .
Если атрибут position не указан, его значение по умолчанию равно center center .
Значение center center центрирует изображение по вертикали и горизонтали на странице.
В следующей таблице перечислены ключевые слова вертикального и горизонтального позиционирования, поддерживаемые атрибутом position .
Вы можете использовать любую комбинацию этих ключевых слов для позиционирования изображения.
| Вертикальные положения | Горизонтальные позиции |
|---|---|
верх | слева |
Вот пример размещения фонового изображения вверху по центру страницы:
= Название документа :page-background-image: image:bg.
png[position=top] Вот как переместить его в правый нижний угол:
= Название документа :page-background-image: image:bg.png[fit=none,pdfwidth=50%,position=нижний правый]
Если размер изображения соответствует высоте или ширине страницы, ключевое слово позиционирования для этой оси не имеет эффект.
Фоновые изображения лицевой и оборотной сторон
Если фоновое изображение назначено страницам лицевой стороны (правосторонние, нечетные страницы) или оборотным страницам (левосторонние, четные страницы), фон будет использоваться только для этого сторона.
= Название документа :page-background-image-recto: image:bg.png[fit=none,pdfwidth=20%,position=внизу справа] :page-background-image-verso: image:bg.png[fit=none,pdfwidth=20%,position=нижний левый]
Если для стороны не указано фоновое изображение, конвертер будет использовать фоновое изображение страницы по умолчанию ( page-background-image ), если оно указано.
Чтобы отключить фоновое изображение для стороны, присвойте значение none .
Для макета страницы
Вы можете настроить любое фоновое изображение для выбора для макета страницы, включив ссылку на атрибут escaped {page-layout} в путь к изображению.
Ссылка должна быть экранирована, чтобы она не расширялась до тех пор, пока конвертер не разрешит изображение для данного макета страницы.
= Название документа
:page-background-image: image:bg-\{page-layout}.png[] Изображение разрешается при первом использовании данного макета страницы в документе. Для использования этого метода необходимо, чтобы значение макета страницы было включено в имя файла изображения (например, footer-bg-landscape.png).
Как эффективно использовать фоновые изображения в электронных письмах
Правильно подобранное фоновое изображение может преобразить дизайн вашего информационного бюллетеня и мгновенно придать ему современный и привлекательный вид «обложки Vogue».
Тем не менее, многие маркетологи избегают использования фонового изображения в электронных письмах, опасаясь, что оно будет больше похоже на страницу MySpace 2007 года, чем на страницу из журнала.
Хотя фоновые изображения электронной почты могут быть сложными, они также очень недооценены!
Присоединяйтесь к нам, и мы покажем вам, как правильно делать фоны для информационных бюллетеней. Посмотрите примеры простых, но потрясающих дизайнов электронных писем, в которых используется фоновое изображение, и изучите передовые методы работы.
Фоновые изображения в электронных письмах размещаются в элементе «фон» в HTML-коде электронного письма. Довольно очевидно, не так ли?
Что делает фоны электронной почты такими захватывающими, так это то, что они могут полностью изменить дизайн вашей электронной почты .
Поскольку изображение находится в фоновом режиме, вы можете создавать контент, накладывая новые блоки сверху (например, текст, видео, кнопки и т.
д.).
Инструменты электронного маркетинга, такие как MailerLite, могут автоматически добавлять фоновые изображения. Все, что вам нужно сделать, это загрузить фоновое изображение в формате JPG, PNG или GIF, которое вы хотите использовать, без необходимости кодирования!
(Psst… для тех из вас, кто предпочитает программировать самостоятельно, мы вкратце поговорим о кодировании фонового изображения позже).
Зачем мне использовать фон новостной рассылки?
Часто электронные письма состоят из одного большого изображения. Это может быть проблематично. Если это изображение не загружается в почтовом клиенте, ваша рассылка будет пустой. Вы можете избежать этого, используя вместо этого фоновое изображение.
Фоновые изображения могут повысить конверсию, а также:
Придайте своим письмам изысканный вид
Превратите письмо в красивый небольшой веб-сайт
Выделите свой информационный бюллетень среди конкурентов
Побудите подписчиков продолжать читать
Выберите фон: макет или элемент идет ниже).
Эмпирическое правило заключается в том, чтобы выбрать изображение, которое дополняет другие элементы дизайна и лучше всего соответствует концепции дизайна вашего информационного бюллетеня.В MailerLite можно добавить фоновое изображение для всего макета и фоновые изображения для отдельных элементов, например текстовых блоков.
Вы можете увидеть разницу ниже. Comcast (слева) использует фоновое изображение, которое охватывает весь макет электронной почты, а фотограф Kanacia James (справа) использует текстовый блок с фоновым изображением и текстом поверх него.
Изображение предоставлено: Comcast (слева), Kanacia James (справа)Что бы вы ни делали, не делайте информационный бюллетень одним большим файлом изображения.
В приведенном ниже примере текст наложен поверх фонового изображения, что делает дизайн похожим на иллюстрированную страницу книги. Даже без предыстории люди поймут, о чем рассылка.
Изображение предоставлено: План сбережений Орегонского колледжа Трудно гарантировать, что каждый почтовый клиент будет отображать ваши изображения.
Если они этого не сделают, вся электронная почта не будет отображаться, и ваше сообщение исчезнет. Если это просто фоновое изображение электронной почты, которое не загружается, любые текстовые элементы, которые вы наложили сверху, все равно будут видны.
Кроме того, большие электронные письма с большим количеством изображений с большей вероятностью будут помечены как спам почтовыми клиентами ваших подписчиков. Такие инструменты, как MailerCheck, позволяют вам проверить доставляемость электронной почты и предсказать размещение в почтовом ящике перед отправкой.
Рекомендация по статье
Передовой опыт создания пуленепробиваемых фоновых изображений
Фоновые изображения добавят свежести в ваш информационный бюллетень. Но прежде чем вы потянетесь за валиком, вам нужно убедиться, что ваши стены загрунтованы. Вот четыре рекомендации, которые следует учитывать при добавлении фона новостной рассылки.
1. Знайте, какие почтовые клиенты поддерживают фон
Как и в случае с изображениями в целом, некоторые почтовые клиенты делают технически невозможным их правильное отображение (из-за проблем со свойствами CSS).
Когда мы запустили фоновую проверку электронной почты Litmus, мы увидели следующие результаты:
Настольные клиенты
Outlook 2016, 2019 и Outlook Office 365 (все Win 10) не отображают общее фоновое изображение, но отображают фон в блоках изображений
Почта Windows 10 не показывает фоновое изображение и фон в блоках изображений
Все другие настольные клиенты отображают изображения правильно (включая Apple Mail и Outlook для Mac)
Мобильные клиенты
Веб-клиенты
Только Freenet.de и T-online.de не показывают общего фоновое изображение, но показывает фон в блоках изображений
Во всех других клиентах электронные письма отображаются отлично (включая AOL Mail и Yahoo! Mail). Если вы не ориентируетесь на немецкий рынок, вам не о чем беспокоиться.
Вердикт: Проверьте отчеты по электронной почте, чтобы узнать, какими клиентами пользуются ваши подписчики.
Есть лишь несколько почтовых клиентов, которые не могут показывать изображения, у большинства вообще нет проблем.
2. Размер фонового изображения
При добавлении фонового изображения важно учитывать размер файла. Чем больше ваше электронное письмо, тем больше данных оно получает от читателя и тем выше вероятность того, что ваше электронное письмо не будет полностью отображено.
Мы рекомендуем хранить каждое изображение с максимальным размером файла 1 МБ.
Что касается ширины, мы рекомендуем 640 пикселей для элементов и 1200 пикселей для полной ширины.
Так как размеры экранов сильно различаются, трудно гарантировать правильное отображение на всех экранах, поэтому лучше выбрать дизайн, который хорошо выглядит и в мозаичном виде. Вы можете использовать встроенный редактор изображений для изменения размера изображений в MailerLite.
3. Подготовьте резервную копию (текст ALT и цвет)
Обязательно используйте цвет фона и вставьте текст ALT в качестве резервной копии на случай, если фоновое изображение вашего электронного письма не отображается в папке «Входящие».
Цвет фона может быть любым, подходящим для вашего дизайна (если сомневаетесь, выберите нейтральный цвет, например светло-серый).
Совет: Узнайте больше о том, как использовать цвета в маркетинговых электронных письмах .
Текст ALT представляет собой описательное предложение, например «фоновое изображение облаков». Он отображается вместо изображения, которое не было загружено или не прочитано программным обеспечением для диктовки, и помогает людям понять, о чем изображение, когда они его не видят.
4. Выделите текст и призыв к действию
Ваш текст и призыв к действию должны привлекать внимание, а не фон. Избегайте заглушать ваше сообщение шаблоном занятости.
В MailerLite вы можете добавить цвет фона к отдельным блокам содержимого (например, к текстовым блокам и кнопкам), чтобы важная информация выделялась на фоне остальных изображений.
Примеры хорошо сделанных фонов для информационных бюллетеней
Суть фоновых изображений заключается в том, чтобы использовать их так, чтобы они подчеркивали другие элементы содержимого электронной почты и делали информационный бюллетень еще лучше.
На практике это часто означает, что ваш фон простой, но с изюминкой, такой как узор, градиент или анимированный GIF. Если, конечно, вы не хотите идти ва-банк!
Ниже мы покажем вам различные способы использования фона электронной почты, чтобы придать вашему дизайну уникальный вид.
Вы видели наши готовые шаблоны?
Look 1: Transformative
Это приглашение на вебинар от Mintel прекрасно показывает, как фоновое изображение может полностью изменить внешний вид вашего информационного бюллетеня. Представьте себе такое же приглашение без фона. Как-то скучно, да?
От: Минтел
Тема: [ВЕБИНАР] Откройте для себя глобальные тенденции в области красоты и личной гигиены 2030 года
Кредит изображения: МинтелЕще один пример — фотоколлектив и торговая площадка Moment. К текстовому блоку добавили фон, что тоже возможно в MailerLite.
При использовании изображения в качестве фона обязательно сделайте шрифт контрастным и достаточно крупным, чтобы текст легко читался.
Момент сократил количество слов и сделал шрифт огромным.
От: Момент
Тема: Советы по фотосъемке мирных протестов
Кредит изображения: МоментОбраз 2: Сезонный стиль
Клиент MailerLite Лиза Прескотт переключает свои информационные бюллетени в зависимости от сезона. Для этого она использовала запасной серый цвет фона и загрузила фоновую картину с соснами. Пастельно-розовый цвет передает тепло и идеально сочетается с ее брендом.
От: Лиза Прескотт
Тема: Готовы ли вы смотреть SLAMMIN на ваших ПРАЗДНИЧНЫХ СОБЫТИЯХ?
Изображение предоставлено: Лиза Прескотт (разработано в MailerLite)То же самое можно увидеть в этом информационном бюллетене от Clean Creations. Этот информационный бюллетень, посвященный Дню матери, излучает весеннее настроение благодаря цветочным изображениям, выбранным в качестве фона для бюллетеня.
От: Чистые творения
Тема: Нужны идеи подарков на День Матери?!
Изображение предоставлено: Clean Creations (разработано в MailerLite)Look 3: Audacious
Jetsetter Vintage делает большое и смелое заявление в этом информационном бюллетене.
Художественный фон и изображение заголовка GIF удивительно хорошо сочетаются друг с другом, поскольку они имеют одну и ту же цветовую палитру.
От: Jetsetter Vintage
Тема: Винтажная графика, которую вы никогда не видели
Изображение предоставлено: Jetsetter Vintage (разработано в MailerLite)Образ 4: Элегантный
Художественный магазин и студия дизайна 83 апельсина выбрали узор плитки, который мгновенно делает информационный бюллетень похожим на страницу из журнала по декорированию. Фон делает информационный бюллетень более элегантным и интересным.
От: 83 апельсина
Тема: Успевайте дарить подарки 🌲 + Новинки от нашей студии дизайна айдентики
Изображение предоставлено: 83 апельсина (создано в MailerLite)Вы хотите создавать информационные бюллетени, как показано выше? Наше исчерпывающее руководство по дизайну информационных бюллетеней научит вас необходимым навыкам.
Как оформлять электронные письма, которые будут читать люди
Образ 5: Цветовые блоки
Автор романов этого информационного бюллетеня Ларк Эйвери показывает вам, как использовать цветовые блоки в дизайне вашего информационного бюллетеня.
3 разных цвета делают простой текстовый информационный бюллетень более интересным с эстетической точки зрения.
От: Ларк Эйвери
Тема: Рекомендуем к прочтению! Жаворонки и конкурс
Изображение предоставлено: Lark Avery (разработано в MailerLite)Внешний вид 6: Анимированные GIF-файлы
Если ваш дизайн в основном белый или другого нейтрального цвета, анимированный GIF-файл в вашем электронном письме может добавить волнения.
Наш клиент See Mom Click использовал анимированный GIF-файл с фейерверком в качестве фона электронной почты. Поскольку фейерверки приходят и уходят, нейтральный макет кажется более живым.
От: См. Мама Нажмите
Тема: 11 предложений Черной пятницы, чтобы начать праздничные покупки 🛍️
Изображение предоставлено: See Mom Click (разработано в MailerLite)Look 7: Gradient
Один взгляд, и вы уже знаете, о каком социальном канале идет речь в этой рассылке.
Ты прав, Instagram! Пользователь MailerLite, Zteep Tea, использовал градиентный фон с той же цветовой схемой. Цвета, которые постепенно меняются, удерживают внимание читателя при прокрутке вниз.
От: Zteep
Тема: IG LIVE Tonight: как приготовить чай латте
Изображение предоставлено: Zteep Tea (разработано в MailerLite)Другой клиент MailerLite, DGTIL Communications, использует более мягкий градиент для фона своего информационного бюллетеня. Выбранный ими цвет хорошо сочетается с остальным содержимым информационного бюллетеня, связывая все воедино и придавая законченный вид.
От: DGTIL Communications
Тема: Снимок DGITL: июнь 2020 г.
Изображение предоставлено: DGTIL Communications (разработано в MailerLite)Внешний вид 8: Текстура
Это электронное письмо от автора Helena Hunting мгновенно вызывает теплые летние ощущения благодаря выбранному ею фоновому изображению.
Светлые половицы создают атмосферу уютного пляжного домика. Идеально подходит для летнего романа.
От: Хелена Хантинг
Тема: Готовы к летней интрижке? Совершенно новые БЕСПЛАТНЫЕ летние истории!
Изображение предоставлено: Хелена Хантинг (разработано в MailerLite)Look 9: Spacey
Если в вашем информационном бюллетене рекламируются книги об инопланетянах, вы хотите получить немного космический дизайн фона.
Автор Рэвин Уайлд переносит своих читателей в другое измерение, используя фоновое изображение ниже. То, что обычно было бы обычным электронным письмом, теперь стало намного более уникальным.
От: Рэвин Уайлд
Тема: БЕСПЛАТНАЯ книга за этот месяц! 👽 📚
Изображение предоставлено: Рэвин Уайлд (разработано в MailerLite)Добавление фоновых изображений в информационный бюллетень по электронной почте в MailerLite
Самый простой способ добавить фон к электронной почте — использовать редактор перетаскивания .
Технически подкованные дизайнеры могут предпочесть использовать HTML для создания фона информационного бюллетеня.
Добавление фона электронной почты с помощью редактора перетаскивания
На боковой панели выберите Настройки шаблона и выберите Фон кружок дизайна под Фон и многое другое .
Здесь вы можете добавить фоновое изображение, а также резервный цвет.
Добавление фона для электронной почты с помощью HTML
Если вы используете загрузку шаблона электронной почты в формате HTML, вы несете ответственность за кодирование фонового изображения. Это можно сделать разными способами, например, используя атрибуты фона таблицы, встроенные стили CSS или встроенный CSS.
Если вы являетесь клиентом MailerLite, вы можете отправить пользовательских электронных письма в формате HTML , загрузив zip-файл, импортировав через URL-адрес или напрямую вставив код. С помощью автоматического встроенного редактора CSS вы можете улучшить код.
Фон информационного бюллетеня можно просмотреть на компьютере и мобильном устройстве.
Поскольку большинство клиентов MailerLite используют наш редактор перетаскивания для добавления фоновых изображений, мы не будем вдаваться в подробности самой HTML-части. Тем не менее, это HTML-руководство по электронной почте для фоновых изображений , если вам интересно.
Бесплатные ресурсы изображений для фона электронной почты
Если вы не являетесь графическим дизайнером, у вас может не быть каталога фоновых изображений для новостной рассылки, а использование изображений, найденных в Интернете, может поставить вас в тупик, если вы этого не сделаете. t иметь правильные лицензии.
К счастью, существует множество бесплатных фоновых ресурсов электронной почты с их собственными лицензиями, которые позволяют вам использовать их изображения как в личных, так и в коммерческих целях, например:
Давайте подведем итоги!
Шаблоны электронных писем с фоновым изображением могут сделать вашу маркетинговую кампанию по электронной почте более привлекательной, уникальной и мгновенно придать ей другой вид.
Убедитесь, что фон электронной почты дополняет, а не заменяет другие элементы информационного бюллетеня. Отличный фон подчеркивает содержимое электронной почты и призыв к действию, а не отвлекает их внимание.
Когда вы добавляете фоновое изображение, спросите себя:
Дополняет ли фоновое изображение другие элементы дизайна моего информационного бюллетеня?
Будет ли выделяться текст и призыв к действию?
Будут ли платформы электронной почты подписчиков поддерживать фоновые изображения?
Оптимизирован ли размер изображения файла?
Отвечает ли фоновое изображение?
Я добавил текст ALT в качестве резервной копии?
Шрифт крупный и контрастирует с изображением?
Помните об этих вопросах, когда будете добавлять фоновое изображение в свою электронную почту, и вы создадите информационный бюллетень, который будет всплывать!
Пробовали ли вы использовать фон информационного бюллетеня? Вставьте URL-адрес предварительного просмотра в комментарии, нам любопытно посмотреть.
