Бесплатные шаблоны для Битрикс

Вы можете использовать бесплатные шаблоны на своих сайтах или рассматривать их как пример интеграции верстки в 1с-Битрикс.

Шаблон 1с-Битрикс freshimpuls

Tweet

Шаблон разработан на основе дизайна #28754 templatemonster.com (bitrixtemplates.ru).

Красивый бизнес-шаблон для организаций финансовой или строительной сферы. Дизайн информативен и содержит множество блоков для различных видов контента.

Шаблон 1с-Битрикс ProSoftware

Tweet

Шаблон разработан на основе дизайна #22869 templatemonster.com (bitrixtemplates.ru).

С помощью этого бесплатного шаблона 1c-Bitrix Вы можете быстро и качественно создать сайт-визитку организации. Тематика – компьютеры и программное обеспечение.

Шаблон 1с-Битрикс Simple

Tweet

Шаблон разработан на основе дизайна #26979 templatemonster.com (bitrixtemplates.ru). Неброская цветовая схема, строгие линии, минимум лишних элементов идеально подойдут для создания информативного, и в то же время красивого сайта.

Шаблон 1с-битрикс

Tweet

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

Заодно протестирую плагин WP-Filebase, судя по описанию – весьма неплохая разработка.

 

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

Обычно для всех страниц используется одна схема, но 1С Битрикс позволяет одновременно пользоваться несколькими вариантами оформления.

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

Содержание

Шаблоны страниц хранятся в одноименной папке «templates». В визуальном редакторе достаточно выбрать из списка необходимый вариант и дополнить его нужными данными. Особенность шаблонизации – отделение логики от представления.

Кому и зачем нужны шаблоны?

Система Битрикс позволяет создавать и использовать предварительно заготовленные шаблоны, применяя их к рабочим областям.

Это практичное и эффективное решение при работе с многокомпонентными страницами со сложной структурой, например при работе с интернет-магазином или новостным порталом.

Преимущества правильно подобранного шаблона:

  • Первое впечатление. Дизайн сайта дает понять, на чем специализируется компания и формировать благоприятное впечатление.
  • Запоминаемость. Сайт ассоциируется с конкретной компанией и остается узнаваемым.
  • Целостность. Шаблон должен быть прописан до мелочей, представляя собой гармоничную картину.
  • Функциональность. Привлекательность сочетается с юзабилити и практичностью.

Самостоятельное создание шаблона для 1С Bitrix

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

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

Основные разделы сайта также представлены в виде соответствующих директорий. Основа шаблона 1С Битрикс – файлы header и footer. В них прописывается код, подключается вызов расширений, CSS и другие функции.

Динамическое содержимое включается в шаблон с директивами Битрикс Фреймворк. Здесь задаются PHP-вставки, вызывающие специальные компоненты Битрикс.

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

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

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

Еще один важный аспект – CSS-файлы шаблона.

Изначально их три: основной и два вспомогательных для оформления содержимого. Но это разграничение очень условно, ведь все элементы тесно взаимосвязаны между собой.

К содержанию ↑

Как установить шаблон?

Установка готового шаблона производится по следующей схеме:

  1. В разделе с шаблонами панели администратора необходимо выбрать кнопку «добавить»;
  2. Форма создания стандартна: в ней задается ID, название и описание;
  3. При работе с html важно четко разделять элементы, относящиеся к оформлению и контенту;
  4. В поле редактирования вставляется директива work_area, куда копируется шаблон;
  5. При наличии CSS необходимо перейти во вкладку стилей, куда и вставляется код;
  6. Можно сохранить результат и оценить полученную работу.

Заключительная часть – указание всех переменных Битрикс, которые прописываются в файле header. Важно не забывать редактировать пути в CSS и сохранять промежуточные результаты. После этого можно применить шаблон к сайту, выбрав его в соответствующем списке в настройках продукта.

Выводы

Шаблоны 1С Битрикс достаточно практичны и функциональны. Их использование значительно упростит и ускорит разработку проекта. Можно приобрести готовые шаблоны на сайте компании.

 

К содержанию ↑

Памятка верстальщику под Битрикс

Вернуться к списку

Требования к верстке под Битрикс

  1. Файлы стилей разделить на 2: styles.css и template_styles.css.Первый из них содержит стили, которые относятся к рабочей (контентной) части страницы, то есть к ее «телу». Эти стили будут применяться в визуальном редакторе битрикс.Второй — стили, относящиеся непосредственно к шаблону сайта. Это все, что относится к «шапке» (хедеру), «подвалу» (футеру), меню, боковому меню и пр.
    Стили из файла template_styles.css подключаются вторыми, поэтому они будут иметь больший приоритет.
  2. Тело страницы должно быть обернуто в контейнер с неким классом или id (для примера — main) помимо body. Стили контентной части страницы могут быть указаны относительно элементов внутри него (включая его самого), но никак не внешних. Например, допускается использование такого стиля:.main .big p{background:pink;}
    И нельзя использовать такой:
    .wrapper .main p{background:pink;} или такой: p{background:pink;}
    Объясняется это тем, что при редактировании страницы в визуальный редактор вставляется iframe, тегу <body> которого прописывается класс / идентификатор main. Содержимое страницы вставляется в этот <body>. Вышележащих над main контейнеров добавлено не будет. Соответственно, задействовавшие их стили применены тоже не будут.
  3. Стилевая страница должна быть написана таким образом, чтобы стили применялись ко всем тэгам внутри тела страницы, таким как элементы формы, списки, заголовки и пр. Селекторы этих элементов не должны использовать классы непосредственно этих элементов.
    Это нужно для того, чтобы элементы, добавленные на страницу через визуальный редактор Битрикс, получили эти стили (а они добавляются без дополнительных классов и элементов-оберток). 
    Эти стили лучше всего задавать относительно главного контейнера (см. п. 2). Например, допустимо использовать стиль 
    .main ul{…} 
    Но недопустимо 
    ul.red{…}
  4. Крошки и заголовок h1 НЕ должны входить в тело страницы. Наоборот, контейнер для тела страницы должен открываться следом за ними.
  5. Структура шаблонной части различных страниц сайта должна быть максимально похожей (т.е. той, которую описывает файл template_styles.css). НЕ следует использовать различные классы / id для контейнера тела основной части различных страниц (например списка товаров и карточки товара).
  6. Табу на названия классов «title» и «mail», они используются в окнах визуального редактора.
  7. На странице должен быть ровно один тэг h1.
  8. Если верстаете баннеры, то учитывайте, что они могут быть отключены со страницы в любое время. Удалённый баннер не должен оставлять после себя пустое место, которое все прочие элементы всегда обтекают и не могут заполнить.
  9. При верстке списка новостей учесть:
    1. У новости может не быть изображения (и делать изображение-заглушку здесь не имеет смысла).
    2. Длина анонса новости может существенно превышать размеры выделенного для него html-элемента. Поэтому контейнер анонса должен учитывать этот факт и скрывать «лишний» текст. 
    3. Если высота контейнера анонса новости больше высоты изображения, картинка должна быть обтекаема этим текстом.
    4. Учесть, что вставляемая картинка (рядом с новостью) может существенно отличаться по пропорциям / размерам от эталонной. При этом ширина контейнера картинки должна быть фиксированной при любых размерах изображения (вертикальная линия, пущенная от правой стороны верхнего изображения должна касаться всех изображений). Если у новости нет картинки, текст анонса должен быть смещен влево на соответствующее пространство.
    5. Заголовок новости, картинка (если есть), «Подробнее» (если есть) — ссылки на страницу новости
  10. В контейнере, в который предусматривается вставка статей / текста, нельзя прописывать изображениям margin:0 и padding:0. Иначе невозможно редактировать отступы от картинок до текста средствами визуального редактора.
  11. По возможности не следует использовать селекторы прямых потомков (>) и псевдоклассы n-ых потомков (nth-child). В режиме правки Битрикс обрамляет элемент дополнительным div’ом, поэтому селекторы прямых потомков могут перестать работать (между ними появляется посредник). Использование псевдоклассов n-ых потомков не желательно по причине возможной смены номера в процессе развития проекта (например, из таблицы убрали колонку, номер всех колонок уменьшился на 1 и пр.).
  12. Для формирования текста-заглушки, присутствующего в текстовых элементах (input type=»text»), желательно использовать атрибут placeholder и плагин jquery.placeholder (для IE).
  13. Кросс-браузерность. Проверять, в том числе, в IE9+.
  14. Крайне желательно, чтобы html-код разных страниц до начала html-кода контентной части (тела страницы) был абсолютно идентичен (включая классы элементов-контейнеров). Различия могут быть после контентной части. В частности, это значит, что  html-код боковой колонки должен идти ПОСЛЕ html-кода контентной части, т.к. в большинстве случаев приходится делать еще и одноколоночный шаблон (убирать боковую колонку).
  15. Помнить о том, что должны быть хлебные крошки (навигационна цепочка).
  16. В контейнере, содержащем приглашение авторизоваться / зарегистрироваться (обычно в «шапке» сайта) предусмотреть содержимое для авторизованного пользователя.
  17. Если есть возможность в контентной части поставить изображение в тег img вместо фона какому-либо элементу, ставить в тег img. Тогда при редактировании содержимого в визуальном редакторе можно будет изменить это изображение через интерфейс редактора.
  18. Если есть выпадающее меню, убедиться, что поверх выпавшей части не будут показываться какие-то другие элементы (для этого надо добавить хотя бы 10-15 пунктов). Часто оказывается, что определенные части слайдера на главной странице показываются поверх выпавшей части меню.
  19. Если на сайте используются стилизованные ссылки / кнопки, то класс кнопки должен одинаково оформлять как ссылку (тег a), так и теги input[type=»submit»] и button.
  20. Табу на прописывание стилей ВСЕМ элементам формы / спискам / изображениям — обязательно нужно указывать в их селекторе, что интересуют только элементы из главного контейнера. 
    Иначе эти стили будут присвоены даже служебным элементам, относящимся к интерфейсу Битрикса (в списке параметров компонентов, например). 
    То есть нельзя использовать такой стиль: input[type=»text»] {…} 
    И можно такой: .main input[type=»text»] {…}
  21. Input[type=»file»] должен быть стилизован.

    Надо помнить про этот элемент формы. Для этого можно использовать вспомогательные скрипты.

  22. Нельзя использовать кириллицу в именах файлов / папок.
  23. При верстке меню учесть, что от всех остальных визуально должны отличаться 2 пункта меню: тот, на который наведен курсор мыши и тот, который активен в данный момент (в котором находится пользователь).
  24. Если в какой-либо таблице предусмотрена сортировка по столбцу, то часто в шапке столбца используются треугольнички, обозначающие направление сортировки (с вершиной вверх или вниз). Такие треугольнички лучше делать с помощью CSS и свойства border-width, чем создавать под каждый из них картинки.
  25. В списке товаров / новинок / лидеров продаж и пр. предусмотреть, что у товара может быть не одна, а несколько лычек (одновременно и новинка, и хит продаж, например).
  26. При верстке картинок в списках любых элементов, а также карточке товара и пр. учитывать, что реальные изображения по соотношению сторон могут отличаться от запланированных. При этом изображение должно быть корректно вписано в указанную для него область по меньшей из двух сторон, центрироваться по обоим измерениям, а по большей стороне должно обрезаться все, что не вошло в отведенный контейнер. Этого эффекта можно добиться с помощью стиля background-size:cover;
  27. Все всплывающие окна желательно делать библиотекой fancybox. Предусмотреть всплывающие окна при добавлении товара в корзину, при клике на ссылку «заказать звонок».
  28. При верстке форм вроде отправки заявки обратного звонка, обратной связи и пр. добавлять поле ввода CAPTCHA. Размеры картинки капчи 180×40 пикселей, пример: 

Шаблон сайта

Список всех шаблонов находится на странице НастройкиНастройки продуктаСайтыШаблоны сайтов.

Исходный код шаблонов находится в двух папках: bitrix/templates/ и local/templates/.

По возможности, шаблоны рекомендуется создавать в папке «local/templates/», т.к. в папке «bitrix/» находятся файлы ядра Битрикс, а в папке «local/» находятся пользовательские файлы.

Если шаблон с одинаковым именем будет находиться в папках «bitrix/templates/» и «local/templates/», то шаблон подключится из папки «local/templates/».

Есть два основных файла шаблона:

  1. header.php — файл подключается перед выводом контента
  2. footer.php — файл подключается после вывода контент

Картинки, используемые в дизайне шаблона, рекомендуется хранить в папке шаблона images/, т.к. при копировании шаблона, скопируются и нужные картинки.

Путь к картинкам шаблона рекомендуется указывать вместе с константой , т.к. при копировании шаблона, автоматически сменятся URL к картинкам:

<imgsrc="<?=SITE_TEMPLATE_PATH?>/images/image-name.jpg">

В папку шаблона можно загрузить картинку с именем «screen.gif», которая будет выводиться на сайте как скриншот шаблона.

Подключение шаблона происходит в файле bitrix/modules/main/include/prolog_after.php.

Добавить комментарий

Закрыть меню