Как изменить дизайн сайта на 1с битрикс
Инструкция будет полезна как пользователям, так и разработчикам.
Если Вы приняли решение о кастомизации шаблона, крайне важно знать, как делать это правильно и так, чтобы минимизировать проблемы при его обновлении.
Обратите внимание что ни один метод внесения изменений не дает 100% гарантии безпроблемной обновляемости, поэтому прежде чем вносить или заказывать доработки, подумайте, готовы ли Вы к дополнительным временным и денежным затратам на восстановление и поддержку внесенных изменений.
Если Вы все таки решили прибегнуть к изменениям, то покажите эту статью Вашему разработчику сайта и удостоверьтесь что работа делается по этой инструкции. Дополнительно Вы можете запросить у Вашего разработчика список с полными путями измененных файлов
- Перед каждым обновлением необходимо делать полную резервную копию сайта
- Изменения стилей можно вносить в файл styles.css создав его в корневой директории шаблона сайта
- Внося любые изменения в компоненты и файлы решения, копируйте измененные файлы в папку local создав ее в корне сайта.
1) Внесение изменений в стили сайта:
- 1. Создайте файл styles.css по пути:
Для левого меню - /bitrix/templates/dresscode/
Для верхнего меню - /bitrix/templates/dresscodeV2/
После создания файла попасть в него можно нажав на сайте на серой административной панели шаблон сайта- изменить стили САЙТА - 2. Вносите все изменения по стилям в этот файл. Он не затирается при обновлениях.
- 3. Чтобы найти элемент, который Вы хотите изменить кликните на него правой кнопкой мышки и нажмите "просмотреть код" (в браузере Google Chrome)
- 4. Найдите класс или id который Вы хотите изменить
- 5. Скопируйте название , занесите в файл styles.css и переопределите стили
2) Внесение любых изменений через папку Local
Если Вы приняли решения о любых кастомизациях решения, помните, они будут не только влиять на обновляемость шаблона, но также постепенно могут устаревать, т.к. битрикс с некоторой периодичностью обновляет ядро, и изменения ядра сказываются на работе модулей решения, соответственно если меняется принцип работы определенного модуля или компонента, мы это учитываем в обновлениях решения. Поэтому даже ведение кастома через папку local не дает гарантии что Вам не придется переделывать измененные Вами элементы.
Также внесение изменений влияет на оказание технической поддержки решения. Если Вы внесли изменения в шаблон и у Вас после этого перестало что-то работать, что работает стандартно, мы сможем только вернуть Вам работоспособность на стандартных файлах решения. Кастомизация, а также вопросы связанные с кастомизацией, выходят за рамки технической поддержки. Если сотрудник знает, то может дать Вам совет по Вашему вопросу. Но это скорее не правило, а исключение из правил.
Как работает вынесение изменений в папку local
Если Вы копируете файл решения в папку local, на сайте этот файл будет запрашиваться по умолчанию из этой папки. При удалении или переименовывании этой папки все файлы будут запрашиваться из стандартных. т.е. если произошла ситуация, что Вы обновили решение и у Вас перестал правильно работать кастом, Вы можете переименовать папку в local2 и у Вас подтянутся стандартные файлы.
Как работать с папкой local
- 1. Ее необходимо создать в корне Вашего сайта.(лучше делать это через ftp)
- 2. Создать в папке полный путь к файлу (Без начальной папки bitrix), который Вы собираетесь редактировать
- Обратите внимание на пути к файлам
Если было например : bitrix- components-dresscode
то должно стать : local - components- dresscode
т.е. папка local идет не перед, а вместо папки bitrix - 3. Создать сам файл и скопировать его содержимое из одноименной папки в шаблоне
- 4. Внести свои изменения и проверить
- . Если Вы переносите из папки bitrix/components, то сам компонент нужно копировать целиком, иначе он не будет брать из папки local
Например если Вы хотите внести изменения в шаблон корзины, то нужно файл
bitrix/templates/dresscode/components/dresscode/sale.basket.basket/.default/template.php
скопировать в папку local с сохранением пути к файлу но без папки битрикс.
local/templates/dresscode/components/dresscode/sale.basket.basket/.default/template.php
А если Вы вносите изменения в компонент, например
/bitrix/components/dresscode/catalog.item, то нужно перенести ВСЮ папку с комппонентом в :
/local/components/dresscode/catalog.item
Как нельзя вносить изменения в шаблон
Если Вы вносили изменения одним из способов указанных ниже, то обновления будут устанавливаться некорректно, либо затирая Ваши изменения, либо не обновляя шаблон вообще, что в последствии приведет к ошибкам.
1) Не переименовывайте шаблон сайта (например с Dresscode на Dresscode-custom)
если переименовать шаблон и вносить изменения в него, то ни один файл шаблона не будет обновляться вне зависимости от того вносили ли Вы в него изменения. будут обновляться только общие компоненты и модули, что в последствии приведет к ошибкам в связи с устаревшими методами, которые можно будет решить только откатившить на резервную копию или заменив шаблон на стандартный, потеряв все изменения.
2) Не переименовывайте шаблоны компонентов и компоненты (например news на news-custom)
Если Вы переименуете шаблон компонента или компонент, он также перестанет обновляться, т.к. к стандартным файлам решения он уже не будет иметь никакого отношения.
3) Не вносите изменений непосредственно в стандартные файлы решения
Если Вы внесете изменения прямо в файлы шаблона, то они попросту затрутся при обновлениях, и восстановить их можно будет только либо откатившись к резервной копии, либо вручную заменяя файлы из резервной копии. Наша техническая поддержка не сможет Вам помочь в восстановлении изменений.
4) Не выносите в local полностью весь шаблон с сайтом
Если Вы скопируете абсолютно весь шаблон ( bitrix-templates-dresscode ) в папку local, то при обновлениях у Вас обновятся все компоненты, но шаблоны этих компонентов останутся старыми, также не будут обновляться скрипты, что может привести к поломкам функций сайта. Выносите только то, что действительно было Вами кастомизировано.
Пожалуйста, если для Вас не понятно, что описано в этой статье и Вы не знаете как читать и прописывать код, то прежде чем начать, изучите этот вопрос или доверьте внесение корректировок профессоналам
Чтобы перейти к настройкам, кликните Настроить сайт в панели Действия.
Основные настройки сайта
Адрес сайта – укажите, по какому адресу будет доступен ваш сайт.
Виджет на сайт – с помощью какого виджета клиенты смогут с вами связаться.
Более подробно о работе данного инструмента вы можете прочитать в статье Виджет открытых линий на сайте.Выберите Цвет виджета. Он может быть установлен как в своем оригинальном виде, так и использовать цветовую схему сайта, чтобы более гармонично на нем смотреться.
Цветовая палитра – основной цвет кнопок, элементов дизайна сайта и т.п.
Шрифты на сайте – можно выбрать шрифты заголовков и основного текста, а также относительный размер основного текста сайта.
Кнопка "Вверх" – очень полезный инструмент для работы с длинными страницами. Она позволяет быстро перейти к самому началу страницы.
Если ваш сайт содержит несколько страниц, то здесь вы также можете указать Главную страницу.
Дополнительные настройки
Favicon – картинка, которая показывается на закладке браузера. Допустимо только использование изображений в формате .PNG.
Фон страницы – установите картинку или цвет для фона страниц сайта. Это необходимо, если у вас есть блоки с повышенной прозрачностью, либо вы не устанавливали свой фон для каждой страницы.
Подтверждение прав – укажите необходимые мета-теги для подтверждения прав на сайт при подключении к Google Search Console и Яндекс.Вебмастеру.
Аналитика – для сайта очень важно вести статистику, чтобы контролировать его популярность и эффективность. Вставьте в данном поле идентификатор счетчика Яндекс, Google Analytics либо Google Tag Manager, чтобы фиксировать статистику посещений страниц.
Подключение Яндекс.Метрики, Google Tag Manager и Google Analytics доступно только на коммерческих тарифах.Размещение пикселя – пиксели Facebook и ВКонтакте используются для отслеживания конверсии вашего сайта.
Более подробно о пикселях Facebook и ВКонтакте вы можете прочитать в статье Добавление пикселя Facebook и ВКонтакте.Ключи карт – укажите ключ API Google Maps, чтобы добавлять на сайт расположение вашей компании.
Тип представления – позволяет выбрать для страниц вид отступов для отображения на экране.
Шаблон сайта – если вы хотите, чтобы на страницах были включены дополнительные области, то тут вы также можете их настроить.
Язык сайта – вы можете изменить отображение некоторых элементов сайта на нужном вам языке, например в веб-формах, кнопки магазина в заказе, подпись «Заряжено Битрикс24» и т.д.
Ошибка 404 – что увидят ваши пользователи, если страница будет недоступна. По умолчанию, сайт имеет стандартную страницу для 404-й ошибки. Но вы можете выбрать и свою из любой страницы сайта.
Настройки robots.txt – здесь можно задать текст файла для индексирования сайта роботами поисковых систем.
Более подробно о данном файле вы можете прочитать в документации Яндекс и Google.Ускорение сайта – при включенной опции оптимизируются CSS и JS таким образом, чтобы они подгружались по мере загрузки страницы. Это одно из условий Google PageSpeed Insights для ускорения загрузки сайтов.
Пользовательский HTML – вы можете вставить произвольный html-код для всех страниц сайта внутри тега HEAD, например, код статистики, мета-теги подтверждения и т.д.
Пользовательский CSS – вы можете вставить произвольный CSS-код для всех страниц сайта, например, для подключения своих шрифтов или стилей оформления блоков.
Временно отключить сайт – вы можете временно отключить свой сайт и показывать определенную страницу, пока сайт отключен.
Более подробно о настройке cookie-файлов вы можете прочитать в отдельной статье.Подпись «Заряжено Битрикс24» – на коммерческих тарифах можно убрать эту подпись внизу вашего сайта.
Настройки страниц сайта
Настройки для каждой из страниц очень схожи с настройками самого сайта, но есть некоторые моменты.
Для страницы можно настроить ее собственный адрес, а также указать, в каком виде она будет отображаться при добавлении ссылки на страницу в соцсетях.
Мета-теги страницы – теги, используемые для лучшего индексирования поисковиками. Они формируются автоматически, но вы можете добавить и собственные.
Индексировать страницу в поисковых системах – если данная опция будет выключена, посещаемость вашего сайта может снизиться.
Пользовательский HTML и CSS – для страниц сайта вы можете добавлять свой собственный HTML и CSS. Ваш сайт сможет отлично работать и без кода, но если вам нужны специфические функции и элементы дизайна, то это можно настроить здесь :)
HTML-код вставляется сразу после открывающего тега HEAD. Это может быть например код статистики для конкретной страницы.
Добавить страницу в карту сайта – посмотреть карту сайта можно по адресу [адрес сайта]/sitemap.xml , если вы, конечно, включали в нее какие-то страницы.
Как видите, сайт можно настроить очень гибко, чтобы он идеально подходил под ваши пожелания!
Мы переработали интерфейс выбора цвета для сайтов и магазинов. Теперь вы можете выбирать любой цвет для текстов и фона, настраивать прозрачность и изменять фоновую картинку у блоков.
Новый интерфейс доступен для сайтов, магазинов и баз знаний.Как настроить цвета элементов
На станице сайта нажмите Дизайн и выберите элемент, который хотите отредактировать.
В левой части окна откроется слайдер, в котором вы можете:
- Выбрать один из предложенных цветов. Он сразу применится к элементу, который редактируете.
- Открыть другие сочетания цветов и выбрать подходящий среди них. Для этого нажмите на кнопку Больше.
- Выбрать цвет на палитре или указать его код. Чтобы открыть окно с палитрой, нажмите на код цвета.
- Выбрать основной цвет сайта. Его вы указали в момент создания сайта.
- Настроить прозрачность цвета. Для этого нажмите на Прозрачность и выберите нужное значение.
Чтобы вернуть цвет по умолчанию, нажмите на соответствующую кнопку. Цвет изменится на тот, который был у элемента блока изначально.
Как настроить цвета фона
Теперь вы можете выбрать любой цвет для фона. Перейдите на вкладку Заливка и выберите подходящий вариант.
Настройки цвета фона аналогичны настройкам цвета текста за одним исключением: фон можно сделать градиентным. Для этого откройте вкладку Градиенты и выберите подходящий вариант.
Градиенты можно сделать круговыми или линейными, а также поменять цвета местами или повернуть их.
Опция Прозрачность действует на весь фон, а не отдельные цвета градиента.
Как изменить фоновую картинку
Фоновую картинку можно установить только для тех блоков, в которых она не задана по умолчанию.В слайдере перейдите на вкладку Картинка.
Нажмите Загрузить и выберите подходящий вариант, также можно просто перетащить картинку в область Drag & Drop.
После загрузки картинка станет фоном блока.
Если текст блока плохо виден, можете изменить цвет текста или наложить цвет на фоновую картинку. Для этого нажмите на вкладку Наложение цветов и выберите подходящий вариант.
Программисты есть, работавшие с разными бесплатными фреймворками по типу Joomla, WordPress и т.д., но когда дело доходит до Битрикса, все как один говорят: — «Ой, она платная, зачем мне это когда есть куча других бесплатных». И не хотят браться за изучение чего то нового.
Так начинал и я, за исключение одного, мне сразу показали, как что и почему. Но материала в сети и на хабре я так и нашел. По этому начну с простого, как обычному программисту владеющим знаниями PHP и хотя бы базовыми HTML, CSS, JS начать работать c Битрикс.
Про структуру каталогов шаблона говорить не буду, об этом можно почитать тут. Первое, с чем приходится сталкиваться, это интеграция HTML шаблона на CMS.
- Заходим на сайт Битрикса и качаем инсталлятор;
- Заливаем bitrixsetup.php на сервер и начинаем установку.
Первое, что вам предлагает установочник, это выбрать редакцию:
Для решения этой проблемы заходим на сервер, открываем файл .htaccess и находим там следующие строки
Открывается стандартная форма создания шаблона.
Придумываете ID (я обычно использую main), вписываете название шаблона. Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько.
Вот тут началось самое интересное. Обычно шаблон HTML страниц выглядит следующим образом:
Если у вас есть CSS, то переходим на вкладку «Стили шаблона» и вставляем его туда.
На данном этапе можно нажать «Сохранить» и посмотреть что получилось. Но так как у нас отсутствуют картинки и не прописаны правильные пути в HTML и CSS, то, скорее всего у вас отобразится просто скелет сайта.
Далее, я обычно редактирую файлы уже через FTP. Открываете свой текстовый редактор (у меня Notepad++, поэтому буду писать не его примере) и заходите на сервер. Весь шаблон Битрикс располагается по адресу /bitrix/templates/название_шаблона/ , если у вас есть картинки или дополнительные файлы стилей, JS скрипты и т.д., то копируете всё в эту папку.
Переходим к заключительной части и прописываем все необходимые переменные Битрикса. Открываем файл header.php и начинаем редактировать. Первое что нужно сделать это, подключить вывод шапки сайта:
Так же мы хотим видеть панель администратора сайта в публичной части сайта:
Чтоб отображался заголовок страницы, добавляем функцию <?$APPLICATION->ShowTitle();?> в соответствующий тег. В итоге мы получаем вот такой файл:
Кстати забыл сказать, если всё таки есть дополнительные файлы, будь то JS, CSS, favicon и так далее, то чтоб не прописывать полный длинный путь /bitrix/…/ есть специальная константа SITE_TEMPLATE_PATH . Её и вставляем на нужные места:
Не забываем редактировать пути в CSS, сохраняем все и можете смотреть на получившийся результат.
Ах, да, нужно еще применит созданный шаблон к сайту. Для этого идем в «Настройки продукта — Список сайтов — s1»
Выбираем созданный нами шаблон и жмем «Сохранить», и можем посмотреть результат проделанной работы.
На этом, конечно же, процесс не заканчивается. Но для начала вполне достаточно. В следующих статьях рассмотрим как добавить компонент к шаблону и его кастомизацию.
Читайте также: