Установка фонового изображения
Для того, чтобы придать интернет-магазину более привлекательный внешний вид, в лучшей степени соответствующий фирменному стилю, рекомендуется установить фоновое изображение и логотип. В данной статье описывается процесс установки фонового изображения. Установка логотипа описана в статье Установка логотипа для интернет-магазина в Storeolis.
Для начала нам необходимо подобрать само изображение. Для этого можно воспользоваться сервисами фотостоков (есть платные и бесплатные). После того, как изображение подобрано, необходимо загрузить его в базу данных интернет-магазина: заходим в Панель администратора > Файлы > Добавить файл > Выбираем файл изображения.
ВАЖНО: для того, чтобы файл был доступен для использования в качестве фонового изображения, необходимо установить флажок Активный, как показано ниже:
Если вы загружаете файл с данным именем не в первый раз, необходимо также установить флажок «Разрешить перезапись другого файла с таким же названием». После загрузки нажмите «Просмотреть контент», чтобы убедиться, что файл нормально отображается в браузере:
После нажатия Просмотреть контент скопируйте адрес открывшегося файла (он будет иметь вид http://www.example.com/Files/[имя файла].jpg, где вместо www.example.com используется доменное имя вашего интернет-магазина. См. статью Привязка доменного имени магазина к серверу Storeolis, которая содержит инструкции по привязке доменного имени к интернет-магазину). Адрес файла изображения понадобится на следующем шаге.
На данном этапе файл изображения загружен в базу данных интернет-магазина, но еще не установлен в качестве фонового изображения. Следующим шагом необходимо установить данное изображение в качестве фона. Это можно сделать несколькими способами:
- Из настроек (Панель администратора > Настройки > Оформление > Фоновое изображение) - наиболее простой способ
- Используя каскадные таблицы стилей (css) - более гибкий, но также и более сложный способ, требующий навыков работы с каскадными таблицами стилей
Ниже описаны оба способа. Каким бы способом вы ни воспользовались, после настройки фонового изображения ваш интернет-магазин будет выглядеть более привлекательно:
Установка фонового изображения из настроек
После загрузки файла изображдения необходимо выбрать данное изображение в Панели администратора > Настройки > Оформление > Фоновое изображение. Одновременно с фоновым изображением рекомендуется установить цвет основной центральной области сайта:
Установка фонового изображения с помощью каскадных таблиц стилей
После загрузки файла изображдения необходимо подготовить файл каскадных таблиц стилей (css), который установит загруженное изображение в качестве фонового. Для этого в любом текстовом редакторе создаем текстовый файл со следующим содержимым:
body { background: url("/Files/bg.jpg") no-repeat center top; }
.site-master-banner, .site-master-content, .site-master-footer { background-color: white; }
Первая строка устанавливает загруженный файл в качестве фонового изображения, вторая строка устанавливает цвет центральной области сайта в белый — это необязательно, экспериментируйте и используйте цвет, который наиболее подходит вашему стилю. Можно вообще не устанавливать цвет центральной области — в этом случае карточки товаров будут отображаться на фоне изображения.
Далее сохраняем текстовый файл с расширением css, например styles.css, и также как изображение, загружаем его в Панели администратора > Файлы. Также не забываем установить флажок Активный при загрузке:
Далее нажимаем Сохранить > Просмотреть контент и копируем адрес загруженного css файла.
Последний шаг — установить загруженный css файл в качестве альтернативного css файла для оформления интернет-магазина в Панели администратора > Настройки > Оформление > Альтернативный css:
После этого фоновое изображение будет применено к вашему интернет-магазину.