Перейти к содержимому курса
Контент-менеджер
Мой сертификат

Шаблоны сайта и типовые правки внешнего вида

Когда посетитель открывает сайт, он сначала видит шапку, логотип, фон, контакты и ссылки на соцсети. Если телефон устарел, логотип заменили или ссылка ведет не туда, правку нужно быстро найти и аккуратно внести.

В 1С-Битрикс: Управление сайтом такие элементы могут находиться в основной рабочей области страницы, во включаемой области, в компоненте или в шаблоне сайта. Дальше разберем, как менять элементы внешнего вида сайта и в каких случаях задачу лучше передать администратору или разработчику.

Шаблон сайта

В административной части можно выбрать шаблон для всего сайта, отдельного раздела или страницы.

Перейдите в Настройки > Настройки продукта > Сайты > Список сайтов. Найдите нужный сайт, откройте меню действий и выберите Изменить.

Команда изменения сайта в списке сайтов

Пролистайте форму до секции Шаблон сайта. Здесь выбирают шаблон и условие, при котором он будет показываться. Перед сохранением используйте предпросмотр — иконку с лупой. Так можно заметить ошибку до того, как изменение увидят посетители.

Секция выбора шаблона сайта и условий его применения

Возможные условия:

  • Без условия — для всех страниц сайта, к которым не подходит другое условие. Базовый вариант для большинства страниц.
  • Для папки и файла — для конкретного раздела или страницы. Папку или файл указывают в колонке Условие вручную или выбирают через кнопку в виде троеточия.
  • Для групп пользователей — для пользователей из выбранных групп.
  • Период времени — для временного оформления, например на время акции или праздника.
  • Параметр в URL — когда шаблон должен применяться при определенном параметре в адресе страницы. Такой вариант используют, например, для печатной версии страницы.
  • Выражение PHP — когда условие задается через PHP-код.

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

Сортировка шаблонов

Числа в колонке Сорт. задают порядок применения шаблонов: чем меньше число, тем выше приоритет. Если у нескольких условий одинаковый номер, раньше сработает то, которое стоит выше в списке. Условие Без условия применяется последним, независимо от указанной сортировки.

Шаблон сайта не равен шаблону компонента

Шаблон сайта отвечает за общий каркас страницы. Шаблон компонента отвечает за внешний вид конкретного блока: списка новостей, каталога, меню или другого компонента. Если нужно поменять только вид блока, сначала проверьте настройки компонента, а не настройки всего сайта.

Телефон и другие контакты

Телефон чаще всего находится в шапке, подвале, на странице Контакты или в отдельном блоке обратной связи.

В Режиме правки наведите курсор на номер телефона.

  • Если появляется кнопка Изменить страницу в редакторе, телефон находится в основной рабочей области. Откройте редактор и замените номер как обычный текст.
  • Команда изменения страницы в редакторе
  • Если при наведении появляется Изменить область, откройте область и замените номер там. Учитывайте, что область может быть общей для всего сайта: тогда номер изменится на всех страницах, где она подключена.
  • Команда изменения включаемой области
  • Если ничего не появляется — номер вшит в шаблон сайта. Самостоятельно его не исправить, передайте задачу разработчику.

Логотип

Логотип можно заменить самостоятельно, только если он находится во включаемой области. Если логотип встроен в шаблон сайта, передайте правку администратору или разработчику.

Чтобы заменить логотип во включаемой области:

  1. Подготовьте изображение нужного размера, чтобы оно корректно вписалось в область.
  2. Включите Режим правки и наведите курсор на логотип.
  3. Нажмите Изменить область.
    Команда изменения области с логотипом
  4. Удалите старое изображение и добавьте новое через кнопку Изображение.
    Кнопка добавления изображения в визуальном редакторе
  5. Откроется окно настройки изображения. Укажите источник изображения, заголовок и дополнительные параметры.
  6. Настройки нового изображения логотипа

Подробно о том, как добавлять изображение, а также об остальных настройках читайте в уроке 4.

После вставки логотипа выключите Режим правки. При включенном режиме логотип может отображаться некорректно — это нормально для режима редактирования.

Favicon

Favicon — маленькая иконка сайта, которая отображается во вкладке браузера. Ее меняют редко, обычно при запуске сайта или обновлении фирменного стиля.

Favicon во вкладке браузера

Способ замены зависит от шаблонов сайта.

Если шаблон единственный

  1. Подготовьте картинку размером 16×16 пикселей в формате JPG или PNG.
  2. Переименуйте ее в favicon.ico.
  3. В административной части откройте Контент > Структура сайта > Файлы и папки.
  4. В корневой папке сайта найдите старый файл favicon.ico, удалите его и загрузите новый с помощью кнопки Загрузить файл.
  5. Файл favicon.ico в корневой папке сайта

После этого браузер будет использовать новый файл favicon.ico.

Такой способ сработает, если в шаблоне сайта нет собственного файла favicon.ico. Если у шаблона есть своя иконка, сначала будет использоваться файл из шаблона, а не файл из корня сайта. Это нужно для сайтов, где разные разделы используют разные шаблоны и разные иконки.

Если шаблонов несколько

  1. Подготовьте картинку размером 16×16 пикселей в формате JPG или PNG.
  2. Переименуйте ее в favicon.ico.
  3. Загрузите картинку в папку нужного шаблона: Контент > Структура сайта > Файлы и папки > bitrix > templates > Название нужного шаблона

Дальше понадобятся права на редактирование PHP-файлов. Если не уверены, что можете менять код шаблона, передайте задачу администратору или разработчику.

  1. Откройте Настройки > Настройки продукта > Сайты > Шаблоны сайтов.
  2. Найдите в списке нужный шаблон, откройте меню действий и выберите Изменить.
  3. В коде шаблона найдите блок <head> и проверьте, есть ли строка:
    
       <link rel="icon" type="image/x-icon" href="<?=SITE_TEMPLATE_PATH?>/favicon.ico" />
       
  4. Если строки нет, добавьте ее и сохраните шаблон.
  5. Подключение favicon.ico в коде шаблона сайта
Favicon может обновиться не сразу

Браузер часто кеширует иконку сайта. После замены проверьте результат в другом браузере, в приватном окне или на другом устройстве. Если старая иконка остается, это не всегда означает, что файл заменили неправильно.

Фон сайта

Рассмотрим замену фонового изображения в стандартном шаблоне интернет-магазина 1С-Битрикс: Управление сайтом. Если на сайте используется другой шаблон, сначала уточните у разработчика, поддерживает ли шаблон такую настройку.

Фоновое изображение выводится через параметр backgroundImage, который уже прописан в шаблоне сайта. Код шаблона менять не нужно: достаточно указать новое значение этого параметра в свойствах раздела.

  1. Подготовьте изображение на компьютере. Учтите, что фон может не масштабироваться под экран, поэтому файл должен быть достаточно большим.
  2. Вернитесь на сайт и в административной части перейдите в Контент > Структура сайта > Файлы и папки.
  3. Нажмите Загрузить файл и выберите подготовленную картинку для фона.
  4. Загрузка изображения для фона сайта

Теперь добавьте свойство в раздел, где нужно заменить фон.

  1. Перейдите в публичную часть сайта и откройте нужный раздел.
  2. На панели управления выберите Изменить раздел > В панели управления.
    Команда открытия настроек раздела в панели управления
  3. В открывшейся таблице добавьте новую строку:
    • колонка Код: backgroundImage
    • колонка Значение: style="background-image: url('/bg.jpg');", где /bg.jpg — полный путь от корня сайта до изображения, включая название и расширение. Например, для файла my_picture.jpg в папке /images укажите /images/my_picture.jpg.
    Свойство раздела backgroundImage с путем к фоновому изображению
  4. Сохраните изменения и проверьте фон на сайте.
  5. Новое фоновое изображение на странице сайта

Ссылки на соцсети

Ссылки на соцсети обычно устроены одним из двух способов:

  • выводятся компонентом в шаблоне сайта или в основной рабочей области
  • добавлены как обычный текст в шаблоне сайта или в основной рабочей области

Если ссылки выводятся компонентом

  1. В Режиме правки наведите курсор на область компонента и нажмите на значок шестеренки.
  2. В параметрах компонента укажите ссылки на страницы компании в соцсетях.
    Поля ссылок на соцсети в настройках компонента
  3. Сохраните изменения.

Если ссылки добавлены как обычный текст

  1. В Режиме правки наведите курсор на рабочую область и нажмите Изменить страницу в редакторе.
  2. В Визуальном редакторе нажмите на текст ссылки, затем на значок цепи и выберите Редактировать ссылку.
    Команда редактирования ссылки в визуальном редакторе
  3. В открывшейся форме измените текст или адрес ссылки.
  4. Форма изменения текста и адреса ссылки

После сохранения откройте страницу без Режима правки и проверьте каждую измененную ссылку.

Если ссылки выглядят как часть подвала или шапки, но не открываются как область или компонент, они могут быть записаны в шаблоне. В этом случае передайте задачу разработчику.

Проверяйте доступность соцсетей

Не добавляйте ссылки только потому, что они были в старом макете. Проверьте, что страница компании активна, открывается из нужного региона и должна быть видна посетителям сайта.