Как поменять фон сайта
Урок
314
из
363
Сложность урока:
3 уровень — средняя сложность. Необходимо внимание и немного подумать.
3 из 5
Дата изменения:
02.02.2023
Просмотров:
20747
Недоступно в лицензиях:
Текущую редакцию Вашего 1С-Битрикс можно просмотреть на странице Обновление платформы (Marketplace > Обновление платформы).
Старт, Стандарт
Какую часть фона можно поменять
Примечание: В этом уроке рассматривается самый простой способ изменения фонового изображения в
стандартном шаблоне интернет-магазина 1С-Битрикс: Управление сайтом
.
Для замены фона в другом шаблоне обратитесь к разработчику сайта.
В стандартном шаблоне можно поменять фон только ограниченной части сайта: фоновая картинка будет видна по бокам от общего блока с информацией:
Фоновая картинка выводится через параметр backgroundImage, прописанный в
шаблоне сайта.
Статическая информация, которая не нуждается (либо редко нуждается) в замене, как правило, размещается в статических зонах Header (шапка сайта) и Footer (подвал сайта). Заменить ее можно в коде самих файлов, но делать это придется квалифицированному разработчику, либо разработчик должен организовать такую замену с помощью компонентов системы силами редакторов сайта.
Подробнее…
Контент-менеджеру в шаблоне сайта лучше ничего не изменять.
Однако можно этому параметру присвоить новое значение (содержащее ссылку на новую картинку), не вмешиваясь в шаблон сайта.
Видеоурок
Как поменять фон на сайте
Итак, рассмотрим пошагово, как заменить фоновую картинку:
- Загрузите
в структуру сайта
Этот способ используется для загрузки файлов в роли статического контента. Например, вывести файл формата PDF для загрузки его пользователем.В административном разделе системы перейдите в папку, в которой будет храниться загружаемый файл. Нажмите на кнопку Загрузить файл под фильтром, откроется форма для загрузки. Добавьте файлы для загрузки и сохраните их.
Подробнее…
нужную картинку:
- Теперь добавьте новое
свойство раздела
Управление свойствами раздела идентично управлению свойствами страницы. Это — большое удобство системы «1С-Битрикс: Управление сайтом». Но есть несколько существенных отличий, которые обязательно учитываются в работе контент-менеджером. Сначала расскажем о том как управлять, а потом — об этих различиях.Подробнее…
(папки), в котором хотите заменить фоновую картинку. Перейдите в нужный раздел на сайте.Добавить свойство можно только в Административной части сайта (в Публичной части только редактируются существующие свойства), поэтому кликните на стрелочку кнопки Изменить раздел и выберите пункт В панели управления:
В открывшейся таблице в новой строке укажите следующий код:
- колонка Код:
backgroundImage - колонка Значение:
style="background-image: url('/bg.jpg');"где
/bg.jpg— это
полный путь
То есть если бы мы загрузили фоновую картинку с именем my_picture.jpg в папку /images, то вместо/bg.jpgнужно было бы прописать/images/my_picture.jpg.
от корня сайта до картинки, включая её название и расширение.
- колонка Код:
- Сохраните результат, и на сайте будет отображаться
новый фон!
Примечание: Фоновая картинка не масштабируется в зависимости от экрана, поэтому нужно подготовить достаточно большое изображение (например, по стандартным параметрам экрана: 1920х1280 пикселей).
Если же страницы сайта достаточно длинные (то есть их нужно скроллить вниз), то лучше использовать картинку с бОльшей высотой (иначе при скроллинге картинка будет видна только в верхней части сайта).
В Битрикс24 появился инструмент для изменения дизайна сайтов и магазинов. Теперь вы можете за пару кликов изменить шрифты и цвета текстов.
Настройки дизайна сайта применяются ко всем блокам на всех страницах, кроме случаев, когда вы вручную изменяли дизайн блока.
Чтобы изменить дизайн, зайдите в список сайтов или магазинов и нажмите Настроить дизайн у нужного сайта.
Какие настройки дизайна доступны
В правой части слайдера встроен небольшой блок с текстом, заголовком и кнопкой. В блоке вы увидите, как меняются эти элементы в зависимости от настроек дизайна.
У некоторых блоков есть заранее прописанная цветовая стилистика, для них настройки дизайна действовать не будут.
Цветовая палитра изменяет цвет кнопок и некоторых других элементов, в зависимости от блока.
Функция Корпоративный цвет (выбор из палитры или свой #hex) доступна не на всех тарифах Битрикс24. Узнать подробнее вы можете на странице тарифов.
Пример изменения цветовой палитры
В данном случае красный цвет будет применён к разделителю в одном блоке и кнопкам в другом.
Цвет текста и заголовков изменяет соответствующий цвет в блоках.
Пример изменения цвета текста и заголовка
Так выбранный цвет текста и заголовков выглядит на сайте.
Шрифт текста и заголовков изменяет соответствующий текст в блоках.
Пример изменения шрифта текста и заголовка
Так выбранные шрифты выглядят на сайте.
Размер текста, жирность и междустрочное расстояние помогают более тонко настроить текст.
Пример форматирования текста
Вот так изменения шрифта отображаются на сайте.
Индивидуальный фон страницы изменяет фон текущей страницы.
Пример изменения фона страницы
Спасибо, помогло!
Спасибо 
Уточните, пожалуйста, почему:
Это не то, что я ищу
Очень сложно и непонятно
Рассмотрим настройки шаблон. Блок «Шаблон» находится в центре управления Аспро: Market → Настройки
Переключатель тем
Функция выводит блок настроек оформления шаблона в публичную часть сайта в виде pop-up окна. По умолчанию неактивна.Функция предназначена для демонстрации возможностей решения и не может быть использована для его настройки. Однако вы можете включить ее для удобства подбора цветовых схем и настроек.
С ее помощью вы можете:
— изменить цветовую схему сайта: выбрать один из предлагаемых вариантов или установить свой цвет (инструмент «Пипетка»)
— задать ширину большого баннера на главной странице: узкий, средний, по ширине окна
— выбрать один из 8 вариантов оформления шапки сайта
— выбрать тип корзины: в шапке интернет-магазина или летающая
— выбрать тип SKU (торговых предложений): в виде конструктора или списком (удобно для товаров с большим количеством торговых предложений)
— тип отображения умного фильтра: вертикальный или горизонтальный
— оформление блока магазинов на главной странице: отсутствует, светлый, цветной.
Кнопка «По умолчанию» восстановит стандартные настройки решения.
Цветовая схема и пользовательский цвет
Задают соответствующие настройки сайта: 9 вариантов готовых схем и возможность установить свой цвет с помощью кода.
Логотип сайта
Позволяет установить логотип в шапку сайта. С помощью кнопки «Добавить файл» вы можете загрузить его с компьютера или воспользоваться меню настроек для выбора вариантов загрузки: загрузить с компьютера, выбрать из медиабиблиотеки, выбрать из структуры, вставить путь к файлу.
Необходимый размер для изображения – 163х64 px. Рекомендуемый формат – png.
Favicon
Иконка на вкладке сайта с заданными размерами 16х16. Загружается тем же способом, что и логотип. Начиная с версии 1.7.7, появилась возможность добавить favicon в формате SVG.
Web Clip Icon 57х57 и Web Clip Icon 72х72
Иконки веб-приложения для iPhone/iPad. Способ загрузки аналогичный.
Шапка сайта
Позволяет выбрать 1 из 8-ми вариантов настроек отображения. Также задается в pop-up окне настроек в публичной части сайта.
Корзина
Летающая или зафиксированная в шапке сайта. Также задается в pop-up окне настроек в публичной части сайта.
Умный фильтр
Компонент, который выводится в каталоге товаров. Может быть вертикальным или горизонтальным. Также задается в pop-up окне настроек в публичной части сайта.
Вертикальное отображение умного фильтра:
Горизонтальное отображение умного фильтра:
Выводить магазины из
Задает параметры вывода магазинов на главной странице и в карточке товара.
Из инфоблока – информацию о магазинах необходимо заполнить вручную в соответствующем разделе. Подробнее об этом мы пишем здесь.
Из складов – информация о магазинах выгружается из 1С и отображается на главной и в карточке товара автоматически.
Поддержка нескольких складов доступна только в редакции 1С-Битрикс: Бизнес.
Маска ввода телефона
Задает параметры ввода телефонных номеров пользователями в формах обратной связи. По умолчанию маска ввода телефона выглядит так: +7 (999) 999-99-99
Маска валидации
Определяет формат отображения телефонных номеров. По умолчанию настроена для вывода российских номеров: ^[+][7] [(][0-9]{3}[)] [0-9]{3}[-][0-9]{2}[-][0-9]{2}$
О принципах формирования маски валидации читайте здесь.
Показывать подразделы каталога в навигационной цепочке
Управляет форматом отображения элементов навигации вверху страницы («хлебных крошек»).
Если функция активирована, «хлебные крошки» выглядят так:
Пользователь может перейти через элементы навигации в любой подраздел из выпадающего списка.
При выборе другой настройки посетитель не сможет выбрать подраздел и перейдет на одну из предыдущих страниц.
Печать заказа
Добавляет кнопку «Распечатать заказ» в корзину на этапе оформлении заказа.
Расположение описания раздела в списке товаров
Настройка отображения блока с текстом перед списком товаров или после.
