Меню

Как настроить сниппет в битриксе

Как создать адаптивный шаблон и сниппеты на Bootstrap 3 для 1С-Битрикс

Всем привет!
Решил затронуть тему адаптивной верстки.
Итак на дворе конец 2016 и более 20% посетителей вашего сайта заходят на него со смартфона. В южных регионах России этот показатель может быть более 40%, что очень большая доля и ее нельзя игнорировать. Ваш сайт должен нормально отображаться на любом устройстве вашего посетителя с которого он зашел на него.

Но как сделать адаптивную верстку?
Можно заказать ее у фрилансера/компании подрядчика, которые сделают это за 10-100 тысяч рублей в зависимости от типа вашего сайта. А можно сделать его самому или переделать существующий сайт в адаптивный. Как? Дальше я расскажу, как это сделать для системы управления сайтом 1С-Битиркс.

1: Подготавливаем Bootstrap элементы

Для подготовки нам понадобится сайт Bootstrap 3 или Bootstrap 4 если вас не смущает его альфа версия. На этом сайте мы будем создавать сборку bootstrap под себя и уже в дальнейшем будем использовать ее как базовый набор стилей для нашего сайта.
Также нам понадобится отличный сайт Layoutit с помощью которого мы будем делать прототип нашего сайта и уже на основе этого прототипа с созданной сборкой bootstrap создадим наш адаптивный шаблон.

1.1 Сборка bootstrap
Итак первым делом настраиваем сборку bootstrap под себя. Для этого идем на RU сайт или EN сайт
Я беру все компоненты css и JavaScript.
При кастомизации CSS настраиваем как минимум следующие блоки:

  1. Colors — 4 базовых цвета вашего сайта. Обычно это какие то корпоративные цвета кроме черного и белого.
  2. Scaffolding — Цвет фона и цвет ссылок и текста.
  3. Typography — Шрифты, которые будут использоваться на вашем сайте. После выхода шрифта Google Noto я использую только его. Можем прописать любые другие шрифты, напрмер open sans.

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

В папке css есть как полные так и минимизированные версии файлов стилей нашей сборки bootstrap.

В папке js файл с javascript компонентами и его минимизированная копия.

В папке fonts находятся файлы шрифта glyphicons для создания иконок с помощью написания их кода. Подробнее о них по ссылке .

1.2 Блоки bootstrap и верстка прототипа сайта

Теперь нам нужен прототип дизайнаи функциональные блоки для нашего сайта. Заходим на сайт http://www.layoutit.com/build и переносим из левого меню сайта нужные на нашем сайте блоки в правую часть. Это делается с помощью перетаскивания, при этом появляются подсказки и вы можете настроить эти блоки.

Я обычно переношу следующие обязательные блоки:

Обязательный элемент настройки.
Выносим блоки:

  • 12
  • 6-6
  • 8-4
  • 4-4-4
  • 3-3-3-3 (вписываем в пустое поле)

Base CSS

  1. Title
  2. Paragraph
  3. Address
  4. Blockquote
  5. Unordered List
  6. Ordered List
  7. Description
  8. Table
  9. Form
  10. Horizontal Form
  11. Button
  12. Anchor Button
  13. Image

Components

  1. Breadcrumb
  2. Pagination
  3. Jumbotron
  4. Text
  5. Thumbnails
  6. Media Object

JavaScript

  1. Navbar
  2. Tabs
  3. Alerts
  4. Collapse
  5. Carousel

Посте того, как вы перенесли и настроили все блоки, скачиваем наш прототип.

В архиве у нас некастомизированный bootstrap 3 и файл index.html с блоками нашего прототипа.

В итоге у нас скачан архив с готовыми стилями bootstrap и прототип шаблона. Теперь переходим к этапу 2.

2: Создаем базовый адаптивный шаблон для 1С-Битрикс

Теперь переходим к созданию адаптивного шаблона для сайта под управлением 1С-Битрикс.
Для этого заходим на наш сервер в SFTP или FTP и переходим в папку «/bitrix/tempates/»
В ней создаем 4 пустых файла:

  • footer.php
  • header.php
  • description.php
  • styles.css
  • template_styles.css
Читайте также:  Как настроить tp link в качестве точки доступа

В файле header.php прописываем подключение пролога и языковых файлов:

Из папки с подготовленными ранее стилями bootstrap копируем папки fonts и js.

Содержимое файлов стилей копируем:

bootstrap.css в style.css
bootstrap-theme.css в template_styles.css

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

В файле description.php прописываем название шаблона, чтобы его можно было выбрать в панели управления сайтом.

Далее переходим к переносу прототипа. Идем в папку с архивом прототипа и разархивируем ее.
Идем в папку «/layoutit/src/js/» и копируем файл jquery.min.js в наш адаптивный шаблон в папку js.
Далее идем в папку «/layoutit/src/» и открываем файл index.html на редактирование.

Копируем в файл header.php следующее содержимое файла index.html

2.1.1 Гамбургер для меню

Потом добавляем «гамбургер» кнопку, которая появляется только на смартфонах. При нажатии на нее у нас на смартфоне появится меню.

Дальше у нас идет логотип

Да логотип нужно перед этим зачать в созданную папку /public_html/bitrix/templates/bootstrap/images/

Переменная содержит путь до корня сайта
Переменная содержит путь до шаблона в котором вызвана. В нашем случае это /bitrix/templates/bootstrap/

Подключаем файл header_logo.php в файле header.php в помощью компонента bitrix:main.include

Дальше у нас идет меню. Меню на разных устройствах может быть как развернутое, так и свернутое в «гамбургер». За то, что будет в свернутом блоке отвечает следующий div

Это стандартное горизонтальное меню с уровнем вложенности 2. То есть при нажатии на пункт меню низ выпадет список. Выглядит это изначально вот так.


Теперь мы копируем стиль компонента bitrix:menu и в него добавляем верстку из нашего прототипа index.html

Так как и в прототипе и в компоненте bitrix:menu используется ненумерованный список, то вы просто дописываем классы из прототипа вместо существующих

Его можно установить добавив в меню новый пункт с текстом divider

2.1.4 Телефон и другие элементы в header

Отдельно в div меню collapse navbar-collapse добавляем телефон. Делается это с помощью следующего кода кода

Так как меню у нас всегда приклеено к верхней части окна браузера, то часть элементов страницы расположенных ниже него будет перекрываться меню. Для предотвращения этого я использую div с вертикальным отступом margin-top. Размер отступа в пикселях ставим в зависимости от высоты блока с меню.

2.1.5 Хлебные крошки

Тут все просто.
Устанавливаем код компонента хлебные крошки bitrix:breadcrumb в отдельный div из grid таблицы:

Если вы заметили у меня все блоки добавляются в отдельные div container а уже в нем в col-md-12. Это сделано, чтобы на смартфоне, данный блок правильно адаптировался под содержимое страницы. Все блоки в дальнейшем будут вставляться в отдельные div.
Теперь в браузере в режиме правки создаем копию стилей для данного компонента и копируем их в наш шаблон.

Правим код компонента на основе кода прототипа с сайта Layoutit

2.1.6 Заголовок H1

Следующий обязательный элемент на странице, заголовок H1. Тут все просто вставляем его в grid блок col-md-12

На этом с файлом header.php закончили. Переходим к файлу footer.php

В footer.php у нас обычно следующие блоки:

  • Адрес
  • Ссылки на важные разделы сайта
  • Соцсети или панель соцзакладок
  • Копирайты
  • Счетчики

Grid сетка выглядит так:

Блок адрес, счетчик, соцсети, ссылки выглядит так:

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

3: Верстка страниц в редакторе и сниппеты

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

Читайте также:  Как настроить квик касты дота

Для этого я использую инструмент редактора 1С-Битрикс под названием сниппет. Сниппет — это подготовленный код, который вставляется в нужное место на странице прямо в редакторе и уже содержит нужные стили и разметку.

Спиппеты находятся в папке /public_html/bitrix/templates/bootstrap/snippets

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

При редактировании новой страницы редактор выглядит так:

Мы будем создавать следующие типы сниппетов:

  • Grid сниппеты
  • Сниппеты оформления

Создадим первый grid сниппет col-md-12


Укажем категорию для сниппета.


Код сниппетра «Блок 12» из прототипа с сайта LayoutIt:

По этому же принципу делаем сниппеты для блоков:

  • 6-6
  • 8-4
  • 4-8
  • 4-4-4
  • 3-3-3-3

Это все распространенные блоки в grid сетке bootstrap. Все эти блоки ограниченны div сlass=»container» по ширине.
Также нам необходимы grid блоки с установленными в них стилями и другими элементами:

  • grid не фиксированные по ширине
  • grid с заголовками h2-h4
  • grid с картинкой
  • grid с кнопками

grid не фиксированные по ширине

grid с заголовками h2-h4

Блок 4-4-4 с заголовком h3.

Благодаря этому у нас появляются блоки необходимые для верстки страниц в редакторе.
Кроме того нам необходимы функциональные блоки:

  • Цитата
  • Табы
  • Алерт (выделенный блок определенного цвета
  • Спойлер

Эти блоки мы также переносим с сайта LayoutIt в наши спойлеры.
В итоге у нас есть все для верстки страницы.
Как работать с снипетами редактору и копирайтеру.

Вот я на видео показываю, как с этим может работать копирайтер или редактор вашего сайта. Это позволит при должном опыте делать 4-6 лендингов в день!

Вот как это выглядит на сайте в компьютера.

Вот как выглядит со смартфона.

В итоге у нас есть адаптивный шаблон Bootstrap для сайта на 1С-Битрикс и набор сниппетов для работы копирайтера и редактора с таким сайтом.
Ссылки на скачивание шаблона сайта с Bootstrap 3 для 1С-Битрикс и скачивание отдельно сниппетов для 1С-Битрикс.

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

Источник



Сниппеты в визуальном редакторе

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

Сниппеты в визуальном редакторе

Где лежат сниппеты

Работа со сниппетами Сниппет — это заранее подготовленный фрагмент текста или кода, этакие заготовки. Предположим, что вам каждый день приходится вставлять на страницы сайта одну и ту же таблицу или форму. Вы можете сохранить эту таблицу в сниппетах и затем простым перетаскиванием размещать ее в нужном месте. подробно рассмотрена в уроке Внешний вид редактора Например, вам часто приходится размещать на страницах сайта фрагмент, который включает в себя заголовок, текст и небольшую таблицу. Добавим этот фрагмент в сниппеты, это сэкономит значительное количество времени. Сниппеты редактируются, добавляются и удаляются прямо в визуальном редакторе. Мы можем создать целую структуру сниппетов для того, чтобы было удобнее ориентироваться в заготовках.
Подробнее. курса Контент-менеджер. Физически сниппеты хранятся в папке /snippets/ соответствующего шаблона либо в шаблоне по умолчанию (.default). Так как сниппеты — это фрагменты HTML-кода, то они используют стили CSS того шаблона, для которого они созданы. Папка шаблона обычно содержит:

  • Файл .content.php — перечисление всех созданных сниппетов в данном шаблоне. И для каждого из сниппетов хранится заголовок (title) и описание (description).
  • Файл .htaccess — настройки прав доступа к сниппетам;
  • Коды самих сниппетов (файлы *.snp). Они могут храниться в подгруппах.
  • Изображение для сниппета, хранится в подкаталоге /snippets/images/ и далее директория, дублирующая расположение самого сниппета. Имя изображения совпадает с именем сниппета. Например, сниппет расположен в папке /test1/table.snp . Тогда изображение к нему будет располагаться в папке /images/test1/table.png (или другое расширение изображения).
Читайте также:  Как настроить звук в ксс в34

Видеопример использования сниппетов

Источник

Работа со сниппетами

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

Для работы со сниппетами необходимо открыть визуальный редактор (кнопка изменить страницу на административной панели).

Далее, открываем раздел со сниппетами.

Здесь будут отображаться все существующие на сайте сниппеты.

Для создания нового сниппета в выпадающем списке выбираем пункт «Добавить сниппет».

После чего откроется окно создания нового сниппета.

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

Вкладка «Основные параметры»:

  • Название. Обязательное поле. Данное название будет отображаться в списке сниппетов.
  • Код сниппета. Обязательное поле. Непосредственно тело сниппета. В данное поле необходимо добавлять HTML-код будущего сниппета.
  • Категория. Дает возможность выбрать категорию, в которую будет помещен сниппет.
  • Дополнительная информация. Здесь задается текст для подсказки, которая будет отображаться при наведении на сниппет.

Для создания новой категории необходимо нажать на кнопку с многоточием, она располагается рядом с блоком «Категория».

После создания сниппета, он появится в разделе сниппетов в визуальном редакторе.

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

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

Источник

Сниппеты типографики bootstrap, для Битрикс

Если вы подключили bootstrap к своему сайту, или сверстали весь шаблон, подключив bootstrap из ядра битрикс. Имеет смысл использовать эти 320 килобайт css стилей по полной. Во первых это упростить и стандартизирует создание новых разделов, оформления текста и элементов HTML. Во вторых: не придется раздувать файлы стилей основного шаблона.

Самое главное, научить использовать стили bootstrap и контент-менеджеров. а специально для них, в Битрикс, есть такое понятие как — Сниппеты.

Сниппеты битрикс

Что такое сниппеты, и для чего они нужны, подробно рассмотрено в официально документации битрикс:

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

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

Bootstrap сниппеты для Битрикс

Что бы контент менеджеры не устраивали вакханалию в оформлении страниц и не проявляли самодеятельность. Я подготовил набор сниппетов. Все созданы на базе bootstrap и содержат только типографику. То есть: абзацы, заголовки, списки, аббервиатуры и прочее. Вам не придется раздувать свои файлы стилей, просто подключаете bootstrap из ядра

Если бутстрап не подключен к вашему шаблону, просто добавьте в header.php строчку

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

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

Источник