Как создать шаблон сайта для 1с битрикс

Создание сайта на шаблоне «1C-Битрикс»

Не все готовы тратить большое количество времени и ресурсов на создание сайта с индивидуальным функционалом. Порой нужно простое и быстрое решение для закрытия типовых задач. В такой ситуации поможет создание сайта на шаблоне 1-С Битрикс. Расскажем о плюсах и минусах этого подхода.

1. Что такое шаблон сайта на 1С-Битрикс?

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

На сегодняшний день в маркетплейсе 1С-битрикс представлены шаблоны, которые подходят под различные типы сайтов:

• Корпоративные;
• Онлайн-магазины;
• Лендинги;
• Порталы.

Автоматизируем рабочие процессы
Создадим функционал, заботливо настроенный нашими разработчиками вручную

2. Процесс разработки сайта на шаблоне «1С-Битрикс»

Для начала нужно понять, какие функции нужны заказчику. Может быть готовое решение полностью подойдет под поставленные задачи, а может придется что-то доработать. Процесс разработки сайта на шаблоне 1с-битрикс в нашей команде проходит следующим образом:

1. Определяются цели и потребности заказчика, проводится анализ бизнес-процессов, связанных с сайтом;

2. Из маркетплейса специалисты подбирают несколько удачных решений, согласовывают с клиентом и покупают наиболее подходящий вариант;

3. Прописывается ТЗ, где фиксируются все моменты по цветовой палитре, размещения блоков, дополнительного функционала и многое другое;

4. Создается новая структура и внедряется функционал;

5. Все тестируется, заполняется контентом клиента и выходит на хостинг.

Ваш сайт готов и нацелен на высокий результат!

3. Преимущества сайта на шаблоне «1С-Битрикс»

Компромиссом между использованием ограниченного функционала конструктора и заказом индивидуальной дорогостоящей разработки может быть создание сайта на шаблоне 1С-Битрикс». Выделим основные плюсы разработки сайта на этой системе.

• Оперативный запуск. За небольшой промежуток времени можно выпустить полноценный сайт и начать привлекать первую аудиторию. При этом вам не нужно разрабатывать концепцию сайта с нуля. Отлично подойдет для простого интернет-магазина, когда можно обойтись только базовым набором функций; ;
• Можно попробовать перед покупкой. Сомневаетесь, прежде чем приобрести шаблон? Тогда вы можете опробовать и протестировать сайт в демоверсии;
• Простая интеграция с «1С». У этих продуктов один разработчик, поэтому интегрировать их будет проще простого;
• Адаптивный дизайн. Все элементы шаблонов полностью адаптированы под разрешение экранов мобильных устройств;
• Прост и удобен в управлении. Интерфейс запоминает основные предпочтения пользователя, благодаря чему тратится меньше времени на управление содержимым;
• Универсальность. Шаблоны универсальны и подойдут под любой проект с типовыми задачами.

4. Недостатки сайта на шаблоне «1С-Битрикс»

• Проблемы с доработкой. Процесс сложный и обычно агентства за него не берутся, потому что будет легче и дешевле создать новый сайт. В рамках купленного функционала все будет хорошо, да, но доработать или добавить что-то свое будет сложно
• Сайт такой же, как у всех. Если какой-нибудь макет особо популярен, то количество созданных на нем сайтов может насчитывать несколько тысяч;
• Сложно изменить дизайн. Спустя время вам в любом случае захочется подкорректировать готовый продукт. Но здесь могут возникнуть сложности, потому что скрипт шаблона очень негативно реагирует на изменения и не любит вмешательств;

5. Так что же выбрать?

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

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

Читайте также

Готовые шаблоны сайтов или индивидуальные решения: что подойдёт в вашем случае?

Известный американский графический дизайнер Милтон Глейзер сказал: «Существует три ответа на результат от дизайна: «Да!», «Нет.», «НИЧЕГО СЕБЕ!». Последний – то, к чему стоит стремиться».

26 сент. 2021

Разница между разработкой сайта на CMS и с помощью конструктора

Разработка сайта – это сложный и кропотливый процесс, который требует от разработчика комплексного индивидуального подхода. Не последнюю роль в нём играет выбор между тем, что будет лучше для заказчика: сделать сайт через конструктор или на CMS.

Как создать шаблон для сайта на 1С-Битрикс

В этой статье мы с вами рассмотрим все особенности создания шаблона для Битрикса с нуля. Не важно, есть у вас готовая верстка, или вы просто перфекционист, которому только дай что-нибудь написать самому без посредников ��

Какие файлы нужны для создания шаблона

Внешний вид вашего сайта (или представление сайта), всегда хранится в какой-то отдельной папке. В 1С-Битрикс путь к шаблону лежит через папку bitrix, в которой есть папка templates и уже в ней список всех наших шаблонов.

Путь к шаблонам: /bitrix/templates/

Создать шаблон можно 3 способами:

1. можно скопировать готовый шаблон и на его основе изменять под себя
2. можно создать через админку пустой шаблон
3. можно создать пустую папку и постепенно заполнять ее файлами и папками

Как вы поняли 3-ий вариант самый хардкорный �� . Зайдем в админку, Администрирование > Настройки > Настройки продукта > Сайты > Шаблоны сайтов > Добавить шаблон.
ссылка относительно сайта: /bitrix/admin/template_admin.php?lang=ru

ID шаблона это по сути имя папки в которой он будет лежать, я назову development. Остальные поля заполните как удобнее, они сейчас не очень важны. В код шаблона добавьте следующий код:

      ShowHead()?> ShowPanel();?> #WORK_AREA# 

– пишем эту строку, чтобы файл нельзя было вызвать напрямую из браузера и он не начал выполняться;
ShowTitle()?> – показываем текущий title для страницы;
ShowHead()?> – показываем keywords, description и все скрипты;
ShowPanel();?> – показываем панель для админов.

После сохранения шаблона, мой файл description.php, выглядит так:

 'Разработка', 'DESCRIPTION' => 'шаблон для разработки', 'SORT' => 1, 'TYPE' => '', ); ?>

Отлично, у нас в корне должны остаться 5 файлов, остальное на данный момент мы не будем использовать:

• description.php,
• header.php,
• footer.php,
• styles.css,
• template_styles.css

Та часть кода, которая находится до #WORK_AREA# в итоге записывается в header.php. Угадайте, какая часть записывается в footer.php �� (та, что после нее). Сама ворк-арея представляет собой динамический контент (не всегда он такой уж и динамический), который находится, к примеру, в папке /contacts/ или /about/ в файле index.php. Сам файл обычно начинается подключением хедера и заканчивается подключением футера:

 Text хир 

Пока что, все выглядит логично.

1С-Битрикс папки и структура нового шаблона

В документации есть несколько рекомендаций, которые лично мне не очень нравятся. Во-первых, они любят называть папку с изображениями images вместо сокращенного img. И, я конечно все понимаю, но когда вы пишите стили, вам в любом случае нужно ссылаться на изображения, зачем писать в 2 раза больше? �� . Во-вторых, была такая рекомендация, хранить включаемые области в папке include_areas – почему бы не создать inc? В-третьих, зачем нам 2 файла со стилями? Если мне захочется вынести все в отдельный файл и подключать потом по необходимости, то эти стили будут хранится либо в шаблоне компонента, либо в папке css шаблона.

Если подытожить, наша правильная структура шаблона:

include_areas images components js

Если быть немного бунтарем, то:

inc img components js

Вас в принципе никто не ограничивает, это лишь рекомендации.

И вот мы плавно подошли к первой проблеме – хардкод. Хардкод это когда вы вместо динамических значений, например доменное имя, используете текстовую запись. Большинство начинающих разработчиков не знают про константу SITE_TEMPLATE_PATH, которая в качестве значения хранит путь к текущему шаблону – в нашем случае это /bitrix/templates/development (без слеша в конце, обратите внимание). И поэтому, когда вы будете подключать свои скрипты или включаемые области, для папки нужно писать:

и уж точно НЕ НУЖНО ПИСАТЬ:

Зачем нам динамический путь к шаблону спросите вы?

1. нам не нужно запоминать имена всех шаблона и помнить в каком именно мы сейчас шаблоне работаем
2. если мы поменяем имя шаблона, нам не нужно будет искать в файле это имя и исправлять на новое
3. легко запомнить

Думаю, тут сплошные плюсы. Ну хорошо, это что касается PHP файлов, в которых мы можем использовать константу. А как насчет картинок и стилей? В CSS стилях пишите относительные пути.
Если это дополнительный файл со стилями и находится в папке css (редкий случай):

url('../img/ico-menu.png');

если это styles.css или template_styles.css

url('img/ico-menu.png');

Никогда НЕ пишите вот так:

url('/bitrix/templates/development/img/ico-menu.png')

хотя бы по причине того, что имя шаблона вдруг придется переименовать. И да, если вы скопировали пути с firebug, тоже удаляйте лишнее.

Какие изображения хранить не в шаблоне а в корневой папке images?

Все довольно просто – те, которые вы будете использовать по всему сайту, особенно полезно если у вас много шаблонов. В стандартном шаблоне это изображение ошибки 404, думаю это хороший пример.

1С-Битрикс включаемые области для шаблона

Код подключения включаемой области очень простой. В случае если наша папка находится в корне:

IncludeComponent("bitrix:main.include", "", array("AREA_FILE_SHOW" => "file", "PATH" => SITE_DIR."include/company_logo.php"), false);?>

Если в шаблоне, то:

IncludeComponent("bitrix:main.include", "", array("AREA_FILE_SHOW" => "file", "PATH" => SITE_TEMPLATE_PATH."/inc/company_logo.php"), false);?>

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

Этих знаний вполне достаточно для экспериментов и создания простых шаблонов, но это лишь вершина айсберга, ведь мы не рассмотрели компоненты, скрипты, как показывать контент на разных страницах и много чего другого. Если вам интересно продолжение данной статьи дайте мне об это знать в комментариях �� .
Надеюсь, этот материал поможет вам легко создавать новые шаблоны для 1С-Битрикс �� .

Как выглядит по шагам Прототип -> Шаблон -> Готовый сайт, вы можете посмотреть на моем сайте портфолио:
https://forwww.ru/portfolio/vash-proekt/

Если вам необходимо создать сайт на 1С-Битрикс, доработать функционал на уже созданном проекте, или просто сверстать макет по шаблону Фотошоп или Figma, обращайтесь, буду рад помочь

автор: Dmitriy

З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com

Читайте також:

8 коментаря

Виктор :

Здравствуйте, Дмитрий. Хочу поблагодарить Вас за интересную статью. Я сам столкнулся с битриксом при разработке сайта. Ваша информация ускорила выполнение работы. Пишите еще .

Dmitriy :
Спасибо вам за отзыв �� Ждите продолжения, впереди много интересного ��

Дмитрий! Здорово что вот так можно найти опыт знающего человека в сети ! Дайте знать если заинтересованы в разработке шаблона на Битриксе.

Dmitriy :
Спасибо, заходите к нам еще ��

Добрый день, в начале пропустили слово “Настройки продукта”,
Администрирование > Настройки > “Настройки продукта” > Сайты > Шаблоны сайтов > Добавить шаблон

Dmitriy :
Добрый день, спасибо, поправил ��
Hosting :

Поле «Описание» не обязательно, оно скорее сделано для разработчиков, чтоб не путать шаблоны, если их несколько. Но так как у нас отсутствуют картинки и не прописаны правильные пути в HTML и CSS, то, скорее всего у вас отобразится просто скелет сайта.

Екатерина :
Где узнать про шаблоны битрикс это

Залишити відповідь Скасувати відповідь

Щоб відправити коментар вам необхідно авторизуватись.

Создаем шаблон битрикс — быстрый старт

В этом посте я опишу свою методику создания шаблона для битрикс. Она немного отличается от рекомендуемой разработчиками, и выражается это, прежде всего, в минимальном использовании админки. Предполагается, что у нас есть сверстанный макет сайта, установленная на локальной машине cms, более функциональный аналог блокнота и хороший файловый менеджер (не проводник:)

Почему я не люблю админку битрикс — во-первых она очень тяжелая, во-вторых плохо приспособлена для создания шаблонов. Встроенный относительно недавно визуальный редактор содержит значительные ограничения для использования. Особенно порадовала фраза «шаблоны демонстрационной версии адаптированы для использования в этом режиме» — смысл «затачивать» шаблон под редактор непонятен.

Итак, приступим к самому главному.

Этап первый — неинтересный

Тут предполагается долгое, вдумчивое ознакомление с мануалами (качать с dev.1c-bitrix.ru) и успешное прохождение курса «Интеграция». После изучения часть вопросов у Вас должна отпасть.

Теперь перейдем к практике.

Этап второй — создаем файлы

Файловую составляющую будем делать ручками — так быстрее и удобнее. Шаблоны хранятся в директории /bitrix/templates/, тут надо создать каталог для своего творения, например test. Внутри него размещаем:
— каталог images — для картинок шаблона (которые не зависят от просматриваемой страницы), незачем их хранить в публичной части
— каталог include_areas — для включаемых файлов
— каталог page_templates — для образцов включаемых областей
— файл header.php — часть шаблона ДО контента
— файл footer.php — часть шаблона ПОСЛЕ контента
— файл description.php — название и описание шаблона
— файл .styles.php — описания стилей для визуального редактора страниц
— файл template_styles.css — стили шаблона
— файл styles.css — стили для контента и включаемых областей

Этап третий — заполняем файлы

Картинки сразу пихаем в images, все стили css в template_styles.css, потом из него выберем необходимый минимум в styles.css. Я всегда стараюсь стили шаблона помещать в template_styles, потому что он подключается последним и случайное переопределение не сломает каркас сайта.

В исходной верстке нужно выделить область для контента и разрезать верстку на 3 части — до него, сам контент, и после него. Для наглядности приведу рисунок

По пунктам:
— в header.php включается 1 часть, за исключением содержимого между тегами и (оставить можно подключение различных скриптов). После обязательно добавить
ShowPanel();?>
— вместо удаленных в секции head метатегов, заголовка, подключений css файлов размещаем вызовы функций битрикс, которые будут динамически формировать эти данные

ShowHead()?> 

— в footer.php целиком записываем 3ю часть
— ко всем относительным путям добавляем /bitrix/templates// Например, было

Таким образом мы не привязываем пути к конкретному имени шаблона, оно будет подставляться автоматически (что позволит копировать шаблоны без дополнительных трудностей)

После описанных манипуляций должно получиться нечто похожее на
header.php

ShowHead()?> ShowPanel();?>