Заказать
Заказать

Как создать и настроить купон на скидку в Битрикс 24\7

  1. Открываем маркетинг-Товарный маркетинг-правила работы с корзиной и нажимаем добавить правило.
Как создать и настроить купон на скидку в Битрикс 24
Правила работы с корзиной Битрикс
  1. Настраиваем.

Выбираем сайт.

Вводим название.

Если нужно, то выбираем интервал, когда будет это правило работать.

Как создать и настроить купон на скидку в Битрикс 24
Создание правила для корзины
  1. Далее переходим в пункт действия и условия и выбираем изменить стоимость товаров в корзине.
Как создать и настроить купон на скидку в Битрикс 24
Условия работы правила для корзины

Тут вводим число скидки, например 10

Как создать и настроить купон на скидку в Битрикс 24
Задать условия применения купона
Как создать и настроить купон на скидку в Битрикс 24
Настройка параметров купона
  1. Идем в ограничения.
Как создать и настроить купон на скидку в Битрикс 24
Ограничения правила
  1. И выбираем к какой группе это правило применять.
Как создать и настроить купон на скидку в Битрикс 24
Задать категорию пользователей, на которую распространяется действие правила
  1. Жмём сохранить и готово.
  2. Для создания купона, проделываем сначала все верхние действия, потом переходим в купоны и жмём добавить.
Как создать и настроить купон на скидку в Битрикс 24
Добавить купон
  1. Заполняем купон.
Как создать и настроить купон на скидку в Битрикс 24
Зполнение купона
  1. Вводим данные.

Правило корзины – выбираем правило которое написали.

Купон – вводим любое название для купона.

Тип купона – выбираем многоразовый, на один заказ и т.д.

Период активности – если нужно чтобы купон действовал с какого-то времени по какое-то.

И жмём сохранить и купон будет работать.

Как создать и настроить купон на скидку в Битрикс 24
Задать общие параметры купона

Настройка умного фильтра 1С-Битрикс 24/7

  1. Переходим в каталог.
  2. В режиме правки нажимаем на настройки комопнента (каталог)
Настройка умного фильтра 1С-Битрикс 24/7
Работа с каталогом товаров
  1. Находим настройка фильтра и жмём показать фильтр.
Настройка умного фильтра 1С-Битрикс 24/7
Настройки фильтра
  1. Настраиваем фильтр, нужные нам данные.
Настройка умного фильтра 1С-Битрикс 24/7
Настройки умного фильтра: свойства, тип цен
Настройка умного фильтра 1С-Битрикс 24/7
Отображение умного фильтра
  1. Далее идём, контент-инфоблоки-типы инфоблоков и выбираем наш инфоблок.
Настройка умного фильтра 1С-Битрикс 24/7
Свойства инфоблоков
  1. Открывам и выбираем свойства.
Настройка умного фильтра 1С-Битрикс 24/7
Как вывести свойства инфоблоков в фильтр
  1. Ищем в списке нужное нам свойство, которое хотим вывести в фильтр. На примере свойства “неликвид”

Показать в умном фильтре сразу выбираем.

Вид в умном фильтре, выбираем под себя, как будут выглядеть – флажки, радиокнопки или выпадающий список.

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

Настройка умного фильтра 1С-Битрикс 24/7
Настройки свойств элементов
Настройка умного фильтра 1С-Битрикс 24/7
Настройки свойств инфоблоков
  1. Сам фильтр находится по такому пути – /components/bitrix/catalog/название шаблона компонента/section_vertical.php
Настройка умного фильтра 1С-Битрикс 24/7
Код фильтра

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7

В сегодняшней статье мы продолжаем изучение  CMS Bitrix. Более подробно остановимся на создании и настройках инфоблоков.

Что такое инфоблоки?

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

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Инфоблоки – структурная единица Битрикс

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

Создание новых инфоблоков в Битрикс

Заходим через админку в раздел инфоблоков. Для начала удалим существующие, чтобы очистить пространство для работы.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как удалить инфоблок

Опускаемся ниже. Выбираем галочками все пункты, удаляем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Очистить список инфоблоков

После обновим страницу. Список инфоблоков (слева/ на предыдущем слайде выделен зеленым маркером) будет пуст.

Начнем создавать новые. Возвращаемся в раздел «Контент», «инфоблоки», «Типы инфоблоков». Создадим инфоблок content. Вводим название и жмем «добавить новый тип».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Создание нового типа инфоблоков

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

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки для вкладки “Дополнительно”

После обновления в списке появится созданный нами тип «Контент».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Где отображается тип инфоблоков

Во вкладке «Инфоблок» прописываем название блока и транслит. Также в соответствии с примером ставим галочки. Во вкладке SEO никаких действий не совершаем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Создание и настройка инфоблока

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

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки для вкладки “Поле”

Детальная картинка – изображение на странице статьи. Задаем размер для всех статей блока. Сделаем по примеру страницы «Проекты». Чтобы определить размер изображения, кликаем левой кнопкой мышки на картинке в выпадающем списке выбираем «проверить объект». Помним, в коде ниже ищем строку, отвечающую за элемент. При наведении возле картинки появится обозначение с информацией. Переносим размеры в настройки.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как проверить параметры картинки

Также проставляем галочки в соответствии с примером ниже. При необходимости можно размещать авторский знак в виде картинки или теста (настройки обозначены зеленым маркером).

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки изображения для инфоблока

Картинка анонса – миниатюра изображения в ленте новостей с кратким описанием инфоблока. Можем подбирать отдельно или указываем «создавать из детальной картинки». Прописываем тот же размер. Другие настройки по примеру ниже.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Основное изображение и миниатюра, настройки
Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Другие параметры вкладки “Поле”

На вкладке «Свойства» – есть возможность указать дополнительную информацию о статье: автор, количество комментарием или просмотров, дата публикации и т.д. Мы зададим одно свойство – автор.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как вывести дополнительные информационные поля в новости

Указываем название. Тип оставляем «Строка», хотя в выпадающем меню есть много вариантов. Обязательно указываем код в верхнем регистре. Почему именно в верхнем расскажу позже.

Настройки для вкладки «Поля разделов».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки для вкладки “Поля разделов”

Настройки для вкладки «Доступы».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Действия во вкладке “Доступ”

 Заполняем поля вкладки «Подписи» по примеру выше.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки вкладки “Подписи”

 «Журнал событий» не заполняем и жмем «Сохранить».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Настройки вкладки “Журнал событий”

В списке слева появился новый инфоблок.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Где отображается инфоблок в Битрикс

Переходим в Блог и создадим новую категорию. На слайде выше видна возможность добавлять, статьи и категории – кнопки «добавить категорию»; «добавить статью» (обозначено зеленым маркером). Напомним, что при создании типа инфоблока отмечено галочкой «использовать древовидный классификатор элементов по разделам» (в рамке). Благодаря чему и появляются кнопки «добавить категорию» и «добавить статью».

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как добавить статью или категорию

Создание подкатегорий раздела инфоблока

Кликнуть на кнопку «Добавить категорию». Во вкладке «категория» прописываем название «Категория 1». Названию особого внимания не уделяем, так как цель урока научиться создавать категории и подкатегории. Символьный код прописывается автоматически. Что мы также указывали в настройках при создании типа инфоблока. Сохраняем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Создание подкатегории

Аналогично создаем еще три категории, которые после отображаются в списке. Теперь можем зайти в категорию (двойным щелчком мыши) и наполнять раздел новостями.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Создание ряда подкатегорий

Как добавить контент в новую категорию?

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Наполнение разделов контентом

Во вкладке «Статья» заполняем поле «Название». Для наглядного примера используем страницу «Проекты» (в оранжевой рамке слева). Можно использовать для обучения любую новость из Интернета или размещать свою.

Символьный код прописывается автоматически, согласно заданным настройкам типа инфоблока. Начало активности (1) – стоит текущая дата, также задано при создании типа. Без этой галочки нужно постоянно прописывать вручную дату, когда статья будет показываться.

Автор (2) – помним, что, подобно этому полю, мы можем создать и другие дополнительные информационные ячейки в новости (количество просмотров, дата написания, лайки и т. д.). Как настроить, еще раз показано в оранжевой рамке справа.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как добавить статью

 «Анонс». Привью копируем с примера. Изображение не загружаем. Помним, что прописали брать картинку на обложку со страницы новости.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как вывести анонс и миниатюру картинки

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

Сохраняем изображение примера (Проекты). Кликнуть мышкой на поле для фото, выбрать из выпадающего списка нужный файл. Загружаем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Действия во вкладке “Подробно”

 «SEO» оставим без изменений. Во вкладке «Категории» указываем, к какому подпункту относится новость, где она будет показываться. Сохраняем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Выбор категории, где будет размещена статья

Теперь статья видна в списке соответствующего раздела. Создадим еще несколько новостей. Картинки и контент берем с той же страницы. Чтобы не создавать новые статьи, можно скопировать существующую. Кликнув на бургер, из выпадающего списка выбираем нужное действие. Меняем картинку, название и содержание. Сохраняем.

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как скопировать статью

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

Создание сайта на Битрикс с нуля| Инфоблоки на Битрикс| Новости Блог| Урок № 7
Как разместить статью сразу в нескольких категориях

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

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

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

Создание меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Через админку переходим в раздел «Настройки» в меню слева:

  1. «Настройка модулей»;
  2. «Управление структурой».
Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание меню через админку

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В строке «тип меню» в данном случае только «main_menu». Так как создаем только главное меню. Также может быть и «left_menu» или «wright_menu» – в зависимости от проекта сайта.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
настройки структуры

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Ниже в строке указываем: левое меню, нижнее или правое. На данный момент создаем главное, и вторую строчку оставляем пустой. «Сохранить». Переходим в раздел «Сайт».

Следующий шаг – «Создать раздел». Важно создать именно раздел, а не страницу. Так будет возможность создавать подпапки для файлов подпунктов меню.

Обратите внимание! Все разделы создаются на главной странице.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне указываем название раздела и соответствующий документ.

Далее «Имя нового» и в строке «Тип меню» оставляем «Главное». Если предусмотрено создание нескольких меню (левое, правое, нижнее и т.д.), в выпадающем списке указываем к которому меню будет относиться создаваемый пункт.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела – шаг 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Далее в свойствах раздела прописываем название каталога и сохраняем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание нового раздела – шаг 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне редактирования пока прописываем текст-образец и сохраняем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
редактирование страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6После видим текст на странице. И в корне появится файл about.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
документация Битрикс

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Ниже на слайде показано, как выглядят разделы в файле menu.php. Зеленым маркером обозначены документы, которые указываем при создании нового раздела. Удобно скопировать название и затем использовать.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
компонент меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6 Следующим создаем компонент «Услуги». Обязательно переходим на главную страницу, иначе раздел будет создан в папке about, а не в корне. Можно прямо в адресной строке удалить часть пути, ведущего в ново созданный раздел, и нажать enter.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вернуться на главную

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Алгоритм действий, как и при создании предыдущих компонентов. Главное правильно указать название документа, к которому будет обращаться Битрикс.

Шаг 1

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создание ного раздела – услуги

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
раздел “услуги” – дейстие 2

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
свойства раздела – действие 3

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 4

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
раздел “услуги” – редактирование страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Шаг 5

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
создаем новые разделы на главной

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6После сохранения помним об обязательном переходе на главную страницу.

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

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
документация Bitrix

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В итоге в корне сайта Битрикс создаст каталог для каждого нового пункта меню.

Создание компонента «Меню»

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

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
пробная страница

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Совершать все дальнейшие действия можно и здесь. Но и специалисты могут случайно сохранить нежелательные изменения. Для работы используем, ранее созданную, страницу new-page.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В параметрах компонента выставляем только параметры меню для первого уровня. Сохранить.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
параметры компонента “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Удаляем «br» и копируем код. Выходим без сохранения. Помним: компонент используем только для получения кода, а работаем с заготовленным шаблоном. Ошибки можно ликвидировать и стартовать с исходного кода неограниченное количество раз.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
где взять код компонента

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Вставляем в документ menu.php вначале. Содержимое этого файла закомментируем.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
включить компонент “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Сохраняем изменения и переходим на главную страницу. Результат получим следующий.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
править компонент “Меню”

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Меню выводится, пункты работают. Хотя выглядит пока незавершенным. Конечно, меню имеет свои стили, находятся в папке bitrix.

Путь к стилям:

  • сomponents;
  • bitrix;
  • menu;
  • template.php.

Делаем небольшую проверку, чтобы убедиться, тот ли файл нужен для работы. После, число «11» удалим.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
простая проверка Битрикс 24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Повторим, что к папке bitrix в ходе работы лучше не обращаться. Здесь содержаться все стили, важные настройки, как своего рода диск С на компьютере.

Как поправить меню, если в папку bitrix не рекомендуется заходить? С помощью редактирования компонента. Обязательно переходим в режим правки. Появится возможность править компонент. Но на данный момент нужна не эта функция. Наводим на область редактируемого компонента. На панели, рядом с кнопкой редактирования, находится выпадающий список. Копируем шаблон с Битрикс.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
копировать шаблон bitrix-1c

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Да, можно скачать и залить, записать самостоятельно. Но в Битрикс предусмотрен более простой способ.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
как перенести шаблон в 1с-битрикс

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Файл называем main_menu. Остальные настройки показаны на слайде выше.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
код вызова компонента

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В menu.php появился вызов нашего меню. Также появилась дополнительная папка components в каталоге шаблона teh. Документ был создан Битрикс автоматически.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
копировать стили битрикс 1с

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Путь к документации выделен зеленым маркером. Содержимое папок в красной рамке. Таким образом, были скопированы стили Битрикс без риска испортить исходные параметры случайными ошибками.

Переходим в папку template2, начнем использовать готовые решения Битрикс. До 13й строчки включительно – прописано оформление (оставим без изменений). Далее код, который будет преобразовываться в ходе обучения. Для удобства отступим.

Дальнейшие действия противоречат инструкции bitrix, но это не критично. Фрагменты кода будем переносить с отключенного участка ниже.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
готовые решения – как использовать

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Третье действие необходимо для максимальной вложенности. Если есть один, и при этом вложено больше, чем один. Допускается пропустить эту деталь, но лучше записать.

Четвертое – копируем проверку. Пятое – выводим ссылку.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
класс header-nav_intem

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Код на промежуточном этапе имеет такой вид. Если мы выводим с активным пунктом меню, то выводится с классом header-nav_intem (1, серый маркер), в противном случае выводим без каких-либо классов (2, серый маркер).

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
редактировать код

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Удалим лишние пункты (зеленая рамка, строки 25-37, действие 1). Вставляем текст ссылки – действие 2.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Так должен выглядеть готовый документ. Закомментированный ранее фрагмент больше не нужен – удаляем. Ниже готовый код для копирования, проверки ошибок.

<?php foreach($arResult as $arItem): ?>
                <?php if($arParams["MAX_LEVEL"] == 1 && $arItem["DEPTH_LEVEL"] > 1) continue; ?>
                <?php if($arItem["SELECTED"]): ?>

          <li class="header-nav__item"><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                     <?php else: ?>
                     <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
                     <?php endif; ?>
                     <?php endforeach; ?>
                     

Как искать ошибки?

После сохранения изменений, к сожалению, ожидания периодически не оправдываются. От ошибок не застрахован как новичок, так и профи.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
ошибки в коде

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Битрикс позволяет выводить расширенную информацию об ошибках. На слайде ниже показано, как включить функцию.

В папке settings.php в корне битрикс находим строку debag. Меняем false на true, и сохраняем. Путь к файлу отмечен зеленым маркером. Действия в папке показаны в черной рамке, отмечены оранжевым маркером.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
поиск ошибок битрикс 24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Показаны все ошибки. Указано, что проблема в 23 строке. Действительно, вместо «:» был другой знак «;».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
расширенный вывод ошибок в bitrix24

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Исправим, сохраним и смотрим результат.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
режим редактирования страницы

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Все работает. Единственный минус – не вывелись стили, над чем мы еще поработаем. Осталось вывести «Главную».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Действуем через админпанель и компонент меню, кнопка «редактировать пункт меню».

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вставить пункт

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В окне выбираем «вставить пункт». Прописываем название нового раздела.

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
ссылка при создании нового пункта меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6В строке «Ссылка» ставим слеш, так как страница главная. При помощи стрелочек можно поставить пункты меню в нужном порядке (отмечено серым маркером).

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6
вывод пункта “Главная” в меню

Создание сайта на Битрикс с нуля | Компонент меню на Битрикс | Поиск ошибок | Урок №6Сохраняем правки. Отключаем режим редактирования, проверяем результат. В итоге все работает, меню подключилось. Но стили по-прежнему не работают. В чем была загвоздка (ошибка) будем разбираться в следующей статье.

Промежуточные итоги

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

Но намного проще создавать страницы и вызвать компоненты, чаще всего так и поступают. Также есть готовые решения. Мы уже научились копировать из компонента, чтобы поставить функционал, сделать свое оформление, разделы. Рассмотрели возможность расширенного просмотра ошибок. На этом хочу закончить статью. Благодарю читателей за внимание, буду раз вопросам и комментариям.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5

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

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

Где взять код для подключения компонента редактируемой области?

Заходим на страничку new-page.php, которую мы создавали ранее, нажимаем «изменить страницу». Разделяем страницу на 2 части (текстовую и кодовую). Выбираем в меню справа «включаемые области», «вставка включаемой области» – кликнуть дважды мышкой, чтобы появилось окно.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Вставка включаемой области

Остановимся на параметрах компонента.

«Показывать включаемую область:» выбираем «из файла». Так как править будем из файла. Разобьем на блоки по отдельным файлам, где будут совершаться все изменения. Для удобства пользователей предусмотрены подсказки (значок «і»). Хотя на практике, документация как Битрикса, так и админки, далеки от совершенства. В выпадающем меню есть «из раздела», «для страницы» – об этом можно почитать в информационном окне.

«Путь к файлу области» – обычно называют папку include, начнем с логотипа logo.php. Сохранить. Появится код.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Параметры компонента

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

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Код редактируемой облати

 Копируем и выходим БЕЗ СОХРАНЕНИЯ.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение элемента
<?$APPLICATION->IncludeComponent(
    "bitrix:main.include",
    "",
    Array(
        "AREA_FILE_SHOW" => "file",
        "AREA_FILE_SUFFIX" => "inc",
        "EDIT_TEMPLATE" => "",
        "PATH" => "/include/logo.php"
    )
);?>

В папке header.php при помощи скопированной области включаем компонент логотипа. Фрагмент, отвечавший за вывод лого, закомментируем (отключим) – обозначено серым кругом и зеленым маркером. После обновления на главной не будет отображаться логотип, так как logo.php еще предстоит создать.

Как в Битрикс распределить элементы страницы по папкам?

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание каталога
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание include

Следующий шаг – создание соответствующей документации. В папке httpdocs создаем папку include, в которой создаем файл logo.php.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Документация Битрикс
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание документов для элементов

В logo.php вставляем из папки header.php закомментированный ранее компонент. На слайде выше обозначен зеленым маркером или воспользуйтесь подсказкой ниже. Из хедера код можно удалить.

<a href="index.html" class="header-logo header-logo_white d-block">
                <img src="<?=SITE_TEMPLATE_PATH;?>/img/head-logo.svg" alt="мс-тех">
            </a>
            <a href="index.html" class="header-logo header-logo_dark d-block">
                <img src="<?=SITE_TEMPLATE_PATH;?>/img/logo.svg" alt="мс-тех">
            </a>
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение логотипа
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование логотипа

Сохраним, появится логотип и возможность его править

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Визуальный редактор элемента логотипа

Важно! Редактируемая область будет видна только в режиме правки. Компонент появится после создания документации.

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

Как определить какой фрагмент кода отвечает за компонент?

Вопрос рассмотрим на примере телефонного номера. Очень важна внимательность в работе, чтобы не удалить лишнюю строчку.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Определение кода области

Чтобы найти нужную область кода, кликаем на телефонный номер в выпадающем меню выбираем «проверить объект».

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Проверить объект

Появится код страницы и, наводя курсор мышки на соответствующую строку, под номером телефона появится отметка.

Далее повторяем тот же алгоритм, как описано выше при работе с логотипом. Для включения редактируемой области в каталоге header.php можно не повторять действия с компонентами. Просто копируем код, которым мы включили логотип и дублируем ниже. Обязательно меняем название документа, к которому будет обращаться программа.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка шаблона на редактируемые элементы

Мы уже определили код номера телефона – копируем фрагмент (строка 88-107).

В дальнейшем он будет удален из header.php. Будьте крайне внимательны при удалении в Битрикс. Ниже подсказка для копирования и самоконтроля.

<a href="tel:+74996854947" class="header-phone d-block">
                <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 578.106 578.106" style="enable-background:new 0 0 578.106 578.106;" xml:space="preserve">
                    <g>
                        <path d="M577.83,456.128c1.225,9.385-1.635,17.545-8.568,24.48l-81.396,80.781
                            c-3.672,4.08-8.465,7.551-14.381,10.404c-5.916,2.857-11.729,4.693-17.439,5.508c-0.408,0-1.635,0.105-3.676,0.309
                            c-2.037,0.203-4.689,0.307-7.953,0.307c-7.754,0-20.301-1.326-37.641-3.979s-38.555-9.182-63.645-19.584
                            c-25.096-10.404-53.553-26.012-85.376-46.818c-31.823-20.805-65.688-49.367-101.592-85.68
                            c-28.56-28.152-52.224-55.08-70.992-80.783c-18.768-25.705-33.864-49.471-45.288-71.299
                            c-11.425-21.828-19.993-41.616-25.705-59.364S4.59,177.362,2.55,164.51s-2.856-22.95-2.448-30.294
                            c0.408-7.344,0.612-11.424,0.612-12.24c0.816-5.712,2.652-11.526,5.508-17.442s6.324-10.71,10.404-14.382L98.022,8.756
                            c5.712-5.712,12.24-8.568,19.584-8.568c5.304,0,9.996,1.53,14.076,4.59s7.548,6.834,10.404,11.322l65.484,124.236
                            c3.672,6.528,4.692,13.668,3.06,21.42c-1.632,7.752-5.1,14.28-10.404,19.584l-29.988,29.988c-0.816,0.816-1.53,2.142-2.142,3.978
                            s-0.918,3.366-0.918,4.59c1.632,8.568,5.304,18.36,11.016,29.376c4.896,9.792,12.444,21.726,22.644,35.802
                            s24.684,30.293,43.452,48.653c18.36,18.77,34.68,33.354,48.96,43.76c14.277,10.4,26.215,18.053,35.803,22.949
                            c9.588,4.896,16.932,7.854,22.031,8.871l7.648,1.531c0.816,0,2.145-0.307,3.979-0.918c1.836-0.613,3.162-1.326,3.979-2.143
                            l34.883-35.496c7.348-6.527,15.912-9.791,25.705-9.791c6.938,0,12.443,1.223,16.523,3.672h0.611l118.115,69.768
                            C571.098,441.238,576.197,447.968,577.83,456.128z"/>
                    </g>
                </svg>
                <span>+7 (499) 685-49-47</span>
            </a>
     
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка шаблона по документам Битрикс

В папке include создаем файл number.php и переносим код компонента из хедера.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование шаблона

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

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Визуальный редактор кода

Для закрепления материала включим меню. Что понадобится нам в будущих уроках

Закрепление материала. Итоги

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

Такая система Битрикс позволяет видоизменять компоненты без риска испортить весь шаблона.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Разбивка страницы на отдельные папки

Копируем код меню из хедера (строка. 33—61) и переносим в созданный документ.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Создание элемента меню

Или воспользуйтесь подсказкой.

   
    <?$APPLICATION->IncludeComponent(
    "bitrix:main.include",
    "",
    Array(
        "AREA_FILE_SHOW" => "file",
        "AREA_FILE_SUFFIX" => "inc",
        "EDIT_TEMPLATE" => "",
        "PATH" => "/include/menu.php"
    )
);?>
Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Подключение меню

Подключаем компонент. Указываем правильный путь.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Хедер: редактируемые элементы

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

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Редактирование включаемой области меню

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

Помним, что редактируемые элементы в Битрикс видны только в режиме правки.

Создание сайта на Битрикс для новичков.|Создание компонента на 1С Битрикс | Компонент редактируемой области | #5
Режим правки Битрикс

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

Надеюсь, материал статьи будет полезен. Буду очень благодарен за комментарии и вопросы.

Продвижение сайтов в Яндекс и Гугл | Есть ли гарантии в SEO-продвижении? | Дорогой контекст

Гарантии в СЕО. Есть ли они? Стоит ли верить тем, кто обещает 100%-результат? Как проверить качество работы оптимизатора? Все ответы в сегодняшней статье.

Важно четко понять, что есть СЕО-продвижение. SEO – это инвестиции в будущее. А «вложил и быстро заработал» больше по части контекстной рекламы. Достаточно настроить рекламу, заплатить деньги и получать звонки. Единственный большой минус контекстной рекламы – безумно высокая стоимость.

Что лучше SEO или контекстная реклама?

В одном из моих видео подробно рассматривается вопрос Что выбрать: контекстную рекламу или сео-продвижение? Я всегда был сторонником контекстной рекламы, с нее стоит начинать. Быстрый старт, первые звонки за короткое время. А СЕО уже второй этап.

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

Почему СЕО – это лучшая инвестиция в будущее сайта?

SEO – это комплекс мер, которые позволяют сайту, расти: становиться удобным, полезным для посетителей, а значит интересным для поисковиков и рекламодателей. В результате чего сайт входит в топ-10 или находится на первых страницах в поисковой выдаче по популярным запросам.

Значение имеет все: контент; дизайн; ссылки (количество цитирований другими Интернет-ресурсами); качественный трафик и ключевые слова, время, проведенное посетителями на сайте, и действия, совершенные ими; соцсети и так далее. Каждый пункт заслуживает отдельного внимания. И в будущем я расскажу подробно о принципах работы и степени влияния перечисленных факторов.

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

Универсальные правила СЕО. Существует ли рецепт успеха?

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

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

Через полгода я сделал еще один классный сайт по загородному строительству для другого клиента. Имея успешный опыт, я был уверен в результате. Та же стратегия, те же действия и те же деньги вкладывались в развитие. Определенное продвижение наблюдалось, но нужные запросы стояли на месте. Что я сделал не так…?

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

Вышесказанное еще раз подтверждает случай на семинаре по СЕО-оптимизации. У меня была возможность беседовать с человеком, чьему мнению стоит верить. На вопрос: «что нужно поисковику, чтобы сайт взлетел?». Последовал неожиданный ответ, что даже сотрудники Яндекса этого не знают. За всю историю Яндекса, более 20 лет, над обновлениями поисковой программы трудилось не одно поколение разработчиков, алгоритмы не раз менялись и переписывались, поэтому определенного рецепта успеха нет. А если бы он существовал, то компании Яндекс или Гугл сделают все возможное, чтобы информация не попала в посторонние руки.

Самые большие мифы

Продвинем сайт за 2-10 месяцев в топ!!!

Невозможно выбиться в топ за такое короткое время «честным путем». Получится достигнуть желаемого за короткое время, прибегнув к «черному СЕО». Когда на сайт покупаются дешевые ссылки, накручиваются посетители и еще ряд обманных маневров. Такие приемы работают и дают определенную отдачу, но не долго. Это путь в никуда. Домены, IP светятся на нежелательных ресурсах, сайт приобретает негативную репутацию. В любой момент может попасть под фильтр поисковика. А купленные посетители не делают покупки.

Вернем деньги, если не будет результата!!!

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

Гарантируем звонки и покупателей!!!

Любой, уважающий себя, оптимизатор не станет называть точные цифры. Контекстная реклама, СЕО или SMR – это своего рода творчество. Никто не может предугадать, как зайдет определенная фишка. Это все равно что просить гарантировать повышение продаж у Первого канала или Авито после размещения самой дорогой рекламы. Следует понимать, что их первоочередная задача, чтобы Вас было видно как можно большей целевой аудитории. А реклама со 100% результатом – это совсем другие деньги. Так как и задача оптимизатора: показать сайт действительно заинтересованным пользователям.

Как контролировать работу СЕО-оптимизатора, будучи полным «чайником»?

Исходя из вышесказанного, СЕО-специалист не может гарантировать результат. Неужели придется работать на доверии? Как платить деньги сегодня, если прибыль последует даже не завтра?

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

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

Надеюсь, статья была полезной и познавательной.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

На прошлом уроке мы создали папку с темой. Подключили футер и хедер. А контент, папка index.php (главный файл), остался без изменений. Напомню, что футер и хедер подключаются идентично, из активной темы.

Продолжим. Переносим шаблон в корень сайта.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 1: Разбивка макета на элементы

Заходим в макет и открываем следующие папки.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Из файла index.html следует скопировать код полностью и перенести в index.php вместо «контент» (5строка). В дальнейшей работе index.html не понадобится – закрываем.

Подготовим футер и хедер. Из файла header.php удаляется 5 строка – «Хедер!»; из fоoter.php – 4 строка, «Футер». После обновления шаблон выглядит как на слайде.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Так как ничего не подключено (стили, скрипты), страница получила такое оформление.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Рассмотрим шаблон более детально. Откроем исходный код: левой кнопкой мышки – выпадающее меню «исследовать объект». Выводится код шаблона из трех элементов: футер, хедер и контент.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Первоочередная задача – разбить макет правильно и разнести соответствующие фрагменты кода шаблона по нужным файлам. Код можно копировать через вкладку «исследовать объект» или работать в index.php, куда ранее был скопирован код шаблона.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

 Обращаю внимание, что хедер часто содержит картинки и видео. Следует убедиться, что элемент скопирован полностью. В данном шаблоне копируем код с 7 до 90 строчки включительно. Переносим информацию в файл header.php, из файла index.php удаляем.

Аналогично переносим код в файл fоoter.php – копируем с 68 по 96 строку включительно. Из index.php вырезаем ненужный фрагмент. Сохраняем все изменения. На странице видимых изменений не произойдет, а значит все подключено правильно.

Футер и хедер закрываем. Эти элементы едины для всех страниц – будут выглядеть одинаково на каждой странице.

Шаг 2: Выводим Title

На начальном этапе title выводится из шаблона, а должен – из CMS.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Редактируем код, начиная с 13 строке. Открываем php без эхо, так как объект APPLICATION в любом случае будет выводиться.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Вызываем ShowTitle у объекта APPLICATION – и проверяем результат.

<title><?php $APPLICATION->ShowTitle(); ?></title>

Шаг 3: Подключаем стили

Редактируем код с 14 строчки по 18-ю до строчки 19 – «/head».

Открываем php код, прописываем addCss. Чтобы не писать постоянство имен для каждого стиля, импортируем путь при помощи метода use. То есть параметру переданному методу прописываем путь к скрипту. Также прописывается константа SITE_TEMPLATE_PATH, которая возвращает путь к активному шаблону, чтобы Битрикс понимал, что и где лежит. И добавляем путь к стилю. В данном случае используется 4 стиля – копируем код и прописываем соответствующий путь. Не забываем поставить итоговый слеш. Код, обозначенный синим маркером, после редактирования следует удалить.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Ниже готовая подсказка. Замените содержимое строк 14-18 готовым кодом ниже.

<?php 
       use \Bitrix\Main\Page\Asset;
    ?>
    
    <title><?php $APPLICATION->ShowTitle(); ?></title>
    
    <?php 
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/normalize.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/owl.carousel.min.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/main.css");
        Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . "/css/responsive.css");
    ?>

Также следует перенести содержимое темы (видео, картинки и т.д) в папку teh.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 4: Адаптируем под мобильные устройства

Выводим meta name=veiwport – метатег, позволяющий контролировать видимую область сайт для мобильных браузеров. Простым языком: позволяют приспособить сайт для удобного просмотра при помощи мобильного телефона и других гаджетов с разным разрешением экрана.

10-12 строки удаляются. Отредактированный код вставляем после шрифтов. Также используем метод Asset но вместо addCss пописываем addString – выводит произвольный код, произвольную строчку, скрипты. Копируем код макета. Вторая строка для Интернет-Экспл.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
<?php 
        Asset::getInstance()->addString('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">');
        Asset::getInstance()->addString('<meta http-equiv="X-UA-Compatible" content="ie=edge">');
?>
 

Таким же способом подключаются шрифты Google Fonts. В скобках ставится Google Fonts и прописывается ссылка. Напоминаю, что двойные кавычки главнее одинарных.

Команда APPLICATIOH – Show – выводит все шрифты, стили, скрипты. Метод обязателен, иначе на странице ничего не появится.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
    <?php 
       use \Bitrix\Main\Page\Asset;
       $APPLICATION->ShowHead();
    ?>   

Шаг 5: Подключаем скрипты

Часть скриптов находится в футере. Из хедера копируем код, при помощи которого подключались стили. Находим исходный код скриптов, вставляем ниже. Прописываем команду Js (красный маркер), копируем ссылку из кода выше. Первоначальный фрагмент шаблона со скриптами можно удалить.

Обязательно команда APPLICATIOH – Show (зеленый маркер), так как в данном случае скрипты находятся в футере и хедере, хотя обычно подключаются из футера.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Чтобы получить прокрутку, можно добавить больше картинок в файл index.php.

Шаг 6: Как вывести изображение и подключить логотип

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
<?=SITE_TEMPLATE_PATH;?>/

Также выводим изображения в футере и логотип.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 7: Как отобразить видео

Видео находится в хедере – 92 строка. Путь прописан настолько нестандартно, что даже у опытных пользователей могут возникнуть серьезные затруднения. Константа вставляется после двоеточия.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 8: Подключенте рабочей панели Битрикс

Конечно, можно войти в админку Битрикс, но пропишем в коде. За подключение панели отвечает метод APPLICATIOH – Show Panel. Вставим код после «body»-32 строка.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
<div id="#panel"><?php $APPLICATION->ShowPanel();?></div>

После обновления появится окно для входа администратора. Переходим по вкладке «Сайт» – рабочая панель появилась.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

Чтобы окончательно разобраться в принципе работы Битрикс, рассмотрим код страницы через google. Копируем адрес сайта, заходим через Гугл, в выпадающем меню левой кнопки мышки выбираем «просмотреть код страницы».

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Для правок такая оптимизация достаточно неудобная. На рабочей панели во вкладке «Настройки» – «настройка модулей» есть возможность отключить объединение элементов в один документ.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Шаг 9: Отключаем кеширование

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

Шаг 10: Как создавать страницы и разделы

На админпанели Битрикс перейти на вкладку «Сайт» – «Создать страницу», в выпадающем меню выбираем соответствующий пункт. В появившемся окне вводится имя страницы. Зеленым обозначено имя файла этой страницы в корне сайта через Файлзилла.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Нажимаем «Далее», в следующем окне ничего не заполняем и кликаем «Готово». Откроется окно редактирования страницы.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4
Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

По идентичному алгоритму создается новый раздел. В описание раздела ничего не меняем, остается стандартный текс. В зеленой рамке имя папки в Битрикс (прописывается автоматически).

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Соответствующий файл и папку теперь можно найти в корне сайта через FileZilla.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

Смотрим код страницы.

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

Создание сайта на Битрикс для новичков.| Натяжка верстки Bitrix.| Перенос верстки на шаблон.|#4

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

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

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

Переходим на сайт 1С Битрикс – dev.1c-bitrix.ru.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

На сайте 1С Битрикс в разделе «Разработчикам» выбираем меню «Документация» и «Управление сайтом».

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Находим вкладку «Разработчикам» и пункт «Интеграция дизайна». На открывшейся странице слева в разделе «Интеграция Дизайна» выбираем пункт «Верстка базового шаблона». Пошагово показано ниже на слайдах.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Элементы шаблона

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

Основные элементы страницы:

  1. Header – в простонародье шапка сайта, дает общее понимание о содержимом сайта. Выполняет роль навигатора. Обычно содержит главные разделы. Интернет-магазины также в шапке размещают формы заказов, контакты, вход в личный кабинет, чтобы у потенциального клиента все было под рукой.
  2. Контент – основная информационная часть. Содержит все статьи, товары, фото, видео, опросы, бланки заказов, формы обратной связи, перечислять можно до бесконечности.
  3. Sidebar – блок справа или слева. Возможен вариант с двумя сайдбарами. В отличие от контента, сайдбар не меняется, а дублируется на каждой странице. Часто содержит рекламные блоки и боковое меню.
  4. Footer или «подвал» – делает страницу завершенной. Также может содержать дополнительную справочную информацию, разделы и т.д.
Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

В отличии от WordPress, в Битрикс не предусмотрен сайдбар.

На примере главной страницы сайта рассмотрим, как работать с элементами. Через FileZilla заходим в корень сайта и находим папку index.рhр. Как работать с файлами через FileZilla подробно в уроке №2.

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

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Хедер и футер находятся в корне папки «Активные темы», из нее и подключаются. Ниже идет вызов компонентов: «Наша продукция», «Новости», «Наши услуги» и т.д. Детальнее познакомимся в следующих уроках.

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

Путь к нужной теме пошагово:

  1. Заходим в папку bitrix;
  2. Ищем папку templates, заходим;
  3. Наша тема называется Furniture blue, заходим.
Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

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

Сначала входим в папку header.php и в код хедера добавим название элемента на кириллице.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Сохранить и обновить страницу на сайте.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

В той же последовательности вносим изменения в футер (соответствующая папка выше).

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

После обновления страница будет выглядеть следующим образом.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Контент находится в файле index.php в корне сайта. Все действия аналогичны.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Внести изменение можно в любой области элемента, достаточно найти соответствующий отрезок кода.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3
Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Таким образом: хедер и футер находятся в общем шаблоне, контент лежит в корне сайта.

Создание шаблона

Есть два варианта создания шаблона: с админки и с корня сайта. Документацию сайта создаем через корень сайта и через админку включим его – такой алгоритм рекомендуют разработчики Битрикс.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3
Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

В корне сайта создаем новую папку под названием local. Важно не забывать, что в папке bitrix корректировки не вносятся.

Создаем тем же способом основу будущего шаблона в виде цепочки папок.

  • Папка local, вход;
  • Создать папку template, вход;
  • Создать папку teh – так будет называться шаблон, вход;
  • Создаем файлы: header.php, footer.php, description.

Важно!!! Если открыть хедер или футер из папки bitrix (как это сделать смотрите в начале урока) первое, что стоит в коде – это константа. Своеобразная проверка, которая ограничивает доступ к данным блокам. Другими словами: без константы посетители могут обращаться к хедеру или футеру напрямую и видеть все папки, строение сайта.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

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

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
IncludeTemplateLangFile(__FILE__);
?>
Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

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

Содержимое файла description.php копируем из шаблона в файле bitrix.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

На слайде выше зеленым маркером указан путь к нужному файлу. Или используйте код ниже.

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
IncludeTemplateLangFile(__FILE__);
?>
<?$arTemplate = Array(
	"NAME"=>  'Шаблон техники', 
	"DESCRIPTION"=> 'Короткое описание шаблона'
);?>
Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Файл должен иметь следующий вид: константа (копируем из созданных ранее файлов) и код скопированный из одноименного файла в корне файла bitrix.

Задаем значение, обозначенных элементов: 1 (название) и 2 (характеристики).

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Непривычное написание команд большими буквами, хотя логичнее написание php маленькими. Битрикс создан в 1998 г. Самая старая в мире CMS – более 20 лет. Скорее всего, такое написание команд является пережитком прошлого, когда кодили с CapsLock.

Перед подключением шаблона следует почистить файл index.php. Файл должен содержать следующий код.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3
<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Мебельная компания");
?>
<p>Контент</p>
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

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

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

В зеленой рамке можно увидеть визуальную версию папки local.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Следующий шаг – вывести превью (выделено красной рамкой). Необязательно, но знание понадобиться в будущем.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Открываем изображение и в выпадающем меню (правая кнопка мыши) выбираем «Проверить объект».

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Уточняем месторасположение объекта и название.

Важно!!! Название и расширение должны быть идентичными, иначе изображение не подключится.

Заранее подготовленную картинку переименовываем в соответствии с требованием Битрикс и «перетягиваем» прямо с Рабочего стола в шаблон.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Обновляем страницу администрирования Битрикс – в шаблоне появилась картинка.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Чтобы включить шаблон, переходим к списку сайтов в меню слева «Сайты».

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3
Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

Проверяем, как выглядит новый шаблон.

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3
Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

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

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

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

Создание сайта на Битрикс для новичков. | Создание своего шаблона. Документация. | #3

На выходе должен получиться чистый шаблон с пустыми инфоблоками. Подробно остановимся на теме «Инфоблоки» в одном из следующих видео. В ходе урока мы научились создавать и подключать тему. В следующем видео продолжаем натягивать верстку.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Для чего нужна FileZilla
Следующий этап обучения начнем с настройки FileZilla. Это FTP-клиент, и он находится в свободном доступе. Один из самых простых и многофункциональных менеджеров файлов, который поможет скачать или загрузить файлы с FTP-серверов, легче и быстрее находить и редактировать их. Если Вы хотите узнать подробнее, где лучше скачать и как установить FileZilla, пишите в комментариях и я расскажу об этом в одном из следующих видео.

Чтобы подключиться по удаленному серверу через FTP-клиента FileZilla понадобится логин и пароль. На Макхосте необходимые данные находятся в левом меню «Мой аккаунт» во вкладке «Пароли аккаунта».

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

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

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

С вкладки «Пароли аккаунта» (слайд выше) копируем Хост, Имя пользователя (логин), пароль и вставляем в настройки подключения через FileZilla (слайд ниже).

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

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Справа в разделе «Удаленный сайт» в папке httpdocs будет находиться вся информация сайта распределенная по отдельным папкам.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Создание и редактирование блоков сайта

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

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Основные вкладки необходимые для работы:

  1. Создание и изменение разделов и страниц;
  2. Сбросить, обновить кеш – очень нужная опция. На время разработки сайта рекомендуется отключать.
  3. Режим правки – возможность редактировать все элементы страницы, содержание статьи, добавить (удалить) пункт меню или изменить его название. Ниже рассмотрим детальнее.
  4. Свернуть или развернуть панель.

Чем Битрикс отличается от классической CMS

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

Детальнее о редакторе

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

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Одно нажатие кнопкой мышки – и в другом окне можно редактировать или полностью заменить текст. По завершению СОХРАНИТЬ.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

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

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

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

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Все изменения отображаются сразу после сохранения. Разделы меню двигаются при помощи мыши.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Добавить новости и выбрать категорию.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

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

Визуальный режим редактора

Рассмотрим визуальный режим редактора. Текст в виде HTML – кода. Изменение не самого содержания статьи, информации, а оформления. Другими словами, при помощи кода можно вставить ссылку разделить текст на абзацы и тд.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

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

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Справа расположена боковая панель «Компоненты». Более детально будем изучать позже. В данном случае компонентов мало. Так как для урока используется простая демоверсия. Чем дороже и сложнее версия, тем больше компонентов будет на панели.

Структура Битрикс: разрыв шаблона

Рассмотрим структуру Битрикс на примере раздела «О компании». Сам код в корне сайта найти крайне сложно. Пользователей изначально удивит местоположения файла. Править блоки можно и проще, как показано выше. Но и такой доступ в дальнейшем понадобится.

Возвращаемся к FileZilla. Ищем папку company.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Увидеть путь к нужному файлу можно и в оглавлении окна редактора. (Выделено зеленым квадратом на предыдущем слайде).

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Открываем index.pxp.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

Непривычное расположение. Что-то лежит так, другая часть в базе. С большим объемом материала сложно. Элементы хранятся в отдельных папках, работать над каждым будем отдельно. Терпимо, если речь идет о сайте-визитке или небольшом простом сайте, который мы будем создавать в ходе обучения. Большие информационные порталы, Интернет-магазины править таким способом неудобно. Но как уже упоминалось, подобная структура позволяет ускориться, что особенно актуально для тяжелых сайтов с внушительным количеством подразделов. При просмотре сайта нагрузка на базу данных значительно меньше, файлы показываются напрямую и сайт не «виснет», быстро загружаются элементы страницы.

Создание сайта на Битрикс для новичков. | Знакомство с админкой Bitrix. Структура файлов. | #2

В файле видны все компоненты, с которыми мы ознакомимся. Рассмотрим, как подключили Header и Footer, необычное расположение картинки. Но об этом более детально в других уроках.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

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

Наша задача в этом уроке натянуть готовую верстку на Битрикс.                                                      

Начнем с установки Битрикса.

Для установки Битрикс я использую Mchost.ru.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Панель хостинга

Основной особенностью сайта является возможность установки Bitrix без дополнительных скачиваний, и мы можем установщик поставить прямо из хостинга.
Лицензия Битрикса  платная, можно купить минимальный тариф  за 5500 рублей. Но так же можно в течении 30 дней бесплатно потестить эту CMS. Я Вам показываю на бесплатной  лицензии на 30 дней.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Установка приложения.
Заходим на главную страницу Mchost.ru.

Ищем 1С Битрикс. Загружаем.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

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

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Создаем базу данных и подключаем домен.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Ждем подключения базы.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

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

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Устанавливаем Битрикс, пока загружается база.
Выбираем самую простую Старт.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Далее в установке нет ничего сложного.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Заполняем все поля.
Добавляем ранее созданную базу, имя пользователя, пароль. Выбираем существующую базу данных.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

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

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Выбираем решение для установки (вообще в принципе без разницы что выбрать).

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Выбор темы.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Далее все тоже оставляем как есть.

Переходим на сайт.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

Чтобы перейти в админ панель – нужно вести домен сайт/bitrix/  Затем вести логин и пароль.

Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1
Создание сайта на Битрикс для новичков | Установка Bitrix на хостинг | #1

На этом я хочу закончить этот урок.