ВНИМАНИЕ! Каждый покупатель BXReady имеет полное право на бесплатную установку!
Для этого просто обратитесь в техподдержку http://support.kuznica74.ru
Но, если же вы решили выполнить установку самостоятельно, мы дадим несколько ценых советов тем, кто устанавливает решение с нуля (т.е. установка Битрикс + сайт BXready)
Установку платформы вы можете выполнить в соответствии с документацией
После того как вы получили все купоны, перейдите на страницу
Маркетплейс - Обновление решений
и введите все купоны поочередно на вкладке "Активация купона"
В настоящий момент помимо основного купона вам также доступы три специализированных купона на рекламные модули
Загрузите модули, которые представлены на рисунке ниже
после того, как все модули загружены - последовательно выполните их установку.
убедитесь, что модуль BXReady: Корпоративный сайт установлен
После этого можно Запускать мастер установки и настройки решения BXReady: Корпоративный сайт
Мастер установки
Для запуска мастера установки перейдите в раздел
Настройки - настройки продукта - список мастеров
Запустите мастера установки BXReady
Пройдите все шаги мастера установки
Выберите сайт
Выберите вариант шаблона (в настоящий момент их уже 10)
Выберите вариант компоновки шапки вашего сайта
Выберите вариант меню
Выберите цветовую схему вашего сайта
Дождитесь окончания установки
Если вы все сделали верно, то ваш BXReady готов к работе и вам остается только наполнить его контентом и отредактировать содержимое
Адаптивность
На любом современном сайте списки элементов – это самый привычный для нас объект.
Списки могут выглядеть как плитка элементов (рисунок 1), могут быть и другие варианты представления списков
А еще списки могут выстраиваться в слайдеры (рисунок 2)
Но важно, что в каждом списке существует свой формат отображения элемента (мы называем это представление) Рисунок 3
Например это может таким форматом элеметов (Рис 4 и рис 5)
Но в то же время мы предусмотрели для разработчиков возможность добавления ЛЮБОГО СВОЕГО НОВОГО ПРЕДСТАВЛЕНИЯ в систему. И вы сможете создавать свои списки со своим форматом элементов с минимальными доработками.
И этому мы уделим особое внимание, мастер-класс уже готовим. НО уже сейчас я могу с уверенностью сказать, что мы позаботились о КОМФОРТЕ ВЕБ-РАЗРАБОТЧИКА.
Вернемся к адаптивности
Адаптивность. Это то, без чего сейчас стало не просто трудно, но и невыносимо, если верить гуглу :)
В BXReady адаптивность соответствует стандарту Bootstrap и более того
Практически все компоненты BXReady поддерживают ЕДИНЫЙ СТАНДАРТ АДАПТИВНОСТИ, который позволяет управлять списками элементов практически в один клик на уровне настроек (рисунок).
А знаете, как приятно работать контент-менеджеру с нашим продуктом? Просто посмотрите 5 минут ЧИСТОЙ ПРАКТИКИ, а еще в конце видео есть бонус демонстрация других возможностей BXReady.
Рекламные возможности BXREady
BXReady: Корпоративный сайт содержит самый богатый арсенал рекламных возможностей, которые разработаны специально для сайтов, работающих на платформе 1С-Битрикс. И это является неоспоримым конкурентным преимуществом для тех, кто использует наше решение.
Уже сейчас поддерживаются такие возможности как:
Пять полнофункциональных баннерных площадок
Всплывающие баннеры и реклама
Всплывающие иконки
Фоновая реклама (уникальное решение, в сочетании с которым вы можете еще и преображать свой сайт)
Все эти задачи осуществляются благодаря тому, что в комплект решения входит полноценный рекламный комплект из трех модулей: "Баннеры и реклама Про", "Всплывающие баннеры и реклама", "Фоновая реклама", который поставляется покупателям BXReady БЕСПЛАТНО.
Решение настроено так, что для работы с любым типом рекламы вам достаточно лишь установить модуль. Программирования не требуется.
Для настройки баннерных площадок существует даже специальный мастер настройки.
Рекламные площадки и баннеры
BXReady: Корпоративный сайт содержит пять рекламных площадок, которые транслируют баннеры, публикуемые модулем "Реклама, Баннеры" (на редакция !C-Битрикс: Управление сайтом: Эксперт и выше) на всех остальных редакциях модулем "Баннеры и реклама Про" (поставляется бесплатно с решением)
Список площадок
[TOP] Верхняя рекламная площадка
[BOTTOM] Нижняя рекламная площадка в футере
[CATALOG_TOP] Верхняя площадка в каталоге
[CATALOG_BOTTOM] Нижняя площадка в каталоге
[COLUMN] Площадка в столбце
Схема расположения баннерных площадок
Централизованное управление баннерами
Независимо о того, есть или нет баннеры к показу в той или иной рекламной площадке, можно отключить площадки с единого пульта управления или поменять режимы работы
Для этого перейдите в Настройки - Модули - BXReady: Корпоративный сайт
и укажите режим работы той или иной баннерной площадки
Режимы работы баннеров
Каждая из баннерных площадок может быть отключена
Или работать в одном из нескольих режимах:
Статический
Адаптивный
Отличие режимов состоит в том, что в адаптивном режиме публикуемые баннеры изображения подстраиваются пропорционально размеру рекламной площадки
В статическом - баннеры публикуются в размерах, соответствующих оригиналу
Как настроить баннерные площадки
Для настройки баннерных площадок существует специальный мастер настройки
Перейдите в список мастеров, найдите в списке мастер с кодом alexkova.corp.adv.settings и запустите его
Мастер создаст пять площадок с указанными кодами и установит для них демо банеры.
Всплывающие баннеры и реклама
Для покупателей решения BXReady: Современный корпоративный сайт также поставляется бесплатно модуль "Всплывающие баннеры и реклама"
Интеграция данного модуля с решением бесшовна
Т.е. фактически не требует никакого программирования
Подробнее о том, как вы можете использовать на своих проектах всплывающие баннеры и рекламу вы можете прочитать в курсе "Всплывающие баннеры и реклама"
Всплывающие иконки
Особая возможность модуля "Фоновая реклама"
Фоновая реклама
При переключении вашего сайта в режим работы шаблона с фиксированной шириной у вас появляется возможность высвободить фоновое пространство для особого вида рекламы - фоновой
Трансляция фоновой рекламы осуществляется благодаря модулю "Фоновая реклама".
Данный модуль интегрируется бесшовно и практически не требует настройки при установке.
Несколько самых распространенных примеров использования модуля в решении
Можно просто менять фон в зависимости от раздела или даты публикации
Можно запeскать фоновую рекламу партнеров или клиентов
В решении предусмотрен тюнинг шапки в зависимости от ваших предпочтений
Поэтому в типовой мастер установки мы внесли лишь 10 из нескольких сотен вариатов, не считая тех, что вы можете получить тюнингуя CSS по свои стили.
Представленные ниже скриншоты выполнены только в одной единственной цветовой схеме. Подробнее про цветовы схемы вы можете ознакомиться на странице, где описаны варианты работы с цветовыми схемами
классическая широкоформатная
Классическая с фиксированной шириной (вы можете использовать данную схему совместено с модулем Фоновая реклама)
Цветная шировкоформатная
Цветная с фиксированной шириной (вы можете использовать данную схему совместено с модулем Фоновая реклама)
Темная широкоэкранная
Темная с фиксированной шириной (вы можете использовать данную схему совместено с модулем Фоновая реклама)
Светлый камень широкоформатная
Светлый камень с фиксированной шириной (вы можете использовать данную схему совместено с модулем Фоновая реклама)
Темная материя широкоформатная
Темная материя с фиксированной шириной (вы можете использовать данную схему совместено с модулем Фоновая реклама)
Типы областей header
На момент выпуска в решении предусмотрено 3 типа шапки.
Комбинированная с лого, в строенным в меню поиском, быстрыми ссылками и контактной информацией
Комбинированная шапка с лого, меню и контактной информацией
Шапка только с лого и меню.
Внимание! В данном разделе документации описаны только выпущенные в первой версии продукта варианты. Но в виду того, что документация может не учитывать обновлений, вы можете учтонять данные вопросы у наших менеджеров.
Типы меню
На момент выпуска в решении предусмотрено 4 типа меню (приведенные ниже скриншоты меню сделаны только в одной цветовой схеме).
Цветное
Светлое
Полупрозрачное темное
Комбинированное полупрозрачное темное с цветом
Внимание! В данном разделе документации описаны только выпущенные в первой версии продукта варианты. Но в виду того, что документация может не учитывать обновлений, вы можете учтонять данные вопросы у наших менеджеров.
Цветовые схемы
Что делать, если вам захотелось тюнинговать сайт, сменить его цветовую схему, детализировать какие то мелочи или настройки CSS?
Вариантов выполнения данных задач можно найти много, для этого достаточно знания фреймворка 1С-Битрикс.
Но тем не менее, мы постарались предусмотреть основные операции и помочь вам.
Для начала цветовые схемы:
Какой бы цвет вы ни установили, вам на самом деле доступны все цветовые схемы в процессе работы.
CSS настройки схем находяться в папке colors шаблона.
На момент написания данной статьи их было 19.
Откройте файл header.php шаблона, найдите строку подключения цветовой схемы в секции head
и просто поменяйте на нужную вам.
Данная операция занимает лишь несколько минут.
Вопрос тюнинга
Давайте представим, что вам понадобилось дополнительно тюниговать CSS.
В 1С-Битрикс мы могли бы взять и поправить стили шаблона или стили цветовой схемы.
Но мы предлагаем вам два варианта тюнинга, которые вообще не затронут решения и в любой момент вы сможете вернуться к дефолтным установкам.
Вариант 1: CSS Патч.
Все очень просто
Добавьте в секции head
после строки с подключением цветовой схемы (см. скрин выше)
строку
где my_css.css - ваш собственный файл настроек css
Обратите внимание на второй параметр SetAdditionalCSS равный true
Благодаря ему ваш css будет подключен с конца и перекроет все предыдущие стили.
Далее - все понятно :) просто тюнингуйте стили на свой вкус.
Вариант 2. Собственная цветовая схема
Этот вариант более интересный и гибкий и основан он в первой очереди на архитектуре BXReady
Делаем копию исходной цветовой схемы
просто скопируйте ту схему, которую будете тюнинговать
Например, берем съему color_river.css и копируем ее, создавая новую схему color_river_new.css
Далее все еще проще
Просто меняем в файле header.php описание подключаемой цветовой схемы на наше
И теперь можно смело тюнинговать вашу новую цветовую схему.
P.S. Описывая данный типтрик мы руководствовались следующими принципами
в первую очередь потребностями разработчиков, которые будут внедрять наш магазин
во вторую: правилом пяти минут (все можно сделать быстро и просто)
в третью руководствовались желанием сделать так, чтобы разработчикам не требовалось вмешательства в логику продукта и нашего решения
Кстати, все, что мы описали, мы заложили еще на этапе проектирования. А таких мелочей в BXReady еще много,всех не сосчитать :)
Колонка с вертикальным меню
В решении может использоваться левое или правое положение колонки с вертикальным меню и дополнительной информацией, а также несколько типов вертикального меню
Расположение
Расположение переключается в настройках модуля
Настройки - Модули - BXReady: Корпоративный сайт
Шаблоны вертикального меню
В решении в базовой версии предусмотрено два шаблона вертикального меню
Аккордеон
И всплывающее вертикальное
При установке по умолчанию включается меню аккордеон
Для смены типа меню - просто переключите шаблон компонента меню для вертикального меню
Настройка собственного представления и тюнинг шаблона сайта
документация формируется
Визуализация элементов. Спецтехнологии
Как часто вашему контент-менеджеру приходилось сталкиваться с проблемами верстки тех или иных элементов
Как часто разработчику приходилось дублировать один и тот же HTML, когда работа велась с компонентами, выводящими списки элементов ?
А вы встречали такую ситуацию, когда для того, чтобы изменить представление элементов на сайте приходится менять коды всех шаблонов, где этот элемент использовался. Хорошо, если таких участков немного, но по нашему опыту, иногда переверстка выливается в копеечку.
А ведь на самом деле все устраняется просто.
На BXReady есть всего лишь несколько принципов, которые решают эти проблемы
·Один и тот же элемент, где бы не использовался на сайте, может выглядеть совершенно одинаково, т.е. иметь свое представление.
·Изменение представления должно автоматически привести к синхронному изменению вида элемента на всех участках сайта
·А еще мы добавили настраиваемые представления. Когда один и тот же тип элемента может иметь сотни вариаций и каждый может тюнинговать представление на свой вкус
·И самое главное: Обеспечить разработчикам сайта КОМФОРТНУЮ работу с элементами (для них есть особая вкусность)
Но говорить о представлении элементов не упомянув такое понятие как «СПИСКИ ЭЛЕМЕНТОВ» нельзя
Т.е. на BXReady вы можете в любом месте вывести информации из инфоблока в виде адаптивного списка или слайдера, быстро настроить нужное представление элементов, имея богатый выбор вариаций.
При работе со списками поддерживаются и адаптивность и композит
Списки вы можете использовать на различных участках проекта, для этого есть всего один универсальный компонент
А вкусность для разработчиков состоит в том, что мы создали для них готовые интерфейсы для создания и подключения своих собственных представлений.
Выпуски с мастер-классами создания таких представлений мы обязательно опубликуем. И не забывайте
А также мы поддерживаем консультативно наших партнеров и помогаем им советом, как решить ту или иную задачу оптимальнее.
Партнерские фиксации управляемых представлений (супер механизм, который позволит централизовать управления видами товаров на ЛЮБОМ участке вашего сайта с помощью наших управляемых представлений). Как создать свое представление на базе управляемого
Отличия представлений
Управляемые представления
Это такие представления, формат показа которых возможен не в одном варианте, а зависит от каких то настроек. Т.е. вы можете управлять внешним видом такого представления и в зависимости от настроек вам доступно множество вариантов.
Например посмотрите на настройки классического блока
А вот так выглядят настройки горизонтального image-flat блока.
Состав представлений может меняться со временем. Намечен выпуск новых, модернизация текущих. Но принцип их работы неизменен. Все списки элементов на сайте должны поддерживать централизованное управление представлениями.
Основные отличия представлений
В отличие от управляемых статические дают всегда одну и ту же картинку и не имеют возможностей настроить вариации.
И у тех и у других свои плюсы и минусы. Мы в своем решении одинаково любим и уважаем каждое из них.
Вернусь к управляемым представлениям.
Управляемых представлений не так много (из числа официально используемых в компонентах), но они покрывают большую часть задач по показу элементов в списках. Названия для них мы подобрали на свой вкус.
Также в системе предусмотрена возможность быстрой интеграции своих представлений элементов. Благодаря чему любой партнер и любой разработчик может быстро добавить любое представление на свой вкус, если типовых ему окажется недостаточно. И все это без кастомизация и С ПОЛНЫМ СОХРАНЕНИЕМ ТЕХПОДДЕРЖКИ!
Как переключаются представления
Универсальное представление элемента инфоблока
документация формируется
Горизонтальный flat- или image-элемент
Настройки
Горизонтальный flat- или image-элемент:
Горизонтальный элемент лучше всего применять для отображения инфоблоков с анонсами, например, новостей или услуг. Горизонтальный элемент состоит из картинки, расположенной слева, и названия, расположенного справа. По желанию, картинка может быть заменена на glyphicon, а также может быть добавлен текст в виде анонса.
Доступные настройки элемента:
Выводить кнопку/ссылку на элемент
Да
Нет
Надпись для кнопки/ссылки
Использовать рамку у блока
Да
Нет
Цвет фона элемента
Прозрачный
Темный цветной
Белый
Ширина изображения в % (относительно всей ширины элемента)
Форма пространства под изображение
Квадрат
Окружность
Квадрат со скругленными углами
Без фона
Цвет рамки изображения
Светлая
Темная
Без рамки
Тип изображения
Картинка
Фон картинки
Темный фон
Белый фон
Прозрачный фон
GlyphIcon
Класс символа
Тип GlyphIcon
Темный фон
Белый фон
Прозрачный фон
Размер шрифта
Выводить анонс
Да
Нет
Выводить дополнительные кнопки для элемента
Да
Нет
Примеры
Белый элемент с картинкой
Установленные настройки:
Выводить кнопку/ссылку на элемент: Нет
Использовать рамку у блока: Да
Цвет фона элемента: Белый
Ширина изображения в % (относительно всей ширины элемента): 30
Форма пространства под изображение: Квадрат со скругленными углами
Цвет рамки изображения: Без рамки
Тип изображения: Картинка
Фон картинки: Белый фон
Выводить анонс: Да
Выводить дополнительные кнопки для элемента: Нет
Белый элемент с glyphicon
Установленные настройки:
Выводить кнопку/ссылку на элемент: Нет
Использовать рамку у блока: Нет
Цвет фона элемента: Белый
Ширина изображения в % (относительно всей ширины элемента): 30
Форма пространства под изображение: Квадрат
Цвет рамки изображения: Темная
Тип изображения: GlyphIcon
Класс символа GlyphIcon: glyphicon-send
Тип GlyphIcon: Белый фон
Размер шрифта для GlyphIcon: 80
Выводить анонс: Да
Выводить дополнительные кнопки для элемента: Нет
Темный элемент с картинкой
Установленные настройки:
Выводить кнопку/ссылку на элемент: Нет
Использовать рамку у блока: Да
Цвет фона элемента: Темный цветной
Ширина изображения в % (относительно всей ширины элемента): 40
Форма пространства под изображение: Окружность
Цвет рамки изображения: Без рамки
Тип изображения: Картинка
Фон картинки: Белый фон
Выводить анонс: Да
Выводить дополнительные кнопки для элемента: Нет
Темный элемент с glyphicon
Установленные настройки:
Выводить кнопку/ссылку на элемент: Нет
Использовать рамку у блока: Да
Цвет фона элемента: Темный цветной
Ширина изображения в % (относительно всей ширины элемента): 30
Форма пространства под изображение: Окружность
Цвет рамки изображения: Без рамки
Тип изображения: GlyphIcon
Класс символа GlyphIcon: glyphicon-send
Тип GlyphIcon: Белый фон
Размер шрифта для GlyphIcon: 88
Выводить анонс: Нет
Выводить дополнительные кнопки для элемента: Нет
Вертикальный flat- или image-элемент
Настройки
Вертикальный flat- или image-элемент:
Вертикальный элемент лучше всего применять для отображения инфоблоков с анонсами, например, новостей или услуг. Вертикальный элемент состоит из картинки, расположенной сверху, и названия, расположенного снизу от картинки. По желанию, картинка может быть заменена на glyphicon, а также может быть добавлен текст в виде анонса.
Доступные настройки элемента:
Выводить кнопку/ссылку на элемент
Да
Нет
Надпись для кнопки/ссылки
Использовать рамку у блока
Да
Нет
Цвет фона элемента
Прозрачный
Темный цветной
Белый
Форма пространства под изображение
Квадрат
Окружность
Квадрат со скругленными углами
Без фона
Цвет рамки изображения
Светлая
Темная
Без рамки
Тип изображения
Картинка
Фон картинки
Темный фон
Белый фон
Прозрачный фон
GlyphIcon
Класс символа
Тип GlyphIcon
Темный фон
Белый фон
Прозрачный фон
Размер шрифта
Высота пространства под картинку в блоке в px
Размер картинки в px
Выравнивание контента в блоке
По центру
По левому краю
По правому краю
Выводить анонс
Да
Нет
Убрать ссылки
Да
Нет
Добавить для ссылки тип fancybox
Да
Нет
Выводить дополнительные кнопки для элемента
Да
Нет
Примеры
Цветной элемент с картинкой
Установленные настройки:
Выводить кнопку/ссылку на элемент: Нет
Использовать рамку у блока: Да
Цвет фона элемента: Темный цветной
Форма пространства под изображение: Квадрат со скругленными углами
Цвет рамки изображения: Без рамки
Тип изображения: Картинка
Фон картинки: Белый фон
Высота пространства под картинку в блоке в px: 100
Размер картинки в px: 100
Выравнивание контента в блоке: По центру
Выводить анонс: Да
Убрать ссылки: Нет
Добавить для ссылки тип fancybox: Нет
Выводить дополнительные кнопки для элемента: Нет
Белый элемент с glyphicon
Установленные настройки:
Выводить кнопку/ссылку на элемент: Нет
Использовать рамку у блока: Да
Цвет фона элемента: Белый
Форма пространства под изображение: Окружность
Цвет рамки изображения: Без рамки
Тип изображения: GlyphIcon
Класс символа GlyphIcon: glyphicon-globe
Тип GlyphIcon: Белый фон
Высота пространства под картинку в блоке в px: 100
Размер картинки в px: 100
Выравнивание контента в блоке: По центру
Выводить анонс: Да
Убрать ссылки: Нет
Добавить для ссылки тип fancybox: Нет
Выводить дополнительные кнопки для элемента: Нет
Темный элемент с glyphicon
Установленные настройки:
Выводить кнопку/ссылку на элемент: Нет
Использовать рамку у блока: Да
Цвет фона элемента: Темный цветной
Форма пространства под изображение: Квадрат со скругленными углами
Цвет рамки изображения: Светлая
Тип изображения: GlyphIcon
Класс символа GlyphIcon: glyphicon-tree-deciduous
Тип GlyphIcon: Темный фон
Высота пространства под картинку в блоке в px: 100
Размер картинки в px: 72
Выравнивание контента в блоке: По центру
Выводить анонс: Нет
Убрать ссылки: Да
Добавить для ссылки тип fancybox: Нет
Выводить дополнительные кнопки для элемента: Нет
Белый элемент с картинкой
Установленные настройки:
Выводить кнопку/ссылку на элемент: Нет
Использовать рамку у блока: Нет
Цвет фона элемента: Белый
Форма пространства под изображение: Квадрат со скругленными углами
Цвет рамки изображения: Темная
Тип изображения: Картинка
Фон картинки: Белый фон
Высота пространства под картинку в блоке в px: 150
Размер картинки в px: 150
Выравнивание контента в блоке: По центру
Выводить анонс: Нет
Убрать ссылки: Нет
Добавить для ссылки тип fancybox: Нет
Выводить дополнительные кнопки для элемента: Нет
Классический элемент
Настройки
Пример 1:
Пример 2:
Классический элемент:
Классический элемент лучше всего применять для отображения инфоблоков с анонсами, например, новостей или услуг. Класический элемент состоит из картинки, расположенной слева, и названия, расположенного справа. По желанию, картинка может быть заменена на glyphicon, а также может быть добавлен текст в виде анонса.
Доступные настройки элемента:
Использовать рамку у блока
Да
Нет
Цвет фона элемента
Темный цветной
Белый
Добавить разделительную линию под заголовком
Да
Нет
Надпись ссылки для перехода к элементу
Примеры
Элемент со светлым фоном
Установленные настройки:
Использовать рамку у блока: Да
Цвет фона элемента: Белый
Добавить разделительную линию под заголовком: Да
Надпись ссылки для перехода к элементу: Узнать подробнее
Элемент с темным фоном
Установленные настройки:
Использовать рамку у блока: Нет
Цвет фона элемента: Темный цветной
Добавить разделительную линию под заголовком: Да
Надпись ссылки для перехода к элементу:
Светлый элемент без разделительной полосы
Установленные настройки:
Использовать рамку у блока: Да
Цвет фона элемента: Белый
Добавить разделительную линию под заголовком: Нет
Надпись ссылки для перехода к элементу:
Темный элемент без разделительной полосы
Установленные настройки:
Использовать рамку у блока: Нет
Цвет фона элемента: Темный цветной
Добавить разделительную линию под заголовком: Нет
Надпись ссылки для перехода к элементу: Узнать подробнее
Элемент-картинка
Настройки
Элемент-картинка:
Пример 1:
Пример 2:
Пример 3:
Элемент-картинку лучше всего применять для отображения инфоблоков с анонсами, например, новостей или услуг. Элемент-картинка состоит из картинки, расположенной слева, и названия, расположенного справа. По желанию, картинка может быть заменена на glyphicon, а также может быть добавлен текст в виде анонса.
Доступные настройки элемента:
Использовать рамку у блока
Да
Нет
Настройки вывода текста в блоке
Вывести текст на картинке
Вывести текст под картинкой
Применить вид акции/проекты
Да
Нет
Не выводить текст
Добавить для ссылки тип fancybox
Да
Ссылка для fancybox
Нет
Отношение высоты картинки к ширине в %
Примеры
Элемент-картинка без текста
Установленные настройки:
Использовать рамку у блока: Да
Настройки вывода текста в блоке: Не выводить текст
Добавить для ссылки тип fancybox: Нет
Отношение высоты картинки к ширине в %: 50
Элемент с текстом на картинке
Установленные настройки:
Использовать рамку у блока: Да
Настройки вывода текста в блоке: Вывести текст на картинке
Добавить для ссылки тип fancybox: Нет
Отношение высоты картинки к ширине в %: 85
Элемент с текстом под картинкой
В обычном состоянии:
При наведении мыши:
Установленные настройки:
Использовать рамку у блока: Нет
Настройки вывода текста в блоке: Вывести текст под картинкой
Применить вид акции/проекты: Нет
Добавить для ссылки тип fancybox: Нет
Отношение высоты картинки к ширине в %: 85
Элемент с текстом под картинкой с видом "акции/проекты"
В обычном состоянии:
При наведении мыши:
Установленные настройки:
Использовать рамку у блока: Да
Настройки вывода текста в блоке: Вывести текст под картинкой
Применить вид акции/проекты: Да
Добавить для ссылки тип fancybox: Нет
Отношение высоты картинки к ширине в %: 85
Элемент с эффектом "fancybox"
При нажатии на элемент в этом же окне открывается картинка этого элемента в полном размере:
Установленные настройки:
Использовать рамку у блока: Да
Настройки вывода текста в блоке: Вывести текст на картинке
Добавить для ссылки тип fancybox: Да
Отношение высоты картинки к ширине в %: 85
Элемент-ссылка
Настройки
Элемент-ссылка:
Блок-ссылку лучше всего применять для отображения инфоблоков с анонсами, например, новостей или услуг. Блок-ссылка состоит из картинки, расположенной слева, и названия, расположенного справа. По желанию, картинка может быть заменена на glyphicon, а также может быть добавлен текст в виде анонса.
Доступные настройки элемента:
Класс символа GlyphIcon
Примеры
Замена glyphicon'a у элемента
Установленные настройки:
Класс символа GlyphIcon: glyphicon-chevron-right
Установленные настройки:
Класс символа GlyphIcon: glyphicon-globe
Элемент-видео
Настройки
Элемент-видео:
Блок-видео лучше всего применять для отображения инфоблоков с анонсами, например, новостей или услуг. Блок-видео состоит из картинки, расположенной слева, и названия, расположенного справа. По желанию, картинка может быть заменена на glyphicon, а также может быть добавлен текст в виде анонса.
Доступные настройки элемента:
Путь к картинке для видео
Ширина картинки для видео в px
Ссылка на видео
Название видео
Примеры
Элемент-видео с открывающимся модальным окном
Элемент-видео в списке
При нажатии на элемент в этом же окне открывается видео
Установленные настройки:
Путь к картинке для видео: /upload/medialibrary/e64/e647f6b85f2c0418d5c9dc75b9402354.png
Ширина картинки для видео (в px): 300
Ссылка на видео: https://www.youtube.com/watch?v=QKfIBk05ldo
Название видео: Jungle - Drops (UNOFFICIAL MUSIC VIDEO)
Карточка товара
Настройки
Примеры
Как создать собственное универсальное представление элемента
документация формируется
Универсальный вывод списка элементов (список, слайдер)
Настройки
Установка горизонтального слайдера для списка:
Добавление подзаголовка для списка и выравнивание элементов списка по высоты:
Установка количества выводимых элементов в строке у разных списков:
Установка вертикального слайдера для списка:
Доступные настройки списка:
Подзаголовок для блока
GlyphIcon для подзаголовка
Внешний вид блоков
Вертикальный flat- или image-блок
Горизонтальный flat- или image-блок
Классический блок
Блок-картинка
Блок-ссылка
Блок-видео
Добавлять свой класс элемента к карточке
Автомасштабирование высоты элементов
Да
Нет
Количество элементов при разрешении LG
Количество элементов при разрешении MD
Количество элементов при разрешении SM
Количество элементов при разрешении XS
Выводить кнопку/ссылку на элемент
Да
Нет
Надпись для кнопки/ссылки
Режим слайдера
Да
Скрывать стрелки у слайдера
Да
Нет
Скрывать стрелки у слайдера на мобильном устройстве
Да
Нет
Нет
Вертикальный режим работы слайдера
Да
Нет
Примеры
Горизонтальный слайдер
Установленные настройки списка:
Подзаголовок для блока:
GlyphIcon для подзаголовка:
Внешний вид блоков:
Вертикальный flat- или image-блок
Добавлять свой класс элемента к карточке:
Нет
Автомасштабирование высоты элементов:
Да
Количество элементов при разрешении LG: 4
Количество элементов при разрешении MD: 4
Количество элементов при разрешении SM: 2
Количество элементов при разрешении XS: 1
Выводить кнопку/ссылку на элемент
Нет
Надпись для кнопки/ссылки:
Режим слайдера:
Да
Скрывать стрелки у слайдера:
Нет
Скрывать стрелки у слайдера на мобильном устройстве:
Да
Вертикальный режим работы слайдера:
Нет
Вертикальный слайдер
Установленные настройки списка:
Подзаголовок для блока: Проекты
GlyphIcon для подзаголовка: glyphicon-tasks
Внешний вид блоков
Блок-картинка
Добавлять свой класс элемента к карточке
Нет
Автомасштабирование высоты элементов
Да
Количество элементов при разрешении LG: 2
Количество элементов при разрешении MD: 2
Количество элементов при разрешении SM: 1
Количество элементов при разрешении XS: 1
Выводить кнопку/ссылку на элемент
Нет
Надпись для кнопки/ссылки:
Режим слайдера
Да
Скрывать стрелки у слайдера
Нет
Скрывать стрелки у слайдера на мобильном устройстве
Да
Вертикальный режим работы слайдера
Да
Обычный список
Пример 1:
Установленные настройки списка:
Подзаголовок для блока: Услуги
GlyphIcon для подзаголовка: glyphicon-check
Внешний вид блоков:
Горизонтальный flat- или image-блок
Добавлять свой класс элемента к карточке:
Нет
Автомасштабирование высоты элементов:
Да
Количество элементов при разрешении LG: 2
Количество элементов при разрешении MD: 2
Количество элементов при разрешении SM: 1
Количество элементов при разрешении XS: 1
Выводить кнопку/ссылку на элемент
Нет
Надпись для кнопки/ссылки:
Режим слайдера: Нет
Вертикальный режим работы слайдера:
Нет
Пример 2:
Установленные настройки списка:
Подзаголовок для блока: Проекты
GlyphIcon для подзаголовка: glyphicon-tasks
Внешний вид блоков:
Блок-картинка
Добавлять свой класс элемента к карточке:
Нет
Автомасштабирование высоты элементов:
Да
Количество элементов при разрешении LG: 4
Количество элементов при разрешении MD: 4
Количество элементов при разрешении SM: 2
Количество элементов при разрешении XS: 1
Выводить кнопку/ссылку на элемент
Нет
Надпись для кнопки/ссылки:
Режим слайдера: Нет
Вертикальный режим работы слайдера:
Нет
Раздел на основе инфоблока с поддержкой универсального вывода списка элементов
документация формируется
Связанные инфоблоки. Универсальные связи.
Особая технология работы со связанными элементами БЕЗ ПРОГРАММИРОВАНИЯ - это лишь одна из фишек BXReady: Корпоративный сайта.
Создавая данное решение мы в первую очередь ориентировались на его практическую ценность и просто ту в использовании!
И эта фишка получилась особенная
Что такое связанные элементы
Рассмотрим с точки зрения корпоративного сайта, чем нам могут помочь связи между информационными элементами
Если ваш проект это умеет, то
SEO-специалисты получают возможность создать самую качественную и самую естественную перелинковку.
А маркетологи получают возможность повышать конверсию, увеличивать средний чек, развивать интерес и побуждать к действию.
И BXReady: Корпоративный сайт это не просто умеет
Он делает это с максимальной для пользователя простотой
Как это устроено
Настройки очень просты
Вы просто указываете информацию по инфоблокам, из которых вам может понадобиться связанная информация, а выглядит это так
Как это работает
После того как вы настроили раздел (на настройку уходит от 5 до 30 минут), просто не забывайте указывать связи.
Когда вы заполняете какой то информационный блок, просто укажите в свойстве связанные элементы
Например, заполняя информацию о новом проекте, укажите список услуг, которые вы реализовали, перечислите материалы или укажите статьи, которые могут быть интересны посетителю, читающему страницу с описанием данного проекта.
И все…
Потому что все остальное делает автоматика
А что сделает автоматика?
При выводе информации какого то элемента инфоблока система проверит, не указано ли в нем каких то связанных элементов и соберет по ним информации.
Затем система найдет информацию по тем инфоблокам, в которых встречается упоминание о выводимом сейчас элементе и тоже подтянет ее.
После этого система произведет нужные отборы сортировки и выведет элементы в соответсвии с настройками а вы получите
Распределенную по блокам информацию в карточке элемента, содержащую
1.Список всех элементов, которые вы указала как связанные для текущего элемента
2.Список всех элементов, в которых текущий элемент упоминается.
Как это выглядело бы, если нарисовать модель?
Да очень просто
Давайте представим, что наша автоматика – художник, который рисует портрет некоего элемента информационного блока
Как это выглядит с точки зрения Битрикс
Когда мы выводим элемент инфоблока, то
1.смотрим какие связанные инфоблоки нас просили вывести
2.если в нашем элементе указана связь с каким то из этих инфоблоков – выбираем эти элементы
3.Ищем в других инфоблоках (которые надо вывести, см. п1.) элементы, у которых может быть указан наш элемент и тоже сичтаем их связанными – тоже выбираем
4.Выводим информацию по инфоблокам в тех областях, которые указаны в настройках
5.При выводе связанных блоков используем указанный порядок вывода
6.Если в настройках указано, что надо вывести волшебную ссылку – выводим и ее.
И
Как настроить связанные элементы
При настройке раздела BXReady (компонет alexkova.corporate:block)
просто указываем, что вы будете использовать связанные инфоблоки (1)
Затем для каждого из связанных инфоблоков настраиваем (см пункты 2 рисунка)
Где и как будет выводиться список элементов, настраиваем параметры их адаптивности, выбираем представление элемента из уже готовых в системе (см. информацию о представлениях)
При необходимости тюнингуем представление карточек элементов (см. пункты 3 рисунка)
Указываем детали настройки заголовков и если требуется вывод волшебной ссылки - название для нее (см. пункты 4)
Вы можете отобрадение элементов до 6 связанных инфоблоков.
И все это без программирования!
Библиотека элементов
Тарифные ленты
Тарифные ленты доступны после обновления BXReady 2.0.36.
Установка тарифных лент Для установки типа ИБ и ИБ тарифных лент, следуют воспользоваться мастером установки "Настройка тарифных лент BXReady: Корпоративный сайт", который можно найти в административной части: Настройки > Настройки продукта > Список мастеров.
После установки, следует подключить нужные элементы, в библиотеке элементов (tariff_ribbons_va6 и/или tariff_ribbons_va7).
Настройка/создание тарифных лент:
После того как вы провели установку тарифных лент, вам будет доступен для заполнения ИБ "Тарифные ленты". Каждый тип тарифных лент, следует создавать в отдельном разделе, что позволит правильно подключить их на странице.
Создание и редактирование элементов тарифных лент. Доступны следующие свойства:
Название - выводится в шапке элемента. Сортировка - отвечает за порядок расположения элементов. Цена. Ед. измерения тарифа. Преимущества - список преимуществ данного элемента. Кнопка - текст для кнопки и ссылка. Связанные элементы контента - свойство оставлено для того, что бы помимо возможности добавления тарифных лент на отдельной странице и новой возможности добавления тарифных лент в каталоге элементов. Можно было вывести тарифные ленты используя связанные элементы.
Добавочный CSS класс - стандартные возможности настройки стиля тарифной ленты (доступны следующие свойства): tariff_green, tariff_green_border tariff_orange, tariff_orange_border tariff_yellow, tariff_yellow_border tariff_purple, tariff_purple_border tariff_scarlet, tariff_scarlet_border tariff_deepsea, tariff_deepsea_border tariff_blue, tariff_blue_border tariff_dark, tariff_dark_border tariff_white, tariff_white_border
Вывод тарифных лент на отдельной странице:
Для вывода тарифных лент на отдельной странице, требуется подключить компонент Список элементов (alexkova.corporate:block.list). В поле тип информационного блока - выбрать"Тарифные ленты". Отдельное внимание следует уделить параметрам в разделе "настройка параметров отображения элементов", который отвечает за внешний вид выводимых элементов.
Так же для вывода тарифных лент из определённого раздела ИБ, перед выводом компонента следует указать следующий код:
Вывод тарифных лент в каталоге элементов: В компоненте Каталог элементов (alexkova.corporate:block), появился новый раздел Тарифные ленты, который похож по настройкам на связанные элементы, но имеет ряд отличий.
Включить тарифные ленты: включает и выключает вывод тарифных лент. Тип инфоблока (Тарифные ленты): выбор типа инфоблока с тарифными лентами. Инфоблок (Тарифные ленты): выбор инфоблока с тарифными лентами. Группа: выбор нужного раздела из ИБ.
Остальные настройки интуитивно понятны, и похожи на настройки связанных элементов.
Тарифные ленты, связь с элементами
Вывод тарифных лент (ТЛ), для определённых элементов. (доступно с обновления BXReady 2.0.38).
Для настройки ТЛ для определённых элементов, следует выполнить следующие шаги:
1) следует добавить свойство "Тарифы" с кодом "BXR_TARIFF", в нужный информационный блок (например в ИБ Услуги), со следующими настройками:
2) Настроить компонент "Каталог элементов" (alexkova.corporate:block), в котором после обновления BXReady 2.0.38, для тарифных лент, появились 2 дополнительных параметра ("Учитывать тарифы элементов", "Выводить только тарифы элементов"):
а) Если эти параметры выключены, то ТЛ выведутся из выбранной группы(раздела).
б) Если включить параметр "Учитывать тарифы элементов", то ТЛ выведутся из выбранной группы и дополнятся выбранными ТЛ из настроек элемента. (если только они находятся в нужном "Тип инфоблока (Тарифные ленты)" и "Инфоблок (Тарифные ленты)" ).
в) Если включить параметр "Выводить только тарифы элементов", то ТЛ выведутся только из настроек элемента (игнорируя выбранную группу но учитывая ("Тип инфоблока (Тарифные ленты)" и "Инфоблок (Тарифные ленты)")).
Работа с формами
Как работают формы
На сайте по умолчанию используются 2 формы:
- заказ обратного звонка;
- обратная связь.
После заполнения и отправки данные из формы сохраняются в соответствующий инфоблок (тип инфоблока - Формы) в виде элемента.
Сам элемент
Также в решении по умолчанию настроена отправка уведомлений о заполненной форме на почту.
Вы можете установить e-mail, на который будут отправляться эти уведомления.
Для этого зайдите в Настройки - Настройки продукта - Почтовые события - Почтовые шаблоны.
В списке найдите шаблон для нужной формы:
1. [KZNC_NEW_FORM_PHONE_RESULT] Отправка сообщения через форму обратный звонок
2. [KZNC_NEW_FORM_RESULT] Отправка сообщения через форму обратной связи
Откройте и установите для поля Кому нужный e-mail. Например,
Также вы можете установить для этого поля значение #DEFAULT_EMAIL_FROM#. Тогда все уведомления будут отправляться на почту, указанную в настройках сайта.
Здесь же вы можете отредактировать тему шаблона и его содержание.
Добавление нового поля в форму
Вы можете добавлять в формы свои поля для заполнения пользователями.
Для этого вам нужно добавить свойство в нужном вам инфоблоке.
Например, вы хотите добавить поле Ваш город в форму Обратная связь.
Название, Тип свойства, Сортировку, Код свойства вы устанавливаете так, как посчитаете нужным. Сохраните.
Теперь нужно сделать так, чтобы это поле выводилось при открытии посетителем формы.
Включит режим правки в публичной части. Вызов обеих форм находится в самом низу страницы.
Откройте настройки нужной вам формы.
В настройках компонента alexkova.corporate:form.iblock в разделе Свойства инфоблока в свойстве Свойства, выводимые на заполнение с помощью клавиши Ctrl и курсора выберите только что созданное свойство.
Сохраните. После того, как страница обновится, вызовите форму. Теперь в ней будет отображаться новое, только что созданное поле.
Осталось только настроить почтовое уведомление так, чтобы новое свойство отображалось вместе со старыми.
Откройте Настройки - Настройки продукта - Почтовые события - Типы почтовых событий. Выберите в списке нужное вам
(KZNC_NEW_FORM_RESULT или KZNC_NEW_FORM_PHONE_RESULT)
Добавьте код нового свойства в виде маски (код заключенный в ##) и описание для него. Сохраните.
Откройте шаблон этого события.
И также добавьте новое свойство в виде маски в сам текст сообщения.
Сохраните. Теперь уведомление на почту будет приходить с добавлением нового свойства.
Создание почтового шаблона для формы
Чтобы создать уведомление, которое будет приходит после заполнения посетителем формы, нужно пройти несколько шагов.
1. Для начала создадим новый тип почтового события.
Назовите его так, как будет понятно вам(латинскими буквами без пробелов).В нашем примере не очень понятное название - SITE_FORM_NEW, поэтому советуем назвать его так, чтобы было понятно из какой формы оно вызывается.
В описании введите все свойства инфоблока, в который сохраняются заполненные формы.
Например, выше представлено заполненное описание для инфоблока с такими свойствами.
После того, как заполнили поля нового почтового события нажмите Применить. Страница обновится и появится еще одна вкладка Шаблоны.
2. Зайдите во вкладку Шаблоны и нажмите Добавить шаблон сообщения.
Откроется форма создания нового шаблона.
Проверьте галочку Активности.
Проверьте, что стоит галочка рядом с сайтом, на котором должна открываться форма.
Проверьте, что шаблон привязан именно к тому почтовому событию, который вы только что создали.
Заполните поле От кого. Маска #DEFAULT_EMAIL_FROM# означает, что будет подставлен E-Mail адрес по умолчанию (устанавливается в настройках сайта).
Заполните поле Кому. Здесь также можно разместить маску #DEFAULT_EMAIL_FROM#.
Заполните Тему. Она должна быть такая, чтобы вы смогли быстро отыскать это сообщение на почте среди прочих.
Заполните Текст сообщения. В нем вы можете использовать маски такие же, как и в описании типа почтового события. Все доступные поля указаны под полем Сообщение
Доступные поля
Макси (слова в виде #NAME#) - это часть текста, которая впоследствии будет изменена на установленное пользователем значение при заполнении формы.
Сохраните шаблон.
3. Теперь осталось установить настройки формы на отправку именно этого шаблона. Зайдите в настройки компонента нужной формы. Установите в разделе Дополнительные настройки для свойства Код типа почтового события для уведомления название вашего нового почтового события (в нашем примере это SITE_FORM_NEW).
Сохраните, откройте форму, заполните и отправьте. Уведомление о заполненной форме должно придти на указанную вами почту в том формате, который вы определили в новом шаблоне.
Советы (Tips&Tricks)
Как подключить веб-аналитику
Несомненно, веб-аналитика - это первое,что необходимо включить при запуске сайта.
В большинстве случаев используется веб-аналитика, подключаемая в теле сайта.
Есть несколько вариантов.
1. отредактировать файл footer.php шаблона, встави JS код веб-аналитики
2. просто использовать нижнюю сквозную включаемую область, в которой располагается при установке информация-копирайт
включите режим правки
при редактировании в режиме кода вы можете указать коды интересующих вас счетчиков
Как настройить показ баннеров и включить рекламные возможности
В настоящий момент BXReady: Корпоративный сайт уже на 100% адаптирован под все основные типы рекламы
Самый распространенный тип Баннеры и реклама.
Для работы с данным типом используется
на редакциях Эксперт, Бизнес и выше модуль "Реклама, Баннеры", входящий в соства этих редакций
на всех остальных младших редакциях используется модуль "Баннеры и реклама Про" (поставляется бесплатно каждому покупателю решения)
Помимо этого вы также можете использовать следующие рекламные возможности
Всплывающие баннеры и иконки. Для этого вы при покупке решения бесплатно получаете модуль "Всплывающие баннеры и реклама"
Фоновая реклама. Часть шаблонов сайта может работать в режиме фиксированной ширины. При этом у вас появляется возможность использовать модуль Фоновая реклама.
Модули всплывающая реклама и Фоновая реклама интегрируются в решение "бесшовно".
Т.е. вам достаточно лишь их установить и настроить и они готовы к работе.
.
Фишка. Как создать свои представления элементов
А вы знаете, что наша система поддерживает возможность быстрого создания собственного представления элемента в списке? См. представления и списки
для этого просто создайте в шаблоне сайта папку /bxready/elements/
а в ней вы можете создать еще папку, каждая из которых и станет новым представлением
как это работает
детали:
в папке представления обрабатываются следующие файлы
А ниже нарисовано то, что демострируется в видео, но только со стороны продукта