0  /  109

Аспро: Корпоративный сайт 2.0

Содержание

Установка решения

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

Также рекомендуем ознакомиться с материалами от разработчиков 1С-Битрикс:
Установка продукта «1С-Битрикс: Управление сайтом»

15-минутная видеоинструкция по установке интернет-магазина:



13-минутная видеоинструкция по установке сайта:


Подготовка хостинга

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

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

Рекомендуем ознакомиться с содержанием раздела «Поддержка» вашего хостинга, который может содержать готовые инструкции по установке 1С-Битрикс.

Также вам будут полезны эти материалы:  

Рекомендации по выбору и тестированию хостинга от разработчиков 1С-Битрикс
Список рекомендуемых хостингов от разработчиков 1С-Битрикс

Установка через bitrixsetup и создание базы данных

Авторизация и проверка наличия файла bitrixsetup.php

  1. Авторизуемся на хостинге и проверяем наличие файла bitrixsetup.php в корне сайта – в дальнейшем он будет необходим нам для установки и активации лицензии 1С-Битрикс.

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

Создание базы данных

  1. Переходим в соответствующий раздел для создания базы данных.



  2. Нажимаем кнопку «Сохранить». Имя базы данных сохраняем в блокнот — в дальнейшем оно нам понадобится при установке 1С-Битрикс. База данных готова!



  3. Заполняем поля «Имя базы данных», выбираем из списка сайт, на который будем устанавливать решение, задаем имя пользователя и генерируем пароль. Имя базы данных и пароль сохраняем в отдельном документе – в дальнейшем нам понадобятся эти данные при установке решения. 



Активация лицензии, загрузка и установка обновлений 1С-Битрикс

Активация 1С-Битрикс

  1. Переходим на новую вкладку, в которую копируем имя домена. Именно туда мы будем устанавливать 1С-Битрикс и наше решение. На странице приветствия выбираем стандартную установку 1С-Битрикс.



  2. Переходим к выбору продукта. Из выпадающего списка выбираем соответствующую версию 1С-Битрикс (в нашем случае это «Малый бизнес») и вводим лицензионный ключ. Нажимаем кнопку «Загрузить» и ждем, когда скачается и распакуется архив установки 1С-Битрикс.


Установка 1С-Битрикс

  1. После завершения загрузки откроется «Мастер установки 1С-Битрикc». Внимательно читаем информацию и нажимаем кнопку «Далее».



  2. Принимаем лицензионное соглашение.



  3. Регистрируем продукт. Ставим галочку в пункте «Установить в кодировке UTF-8», как рекомендуют разработчики 1С-Битрикс. Нажимаем кнопку «Далее».

Проверка параметров системы

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





    Убедившись, что все идеально, нажимаем кнопку «Далее» и переходим к вводу параметров базы данных. 

Ввод параметров базы данных и установка компонентов

  1. Заполняем поля «Имя пользователя» и вводим ранее сохраненный пароль для базы данных.

    - сервер – по умолчанию localhost
    - пароль – заданный пароль для пользователя базы данных
    - пользователь базы данных – существующий
    - база данных – существующая.



    Вводим сохраненное ранее имя базы данных и нажимаем кнопку «Далее».



  2. Дождитесь окончания установки компонентов.

Создание учетной записи администратора

  1. Переходим к созданию администратора. Заполняем поля «Логин» (логин администратора базы данных), «Пароль» (для входа в базу данных), E-mail, «Имя», «Фамилия» и нажимаем на кнопку «Далее».

  2. После выполнения этих действий мы попадем на страницу Маркетплейса. Установка 1С-Битрикс завершена. Теперь открываем новую вкладку браузера и переходим непосредственно к установке решения. 



Активация и установка решения «Аспро: Маркет»

Активация ключа

Копируем адрес сайта, вставляем его в адресную строку на новой вкладке и вместо index.php после знака «/» прописываем «bitrix». Получается ссылка вида <вашсайт.hostdk.ru/bitrix>. 


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




Нажимаем кнопку «Открыть лицензионное соглашение» и принимаем его.




Переходим к активации лицензионного ключа и созданию аккаунта на сайте www.1c-bitrix.ru. Нажимаем кнопку «Активировать ключ» в административной панели




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

Установка обновлений

Нажимаем кнопку «Установить рекомендуемые обновления». 



Важно! Если при попытке установить обновления система выдает ошибку, проверьте, установлены ли необходимые модули 1С-Битрикс. Список модулей


Начинается установка обновлений. Дождитесь окончания процесса.




Отчет об успешной установке выглядит так: 



Активация купона решения и загрузка обновлений

Переходим на вкладку «Обновление решений» и активируем купон. 



Переходим на вкладку «Список обновлений». Выбираем обновление, которое необходимо установить. В нашем случае это «Аспро: Маркет — адаптивный интернет-магазин». Отмечаем его и нажимаем кнопку «Загрузить».


Начинается установка обновлений на сайт. Дождитесь окончания процесса. 




После окончания вы увидите отчет об успешной установке обновлений.  


Внимание! Если выдаётся ошибка «[CHECK_IS_BAD] Купон (чек) не действителен. Ошибка активации купона», то возможны три варианта:
  1. Купон уже активирован на текущую копию 1С-Битрикс, тогда решение будет доступно по ссылке http://вашсайт/bitrix/admin/partner_modules.php?lang=ru
  2. Не активирована лицензия на платформу 1С-Битрикс.
    Активируйте вначале лицензию на 1С-Битрикс по адресу:
    http://ваш_сайт/bitrix/admin/update_system.php?lang=ru
    а затем попробуйте снова активировать решение
    http://ваш_сайт/bitrix/admin/update_system_partner.php?lang=ru
    вкладка «Активация купона».
    После активации купона решение будет доступно для скачивания по ссылке http://ваш_сайт/bitrix/admin/partner_modules.php?lang=ru.
  3. Если решения нет в списке по адресу http://вашсайт/bitrix/admin/partner_modules.php?lang=ru, то скорее всего купон был активирован на другую копию 1С-Битрикс, и вопрос по его повторной активации необходимо решать через техническую поддержку 1С-Битрикс, т.к. мы не занимаемся и не контролируем процессы связанные с активацией купонов и привязкой их к копиям 1С-Битрикс.

Загрузка решения из Маркетплейс

    Переходим на предыдущую вкладку, где у нас открыт Мастер установки 1С-Битрикс. Выбираем пункт «Загрузить из Маркетплейс» и нажимаем кнопку «Далее».



    Из списка решений выбираем «Аспро: Маркет» и нажимаем кнопку «Далее» внизу страницы. Поле «Купон» оставляем пустым — мы уже активировали ключ в административной панели нашего будущего сайта.




    Начинается подготовка к установке продукта. 

Настройка продукта

Выбираем шаблон «Аспро: Маркет — адаптивный интернет-магазин» и переходим к настройкам продукта.




Выбираем одну из 10 тем оформления нашего будущего интернет-магазина и нажимаем кнопку «Далее».




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




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




Выбираем типы плательщиков — физическое и/или юридическое лицо. Нажимаем кнопку «Далее».


Заполняем информацию о способах оплаты и доставки, выбираем местоположения (Россия и СНГ), США, мир или выбираем пункт «Не загружать», чтобы настроить эти параметры позже. Нажимаем на кнопку «Далее».




Ожидаем, пока система установит решение.




Отчет об успешной установке продукта выглядит так: 

Решение «Аспро: Маркет» установлено. Теперь мы можем перейти к следующему шагу – зайти на сайт и выполнить первичные настройки.

Первые шаги

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


Настройки главного модуля

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

Настройки главного модуля задаются в административной части сайта:

Настройки → Настройки продукта → Настройки модулей → Главный модуль


Описания всех настроек и параметров главного модуля можно прочитать в пользовательской документации 1С-Битрикс: Управление сайтом.

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

Интерфейс настройки главного модуля делится на несколько основных вкладок:

  • Настройки
  • Авторизация
  • Журнал событий
  • Система обновлений
  • Доступ

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

Настройки

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

  • Системные настройки
  • Почта
  • Файлы
  • Оптимизация CSS
  • Внешние сервисы перевода
  • Часовые пояса
  • Карта сайта
  • Панель инструментов публичного раздела

Системные настройки


  • Название сайта (1) — используется по умолчанию для всех подключенных сайтов: прописывается в тег <title> на всех страницах сайта, выводится в заголовке вкладки браузера и воспринимается поисковыми роботами в качестве названия сайта
  • URL сайта (2) — адрес по умолчанию для всех подключенных сайтов
  • Распространять куки на все домены (3) — активирует использование одних файлов cookies для всех подключенных сайтов — это значит, что при переключении между сайтами пользователь будет оставаться авторизованным.
  • Режим вывода ошибок (4) — определяет, какие ошибки будут демонстрироваться пользователю. Рекомендуем выбирать опцию «Только ошибки»

Почта


  • E-mail, на который будут дублироваться исходящие сообщения (5) — адрес (адреса), на которые будут дублироваться все сообщения из системы почтовых событий сайта
  • E-mail администратора сайта (6) — адрес отправителя писем с сайта по умолчанию. Подробнее о настройке почтовых событий вы можете прочитать тут.


  • Качество JPG при масштабировании изображений (7) — задает уровень сжатия для .jpg файлов в процентном отношении, где 100% — наименьшее сжатие и самое высокое качество изображения

В остальных группах свойства менять не рекомендуется. Подробнее о настройках блока “Оптимизация CSS” и о том, как с его помощью улучшить показатели в Google Page Insights, читайте в базе знаний.

Авторизация

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


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

Система обновлений


Содержит информацию о лицензионном ключе 1С-Битрикс и имени сервера с обновлениями, адрес и порт прокси, имя пользователя прокси и пароль, а также настройки обновлений.

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

Доступ

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


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

Служебные процедуры

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




Настройка прав пользователей

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

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

Уровни доступа

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

Чтобы просмотреть список имеющихся уровней доступа, изменить их или добавить новый, в административной части сайта перейдите в Рабочий стол → Настройки → Пользователи → Уровни доступа.


У уровня доступа есть несколько основных параметров — это вид объекта, для которого создается уровень (файл/папка или модуль), сам конкретный объект (например, главный модуль) и операции, которые может совершать с объектом пользователь.


В режиме редактирования/добавления уровня доступа на вкладке «Параметры» располагаются первые основные параметры:

  • Название (1) — наименование уровня
  • Привязка (2) — вид объекта для уровня доступа. Это может быть файл/папка или системный модуль
  • Модуль (3) — выбор конкретного модуля, на который распространяются правила доступа.

Буква — это короткое наименование уровня доступа для системы, Описание — это развернутая информация для администратора.

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


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

Группы пользователей

Следующий этап разграничения прав — создание групп для пользователей и назначение этим группам необходимых уровней доступа. Вы можете настраивать в системе 1С-Битрикс права только для групп пользователей и добавлять отдельных пользователей в группы. Однако количество групп с разными правами не ограничено, и фактически вы можете назначить каждому пользователю уникальные права. Но объединять пользователей в группы все-таки удобнее.

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

Чтобы изменить или создать новую группу пользователей, в административной части сайта перейдите в Рабочий стол → Настройки → Пользователи → Группы пользователей.


Войдите в режим редактирования/добавления группы.


На вкладке «Параметры» находятся основные параметры группы:

  • Название (1) — наименование группы
  • Символьный идентификатор (2) — id группы для использования в системе
  • Описание (3) — развернутое описание для администратора

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

На вкладке «Безопасность» настраиваются параметры политики безопасности. Например, параметры авторизации, длительность сессии, особенности паролей для пользователей.


На вкладке «Доступ» устанавливаются уровни доступа для всех модулей сайта от главного модуля до валют и подписок.


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

Настройка прав пользователя

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

В административной части сайта перейдите в Рабочий стол → Настройки → Пользователи → Список пользователей. В списке пользователей найдите нужного и войдите в режим редактирования.


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


Добавление новых пользователей и управление существующими

В «Списке пользователей» можно не только редактировать, но и создавать новых пользователей. Обычно, новый пользователь создается, когда происходит регистрация, и человек вводит необходимые данные: e-mail, имя и фамилию. Такому пользователю автоматически присваиваются права обычного зарегистрированного пользователя.

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


Обязательно пропишите e-mail и логин для пользователя, выберите сайт по умолчанию, на который он будет попадать, если у вас в системе многосайтовость.


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

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


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

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

Настройка резервного копирования

С помощью закладки «Резервное копирование» можно настроить создание полной резервной копии с настройками процесса по умолчанию.

Чтобы включить резервное копирование, перейдите в модуль настроек:

Настройки → Инструменты → Резервное копирование → Регулярное резервное копирование

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

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



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




Задайте пароль для шифрования архива и нажмите на кнопку «Сохранить».



Подробнее о настройках резервного копирования в 1С-Битрикс читайте в курсе от 1С-Битрикс «Администратор. Базовый».

Композитный режим

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

Управление технологией осуществляется в настройках продукта:
Настройки → Настройки продукта → Композитный сайт

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



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

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

Техническая поддержка

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

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

Как создать учетную запись для сотрудника техподдержки Аспро



Вопросы по приобретению решений и доработкам, а также пожелания по функционалу решения отправляйте через эту форму или на адрес info@aspro.ru

При каждом обращении обязательно предоставьте следующие данные:
  1. Адрес сайта
  2. Логин и пароль для доступа к 1С-Битрикс с правами администратора. Как предоставить доступ сотруднику техподдержки
  3. Адрес сервера, логин и пароль для доступа к сайту. При необходимости сотрудник поддержки может запросить у вас данные для доступа по FTP или SSH с правами на чтение и запись. Как предоставить доступ сотруднику техподдержки
  4. Четкое описание проблемы и действий для ее воспроизведения.
  5. Скриншоты или скринкасты (по возможности)
    Обзор рекомендуемых программ. 
Выполнение этих рекомендаций ускорит обработку вашей заявки.

Поддержка осуществляется по будням с 8:00 до 16:00 по московскому времени. Скорость ответа зависит от загруженности команды и сложности вопроса, но в среднем составляет 2-3 рабочих дня.

Типовые настройки решения

В этом уроке мы рассмотрим типовые настройки решения Аспро: Digital-компания. Большую их часть можно найти в виджете настроек решения и выяснить, как будет выглядеть ваш сайт с теми или иными настройками. Подробнее

Для удобства пользователей основные настройки решения располагаются в Центре управления Аспро – общие, для главной страницы и разделов, каталога товаров, личного кабинета и т.д.

Действующие настройки решения актуальны для всего сайта и для всех групп пользователей. Установить выставить в административной части сайта в Рабочий стол → Аспро: Digital → Настройки.


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

Общие

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


  • Переключатель тем (1) — активирует виджет настроек сайта для администраторов
  • Цвета сайта (2) — можно выбрать один из базовых цветов или выставить в поле «Базовый цвет» значение «Пользовательский», а затем записать hex-код нужного цвета в поле ниже. Подобрать базовый или кастомный цвет и посмотреть, как будет выглядеть сайт с ним, можно в настройках виджета
  • Логотип с фоном базового цвета (3) — активирует заливку прозрачных областей логотипа выбранным основным цветом сайта
  • Загрузка логотипов сайта (4) — группа полей, в которых можно загрузить логотип для шапки, фавикон для заголовка вкладки браузера и иконку Web clip icon для iPhone и iPad.


Рекомендуемые параметры для логотипа:
- размер – любой (система автоматически подгонит его под нужный)
- формат – .png или .jpg

Рекомендуемые параметры для фавикона:
- размер – 16х16 px
- формат – .ico

Рекомендуемые параметры для Web clip icon:
- размер – 180х180 px
- формат – .jpg.


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

  • Обработка персональных данных (5) — активирует информирование об обработке персональных данных и позволяет задать подпись для уведомления об этом. Подробнее
  • Кнопка «Наверх» (6) — активирует кнопку и задает ее вид и положение.


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

Варианты положения: касается края экрана (только для квадратных), с отступом от края экрана, с отступом от контента.

Валидация ввода



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

В поле «Тип защиты» от спама можно выбрать вариант капчи: отсутствует, картинка или скрытое поле. Мы рекомендуем использовать последний вариант: вы будете защищены от спам-заявок, однако это не скажется на конверсии – пользователям не придется заполнять дополнительное поле.

Социальные сети



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


Главная




  • Тип анимации большого баннера (1) — определяет, с какой анимацией будут сменяться слайды на основном баннере сайта. Можно выбрать: горизонтальное скольжение, вертикальное скольжение или выцветание
  • Скорости для слайдов основного баннера (2) — определяет, с какой периодичностью будут сменяться слайды основного баннера и с какой скоростью будет происходить анимация при их смене
  • Скрывать на узких экранах (3) — при активации основной баннер скрывается при просмотре сайта в мобильной версии
  • Скорости для слайдов блока «Наши партнеры» (4) — определяет, с какой периодичностью будут сменяться слайды в блоке «Наши партнеры» и с какой скоростью будет происходить анимация при их смене.

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

Шапка

Группа полей, задающих настройки для шапки сайта.




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

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

Каталог

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


  • Адреса страниц корзины и оформления заказа — позволяют задать адреса для соответствующих страниц. Поддерживается использование шаблонов адресов Битрикс.

Разделы



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

В полях «Адрес», «Телефон», «Email», «Расписание», «Текст краткого описания» и «Настройки карты» меняются соответствующие элементы страницы контактов. Для настройки параметров карты выполните двойной клик по элементу Яндекс.Карты: настраиваемая карта в открывшемся диалоговом окне редактирования включаемой области.

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

Ссылка «Перейти к редактированию страницы контактов» переносит в публичную часть сайта на страницу контактов.



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

Футер, баннеры, мобильная версия и личный кабинет




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

Счетчики и цели

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



В этих группах собраны поля настроек счетчиков метрик, в частности Яндекс.Метрики.

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

Если вы используете Яндекс.Метрику с целями, активируйте соответствующее поле и заполните остальные.

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

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


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

Настройки для мобильной версии сайта

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

В решениях Аспро: Digital-компания и Аспро: Next реализован отдельный блок настроек для мобильной версии сайта. Обычно такая возможность присутствует только в крупных проектах.

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



Во вкладке «Мобильная версия» есть примеры таких параметров для настройки как:

  • «Мобильная шапка» (1);
  • «Тип мобильного меню» (2);
  • «Способ отображения мобильного меню» (3).

В темах оформления предусмотрены белая и цветная мобильные шапки.



Типы мобильного меню предлагают 2 варианта: «Краткий» и «Подробный».

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


В Аспро: Next при использовании мультирегиональности последним пунктом меню дополнительно отображается название города, для которого предназначена просматриваемая версия сайта.


Во втором – подключаются дополнительные блоки: личный кабинет, корзина, адрес компании и способы связи.

Для Аспро: Digital – это личный кабинет, корзина, адрес компании и способы связи.


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



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




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



В Аспро: Digital применить настройки для мобильной версии можно только в админке: Рабочий стол → Аспро: Digital → Настройки.



В блоке «Мобильная версия» установите ту комбинацию настроек, которая вам нравится.


В пунктах меню «Мобильная шапка» и «Тип мобильного меню» присутствует вариант «Custom», которого нет в виджете настроек. Этот вариант предназначен для разработчиков.

Просмотр мобильной верстки с ПК

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

В Google Chrome, Mozilla Firefox и Яндекс браузере инструменты разработчика открываются клавишей F12.

В браузере Opera нужно открыть меню браузера и кликнуть пункт Другие инструменты → Показать меню разработчика.


Появится пункт «Разработка». Отсюда можете вызвать подпункт «Инструменты разработчика» или зажать комбинацию Ctrl+Shift+I.


Расположение кнопки перехода в режим адаптивного дизайна у Google Chrome, Opera и Яндекс браузера:


Кнопка перехода в режим адаптивного дизайна у Mozilla Firefox:

Главная страница

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

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

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

Обзор элементов главной страницы

Решение позволяет скомпоновать главную страницу из следующих элементов:

  • Баннеры с текстовым описанием и кнопками навигации (1) (вид баннеров зависит от используемого типа страницы);


  • Разделы каталога товаров, представленных на сайте (2);


  • Тизеры преимуществ, которые помогут рассказать о преимуществах компании и предоставляемом сервисе (3);


  • Презентация проектов из портфолио (4);


  • Предоставляемые компанией услуги (5); 


  • Блок «Наши предложения» с товарами, которые необходимо выделить – например, новинки и товары по акции (6); 


  • Слайдер с партнерами компании (7);


  • Последние новости из instagram (8);


  • Анонсы новостей и акций из раздела «Информация» (9);


  • Слайдер с отзывами клиентов (10);


  • Блок с перечнем статей (11) из раздела «Информация»; 


  • Небольшая информация о компании (12);


  • Карта, с помощью которой можно найти ваш офис (13).


Элементы, которые отображаются в блоках (товары, акции, статьи) выбираются в настройках. О том, как это сделать, написано в уроке «Редактирование блоков».

Типы главной страницы

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




Переключатель типов (1) находится на вкладке «Главная». При смене типа в публичной части вы можете сразу увидеть, как будет выглядеть страница после сохранения изменений. Применить выбранный тип можно с помощью кнопки с изображением стрелки (2) в правом верхнем углу.




Выбрать тип главной страницы, а также включить виджет, если он не отображается, можно в административной части сайта. Для этого перейдите в Рабочий стол → Аспро: Allcorp2 → Настройки.





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





Выбрать тип главной страницы можно в группе параметров «Главная».



1 тип главной страницы

Главная страница первого типа состоит из 10 блоков, которые по умолчанию отображаются в следующем порядке:



  • Большие баннеры (1) – в этом типе баннеры заполняют верхнюю часть страницы во всю ширину, а также заходят на область шапки сайта;



  • Разделы услуг в виде плавающих баннеров (2);
  • Категории товаров (3);
  • Блок «Наши продукты» (4);
  • Тизеры преимуществ (5);
  • Новости и акции из раздела «Информация» (6);
  • Анонсы статей из раздела «Информация» (7);
  • Слайдер с отзывами клиентов (8);
  • Краткая информация о компании (9);
  • Логотипы партнеров (10).
Дополнительно можно подключить отображение портфолио (1), новостей из Instagram (2) и карту с расположением офиса (3).


2 тип главной страницы

По умолчанию второй тип главной страницы (по сравнению с первым) более компактен и включает отображение следующих 5 блоков:

  • Большие баннеры во всю ширину страницы (1);


  • Портфолио с выполненными проектами

    , перечень услуг (5), блок «О компании» (6), слайдер с партнерами (7), карту (8).

3 тип главной страницы

3 тип содержит всего 8 блоков, из которых по умолчанию включены:



  • Баннеры, выровненные по ширине контентной области (1);


  • Категории услуг (2);
  • Тизеры преимуществ (3);
  • Блок «Наши продукты» (4);
  • Анонсы выполненных проектов (5);
  • Карта (6);
Дополнительно можно активировать блок с информацией о компании (2) и слайдер с логотипами ваших партнеров (1).



4 тип главной страницы

В четвертом типе активны все 13 блоков конструктора:

  • Баннеры (1) – здесь большие баннеры дополняются сбоку маленькими баннерами, которые можно отключить;


  • Разделы каталога товаров (2);
  • Тизеры преимуществ (3);
  • Проекты из портфолио (4);
  • Услуги компании (5);
  • Блок «Наши предложения» (6);
  • Партнеры (7);
  • Последние новости из instagram (8);
  • Анонсы новостей и акций из раздела «Информация» (9);
  • Отзывы клиентов (10);
  • Последние статьи из раздела «Информация» (11);
  • Блок «О компании» (12);
  • Карта (13).

Настройка отображения и редактирование блоков

Для настройки отображения блоков откройте в публичной части сайта виджет настроек.



Примечание: Виджет настроек отображается, если в админке активирован параметр «Переключатель тем» в Рабочий стол → Аспро: Allcorp2 → Настройки.



Перейдите на вкладку «Главная». Здесь под переключателем типа страницы находится перечень доступных блоков. Чтобы отключить один из блоков, сместите ползунок влево (1). Чтобы включить отображение блока – вправо (2). Например, на скриншоте ниже представлены настройки, при которых на главной странице не будет отображаться блок с перечнем услуг.



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




Под списком блоков в виджете можно увидеть дополнительные настройки – переключатели внешнего вида для блоков с услугами (1) и выполненными проектами (2) (если эти блоки включены).



Для услуг доступно 4 варианта оформления:

  • В виде иконок с описанием. Под иконками услуг размещается описание каждой категории. Слева от плитки (3) находится небольшое описание сферы деятельности компании (1) и кнопка-ссылка на раздел «Услуги» (2). В раздел можно попасть также с помощью ссылки «Все услуги» (4) в правом верхнем углу блока.


  • В виде картинок с описанием. В таком варианте под каждой картинкой размещается описание категории. Слева от перечня (3), как и в варианте №1, находится небольшое описание (1) с ссылкой на раздел (2). Также в раздел можно попасть с помощью ссылки «Все услуги» (4) в правом верхнем углу.


  • В виде круглых картинок с описанием. Изображение анонса категории помещается в рамку в виде круга и располагается слева от ее названия и краткого описания. Попасть в раздел «Услуги» можно с помощью ссылки «Все услуги» (1) в правом верхнем углу блока.


  • В виде плавающих баннеров. Как и в первых 2х вариантах, слева находится текстовое описание раздела «Услуги» (1) и ссылка на него (2), а справа располагается плитка с изображениями категорий предоставляемых услуг (3). Ссылка на раздел дублируется в правом верхнем углу и носит название «Все услуги» (4).


Портфолио можно представить в виде:

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


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


Редактирование блоков

Баннеры

В публичной части сайта вы можете изменить (2), удалить (3) существующий баннер или создать новый (1) (это относится только к большим баннерам, маленькие баннеры сбоку редактируются в админке). Для этого перейдите в режим правки и наведите указатель на большой баннер. На всплывающем меню выберите соответствующий пункт. 


Разделы каталога

На главной странице сайта можно изменить (3) и удалить (4) существующий раздел каталога. Для этого перейдите в режим правки, наведите указатель на анонс раздела и выберите соответствующий пункт на всплывающем меню. Указатель в режиме правки на содержимом рассматриваемого блока также вызывает меню, которое позволяет добавить товар (1) или раздел (2) в каталог.



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



Для изменения описания над категориями наведите указатель в режиме правки на область с текстом. Появится кнопка «Редактировать описание над разделами как html» (5). Эта кнопка вызывает визуальный редактор, с помощью которого вы можете ввести свой текст.





Чтобы изменить название блока (1) и ссылки в раздел «Продукты» (2), нажмите на всплывающем меню на шестеренку. В новом окне перейдите к группе «Дополнительные настройки» и заполните нужные поля. Также здесь можно уменьшить или увеличить количество отображаемых в блоке разделов (3).



Тизеры

В режиме правки на главной странице в блоке тизеров можно изменить (2) или удалить (3) активный тизер. Для этого наведите на него курсор и используйте кнопки всплывающего меню. Курсор на блоке тизеров также вызывает меню с кнопкой «Добавить элемент» (1), которая поможет вам создать новый тизер.



Для отображения нового тизера на главной странице установите соответствующую галку на вкладке «Элемент».



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



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



Выполненные проекты

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



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



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



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



В «Дополнительных настройках» есть поля, которые отвечают за заголовок блока (1) и название ссылки в раздел с проектами (2).



Услуги

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



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



Наши продукты

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



Перейдите в группу «Дополнительные настройки» и заполните поле «Заголовок блока» так, как это нужно вам.




Блок «Наши продукты» наполняется благодаря специальным настройкам в карточках товаров. Они находятся на основной вкладке. Чтобы вывести товар на главной странице, установите соответствующую галку (1). Чтобы отобразить товар на нужной вкладке («Акция», «Рекомендуем», «Новинка», «Хит»), выберите подходящий вариант в перечне «Хит продаж» (2).



Бренды

Чтобы добавить нового партнера (бренд) с главной страницы, перейдите в режим правки. Наведите указатель на слайдер. На появившейся панели нажмите «Добавить партнера».



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


В группе основных параметров введите требуемое значение в поле «Количество новостей на странице». 


Последние новости

Блок показывает последние новости из Instagram, который вы привязали. Для изменения заголовка блока перейдите в режим правки, наведите указатель на содержимое блока и нажмите на изображение шестеренки на появившемся меню.



Поле «Заголовок блока» находится  в группе настроек «Основные параметры».  




Аккаунт инстаграма подключается в админке в Аспро: Allcorp2 → Настройки.




Для подключения укажите API token в группе настроек «Главная».




Новости и акции

Чтобы добавить новость на главной странице, перейдите в режим правки и наведите указатель на содержимое блока. Нажмите «Добавить новость». 



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




Также вы можете внести дополнительные изменения во внешний вид блока. Для этого откройте редактор параметров компонента с помощью кнопки в виде шестеренки.



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





Изменить заголовок блока (1) и название ссылки на все новости (2) можно в «Дополнительных настройках». Здесь же устанавливается количество элементов,  отображающихся в одной строке (3) и отображение даты публикации новости (4).




Отзывы

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



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




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



Количество отображаемых в блоке отзывов определяется в «Основных параметрах». Если у вас 10 отзывов, и вы хотите показать их все, а отображается всего 5, исправьте значение в соответствующем поле.



Заголовок блока (1) и название ссылки на отзывы (2) можно изменить в группе «Дополнительные настройки».



Статьи

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




Для отображения новой статьи в блоке на главной активируйте одноименную настройку (1) в карточке статьи. Чтобы визуально выделить анонс статьи из общего ряда, увеличьте изображение ее анонса (2).




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



Перейдите в группу «Основные параметры», чтобы установить количество элементов, которое нужно выводить в блоке.



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



О компании

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


В редакторе вы можете вставить свой текст.




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




Замените изображение на свое.



Значения показателей изменяются в административной части сайта. Перейдите в Рабочий стол → Контент → Highload-блоки → AsproAllcorp2CompanyReference. В списке вызовите меню кнопки «Гамбургер» у показателя, который необходимо изменить, и нажмите на одноименный пункт.



В редакторе элемента введите описание показателя в поле «Название» (1) и значение в поле «Описание» (2). Здесь же можно загрузить свою иконку для показателя в параметр «Файл» (3).



Карта

На карте выводится визитка компании с контактными данными. Чтобы заменить демо контакты на свои, переключитесь в режим правки и по очереди наводите указатель на элементы, которые нужно изменить. Над ними появятся кнопки, которые позволяют отредактировать адрес (1), время работы (2) и e-mail (3).




Номера телефонов редактируются в административной части сайта. Откройте в админке вкладку Аспро: Allcorp2 (1) и перейдите в «Настройки» (2).





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





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




Здесь, в группе «Основные параметры», вы можете определить внешний вид карты и установить на карте точки с адресом компании или ее филиалами.

Рассмотрим сначала как установить маркеры на карте. Нажмите кнопку «Изменить». 



Перед вами откроется новое окно:



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



Название точки продублировалось в соответствующем списке (1). После того, как вы закончили с нанесением маркеров на карту, нажмите «Закончить» (2) и сохраните изменения.



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



Здесь доступны следующие виды:

  • схема, народная карта (народная карта составляется с помощью пользователей сервиса Яндекс и используется для средних и мелких городов, где схемы недостаточно подробны и актуальны)



  • спутник



  • гибрид, народный гибрид (народный гибрид, как и народная карта, составляется силами пользователей)


Управление расположением блоков

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

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


Делается это очень легко:

  1. Откройте виджет настроек;
  2. Перейдите на вкладку «Главная»;
  3. Выберите для себя один из типов страницы;
  4. Ухватите левой кнопкой мыши вертикальные стрелки рядом с ползунком, который отключает отображение блока, и переместить строку вверх или вниз.



Элементы сместятся в сторону освободившегося пространства – вверх или вниз, в зависимости от того, откуда вы перетащили строку. Например, при перемещении блока с услугами под блок «О компании», тизеры преимуществ займут 2ое место в списке, а блок «О компании» – третье.




Вид главной страницы до изменений:





Вид главной страницы после изменений:




Также управлять блоками можно в админке в Аспро: Allcorp2 → Настройки.




Пролистайте список настроек до группы «Главная». Выберите один из типов главной страницы в соответствующем списке.





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




Основной баннер

Внешний вид больших баннеров на главной имеет 4 типа, в соответствии с типами главной страницы (подробнее о типах главной страницы здесь).

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



Переключитесь на вкладку «Главная». Установите тип главной страницы и активируйте отображение баннеров на главной – сместите ползунок вправо.



  • В админке

Перейдите в Аспро: Allcorp2 → Настройки.



Пролистайте параметры до группы «Главная». Выберите тип главной страницы и установите галку ««Большие баннеры» на главной».



Для управления основными баннерами из админки перейдите в Рабочий стол → Контент → Реклама (aspro.allcorp2) → Большие баннеры.



Нажмите «Добавить баннер» (1), чтобы создать новый. Для изменения (2), удаления (4) или отключения (3) существующего вызовите меню кнопки «Гамбургер» и используйте соответствующий пункт.

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


Наведите указатель на баннер. Появятся 2 меню с кнопками, позволяющими изменить (2), удалить (3) текущий или создать (1) новый баннер.



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



  • Тип баннера (5) – с помощью этой настройки вы можете задать внешний вид баннера: картинка или изображение с текстом, расположенным с левой или правой стороны;
  • Ссылка с баннера (6) – вставьте в это поле адрес нужной страницы, чтобы сделать картинку без кнопок кликабельной;
  • Текст 1ой и 2ой кнопки (7) – параметры добавят на баннер кнопки с указанными в них названиями;
  • Класс 1ой и 2ой кнопки (8) – поля определяют, как должны выглядеть кнопки (подробнее об оформлении читайте здесь);
  • Ссылка с 1ой и 2ой кнопки (9) – здесь к кнопкам привязываются нужные страницы;
  • Код формы, вызываемой 1ой и 2ой кнопками (10) – с помощью этих настроек к кнопкам можно привязать формы обратной связи, например, «Задать вопрос» (о том, где взять код формы, читайте в следующем уроке);



Если кнопки не нужны, оставьте поля 7 – 10 пустыми.

  • Цвет шапки и текста на баннере (11) – устанавливает цвет для соответствующих элементов – темный или светлый.


Если вы собираетесь использовать составной баннер, на вкладке «Анонс» загрузите активную картинку (1). В описании (2) напишите небольшой текст, который будет выводиться на баннере.



На вкладке «Подробно» загружается  основное изображение (фоновое) (1) для баннера. В поле детального описания укажите заголовок (шапка), который будет выводиться на баннере (2).



К большим баннерам также можно добавить видео или встроить его вместо изображения.

Для настройки видео перейдите на одноименную вкладку. Установите галку «Показывать видео» (1), чтобы включить его использование. Добавить видео можно 2мя способами:

  1. Загрузить файл в систему (2);
  2. Привязать ролик с youtube (3) – о том, как это сделать, читайте в слудующем уроке «Добавление видео с Youtube».
С помощью соответствующей настройки (4) установите источник видео: html embed код «<iframe></iframe>» или видео из файла. Вы можете использовать оба способа привязки и переключаться между ними. Это может пригодиться, если с сервисом «Youtube» возникнут проблемы.



Если вы хотите использовать видеоролик вместо баннера (в таком случае можно не загружать изображение и текст), установите галку у пункта «Автовоспроизведение» (5). Настройка «Заполнить видео по размеру» (6) поможет изменить изображение по параметрам области для баннеров. Если вы хотите зациклить видео, активируйте соответствующий пункт (8). Для отключения звука установите галку у одноименного параметра (7).

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


Также вы можете позволить пользователю самостоятельно решить, смотреть ролик или нет. Для этого снимите галку «Автовоспроизведение» (5) и заполните поле, устанавливающее название для кнопки (10). На баннере появится соответствующий элемент, с помощью которого посетитель может запустить видео.



Также в карточке среди настроек есть параметр, который позволяет изменить стиль кнопки (9) (подробнее в главе «Графические материалы»).

Добавление формы обратной связи

С помощью кода формы к кнопкам на основном баннере можно привязать формы обратной связи — например, «Задать вопрос».

Код формы можно взять из:
  • Инфоблока. Для этого перейдите в админке в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Формы (aspro.allcorp2) → Задать вопрос и скопируйте содержимое поля «Символьный код».



  • Настроек веб-формы. Перейдите в админке в Рабочий стол → Сервисы → Веб-формы → Настройка форм. Найдите в таблице нужную форму и скопируйте запись в столбце «Символьный идентификатор».


Добавление видео с «Youtube»

Чтобы добавить видео с Youtube, откройте его в браузере. Нажмите «Поделиться» (1) и выберите «Встроить» (2).




В новом окне нажмите «Копировать».



Вернитесь в карточку баннера и установите код в соответсвующее поле:



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


Плавающие баннеры

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



Включить отображение блока и настроить его внешний вид можно:
  • В виджете настроек
Раскройте виджет, нажав на кнопку в левой части сайта.



Переключитесь на вкладку «Главная». Активируйте отображение блока и пролистайте список вниз.



Выберите вариант отображение нужного блока услуг:



  • В админке

Перейдите в Аспро: Allcorp2 → Настройки;



Пролистайте параметры до группы «Главная». Включите отображение блока на главной и выберите для него нужный вид:


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

Рассмотрим управление составом блока из публички на примере типа «Плавающие баннеры». Переключитесь в режим правки.



Наведите указатель на баннер, который необходимо изменить (2) или удалить (3). Над ним появится меню с соответствующими элементами управления. Также при наведении указателя на любую область блока над ним высветится кнопка «Добавить элемент» (1). С ее помощью вы можете создать новый плавающий баннер.



Для управления содержимым блока из админки перейдите в Рабочий стол → Контент → Реклама (aspro.allcorp2) → Плавающие баннеры.


Чтобы создать новый баннер, нажмите «Добавить элемент» (1). Если вы хотите изменить (2) или удалить (4) существующий, вызовите меню кнопки «Гамбургер». Здесь же можно отключить отображение баннера (3) на странице.

Рассмотри настройки подробнее. Для создания баннера на основной вкладке обязательно дайте ему название (3). Чтобы включить его отображение на сайте, установите галку у параметра «Активность» (1). Также при желании вы можете задать, в какой период его будет видно в блоке (2) и на какой позиции (4) (чем меньше индекс сортировки, тем выше и левее позиция элемента в списке).


В группе параметров «Значения свойств» вы можете:
  • загрузить иконку (5) – для типа блока «С иконками и описанием»;
  • указать ссылку на страницу рекламируемой услуги (6);
  • сделать блок широким (для типа блока «Плавающие баннеры») (7).
Основное изображение загружается в поле «Картинка для анонса» (1) на одноименной вкладке. Ниже указывается краткое описание предлагаемой услуги (2).


Дополнительные баннеры, располагающиеся справа от основного

В этом уроке расскажем о баннерах, располагающихся на главной странице справа от основного.



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



Переключитесь на вкладку «Главная» (1), выберите четвертый тип (2)



Так как дополнительные верхние баннеры идут в связке с основным, они автоматически активируются вместе с ним (3).
  • В админке
Перейдите в Аспро: Allcorp2 → Настройки.



Пролистайте параметры до группы «Главная». Установите тип главной страницы №4 и активируйте отображение больших баннеров.



Карточки рассматриваемых баннеров хранятся в Рабочий стол → Контент → Реклама (aspro.allcorp2) → Верхние маленькие баннеры.



Элементы управления здесь стандартные – отдельная кнопка для добавления нового баннера (1) и меню кнопки «Гамбургер» для изменения (2), удаления (4) и отключения отображения (3) существующего.

Настройка дополнительного баннера содержит одну вкладку, на которой можно:
  • дать элементу название (3) (оно будет отображаться на баннере);
  • добавить небольшое описание (отображается под названием баннера) (7).



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


Основные разделы

В этом уроке расскажем про основные разделы решения: каталог, услуги и расписание. Покажем, как создавать новые разделы и подразделы, редактировать их и привязывать Google-таблицы с расписанием. А также расскажем про новый функционал — управление расположением блоков. Теперь только вы решаете, в каком порядке будут отображаться новости, акции, галерея, услуги, статьи, видео и многое другое!

Каталог

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

В этой главе вы узнаете, как настроить категории товаров (списки), страницы с подробным описанием продукции и изменить расположение блоков каталога.

Настройка и редактирование разделов каталога

Каталог включает в себя список с анонсами разделов (2) (основных категорий товаров) и блок с кратким описанием продукции компании (1).


Анонс категории товаров (раздела) состоит из изображения, краткого описания и списка входящих в него товаров (подразделов).

Для управления содержанием страницы в публичной части сайта перейдите в режим правки.


Чтобы изменить (2) или удалить (3) раздел, наведите курсор мыши на анонс. Используйте соответствующие кнопки на всплывающем меню.




Чтобы изменить описание основного раздела, наведите на него указатель. На появившемся меню нажмите «Изменить область» (1). Откроется окно визуального редактора, где можно отредактировать выводимый в блоке текст.



Добавить новый раздел можно только в административной части сайта. Для этого перейдите в Рабочий стол → Контент → Каталог (aspro.allcorp2) → Продукты.



Чтобы добавить новую категорию (раздел) нажмите соответствующую кнопку (1). Для изменения (2) или удаления (3) существующей используйте меню кнопки «Гамбургер».

Обзор карточки подраздела

При создании новой категории (раздела) на основной вкладке вам понадобится:



  • определить, будет ли раздел отображаться на сайте (1);
  • определить его место в структуре каталога (2) – в списке на странице основного раздела или в существующей категории;
  • задать название раздела (3);
  • загрузить изображение для оформления анонса (4);
  • указать описание, которое будет использоваться для оформления списка категорий или товаров, содержащихся внутри раздела (5).



На вкладке «Доп. поля» вы можете:



  • управлять внешним видом списка товаров с помощью поля UF_VIEWTYPE (1). Список товаров может иметь вид:

    • плитки


    • списка


    • прайса



  • изменять описание анонса категории и блока с кратким описанием в списке элементов (2).




  • включать отображение категории на главной странице первого и четвертого типа (3) (о типах подробнее можно узнать здесь).

Настройка и редактирование карточки товара

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




Добавить новый товар можно на странице списка товаров в каталоге.





В административной части сайта редактировать карточку товара можно в Рабочий стол → Контент → Каталог (aspro.allcorp2) → Продукты. Далее нужно открыть подраздел, в котором должен отображаться товар. Например, Аренда спецтехники → Автокраны.



Для добавления товара нажмите одноименную кнопку (1). Для изменения (2), удаления (4) или отключения видимости товара на сайте (3) используйте пункты меню кнопки «Гамбургер».

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

Вкладка «Товар»

На основной вкладке содержатся настройки, определяющие:

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


Ниже находится группа параметров «Значения свойств», которая содержит:



  • 2 параметра цены (4) – действующей и старой (зачеркнутой);
  • цену для фильтра (5) – если поле оставить пустым, то при использовании посетителями умного фильтра товар отображаться не будет (обязательно указывайте только числовое значение);
  • поле привязки к бренду (6);
  • артикул (7);
  • параметры, активирующие блоки обратной связи (8) (кнопка «Заказать товар» отображается только на баннере);



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




  • настройку, которая устанавливает на анонсе товара одноименный стикер (10);
  • настройку, которая определяет, будет ли товар отображаться в блоке «Наши продукты» на соответствующей стикеру вкладке (9);


  • настройку, которая устанавливает отметку товара дня (11) – карточка товара будет отображаться под боковым меню, если оно настроено соответствующим образом (подробнее в уроке про виджет настроек).


Последней группой параметров идут «Спецификации» (12).



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



О том, как создавать свои характеристики, читайте в следующем уроке.

Вкладка «Видео»

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




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



В выпадающем меню выберите «Встроить».



В новом окне кликните на области с кодом (1) (он выделится весь) и нажмите «Копировать» (2).



Вставьте код в одно из полей в конце вкладки.




После сохранения изменений видео появится под соответствующим табом.




Вкладка «Анонс»

Оформить анонс товара можно на одноименной вкладке. Здесь вы можете загрузить изображение (1) и добавить краткое описание (2).



Вкладка «Подробно»

На вкладке «Подробно» вы можете загрузить в верхнюю галерею основное (1) и дополнительные (2) изображения товара.



Также на вкладке «Подробно» есть отдельная область загрузки для большой галереи (3) – блока, вид которого можно изменять и который можно перемещать.








Здесь же можно загрузить файлы (4) для таба «Документы».



И заполнить таб описания (5).


Вкладка «Связи»

На странице товара можно вывести связанные элементы:









  • Проекты (1);


  • Вопросы и ответы (2);


  • Услуги (3);


  • Акции (4);


  • Товары (5);


  • Тизеры (6);


  • Отзывы (7);


  • Тарифы (8).



Вкладка «Баннер»



Баннер, связанный с товаром, включается (1) на одноименной вкладке. Чтобы добавить фон, загрузите изображение в соответствующий параметр (3). Если вы хотите сделать составной баннер, также загрузите активную картинку (2). Для изменения цвета текста введите его 16-ричный код в соответствующее поле (4).



Вкладка «Разделы»

Здесь можно привязать товар в нужный раздел каталога.


Настройка пользовательских характеристик

Характеристики выводятся в карточке товара под соответствующим табом:


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

Добавить новую пользовательскую характеристику можно всего в 3 шага. Вам понадобится:

  1. Добавить новое свойство (характеристику) в инфоблок.

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

Перейдите в административную часть сайта в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Каталог (aspro.allcorp2). Выберите в списке «Продукты».



Откройте вкладку «Свойства» и пролистайте перечень до конца. Создайте свойство в первой свободной строке. Если свободных строк нет, нажмите на кнопку «Еще».



Для новой характеристики:
  • введите ее название (1);
  • укажите тип хранимого в ней значения (2) (подробнее о типах написано ниже);
  • установите галку «Акт.» (3), чтобы свойство отображалось в карточках товаров и на странице с описанием;
  • задайте индекс сортировки — 500 (4). Все свойства инфоблока размечены по группам, чтобы ими было удобнее управлять. Подробнее об этом читайте здесь;
  • задайте ей понятное кодовое название (английскими буквами) (5).


Для характеристик можно использовать следующие типы:

  • Число (2): используйте этот тип, если характеристика должна принять числовые значения — например, для метров, килограмм или дней.
  • Строка (3): используйте этот тип, если характеристика должна быть описана строкой (символами) — например, артикул модели или название категории.
  • Список (1): используйте этот тип, если в характеристике могут использоваться несколько значений — например, статус «В наличии» или вид поставки «Коробка».
Примеры описанных типов представлены на скриншоте ниже:



Если вам нужно использовать свойство типа «Список», укажите для него дополнительные настройки. Для этого нажмите кнопку с многоточием в конце строки.



В новом окне в пункте «Внешний вид» (1) выберите вариант «Список» и заполните таблицу (2) значениями, которые может принимать характеристика.

Пример значений для свойства «Вид поставки»:



При создании новой характеристики типа «Число» и «Строка» дополнительные настройки не требуются.

Сохраните изменения. Новое свойство добавлено в инфоблок.

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

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




В верхнем левом перечне (1) выберите «Товар», а в правом (2) – название вкладки, на которой хотите отображать характеристику (в примере свойство будет выведено на основную вкладку «Товар»). Найдите в списке «Доступные поля» (3) созданную вами характеристику, выделите её и нажмите на стрелку (4).



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



После этого созданная характеристика будет доступна для заполнения.



        3. Настроить параметры компонента

В публичной части сайта откройте страницу с описанием товара. Перейдите в режим правки.



Наведите курсор на контентную область. На появившейся панели нажмите на шестеренку.



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



Готово! Характеристика добавлена.


Управление расположением блоков и табов

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

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

Видеурок по управлению расположением блоков и табов:


Управлять положением блоков и табов на детальной странице можно в параметрах компонента «Новости».

Внимание! Настройки в параметрах компонента действуют на все элементы внутри раздела, включая те, что находятся в разных внутренних подразделах (категориях).

Чтобы открыть редактор параметров компонента, перейдите в каталог и переключитесь в режим правки.




Наведите курсор на список категорий товаров и нажмите на изображение шестеренки.




В открывшемся окне перейдите к группе параметров «Настройки детального просмотра». Здесь находятся:

  • Конструктор положения табов для шаблона с табами



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



  • Конструктор положения блоков для шаблона с табами



Конструктор управляет общим видом страницы, позволяя изменять порядок расположения блоков. Например, на изображении ниже представлены блоки «Галерея» (1), «Тизеры» (2) и «Табы» (3). Используя этот конструктор, вы можете менять их местами так, как нужно именно вам.



  • Конструктор положения блоков для шаблона без табов



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




Их порядок тоже можно настроить в своем конструкторе – в конструкторе положения блоков для безтабового шаблона.

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



Таб или блок, на чье место вы переместе элемент, сместится вниз или вверх (в зависимости от того, где освободится место) вместе с остальными элементами. В примере, блок «Комментарии» располагался внизу, поэтому когда мы перенесли его выше – на место блока «Отзывы» – отзывы и прочие блоки сдвинулись вниз.


Услуги

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

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


Настройка и редактирование списков

Страница «Услуги» включает в себя список разделов (категорий услуг) (2) и краткое описание (1), где можно разместить дополнительную информацию об услугах, деятельности компании и ее специфике.



Анонс карточки раздела (категории услуги) состоит из изображения, краткого описания и списка входящих в него услуг (подразделов).

Для управления содержанием страницы в публичной части сайта перейдите в режим правки.


Чтобы изменить (1) или удалить (2) раздел, наведите курсор мыши на его анонс. Используйте соответствующую вашей цели кнопку на всплывающем меню.



Для изменения описания страницы «Услуги» наведите на него указатель. В появившемся меню нажмите «Изменить область» (3). Откроется окно визуального редактора, где можно отредактировать выводимый в блоке текст.


Добавить новый раздел (категорию услуг) можно только в административной части сайта. Для этого перейдите в Рабочий стол → Контент → Контент (aspro.allcorp2) → Услуги. Чтобы добавить новый раздел нажмите соответствующую кнопку (1). Для изменения (2) или удаления (3) уже существующего используйте меню кнопки «Гамбургер».



При создании нового раздела (категории услуг) на основной вкладке вам понадобится:



  • определить, будет ли раздел отображаться на сайте (1);
  • определить его место в структуре каталога (2) – в списке на странице основного раздела или в существующей категории;
  • задать разделу название (3) – поле обязательно для заполнения;
  • загрузить изображение для анонса (4);
  • указать описание, которое будет использоваться для оформления списка услуг, содержащихся внутри раздела (5).


Для изменения описания анонса раздела (категории услуг) перейдите на вкладку «Доп. поля» и измените текст в поле «Краткое описание».




Текст из этого поля также содержится в списке внутренних элементов.

Настройка и редактирование элементов детальной страницы

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



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




В административной части сайта для управления карточками услуг перейдите в Рабочий стол → Контент → Контент (aspro.allcorp2) → Услуги и откройте раздел/подраздел, в котором должна находиться редактируемая или создаваемая услуга. Для добавления услуги используйте одноименную кнопку (1), для изменения (2) или удаления (3) существующей – меню кнопки гамбургер.



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

Вкладка «Услуга»


Каждая услуга обязательно должна иметь свое название (3). Чтобы она отображалась на сайте, установите галку у параметра «Активность» (1). Здесь же при необходимости вы можете задать период, в который будет отображаться услуга (2). Поле «Сортировка» (4) определяет, в каком порядке должны отображаться услуги в списке — чем больше цифра, тем ниже отображение.



На этой же вкладке ниже располагается группа параметров «Значения свойств». Она включает в себя следующие параметры:




  • «Расположение фото» (5) – управляет положением картинки в начале страницы. Ее можно разместить сбоку от краткого описания (слева или справа) или над ним –  по ширине (боковая панель расположена сбоку от изображения), наверху (изображение помещается над содержимым страницы и боковым меню).


По ширине:



  • 2 параметра, дополняющих внешний вид анонса услуги в списке элементов – «Старая цена» (6) и действующая «Цена» (5).

  • Область для загрузки файлов (8) – наполняет содержимое таба «Документы».



  • Область для загрузки изображений в галерею (9). Галерея может быть большой со своими элементами управления и миниатюрами или маленькой. 

Большая галерея:




Маленькая галерея:



  • Перечень связанных товаров (10). Узнать, как привязывать элементы можно здесь.


  • Параметры, активирующие блоки обратной связи (11):

    • «Задать вопрос»


    • «Заказать услугу»



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



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



Они отображаются в соответствующем табе.



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

Вкладка «Анонс»





Здесь можно загрузить изображение (1) для анонса услуги и добавить ему краткое описание (2).



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



Вкладка «Подробно»





На этой вкладке вы можете загрузить картинку, которая будет отображаться в начале детальной страницы (1), и заполнить содержимое таба «Описание» (2).



Вкладка «Связи»

Здесь к услуге можно привязать: 






  • Акции (1) – отображается отдельным блоком;

  • Новости (2) – отображается отдельным блоком;

  • Отзывы клиентов (3) – отображается отдельным блоком;


  • Проекты (4) – отображаются в табах;


  • Сотрудников (5) – отображаются отдельным блоком;


  • Статьи из раздела вопросов и ответов (6) – отображаются в табах;


  • Дополнительные услуги (7) – отображаются отдельным блоком.



О том, как привязывать элементы, читайте в этом уроке.

Вкладка «Баннер»


Чтобы включить отображение баннера наверху страницы (во всю ширину), установите соответствующую галку (1). Загрузите фоновое изображение в одноименный параметр (3). Для создания составного баннера добавьте активную картинку (2).



Баннер будет содержать кнопки форм обратной связи («Заказать услугу» и «Задать вопрос»), если соответствующие формы активированы на вкладке «Услуга», и текст со вкладки «Анонс». Чтобы изменить цвет текста введите в соответствующее поле (4) код цвета (по умолчанию используется черный).




Вкладка «Разделы»

На этой вкладке вы можете перенести созданную услугу в другой раздел (категорию услуг).


Настройка пользовательских характеристик

Характеристики выводятся в карточке услуги под соответствующим табом:



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

Добавить новую пользовательскую характеристику можно всего в 3 шага. Вам понадобится:

  1. Добавить новое свойство (характеристику) в инфоблок.

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

Перейдите в административной части сайта в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Контент (aspro.allcorp2). Выберите в списке «Услуги».



Откройте вкладку «Свойства» и пролистайте перечень до конца. Создайте свойство в первой свободной строке. Если свободных строк нет, нажмите на кнопку «Еще».



Для новой характеристики:
  • Введите ее название (1);
  • Укажите тип хранимого в ней значения (2) (подробнее о типах написано ниже);
  • Установите галку «Акт.» (3), чтобы свойство отображалось в карточках услуг и на странице с описанием;
  • Задайте индекс сортировки — рекомендуем задавать индекс от 500 (4). Для удобства управления все свойства инфоблока размечены по группам. Подробнее об этом читайте здесь;
  • Задайте ей понятное кодовое название (английскими буквами) (5).


Для характеристик можно использовать следующие типы:
  • Число (2): используйте этот тип, если характеристика должна принять числовые значения — например, для метров, килограмм или дней.
  • Строка (3): используйте этот тип, если характеристика должна быть описана строкой (символами) — например, артикул модели или название категории.
  • Список (1): используйте этот тип, если характеристика может принимать одно из определенных значений. Например, для характеристики «Статус» есть 2 значения – «В наличии» и «Нет в наличии».
Примеры описанных типов представлены на скриншоте ниже:



Если вам нужно использовать свойство типа «Список», укажите для него дополнительные настройки. Для этого нажмите кнопку с многоточием в конце строки.



В новом окне в пункте «Внешний вид» (1) выберите вариант «Список» и заполните таблицу (2) значениями, которые может принимать характеристика.

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



При создании новой характеристики типа «Число» и «Строка» дополнительные настройки не требуются.

Сохраните изменения. Новое свойство добавлено в инфоблок.

       2. Заполнить характеристику в карточке услуги в админке.

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



В верхнем левом перечне (1) выберите «Услуга», а в правом (2) – название вкладки, на которой хотите отображать характеристику (в примере свойство будет выведено на основную вкладку – «Услуга»). Найдите в списке «Доступные поля» (3) созданную вами характеристику, выделите её и нажмите на стрелку (4).



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



После этого созданная характеристика будет доступна для заполнения.



        3. Настроить параметры компонента

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




Наведите курсор на контентную область. На появившейся панели нажмите на шестеренку.




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



Готово! Характеристика добавлена.


Управление расположением блоков

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

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

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

Внимание! Настройки в параметрах компонента действуют на все элементы внутри раздела, включая те, что находятся в разных внутренних подразделах.

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



Наведите курсор на описание услуги и нажмите на изображение шестеренки.



В открывшемся окне перейдите к группе параметров «Настройки детального просмотра». Здесь вы найдете:

  • Конструктор положения табов



С помощью него можно менять местами вкладки на детальной странице услуги — например, «Характеристики», «Описание», «Проекты», «Документы», «Вопрос/ответ».



  • Конструктор положения блоков



Этот вид конструктора определяет общий вид страницы. Он может менять порядок расположения блоков так, как нужно именно вам. Например, с помощью конструктора вы можете разместить табы (1) и галерею (2) под основным изображением и кратким описанием из анонса в следующем порядке:



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



Таб или блок, на чье место был установлен другой элемент, сместится вниз или вверх (в зависимости от того, где освободилось место) вместе с остальными элементами . В примере, таб «Видео» располагался внизу, поэтому когда мы перенесли его выше – на место таба «Характеристики» – характеристики и прочие табы сдвинулись вниз.


Проекты

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

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

Настройка и редактирование списка проектов (разделов)

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

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



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



Чтобы добавить новый раздел (подраздел) перейдите в административную часть сайта. Откройте Рабочий стол → Контент → Контент (aspro.allcorp2) → Проекты и нажмите на кнопку «Добавить раздел» (1). Для изменения (2) или удаления (3) существующего подраздела выберите нужный пункт в меню кнопки «Гамбургер».



Создавая новый подраздел, обязательно дайте ему название (3). Таже на основной вкладке «Раздел»:
  • установите галку «Раздел активен» (1), если хотите, чтобы посетители могли его увидеть;
  • укажите родительский раздел (2) – так вы определите, является ли раздел самостоятельным (раздел может содержать свои элементы, этому соответствует вариант «верхний уровень») или должен стать частью существующего подраздела (раздел может содержать свои элементы и при этом сам является элементом другого раздела).


Если вы используете варианты внешнего вида «Блочный» и «Список», на основной вкладке подраздела можно добавить описание (4), которое будет отображаться под перечнем проектов.


Чтобы оформить список проектов текстом сверху (для тех же вариантов внешнего вида — «Блочный» и «Список»), переключитесь на вкладку «Доп. поля» и заполните одноименное поле.  



Внешний вид «Список» позволяет вывести текст из этого поля:

  • как на странице подраздела,



  • так и на основной странице раздела «Проекты». 


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

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



Наведите на область раздела и в появившемся меню выберете нужное действие — изменить (1) или удалить (2).


Настройка и редактирование элементов детальной страницы (карточки проекта)

Карточками проектов можно управлять из публичной части сайта. Откройте раздел «Проекты» (или его подраздел) и перейдите в режим правки.



Чтобы создать новый проект, наведите указатель на содержимое страницы и на длинном меню нажмите кнопку «Добавить проект» (3). Для изменения (1) или удаления (2) существующего проекта наведите указатель на его анонс и выберите соответствующий пункт.



Те же элементы управления (для создания нового (1), изменения (2) или удаления (3) проекта) доступны на странице с описанием проекта.



Для управления карточками проектов из админки перейдите в Рабочий стол → Контент → Контент (aspro.allcorp2) → Проекты и откройте подраздел, в котором находится или должен находиться редактируемый проект. Например, чтобы изменить карточку «Видеонаблюдение для бизнес-центра «Калейдоскоп» в демо-данных решения, необходимо открыть подраздел «Охранные системы». Чтобы добавить новый проект используйте одноименную кнопку (1), для изменения (2), удаления (4) или отключения отображения существующего проекта на сайте (3) – меню кнопки «Гамбургер».



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

Вкладка «Проект»

Для добавления нового проекта в портфолио обязательно дайте ему название (3).





Здесь также вам будет предложено:
  • включить или отключить отображение проекта на сайте (1);
  • задать период, в который проект будет доступен посетителям для просмотра (2), или при использовании варианта внешнего вида «По годам» отнести его к соответствующей группе (для этого обязательно заполните поле «Начало активности», а поле с датой окончания можете оставить пустым);


  • определить, на каком месте в списке будет отображаться проект (4) – чем больше индекс сортировки, тем ниже в списке анонс проекта;
  • вывести проект на главную страницу в соответствующий блок (6);


  • описать поставленную перед вашей командой задачу (5) – отображается в «визитке» проекта;
  • подключить блоки обратной связи (7);



  • привязать к странице карточку клиента (8);
  • добавить к описанию сопроводительные документы (9).


Если вы хотите изменить текст возле кнопок обратной связи, в режиме правки вызовите всплывающее меню с элементами управления проектом и нажмите «Изменить область».



Первая кнопка «Изменить область» (1) откроет визуальный редактор для текста под кнопками в визитке проекта, а вторая (2) – у плавающего блока «Задать вопрос».



Вид визуального редактора:




Вкладка «Анонс»

На вкладке «Анонс» можно загрузить фото для анонса (1) и написать текст для краткого описания проекта (2).



Описание для анонса используется:

  • на странице описания проекта (под изображением, оформляющим описание)



  • на основной странице раздела «Проекты» (при представлении раздела в виде списка, подробнее о настройках внешнего вида раздела в уроке про виджет настроек);



  •  на баннере.




Вкладка «Подробно»

Загрузить основное изображение (1) для страницы можно на вкладке «Подробно». Здесь же находится удобный редактор, который позволит вам добавить и отформатировать описание (2).




Вкладка «Связи»

На этой вкладке вы можете привязать к проекту:





  • Отзывы клиентов (1);



  • Похожие проекты (2);



  • Услуги (3);



  • Товары (4);



  • Тизеры (5);



  • Акции (6);



  • Новости (7);



  • Сотрудников (8);


  • Часто задаваемые вопросы с ответами в виде разворачивающегося списка (9).


Вкладка «Галерея»

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




Область загрузки «Галерея» (1) добавляет изображения в визитку проекта. Переключиться с основной картинки на дополнительную можно с помощью горизонтальных стрелок (3). Также у галереи есть элемент управления (диагональные стрелки), позволяющий увеличить изображение (4).





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





Вкладка «Баннер»

Здесь находятся настройки для баннера, который выводится на странице описания проекта.


Тут вы можете:
  • включить/отключить отображение баннера (1);
  • загрузить для него фоновое изображение (3);
  • сделать баннер составным, загрузив активную картинку (2);
  • настроить цвет для текста, выводимого на баннере, указав его hex-код (4).




Вкладка «Характеристики»

Характеристики проекта хранятся на одноименной вкладке.



Они выводятся:

  • в визитке проекта;



  • отдельным блоком – более подробным.



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

Вкладка «Разделы»

На этой вкладке вы можете перенести созданную услугу в другой раздел (категорию услуг).


Настройка пользовательских характеристик

Характеристики выводятся в карточке проекта отдельным блоком:


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

Добавить новую пользовательскую характеристику можно всего в 3 шага. Вам понадобится:

  1. Добавить новое свойство (характеристику) в инфоблок.

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

Перейдите в административной части сайта в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Контент (aspro.allcorp2). Выберите в списке «Проекты».



Откройте вкладку «Свойства» и пролистайте перечень до конца. Создайте свойство в первой свободной строке. Если свободных строк нет, нажмите на кнопку «Еще».



Для новой характеристики:
  • Введите ее название (1);
  • Укажите тип хранимого в ней значения (2) (подробнее о типах написано ниже);
  • Установите галку «Акт.» (3), чтобы свойство отображалось в карточках проектов и на страницах с их описанием;
  • Задайте индекс сортировки. Индекс сортировки отвечает за порядок отображения характеристик на странице с описанием проекта. Для удобства управления решением мы сгруппировали свойства инфоблока по индексам, в соответствии с этим рекомендуем создавать новые свойства с индексами от 500 (4). Подробнее о разметке свойств читайте здесь;
  • Задайте ей понятное кодовое название (английскими заглавными буквами) (5).




Для характеристик можно использовать следующие типы:

  • Число (2): используйте этот тип, если характеристика должна принять числовые значения — например, для метров, килограмм или дней.
  • Строка (3): используйте этот тип, если характеристика должна быть описана строкой (символами) — например, артикул модели или название категории.
  • Список (1): используйте этот тип, если характеристика может принимать одно из определенных значений. Например, для характеристики «Статус» есть 2 значения – «В наличии» и «Нет в наличии».

Примеры описанных типов представлены на скриншоте ниже:



Если вам нужно использовать свойство типа «Список», укажите для него дополнительные настройки. Для этого нажмите кнопку с многоточием в конце строки.



В новом окне в пункте «Внешний вид» (1) выберите вариант «Список» и заполните таблицу (2) значениями, которые может принимать характеристика.

Допустим, у компании, которая занимается установкой видеонаблюдения, есть 3 вида предоставляемой услуги (комплекта): «Базовый», «Профи» и «IP». В таком случае для свойства «Комплект» таблицу со значениями следует заполнять так:


При создании новой характеристики типа «Число» и «Строка» дополнительные настройки не требуются.

Сохраните изменения. Новое свойство добавлено в инфоблок.

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

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



В верхнем левом перечне (1) выберите «Проект», а в правом (2) – название вкладки, на которой хотите отображать характеристику (для удобства выведем ее на одноименную вкладку – «Характеристики»). Найдите в списке «Доступные поля» (3) созданную вами характеристику, выделите её и нажмите на стрелку (4).



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



После этого созданная характеристика будет доступна для заполнения.





        3. Настроить параметры компонента

В публичной части сайта откройте страницу с описанием проекта. Перейдите в режим правки.




Наведите курсор на контентную область. На появившейся панели нажмите на шестеренку.




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



Готово! Характеристика добавлена.


Управление расположением блоков и табов

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

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

Определить порядок отображения блоков на странице с описанием проекта можно в параметрах компонента «Новости».

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


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



Наведите курсор на содержимое страницы и нажмите на изображение шестеренки.



В открывшемся окне перейдите к группе параметров «Настройки детального просмотра». Здесь находится конструктор положения блоков:



Конструктор отображения блоков задает общий вид страницы. Именно он поможет вам изменить порядок блоков — например, привязанных тизеров (1), акций (2), новостей (3), документов (4) и т.д.



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



Блок, на чье место вами был установлен элемент, сместится вниз или вверх (в зависимости от того, где освободилось место) вместе с остальными элементами. Как вы можете видеть на скриншоте ниже, блоки «Тизеры», «Акции» и «Новости» сдвинулись вниз, заполнив свободное пространство.



Результат на странице после сохранения изменений:


Расписание

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

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


Управление разделами

Страница «Расписание» состоит из списка курсов (2), сгруппированных по категориям (разделам), и краткого описания в верхней части (1):



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



Наведите указатель на описание и нажмите «Изменить область» (1) на всплывающем меню.



Откроется окно визуального редактора, где можно ввести свой текст.



Используя тот же прием вызова всплывающего меню над анонсом, можно изменить (2) или удалить (3) существующую категорию учебных курсов.

Добавить новую категорию (раздел) можно только в административной части сайта в Рабочий стол → Контент → Каталог (aspro.allcorp2) → Каталог курсов с помощью кнопки «Добавить раздел» (1).


Чтобы изменить (2) или удалить (3) существующую категорию курсов (раздел), используйте меню кнопки «Гамбургер».

При создании нового раздела достаточно указать его название (3) – это поле обязательно для заполнения. Чтобы подраздел отображался на сайте, установите галку «Раздел активен» (1). Определить, где будет отображаться подраздел, можно с помощью выпадающего списка «Родительский раздел» (2). Если здесь выбрано «Верхний уровень», подраздел будет отображаться в перечне на основной странице раздела «Расписание».


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


Для редактирования текста анонса перейдите на вкладку «Доп. поля» и заполните свойство «UF_TOP_SEO».




Управление курсами (подразделами)

В публичной части сайта в режиме правки можно добавить (1), изменить (2) или удалить (3) курс на странице раздела.



Также изменить (1), удалить (3) существующий курс или добавить новый (2) можно на странице с описанием курса:




То же самое можно сделать в админке. Перейдите в Рабочий стол → Контент → Каталог (aspro.allcorp2) → Каталог курсов и откройте раздел, в котором находится или должен находиться редактируемый курс. Для добавления нового элемента используйте одноименную кнопку (1), для изменения (2), удаления (4) или отключения отображения элемента на сайте (3) – меню кнопки «Гамбургер».




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

  • Настройку, активирующую отображение курса на сайте (1);
  • Поля, устанавливающие период доступности курса для посетителей (2);
  • Обязательное для заполнения поле «Название» курса (3);


  • Область для загрузки дополнительных изображений в галерею (4);
  • Параметры, включающие отображение форм обратной связи («Задать вопрос», «Заказать услугу») на детальной странице (5);
  • Настройку, устанавливающую количество отображаемых по умолчанию комментариев для страницы (6);
  • Поля для старой (7) (отображается зачеркнутой) и действующей цены (отображается поверх зачеркнутой)  (9);
  • Область для загрузки документов (8) – они появятся под одноименным табом.




Примечание: Цена в разделе «Расписание» отображается в анонсе курса (в списке). Для вывода цены на странице описания курса, активируйте блок «Заказать услугу».



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




Переходим на вкладку «Анонс». Здесь можно загрузить фото для анонса (1) и задать небольшое описание (2).


Переходим на вкладку «Подробно». Здесь можно загрузить основное изображение, которое будет отображено в самом верху страницы курса (подраздела) (1), вывести текст описания (2), который будет отображаться под одноименным табом, и подключить таблицу с расписанием. Подробнее о подключении расписания читайте в следующем уроке.



На вкладке «Связи» вы можете привязать к курсу:
  • Информацию из раздела с вопросами и ответами (1) – выводится под табом;
  • Акции (2) – отображается как отдельный блок;


  • Новости (3) – отображается как отдельный блок;
  • Отзывы клиентов (4) – отображается как отдельный блок;


  • Проекты (5) – выводится под табом;
  • Преподавателей (специалистов) (6) – отображается как отдельный блок;


  • Сопутствующие товары (7) – отображается как отдельный блок;
  • Услуги (8) – отображается как отдельный блок.


На вкладке «Разделы» можно привязать редактируемый курс к нужному разделу.


Добавление таблицы с расписанием

В решение Аспро: Корпоративный сайт 2.0 в качестве таблицы с расписанием занятий используется Google-календарь.

Сперва создайте и заполните календарь в Google. Затем перейдите в его настройки – наведите указатель на название календаря, нажмите на появившиеся вертикальные точки и выберите «Настройки и общий доступ».



Найдите блок настроек «Интеграция календаря» и скопируйте из него html-код.



Откройте редактор карточки курса на вкладке «Подробно» и вставьте код в область детального описания.




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



Управление расположением блоков и табов

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

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

Видеоурок по управлению расположения блоков и табов: 


Определить порядок отображения блоков и табов на странице с описанием курса можно в параметрах компонента «Новости».

Внимание! Настройки в параметрах компонента действуют на все элементы внутри раздела, включая те, что находятся в разных внутренних подразделах.

Чтобы открыть редактор параметров компонента, перейдите в раздел «Расписание». Переключитесь в режим правки.


Наведите курсор на контентную область и нажмите на изображение шестеренки.



В открывшемся окне перейдите к группе параметров «Настройки детального просмотра». Здесь вы найдете:

  • конструктор положения табов



С помощью него можно менять местами вкладки на странице карточки расписания — например, «Описание», «Вопрос/ответ», «Проекты», «Документы»:


  • конструктор положения блоков


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

На картинке ниже приведен пример. Первым отображаются блок «Табы» (1), затем блок «Галерея» (2) и «Отзывы» (3). Используя конструктор, вы можете менять местами эти блоки так, как нужно именно вам.



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



Таб или блок, на чье место был установлен другой элемент, сместится вниз или вверх (в зависимости от того, где освободилось место) вместе с остальными элементами . В примере, таб «Видео» располагался внизу, поэтому когда мы перенесли его выше – на место таба «Характеристики» – характеристики и прочие табы сдвинулись вниз.


Настройка пользовательских характеристик

Характеристики выводятся в карточке курса под соответствующим табом:



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

Добавить новую пользовательскую характеристику можно всего в 3 шага. Вам понадобится:

1. Добавить новое свойство (характеристику) в инфоблок

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

Перейдите в административной части сайта в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Каталог (aspro.allcorp2). Выберите в списке «Курсы».



Откройте вкладку «Свойства» и пролистайте перечень до конца. Создайте свойство в первой свободной строке. Если свободных строк нет, нажмите на кнопку «Еще».



Для новой характеристики:
  • Введите ее название (1);
  • Укажите тип хранимого в ней значения (2) (подробнее о типах написано ниже);
  • Установите галку «Акт.» (3), чтобы свойство отображалось в карточках курсов и на странице с описанием;
  • Задайте индекс сортировки. Индекс сортировки отвечает за порядок отображения характеристик на странице с описанием курса. Для удобства управления решением мы сгруппировали свойства инфоблока по индексам, в соответствии с этим рекомендуем создавать новые свойства с индексами от 500 (4). Подробнее о разметке свойств читайте здесь;
  • Задайте ей понятное кодовое название (английскими буквами) (5).



Для характеристик можно использовать следующие типы:
  • Число (2): используйте этот тип, если характеристика должна принять числовые значения — например, для метров, килограмм или дней.
  • Строка (3): используйте этот тип, если характеристика должна быть описана строкой (символами) — например, артикул модели или название категории.
  • Список (1): используйте этот тип, если характеристика может принимать одно из определенных значений. Например, для характеристики «Статус» есть 2 значения – «В наличии» и «Нет в наличии».
Примеры описанных типов представлены на скриншоте ниже:



Если вам нужно использовать свойство типа «Список», укажите для него дополнительные настройки. Для этого нажмите кнопку с многоточием в конце строки.


В новом окне в пункте «Внешний вид» (1) выберите вариант «Список» и заполните таблицу (2) значениями, которые может принимать характеристика.

Например, для свойства «Выдача сертификата по окончанию курса» можно задать такие значения:



При создании новой характеристики типа «Число» и «Строка» дополнительные настройки не требуются.

Сохраните изменения. Новое свойство добавлено в инфоблок.

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

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



В верхнем левом перечне (1) выберите «Элемент», а в правом (2) – название вкладки, на которой хотите отображать характеристику (в примере свойство будет выведено на основную вкладку – «Элемент»). Найдите в списке «Доступные поля» (3) созданную вами характеристику, выделите её и нажмите на стрелку (4).



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


После этого созданная характеристика будет доступна для заполнения.



3. Настроить параметры компонента

В публичной части сайта откройте страницу с описанием курса. Перейдите в режим правки.


Наведите курсор на контентную область. На появившейся панели нажмите на шестеренку.


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



Готово! Характеристика добавлена.


Настройка фонового изображения на главной странице и в разделах сайта

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



Включить отображение фонового баннера можно:

  • В виджете настроек

Раскройте виджет, нажав на кнопку в левой части сайта.


Переключитесь на вкладку «Общие» и активируйте «Отображать фоновый баннер» (1);



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


  • В админке

Перейдите в Аспро: Allcorp2 → Настройки;



В группе параметров «Общие» поставьте галку «Отображать фоновый баннер» (1);


После сохранения изменений появятся дополнительные поля, позволяющие настроить цвет фона по умолчанию (2). Здесь такой же выбор, как и в виджете – темный, светлый, пользовательский цвет. Чтобы установить свой (пользовательский) цвет в одноименном поле, следует указать его 16-ричный код.

Фоновыми изображениями можно управлять только в админке: перейдите в Рабочий стол → Контент → Контент (aspro.allcorp2) → Фоновые картинки.


Элементы управления стандартны – кнопка для добавления нового фона (1) и меню кнопки «Гамбургер» для изменения (2), удаления (4) и отключения использования (3) изображения.

В настройках баннера на вкладке «Элемент»:
  • установите галку у параметра «Активность» (1), чтобы пользователи смогли увидеть ваш фон на сайте;
  • если нужно, задайте период, в который будет видно изображение (2);
  • дайте фону понятное название (3), чтобы его можно было легко найти в списке (в админке);
  • установите индекс сортировки (4), чтобы упорядочить список изображений (чем больше индекс сортировки, тем ниже в списке будет фон);



  • зафиксируйте баннер (7), если вам нужно, чтобы при пролистывании страницы баннер не перемещался;
  • привяжите фон к определенным страницам/разделам сайта (6) и укажите адреса страниц/подразделов, для которых настраиваемая картинка не должна отображаться (5).



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



Вместо адреса сайта подставьте: SITE_DIR. Например, на скриншоте выше мы привязали изображение к разделу «Каталог», заменив https://allcorp2.aspro-demo.ru/.

Получилось: SITE_DIRproduct/. После сохранения изменений изображение установилось фоном для всех страниц в разделе с продукцией.



Чтобы исключить один из подразделов — например, подраздел с медицинским оборудованием, откройте страницу подраздела и скопируйте содержимое адресной строки до адреса сайта: product/meditsinskoe-oborudovanie/.



В начале строки также вставьте SITE_DIR и поместите итог – SITE_DIRproduct/meditsinskoe-oborudovanie/ – в соответствующее поле. Теперь фон установится для всех страниц каталога кроме раздела с медицинским оборудованием. Для страниц этого подраздела в качестве фона будет использоваться цвет, выставленный по умолчанию (в примере – светлый).



Изображение для фона загружается на вкладке «Анонс» в настройках баннера.



Для уменьшения нагрузки на сайт рекомендуем в середине изображения помещать белую полосу. Размер ее должен соответствовать установленной ширине сайта – 1700, 1500, 1344, 1200 px.

Система обратной связи

В Аспро: Корпоративный сайт 2.0 система обратной связи реализована как для редакции 1С-Битрикс: Стандарт, так и для редакции 1С-Битрикс: Старт. В этой главе расскажем, какие возможности есть у пользователей обеих редакций, где находятся все результаты заполненных форм и как ими управлять.

Веб-формы для редакции 1С-Битрикс: Старт

В редакции 1С-Битрикс: Старт отсутствует модуль «Веб-формы», поэтому использование функционала системы обратной связи кажется невозможным. Но мы нашли выход из этой ситуации – реализовали систему обратной связи на инфоблоках. Так вы можете не просто заявить о себе в просторах Интернета, но еще и конвертировать посетителей сайта в заявки.

Доступны следующие веб-формы:
  • Оставить отзыв


  • Написать сотруднику


  • Заказать курс 


  • Написать директору


  • Оформление заказа


  • Задать вопрос


  • Обратный звонок


  • Отправить резюме


  • Заказать услугу



  • Заказать продукт


  • Заказать проект

Результаты заполненный форм

Сообщения пользователей, полученные с форм, хранятся в административной части сайта. Для их просмотра перейдите в Рабочий стол → Контент → Формы (aspro.allcorp2). Для просмотра сообщений, например, с формы «Обратный звонок», кликните по ее названию.


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


В группе «Значения свойств» хранится информация, которую оставил пользователь.


Начиная с версии решения 1.0.1 обрабатывать заказы стало еще удобнее – в форме оформления заказа появилось отдельное поле для общей суммы. Заполняется оно автоматически в момент оформления покупки, а в лид CRM-системы передается отдельным полем.



Управление формами

Вы можете создавать новые, изменять и удалять существующие формы. Перейдите в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Формы (aspro.allcorp2).

Для создания новой формы нажмите «Добавить инфоблок» (1). Чтобы изменить (2) или удалить (3) форму, вызовите меню кнопки «Гамбургер» у соответствующей строки и выберите нужный пункт.

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

Рассмотрим основные настройки инфоблока.
  • На вкладке «Инфоблок»:
  • установите галку «Информационный блок активен» (1), чтобы форму было видно на сайте;
  • придумайте понятный символьный код (латинскими заглавными буквами) (2) – он будет использоваться для привязки к элементам (например, кнопкам);
  • выберите сайт, на котором будет действовать форма (3);
  • дайте форме название (4).


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



На вкладке «Свойства» создаются и настраиваются поля форм.



Для каждого поля обязательно нужно указать название (1), тип (2) и код заглавными латинскими буквами (7). Тип определяет, какое значение будет принимать поле – «Строка», «HTML/текст» или «Число».

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



Чтобы поле отображалось в форме, установите галку «Акт.» (3). Если поле может хранить более одного значения, отметьте «Множ.» (4) – например, чтобы разрешить загрузку более одного файла за раз:


Для полей, которые являются обязательными для заполнения, активируйте параметр «Обяз.» (5). Чтобы задать порядок отображения полей на форме, заполните колонку «Сорт.» (6) – чем меньше индекс сортировки, тем ниже будет положение поля.

Для удаления лишней строки установите галку «Удал.» (9) и нажмите «Применить».
Внимание! Внесение изменений в свойства форм, настроенных по умолчанию, без навыков разработки на 1С-Битрикс может привести к неприятным результатам.

Колонка «Изм.» (8) содержит кнопки, которые открывает редактор свойств (полей) с дополнительными настройками. Дополнительные настройки могут понадобиться для определенных типов полей. Например, для поля типа «Список» в таблице «Значения списка» (2) следует задать доступные для выбора варианты. Также здесь можно выбрать внешний вид (1) – список или флажки.


Для типа «Html/текст» в дополнительных настройках можно задать высоту поля ввода.


При создании формы кнопка «Отправить», captcha и информирование о согласии на обработку данных привязываются автоматически (если в решении выставлена соответствующая настройка).


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

Подробнее о настройках каптчи можно почитать здесь. Дополнительную информацию о согласии на обработку персональных данных можно найти здесь.

Веб-формы для редакции 1С-Битрикс: Стандарт

Вы можете сами выбрать, какой использовать вариант реализации системы обратной связи — стандартными веб-формами от 1С-Битрикс или инфоблоками (о них рассказали подробнее в уроке «Веб-формы для редакции 1С-Битрикс: Старт»).

Внимание! Для настройки интеграции решения с CRM-системой включите использование веб-форм от 1С-Битрикс.

Проверить, установлен ли модуль веб-форм можно в административной части сайта в Рабочий стол →  Настройки →  Настройки продукта → Модули.



Если модуль веб-форм установлен, в решении появится дополнительный параметр — «Использовать веб-формы вместо инфоблоков». 

Его можно найти:

  • в админке: Аспро: Allcorp2 → Настройки, группа настроек «Общие»;





  • в виджете на вкладке «Общие». 





В решении реализованы следующие веб-формы:
  • Заказать звонок


  • Написать сотруднику


  • Заказать курс

  • Оформление заказа


  • Написать директору


  • Заказать продукт


  • Заказать проект


  • Заказать услугу


  • Задать вопрос


  • Отправить резюме


  • Оставить отзыв

Результаты заполненных форм

Сообщения пользователей хранятся в Рабочий стол → Сервисы → Веб-формы → Результаты. Чтобы просмотреть результаты формы, например, «Заказать звонок», выберите соответствующий пункт. Содержимое сообщений с небольших форм можно просмотреть прямо в таблице (4).



Здесь также видно:
  • от какого пользователя пришло сообщение – зарегистрированного или нет (3);
  • когда была отправлена форма (2);
  • был ли отправлен результат в CRM (1) – подробнее об интеграции с CRM и способах отправки результатов читайте здесь.
Для просмотра результатов с форм в более удобном виде вызовите меню кнопки «Гамбургер» и нажмите «Изменить».



Данные с формы отобразятся в группе «Поля результата».



Начиная с версии решения 1.0.1, в веб-форме оформления заказа появилось поле «Сумма». Теперь общая сумма заказа будет передаваться в лид CRM-системы отдельным полем.


Управление веб-формами

Вы можете создавать (1), изменять (2) и удалять веб-формы (3) в Рабочий стол → Сервисы → Веб-формы → Настройка форм.



Рассмотрим основные настройки форм.
  • На вкладке «Свойства» находятся следующие параметры:
  • Наименование (1) – заголовок веб-формы;
  • Символьный идентификатор (2) (задается латинскими буквами) – используется для привязки формы к элементам (например, кнопкам);
  • Порядок сортировки (3) – определяет положение формы в списке (в админке);
  • Пункты меню в административном разделе (4) – название пунктов меню в админке, куда будут сохранятся результаты работы формы (названия указываются для каждого языка, используемого в системе);
  • Сайт формы (5) – здесь указываются сайты, на которых будет использоваться веб-форма;
  • Подпись на кнопке, сохраняющей результаты формы (6) – дает название кнопке на форме для отправки результатов;
  • Использовать CAPTCHA (7) – подключает к форме проверку «человек или робот?».


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



На вкладке «Шаблон формы» вы можете выбрать, какой шаблон использовать – предложенный по умолчанию или свой. О том, как создать свой шаблон, читайте в уроке от 1С-Битрикс.



На вкладке «CRM» настраивается интеграция с Битрикс24. Подробнее об интеграции с Битрикс24, Flowlu и amoCRM читайте здесь.



Перейти к редактированию полей формы можно через верхнее меню (пункт «Вопросы»):



Чтобы добавить новое поле, нажмите одноименную кнопку (1). Для изменения параметров существующего поля раскройте меню кнопки «Гамбургер» и выберите «Параметры вопроса» (2). С помощью этого же меню поле можно удалить (3).



Также к созданию нового поля можно быстро перейти из списка веб-форм – нажмите на «+» в колонке «Вопросы» на соответствующей строке.



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


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



На вкладке «Ответ»:
  • Укажите в таблице, какой тип данных принимает поле (2). Начиная с версии решения 1.0.1 поддерживается поля под ответы не только в виде текста, но и в виде даты, варианта из перечней типа checkbox, radio, области загрузки файлов и другие типы свойств.
  • Заполните колонку «Текст» (1) в соответствии с выбранным типом ответа.


Например, если вы хотите предложить пользователю список, из которого он может выбрать несколько вариантов ответа, установив галки у нужных пунктов – перечислите варианты в колонке «Текст» и установите для каждого из них тип checkbox.

Если же в качестве ответа посетитель должен ввести свой текст, поставьте в первой колонке пробел и выберите нужный тип (text или textarea).

Подробнее о настройке веб-форм вы можете узнать из курса от 1С-Битрикс.

Корзина

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

В этой главе рассмотрим как настраивать корзину и форму оформления заказа.

Настройка корзины

Корзина имеет настраиваемый внешний вид. Примерить темы оформления можно через виджет настроек, раздел «Каталог».


Доступны 3 варианта корзины: «В шапке», «Боковая» и «Летающая».  

При оформлении «В шапке» иконка корзины располагается рядом с основным меню. Клик по иконке перемещает посетителя на страницу со списком заказов.


«Боковая» и «Летающая» корзины фиксируются у края экрана. Клик по иконке разворачивает список заказов в этом же окне.



Различие боковой и летающей корзин заключается в том, сколько пространства они занимают при развороте. Боковая корзина занимает половину рабочей области сайта.


Летающая имеет более компактный вид.


Для применения одной из тем оформления перейдите в Центр управления решением Аспро: Digital → Настройки.


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

Настройка цены товара

Для каждого товара существует три поля цены.


  1. «Цена на карточке» – отображается на сайте, можно прописывать как числа, так и выражения (например, «от 120 р/мес»)



  2. «Старая цена» – сумма отображается зачеркнутой, можно прописывать числа и символы.



  3. «Цена» – имеет только числовое значение и не отображается на сайте.




Внимание! Чтобы умный фильтр учитывал товар при отборе по запросу цены или диапазона цен, в поле «Цена» обязательно нужно ввести числовое значение. Это же значение учитывается при математических операциях в корзине, например, при подсчете стоимости и при изменении количества.

Настройка формы оформления заказа

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


Настройка формы задается в административной части сайта в меню Контент → Инфоблоки → Типы инфоблоков → Формы (aspro.digital) → Оформление заказа, на вкладке «Свойства».


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

  • «Название поля» отображается на сайте как его заголовок.

  • «Тип» определяет основную характеристику поля – какие значения будут корректны для поля ввода (строка, число, дата, текст в несколько строк, список).

  • «Акт.» – активность поля. Опция определяет, отображается выбранное поле на сайте или нет

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

  • «Обяз.» – обязательное для заполнения поле. Если отмеченное поле не будет заполнено, то форма не отправится, а у пользователя на экране появится уведомление, что он не заполнил обязательное поле.

  • «Код» – уникальный ID поля, нужный программным модулям для обработки и хранения информации из формы.

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


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

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

Посадочные страницы

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

Решение Аспро: Корпоративный сайт 2.0 позволяет создавать неограниченное количество посадочных страниц — внутри каталога или отдельными страницами (раздел «Обзоры»). Это могут быть тематические и сезонные подборки, специальные предложения под рекламную кампанию, акцию или запрос в поисковых системах (например, «аренда техники недорого»).

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


Посадочные страницы в разделе «Обзоры»

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

Примеры посадочных страниц в разделе «Обзоры» можно посмотреть на нашей демо-версии: https://allcorp2.aspro-demo.ru/landings/ 

Посадочные страницы в разделе «Обзоры» состоят из:
  • Баннера, который визуально подкрепляет содержание страницы. На нем можно разместить заголовок, небольшое описание и кнопку с призывом к действию и якорной ссылкой, которая ведет к подборке товаров (1);
  • Блок с тизерами (2), которые помогут рассказать о ваших преимуществах и особенностях сервиса компании;


  • Области с описанием над перечнем товаров (3);
  • Блока «Задать вопрос» для обратной связи (4);
  • Списка ссылок на другие посадочные страницы (5);


  • Списка товаров, заданных с помощью умного фильтра (6);

  • Дополнительного блока с описанием под перечнем товаров (7);
  • Области для комментариев пользователей (8).


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


То же самое можно сделать в админке. Перейдите в Рабочий стол → Контент → Каталог (aspro.allcorp2) → Посадочные страницы.



Для создания нового лендинга нажмите «Добавить элемент» (1). Для изменения (2), удаления (4) или отключения отображения (3) существующего выберите соответствующий пункт меню кнопки «Гамбургер».

При создании новой посадочной страницы вы можете:

  • дать странице название (3) – поле обязательно для заполнения;
  • активировать ее отображение на сайте (1);
  • задать период отображения (2) (при необходимости);


  • включить отображение баннера (6);
  • оформить баннер с помощью фонового (15) и активного (5) изображения;
  • указать, какой текст выводить на баннере (13);
  • изменить цвет текста, выводимого на баннере (8) (по умолчанию – при пустом поле – используется черный);
  • изменить надпись на кнопке на баннере (10);
  • задать заголовок над списком привязанных товаров (7);
  • привязать к странице раздел или часть товаров из раздела с помощью умного фильтра (12, 4) – подробнее о настройках читайте в следующем уроке;
  • определить количество комментариев, отображаемых по умолчанию (9);
  • включить отображение блока обратной связи (11);
  • вывести на странице тизеры (14).




Чтобы изменить текст на блоке обратной связи, в публичной части сайта в режиме правки вызовите меню с элементами управления и выберите «Изменить область».




Откроется окно визуального редактора, где можно изменить текст.



Добавить текст в блок описания над товаром можно в соответствующем поле (2) на вкладке «Анонс».





Также здесь загружается изображение для анонса (1) в списке посадочных страниц.



На вкладке «Подробно» можно изменить содержимое блока с описанием под списком связанных товаров.




Настройка списка товаров с помощью умного фильтра

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

Для этого откройте на сайте страницу с нужным списком товаров. Установите в умном фильтре свойство «В наличии» (1) и нажмите «Показать» (2).



Скопируйте из адресной строки браузера часть URL’а, начиная с /filter/. В примере это: /filter/status-is-instock/apply/.




Вернитесь в окно редактирования посадочной страницы. На вкладке «Элемент» выберите раздел (1) «Экскаваторы» и вставьте скопированную строку в поле «URL фильтр» (2).





В результате на странице появится требуемый список:




Если вы хотите привязать целый раздел каталога без фильтрации по свойству, тогда в карточке посадочной страницы выберите нужный раздел в одноименном перечне, а в поле «URL фильтр» вставьте строку: /filter/filter_price-from-0/apply/.

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


Привязка посадочных страниц к услугам

Решение Аспро: Корпоративный сайт 2.0 позволяет создавать посадочные страницы не только для каталога товаров, но еще и услуг.

Вам понадобится:

  1. Изменить настройки инфоблока «Посадочные страницы».

Откройте админку. Перейдите в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Каталог (aspro.allcorp2). Выберите «Посадочные страницы».



Переключитесь на вкладку «Свойства». Найдите в перечне строку с именем «Раздел». Вызовите редактор настроек при помощи кнопки с многоточием.



Пролистайте параметры до конца. У настройки «Информационный блок» выставьте значения «Контент (aspro.allcorp2)» и «Услуги [249]».



Сохраните изменения и в редакторе свойств, и в самом инфоблоке.

        2. Привязать посадочную страницу к разделу услуг.

Откройте карточку посадочной страницы. На основной вкладке найдите параметр «Раздел» (2). После настройки инфоблока в этом перечне вместо категорий товаров появится список разделов услуг. Выберите раздел, который нужно привязать к посадочной странице.


Обратите внимание — умный фильтр в разделе «Услуги» не используется, поэтому на посадочной будет отображаться все содержимое привязанного раздела, и заполнять поле «URL фильтр» (1) не потребуется.

        3. Настроить параметры компонента «Новости».

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



Перейдите в группу «Дополнительные настройки».



В поле «ID инфоблока с каталогом» вместо строки: ={CCache::$arIBlocks[SITE_ID]["aspro_allcorp2_catalog"]["aspro_allcorp2_catalog"][0]}

вставьте:

={CCache::$arIBlocks[SITE_ID]["aspro_allcorp2_content"]["aspro_allcorp2_services"][0]}

Сохраните изменения.

Результат на странице:


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

Такой тип посадочных страниц создается внутри каталога вашего сайта. Вы можете сами выбирать, какие товары показывать — например, только определенной цены и грузоподъемности. Это позволит продвигаться в поисковиках еще эффективнее — вы можете добавить дополнительное seo-описание, изображение и тизеры. А еще вы сможете использовать такие страницы для рекламы — вести ваших покупателей в каталог с уже выбранными вами товарами для показа.

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

Пример посадочной страницы в каталоге:
https://allcorp2.aspro-demo.ru/product/arenda-tekhniki/krany/filter/status-is-instock/apply/.

В составе этого типа посадочных страниц элементы идут в следующем порядке:

  • Баннер (1);
  • Верхний блок с описанием (2);

  • Блок обратной связи «Задать вопрос» (3);
  • Блок с тизерами (4), которые помогут рассказать о ваших преимуществах и особенностях сервиса компании;
  • Список связанных товаров, которые задаются с помощью умного фильтра (5);


Нижний блок с SEO-описанием (6).



Управлять данным типом посадочных страниц можно только в админке. Перейдите в  Рабочий стол → Контент → Каталог (aspro.allcorp2) → Посадочные в каталоге.



Для создания нового лендинга нажмите «Добавить элемент» (1). Для изменения (2), удаления (4) или отключения отображения существующей посадочной страницы (3) используйте пункты меню кнопки «Гамбургер».

При создании посадочной в каталоге обязательно заполните поле «Название» (3) на вкладке «Элемент». Если вы хотите, чтобы посетители вашего сайта видели новую посадочную страницу, поставьте галку у пункта «Активность» (1). При необходимости задайте период, в который посадочная страница будет активна (2).



В группе параметров «Значения свойств» вы можете:
  • подключить блок обратной связи «Задать вопрос» (4);
  • при помощи настроек «Раздел» (5) и «Ссылка» (6) указать системе, где отображать посадочную страницу (подробнее об этом в отдельном уроке);
  • привязать к странице тизеры (7).


На вкладке «Анонс» в редакторе описания заполняется блок с текстом, который выводится в верхней части – над блоком обратной связи (если он есть).



Загрузить баннер (1) и дополнить страницу SEO-описанием в нижнем блоке (2) можно на вкладке «Подробно».


Привязка посадочной страницы к результатам фильтра

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



В адресной строке браузера выделите часть URL’а, начиная с /product/, и скопируйте содержимое. В примере это: /product/arenda-tekhniki/krany/filter/status-is-instock/apply/.


Откройте карточку посадочной страницы в каталоге, выберите нужный раздел (1) и вставьте ссылку в одноименное поле (2).


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


Свойства и связи

Решение Аспро: Корпоративный сайт 2.0 содержит наборы элементов, которые вы можете связывать между собой. Например, определенные тизеры преимуществ с карточками отдельных товаров, тарифы и т.д.

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

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

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


Типы свойств

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

Чтобы просмотреть список свойств, в административной части сайта откройте Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Контент (aspro.allcorp2). Далее выберите нужный инфоблок и через кнопку «Гамбургер» щелкните «Изменить».




Перейдите во вкладку «Свойства».




Здесь представлены такие типы как:

  • Список (1) – оперирует как одиночными значениями (поля с галками), так и множественными (представляет их в виде списка);
  • Файл (2) – используется для добавления в инфоблок галереи, возможности прикреплять документы, аудио и видео;
  • Строка (3) – хранит символьные значения (есть также тип «Число» для хранения числовых значений);
  • Дата (4) – добавляет поле для ввода даты и времени;
  • Привязка к элементам (5) – настраивает ссылки на другие инфоблоки. Например, на похожие проекты;
  • HTML/текст (6) – прикрепляет к карточке текстовое поле, изменяемое с помощью визуального редактора;

Редактирование свойства

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

Для добавления свойства в карточку проекта перейдите в Контент → Инфоблоки → Типы инфоблоков → Контент (aspro.allcorp2) → Проекты.



Для редактирования свойств товаров перейдите в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Каталог (aspro.allcorp2) → Продукты.



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

Приведем пример отключения и добавления нового свойства на инфоблоке «Проекты».

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

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



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

Добавление характеристик происходит по стандартному сценарию, поэтому продемонстрируем действие на одном свойстве, которое назовем «Команда».

Пролистайте список свойств инфоблока до первой пустой строки. Укажите:

  • Название (1);
  • Тип (2) (для ссылки на элемент другого раздела выберите «Привязка к элементу», для простой характеристики в виде текста – «Строка»);
  • Символьный код свойства (4), который понадобится нам для его вывода.

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

Чтобы в свойстве выводился не один сотрудник, а несколько, нужно поставить галку в поле «Множ.» (3).



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



Примечание: Состав параметров настроек свойства зависит от его типа.

В поле «Информационный блок» выбираем тип инфоблока и сам инфоблок, который задает параметры для карточек. Сохраняем изменения в настройках свойства.



В списке свойств жмем «Применить».

Откройте карточку проекта. Проверьте, появилось ли в ней новое поле ввода. Если этого не произошло, выведите его, действуя по этой инструкции.

Затем перейдите в настройки проекта и заполните новые характеристики.



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



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



Примечание: Если добавить свойство типа «Файл», оно не будет отображаться в перечне свойств. Скопируйте его код в одно из полей ввода под списком вручную.

Результат наших действий на странице:



Ссылки кликабельны, осуществляют перенаправление на карточку сотрудника.


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

Связи для страниц

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

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

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


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



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



Нажмите кнопку с многоточием и выберите в новом окне нужный элемент из списка.



Итог: на странице товара появились проекты на соответствующей вкладке и действующая на товар акция.


Разметка свойств по полю «Сорт.» для удобного управления

В Аспро: Корпоративный сайт 2.0 все свойства инфоблоков сгруппированы по индексу сортировки. Это сделано для того, чтобы после установки решения можно было легко и быстро понять, какие свойства относятся к системным, а какие были созданы для контента демо-версии.

Внимание! Для корректной работы сайта не рекомендуется изменять или удалять системные свойства (индекс сортировки от 200 до 500) без навыков программирования на 1С-Битрикс.

Свойства из демо-контента можно удалить или изменить под специфику вашего проекта. В этой статье рассмотрим каждую группу свойств по отдельности.

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

Индексы сортировки от:

  • 200 – отмечают основополагающие свойства решения (то, из чего формируется страница). Например, для корректной работы решения в карточке товара важны свойства «Отображать в слайдере на главной», «Статус», «ID поста блога для комментариев», «Количество комментариев».



  • 300 – это дополнительные опции. Например, стикеры, кнопки, баннеры, видео, галерея;


  • 400 – свойства, позволяющие связывать между собой элементы из разных разделов. К примеру, товар может быть связан с проектами, сотрудниками, статьями, курсами и брендом.


  • 500 – индекс сортировки для пользовательских свойств. Это значение устанавливается по умолчанию при добавлении новых характеристик. Самостоятельно созданные характеристики можно отключать/удалять без серьезных последствий.


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

Личный кабинет

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


В самом ЛК есть 4 раздела и кнопка «Выйти», чтобы деавторизоваться.


В персональных данных пользователь может добавить или изменить свои ФИО, телефон, email и пароль.


В подписках можно настроить и оформить подписку на материалы с сайта.


Пользователь может указать удобный для получения рассылки email, выбрать интересующие рубрики и предпочтительный формат: текстовый или HTML.

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


В разделе «Написать директору» находится раскрытая форма обратной связи, сообщения из которой отправляются email директора, указанный в настройках.


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

Настройки разделов личного кабинета

Настройка рассылок

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


Группа полей «Источник данных»


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

Группа полей «Дополнительные настройки»


  • Разрешить анонимную подписку (1) — анонимные пользователи смогут подписываться на рассылку, лишь указав свой адрес электронной почты без необходимости регистрации на сайте
  • Показывать ссылки на авторизацию при анонимной подписке (2)  —  при подписке на рассылку анонимному пользователю будут выведены формы авторизации или регистрации
  • Устанавливать заголовок страницы (3)  —  заголовком страницы будет «Редактирование параметров подписки» при редактировании подписки или «Добавление адреса подписки».

Настройка «Написать директору»

Переключитесь на административную часть сайта и перейдите в Рабочий стол → Контент → Инфоблоки → Типы инфоблоков → Формы (aspro.digital) → Написать директору.


В поле «Описание» вы можете прописать пояснительный текст, который отображается над формой.


На вкладке «Свойства» вы сможете настроить поля, которые может или должен заполнить для отправки пользователь.


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

Согласие на обработку персональных данных

В феврале 2017 года были внесены поправки в статью 13.11 КоАП по поводу нарушений закона о персональных данных. Они вступят в силу 1 июля 2017 года и коснутся всех, кто собирает, обрабатывает и хранит любые персональные данные. Подробнее о законе и мерах, которые необходимо предпринять, читайте в нашем блоге


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

Чтобы добраться до настройки в Аспро: Маркет и Аспро: Оптимус кликните по вкладке с названием решения, далее Настройки → Шаблон.


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



В решениях Аспро: Digital-компания и Аспро: Корпоративный сайт 2.0 уведомления настраиваются в Аспро: Digital (Аспро: Allcorp2) → Настройки → Общие.


Аспро: Крутой шоп, Аспро: Интернет-магазин и Аспро: Шины и диски

Настройка расположена в настройках модуля решения: Настройки продукта → Настройки модулей → Аспро: Крутой шоп, интернет магазин → Шаблон.


Аспро: Корпоративный сайт и Аспро: Корпорация

Перейдите в настройки модуля решения: Настройки продукта → Настройки модулей → Аспро: Корпоративный сайт → Шаблон. В блоке «Валидация ввода» увидите пункт, включающий уведомления, и кнопку вызова редактора подписи.



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


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


Заполните поля соответствующими данными.

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

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


Отредактируйте содержимое и сохраните изменения.


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

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

Внимание! Из закона 152-ФЗ следует, что для подтверждения согласия обработки персональных данных пользователь должен совершить конкретное действие — например, проставить галку в чекбоксе. Из этого следует, что настройка согласия по умолчанию не гарантирует 100% соблюдение 152-ФЗ. Компания Аспро не несет ответственности за юридические последствия применения этой настройки.



Активация данной возможность происходит в административной части сайта. Для этого перейдите в Аспро: Next → Настройки.





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



Интеграция с другими сервисами

В этой главе рассматриваются возможности интеграции решения Аспро: Корпоративный сайт 2.0 с другими сервисами – сервисом аналитики Яндекс.Метрика и CRM-системами.

Расширенная интеграция с Яндекс. Метрикой

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

Благодаря расширенной интеграции с Яндекс.Метрикой вы сможете:
  • Видеть, как взаимодействуют с вашим сайтом посетители. На каких страницах задерживаются надолго и оставляют заявку, а какие «проскакивают», потому что им не интересно
  • Отслеживать эффективность рекламных кампаний. Какой канал приносит лиды и покупателей, а какой напрасно тратит деньги? Во сколько обходится заявка с Яндекс.Директа или Вконтакте? Какая кнопка в рассылке привела к покупке?
  • Понимать, где слабые места вашего сайта и как увеличить конверсию в покупки и продажи.
Новинка уже доступны в решениях:


Обзор настроек для Яндекс.Метрики

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

Новинка доступна пользователям решений с активной лицензией:

Аспро: Корпоративный сайт 2.0
Аспро: Digital-компания
Аспро: Корпоративный сайт современной компании
Аспро: Корпоративный сайт
Аспро: Оптимус
Аспро: Маркет
Аспро: Крутой шоп
Аспро: Интернет-магазин
Аспро: Корпорация

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

В этой главе мы рассмотрим настройку целей на примерах двух решений – Аспро: Корпоративный сайт современной компании и готового интернет-магазина Аспро: Оптимус. Для остальных решений алгоритм настройки сервиса аналогичен.

Настройки для Яндекс.Метрики находится в Центре управления Аспро в админке вашего решения (блок «Цели и счетчики»). Давайте рассмотрим их на примере решения Аспро: Корпоративный сайт современной компании.

В решении Аспро: Корпорация пункт настроек находится в настройки - настройки продукта - настройки модулей - Аспро: Корпорация - адаптивный сайт


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


В Центре управления для Аспро: Оптимус находятся дополнительные настройки для управления целями: покупки в 1 клик, быстрого и/или полного оформления заказа.


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

Установка счетчиков

Действия по установке счетчика заключаются в добавлении его кода в специальный файл. В блоке настроек счетчиков предоставлен быстрый доступ к этому файлу через кнопку «Редактировать».


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


Сюда можно скопировать коды Google Analytics, Яндекс.Метрики, пикселей Вконтакте и Facebook.

Установка счетчика Яндекс.Метрики

Первым делом необходимо создать счетчик в Яндекс.Метрике.

Для этого создайте учетную запись на сервисе или авторизуйтесь, если она у вас уже есть. Затем нажмите «Создать новый счетчик».

Далее, заполняем основные поля: имя счетчика (1), адрес сайта (2). Для активации кнопки «Создать новый счетчик» следует принять пользовательское соглашение, установив соответствующую галочку (3).


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


Согласно установленным критериям в текстовом поле будет сформирован готовый код:

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
   (function (d, w, c) {        (w[c] = w[c] || []).push(function() {            try {                w.yaCounter44200209 = new Ya.Metrika({                    id:44200209,                    clickmap:true,                    trackLinks:true,                    accurateTrackBounce:true,                    webvisor:true                });            } catch(e) { }        });        var n = d.getElementsByTagName("script")[0],            s = d.createElement("script"),            f = function () { n.parentNode.insertBefore(s, n); };        s.type = "text/javascript";        s.async = true;        s.src = "https://mc.yandex.ru/metrika/watch.js";         if (w.opera == "[object Opera]") {            d.addEventListener("DOMContentLoaded", f, false);        } else { f(); }    })(document, window, "yandex_metrika_callbacks"); </script> <!-- /Yandex.Metrika counter -->


Под полем с кодом нажимаем кнопку «Скопировать», затем «Сохранить».

Наш счетчик появится в списке.


Теперь нужно добавить сгенерированный Яндекс.Метрикой код, который мы скопировали, на свой сайт.

В Центре управления в блоке «Цели и счетчики» ставим галочку у пункта «Использовать Яндекс.Метрику». В решении Аспро: Корпоративный сайт современной компании открываем файл со счетчиками. В новом окне переходим в режим редактирования исходного кода.


Вставляем сюда код и сохраняем изменения.


Для Аспро: Оптимус и Аспро: Маркет будет необходимо скопировать код в специальное поле настроек. Подробнее об этом читайте в документации.


Затем в том же блоке, вставляем ID счетчика в одноименное поле и нажимаем «Применить». Аналогичный код копируем в эту же строку в блоке настроек для Аспро: Оптимус или Аспро: Маркет.


ID счетчика можно найти в коде. В нашем примере это id44200209.


Также идентификатор можно посмотреть в личном кабинете на Яндекс.Метрике.


Он дублируется в карточке счетчика на сервисе.


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


Откройте окно отладки клавишей F12. Здесь следует перейти во вкладку «Console». Если счетчик установлен правильно, он начнет отправлять данные сразу после установки. Его ID отобразится на консоли браузера.


В сервисе Яндекса в списке счетчиков у корректно установленного счетчика будет соответствующий значок статуса проверки, а в «Сводке» вы увидите первые собранные данные.


Теперь можно настраивать цели.

Настройка целей в Яндекс.Метрике

В поле «Использовать цели заполнения веб-форм» вы можете:

  • отключить отслеживание конверсии при заполнении посетителями веб-форм, выбрав вариант «Нет»;

  • задать отслеживание действий со всеми веб-формами сайта (заказать проект, продукт, услугу, отправить резюме, задать вопрос и т.д.) без дополнительной информации о том, какие именно из них какую долю приносят в конверсии – вариант «Общая цель»;

  • задать отслеживание действий по конкретным веб-формам для учета их доли в конверсии – «Отдельная цель».


Помимо отслеживания действий с веб-формами доступно использование целей для корзины и заказов: добавление товара в корзину, начало оформления заказа и успешное оформление заказа для решения Аспро: Корпоративный сайт современной компании.

Для интернет-магазинов вы можете настроить отслеживание целей покупки в 1 клик, быстрого заказа и т.д. Подробнее об этом читайте в уроке «Настройка целей корзины, покупки в 1 клик, быстрого заказа на примере Аспро: Оптимус».

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

Создание общей цели для веб-форм

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

После выбора варианта «Общая цель» в Центре управления под настройкой появится область с подсказкой.


Скопируйте идентификатор цели из подсказки: goal_webform_success.

В Яндекс.Метрике перейдите в карточку счетчика. Далее, Настройка (1) → Цели (2) → Добавить цель (3).


В popup-окне введите название цели (1). Выберите тип условия «JavaScript-событие» (2). В поле «Идентификатор цели» введите ранее скопированную из подсказки строку (3). Нажмите «Добавить цель».

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


Проверьте работоспособность цели – заполните любую веб-форму и отследите появление данных в Яндекс.Метрике.

Внимание! Данные в сервис Яндекс.Метрика поступают с задержкой. В среднем этот интервал составляет от 10 до 60 минут, в редких случаях время задержки может быть более часа.

Результат нашей настройки доступен для просмотра в меню Отчеты → Стандартные отчеты → Конверсии.


Внешний вид отчета:


Также работу цели можно проверить через консоль. В публичной части сайта нажмите клавишу F12, перейдите на вкладку консоли. Затем найдите строку с отметкой «Reach goal», кодом счетчика и id цели.


Создание отдельной цели для веб-формы

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

Активация опции открывает желтое поле с перечнем идентификаторов для целей.


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

Цели конфигурируются по шаблону goal_webform_success_#ID_инфоблока_формы#. Вместо #ID_инфоблока_формы# нужно подставить ID формы, которую хотите отслеживать детально.

Идентификаторы можно также просмотреть во вкладке «Контент», ветка «Формы».


В таблице ID расположены в крайнем правом столбце.

Рассмотрим задание отдельной цели на примере формы «Заказать услугу». Для этого копируем идентификатор: goal_webform_success_121 из подсказки.

Также как в уроке по созданию общей цели перейдите в настройку счетчика на сервисе Яндекс.Метрика. Выберите Цели → Добавить цель. Введите название цели, установите тип условия «JavaScript-событие» и вставьте скопированный ID. 


В списке целей появилась новая запись. Сохраните изменения.


Закажите услугу на сайте и просмотрите изменение данных в Яндекс.Метрике.

Результат действий проверяем через консоль. Вызываем окно отладки клавишей F12, переходим на вкладку консоли. Ищем строку с отметкой «Reach goal», кодом счетчика и id цели.


В Яндекс.Метрике данные можно просмотреть в меню Отчеты → Стандартные отчеты → Конверсии.


Внимание! Данные в сервис Яндекс.Метрика поступают с задержкой. В среднем этот интервал составляет от 10 до 60 минут, в редких случаях время задержки может быть более часа.

Цели остальных веб-форм настраиваются по аналогии.

Настройка цели корзины и оформления заказа

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


После активации опции примените изменения.

В сервисе Яндекс.Метрика все настраивается по алгоритму, описанному ранее.

Рассмотрим его на примере цели добавления заказа в корзину. Копируем идентификатор нужного действия: goal_basket_add.

В Яндекс.Метрике в настройке переходим на вкладку целей и нажимаем «Добавить цель». В новом окне: указываем название цели, устанавливаем тип  «JavaScript-событие» и вставляем скопированный ID.


Сохраняем изменения в списке целей.


Для проверки работоспособности целей перейдем в публичную часть сайта и добавим какой-нибудь товар в корзину. Нажмем клавишу F12 и во вкладке консоли проверим появление записи о достижении цели с id счетчика и цели.


В Яндекс.Метрике данные можно просмотреть в Отчеты → Стандартные отчеты → Конверсии.


Внимание! Данные в сервис Яндекс.Метрика поступают с задержкой. В среднем этот интервал составляет от 10 до 60 минут, в редких случаях время задержки может быть более часа.

Остальные цели, связанные с оформлением заказа настраиваются по аналогии.

Настройка целей для интернет-магазинов

Активация дополнительных целей решения Аспро: Оптимус позволяет отслеживать сколько раз было начато оформление заказа тем или иным способом и сколько операций оформления были завершены успешно.

Настройка счетчика под эти цели в Яндекс.Метрике производится в точности как и настройка целей в сервисе для Аспро: Корпоративный сайт современной компании. Действия производятся в административной части сайта во вкладке Аспро: Optimus → Настройки.


Подключите в модуле настроек новую цель и из подсказки со списком идентификаторов скопируйте ID необходимой цели. Например, ID начала оформления покупки в 1 клик – goal_1click_begin.


В настройках счетчика на сервисе Яндекс добавляем цель, куда в поле идентификатора вставляем скопированную строку.


Сохраняем изменения в списке целей.

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


Результат настройки цели в Яндекс.Метрике:


Внимание! Данные в сервис Яндекс.Метрика поступают с задержкой. В среднем этот интервал составляет от 10 до 60 минут, в редких случаях время задержки может быть более часа.

Прочие специфичные цели для готовых интернет-магазинов настраиваются по аналогии.

Интеграция с CRM-системами

Теперь автоматизировать работу вашего бизнеса станет еще проще. В Аспро: Корпоративный сайт 2.0 реализована простая интеграция с CRM-системами: Битрикс24, Flowlu и amoCRM. Больше ни одна заявка с вашего сайта не будет упущена — вы сможете хранить всю важную информацию по клиентам в одном месте. Это позволит анализировать эффективность работы компании, способствует повышению продаж, а также стандартизирует работу менеджеров.

Настройка займет всего пару минут, а навыки программирования не потребуются.

Благодаря интеграции вы можете передавать в CRM все заполненные веб-формы:
  • заказа звонка
  • запроса консультации
  • отправленного резюме
  • заданного вопроса
  • заказа услуги
  • заказа проекта
  • заказа продукта
  • сообщения директору
  • оформления заказа.

Интеграция с Битрикс24

Битрикс24 — полный комплект инструментов для организации работы компании. В нем вы можете хранить всю информацию о ваших клиентах и заказах, объединять все каналы коммуникации с ними и анализировать результаты работы. А чтобы вы не потеряли ни одну заявку с вашего сайта, мы реализовали простую и легкую интеграцию решения Аспро: Корпоративный сайт 2.0 с CRM-системой.

Внимание! Функционал доступен только для редакции 1С-Битрикс: Стандарт.
Примечание: Передавать файлы с сайта в CRM-систему нет возможности — этот функционал не реализован в 1С-Битрикс. Вопрос передан специалистам 1С-Битрикс и рассматривается для реализации в обновлении.

Благодаря интеграции с Битрикс24 вы можете передавать в CRM все заполненные веб-формы:
  • заказа звонка
  • запроса консультации
  • отправленного резюме
  • заданного вопроса
  • заказа услуги
  • заказа проекта
  • заказа продукта
  • сообщения директору
  • оформления заказа.

Настройка займет всего пару минут, а навыки программирования не потребуются.


Чтобы связать решение Аспро: Корпоративный сайт 2.0 с Битрикс24, достаточно настроить веб-формы, с которых нужно переправлять данные в CRM. Рассмотрим алгоритм настройки на примере формы заказа обратного звонка.

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


Перейдите на вкладку «CRM». Здесь мы создадим новый список для веб-форм, которые будут передавать данные в Битрикс24. Это достаточно сделать один раз — при настройке остальных форм созданный список будет отображаться в перечне автоматически.

В перечне «CRM» выберите пункт «настроить новый».


В открывшемся окне укажите:

  • Название для нового списка (1);
  • Сервер CRM (2);

Параметры авторизации: логин и пароль (3).


Проверьте, установлено ли соединение. Для этого нажмите «Настроить список».


В настройках списка нажмите «Проверить соединение».


Если соединение установлено, в колонке «Авторизация» отобразится «ОК».


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

После того, как вы убедились в том, что  соединение с CRM работает нормально, вернитесь на предыдущую страницу, где мы создавали список (нажмите кнопку «Назад» в меню браузера).


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

Ручной способ: рекомендуется использовать для снижения нагрузки на сайт. При таком способе отправлять данные в Битрикс24 нужно будет вручную. Как это сделать, написано ниже.

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

Связанные поля настраиваются следующим образом: в правой колонке (3) нужно выбрать, из какого поля формы будет отправлена запись в CRM, а в левой колонке (2) — какое поле CRM ее примет.




Сохраните изменения. Для проверки корректности настроек заполните и отправьте соответствующую форму из публичной части сайта. В нашем случае — это форма заказа звонка.



Если вы настроили отправку форм «вручную», то перед тем, как зайти в Битрикс24, просмотрите раздел «Результаты» в Рабочий стол → Сервисы → Веб-формы. Откройте список нужной формы.



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




Найдите строку с тестовыми данными (с данными формы, которые вы только что заполнили) и вызовите меню кнопки «Гамбургер» для отправки формы в CRM. После успешной отправки записи в колонке «Отправлено» метка сменит цвет с красного на зеленый.



Если вы автоматически отправляете информацию о заполненных формах в CRM, сразу перейдите в Битрикс24. Здесь в левом меню на вкладке «CRM» (1) появится новый лид (2).



В подробной информации вы увидите данные, которые указали на сайте.



Остальные веб-формы настраиваются аналогично.

Интеграция с amoCRM и Flowlu

CRM-система — то, что позволяет бизнесу автоматизировать работу с клиентами, увеличить продажи, стандартизировать работу менеджеров и собрать важную информацию для анализа эффективности. Мы знаем, насколько вам важно не упустить ни одну заявку с сайта, поэтому сделали то, что казалось невозможным для решений на 1С-Битрикс — реализовали простую и легкую интеграцию с amoCRM и Flowlu.

Примечание: Передавать файлы с сайта в CRM-систему нет возможности — этот функционал не реализован в 1С-Битрикс. Вопрос передан специалистам 1С-Битрикс и рассматривается для реализации в обновлении.

Благодаря интеграции вы можете передавать с сайта в CRM все заполненные веб-формы:
  • заказа звонка
  • запроса консультации
  • отправленного резюме
  • заданного вопроса
  • заказа услуги
  • заказа проекта
  • заказа продукта
  • сообщения директору
  • оформления заказа.
Настройка доступна для решений Аспро: Корпоративный сайт 2.0. Это займет всего пару минут, а навыки программирования не потребуются.

Для интеграции решения с amoCRM и Flowlu необходимо настроить подключение, а затем настроить веб-формы. Для этого переходим в Аспро: Allcorp2 → Интеграция с CRM.


Подключение amoCRM

Чтобы подключить amoCRM нужно указать:



  • домен в amoCRM (1);

В поле требуется вводить домен 3го уровня (без https:// и .amocrm.ru).



  • логин от аккаунта в amoCRM (2);
  • ключ API (3).

Найти ключ можно в настройках amoCRM на одноименной вкладке.


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

Подключение Flowlu

Для подключения решения к Flowlu, укажите:



  • домен CRM (1);

Домен вводите в виде:



  • ключ API (2).

Ключ можно посмотреть в системе Flowlu. Он находится в Настройках системы → Настройки системы → API.



Настройка интеграции и веб-форм

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

Под настройками подключения CRM находится группа настроек «Интеграция и соответствие полей». С ее помощью вы можете:
  • Включить интеграцию (1).
  • Активировать автоматическую отправку результатов в CRM (2). В этом случае они будут отправляться в систему сразу после того, как пользователь ее заполнил – вам не придется делать это вручную.
  • Включить логирование для отслеживания проблем с соединением (3). Логи записываются в директории /upload/logs/aspor.allcorp2/crm/YY-mm-dd/. Исходящие запросы с сайта в CRM пишутся в %_название_CRM_%_create_lead_request.log, а ответы CRM в %_название_CRM_%_create_lead_response.log, где %_название_CRM_% - подменяется amoCRM или Flowlu, в зависимости от того, с какой CRM вы работаете. Содержимое этих файлов в случае проблем с соединением поможет специалистам выяснить и устранить причину ошибок.
  • Задать название лида для заявок с сайта (4). Значение из этого поля будет использоваться в качестве названия новой сделки в CRM, если в таблице связей полей CRM и форм сайта не указано иное (о таблице читайте ниже).
  • Перечислить теги для amoCRM (5) (в Flowlu этого функционала пока нет). Теги удобно использовать для поиска сделок. Подробнее о работе с ними в amoCRM читайте здесь. Так же, как и с названием лида по умолчанию, передаваемые теги можно переназначить для конкретной формы.


У каждой веб-формы есть своя таблица связей с полями CRM. Для переключения между этими таблицами используйте выпадающий список в конце перечня настроек (6). В таблице вы можете указать системе, какое поле формы с вашего сайта в какое поле CRM передавать. Настройки, указанные здесь, перекрывают настройки по умолчанию (имеются в виду теги для amoCRM и заголовок).


Например, сначала мы установили, что в поле amoCRM «Название сделки» должно передаваться название веб-формы (допустим, «Заказать звонок») и передали несколько результатов, а потом удалили эту настройку.



Следующая отправленная сайтом заявка придет с названием, установленным по-умолчанию (в примере это «Заявка с сайта»).



Настройка закончена! Если вы не выбирали автоматическую отправку результатов, отправлять данные придется вручную. Для этого перейдите на вкладку «Результаты» и используйте иконку в виде файлов. После успешной отправки статус записи изменится на соответствующий.



Теперь давайте посмотрим, как это работает. Допустим, вы настроили форму заказа обратного звонка, заполнили ее тестовыми данными и отправили.



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



При просмотре подробной информации по контакту вы увидите те данные, которые были указаны в настройках этой формы.




В Flowlu сведения с той же формы попадут в раздел CRM → Сделки.





 Здесь также можно просмотреть более подробную информацию:


Рекомендации для графических материалов

В главе представлены рекомендации, которые помогут вам наполнить решение Аспро: Корпоративный сайт 2.0 своим контентом.


Логотипы

Логотип компании



Размер контейнера для логотипа вашей компании на панели меню сайта составляет:
  • 156 x 104 px при ширине страницы в 1200/1344 px;
  • 182 x 104 px – при 1500 px;
  • 215 x 104 px – при 1700 px.
Высота логотипа должна быть минимум на 20 px меньше, чем высота контейнера (не более 84 px). Допустимо использование изображения как равного по ширине с контейнером, так и меньше его. Если длина и ширина логотипа превышает обозначенные значения, картинка будет соприкасаться с меню и верхним блоком.

Допустимые форматы изображений – jpg, png, gif.

Логотипы партнеров



Для логотипов в разделе «Наши партнеры» используйте изображения с расширением jpg, png, gif. Максимальный размер картинок составляет 244 х 110 px. Допустимо размещение изображения меньшего размера.

Тизеры на главной



Рекомендуемые расширения для тизеров на главной странице сайта: jpg, png, gif. Соотношение сторон изображений должно быть 3:2. Оптимальный размер картинок: 640 на 427 px.

Баннеры

Основной баннер на главной

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

Чтобы занять всю ширину сайта, картинку необходимо размещать шириной в 1920 px. По высоте обычный баннер следует ограничить в 500 px.



Чтобы заполнить баннером фон меню и логотипа, высота изображения должна быть 660 px.



Составной баннер


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

Пример активной картинки:


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


Баннер на контентной странице




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

Рекламные баннеры

При наполнении рекламных областей используйте изображения с расширениями jpg, png и gif.

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

  • Сверху над шапкой – 1920 х 70 px;





  • Внизу страницы – 1920 x 120 px.


Рекомендации по размерам изображений для рекламных областей над контентом и под ним:




  • При ширине сайта в 1200 px ширина баннера составляет 868 px, а высота – 249;
  • 1344 px – 976 x 280 px;
  • 1500 px – 1093 x 317 px;
  • 1700 px – 1243 x 357 px.
Для бокового баннера при ширине сайта 1200 px используйте изображение размером в 268 х 203 px, при ширине в 1344, 1500 или 1700 px – 304 x 230 px.


Изображение в начале контентной страницы

Для изображений, которые собираетесь помещать в начале контентной страницы (например, для оформления новости, перед описанием услуги или в начале страницы «О компании»), выбирайте формат jpg, png или gif.



Оптимальные размеры для картинки:
  • При ширине сайта 1200 px – 868 x 335 px;
  • 1344 – 976 х 377 px;
  • 1500 – 1093 x 421 px;
  • 1700 – 1243 x 479 px.

Изображения для анонсов

Категории в разделе «Услуги»



Изображения для оформления категорий услуг должны иметь расширение jpg, png или gif, и размер 144 х 144 px (соотношение сторон 1:1).


Услуги




Рекомендации к расширению изображений те же – jpg, png, gif. Размер картинок должен быть 438 х 292 px (соотношение сторон 3:2).

Разделы «Новости» и «Статьи»




Требования к расширению изображений и соотношению сторон те же, что и для анонса услуг. Для оформления используйте картинки шириной в 630 и высотой в 420 px.


Каталог

Следует использовать изображения размером 254 x 254 px и расширением png. Рекомендации актуальны и для анонсов категорий товаров:



И для анонсов самих товаров:




Раздел «Проекты»




Анонсы раздела «Проекты» следует оформлять, используя картинки высотой в 767 и шириной 511 px. Оптимальное соотношение сторон и требования к формату изображения аналогично рекомендациям к анонсу раздела «Услуги».


Отзывы




Изображения для отзывов размещайте шириной и высотой 1:1, не более 120 px. Используйте формат jpg, png или gif.

Страница «Сотрудники»




Рекомендовано то же расширение изображений и соотношение сторон, что и для анонсов отзывов. Максимальный размер – 150 px.

Страницы с подробным описанием

Товар



В подробном описании товара используйте изображения с соотношением сторон 1:1. Следует ограничить высоту картинки до 1000 px. Допустимые расширения для изображения: jpg, png, gif.


Проект, услуги, курсы




Рекомендации аналогичны рекомендациям к детальной странице товара, исключение составляет лишь оптимальное соотношение сторон изображения – 3:2.

Лицензии



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

Контакты



Для заполнения раздела «Контакты» используйте изображения с соотношением сторон 3:2, размером в 200 px на 133.

SEO, маркетинг, реклама

Рекламные баннеры

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

В Аспро: Корпоративный сайт 2.0 заданы 6 рекламных областей
  • сверху над шапкой; 



  • сверху под шапкой;



  • боковая;



  • над контентом;



  • под контентом;



  • внизу страницы.



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

Включить отображение баннеров можно:

  • В виджете настроек

Раскройте виджет, нажав на кнопку в левой части сайта:



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




  • В админке

Перейдите в Аспро: Allcorp2 → Настройки.



Пролистайте настройки до группы «Баннеры». Установите галку у нужных вам пунктов и сохраните изменения.


Управлять баннерами можно как в публичной части сайта, так и в административной.

Для управления из публички переключитесь в режим правки.



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



Баннеры в админке можно найти в Рабочий стол → Контент → Реклама (aspro.allcorp2) → Баннерные позиции.



Здесь можно добавить новый баннер с помощью одноименной кнопки (1) или изменить (2), удалить (4), деактивировать существующий (3) при помощи меню кнопки «Гамбургер».

Рассмотрим содержимое карточки подробнее. На основной вкладке вы можете:
  • активировать отображение баннера на сайте (1);
  • задать период, в который баннер будет виден пользователям (2);
  • дать ему понятное название (3), чтобы легко находить в списке (в админке);
  • определить где он будет отображаться (5);
  • ограничить показ баннера некоторыми разделами (6) или страницами (7);
  • скрыть его на версиях для мобильников (8) и планшетов (9);
  • привязать к баннеру страницу (10) и определить как она будет открываться (4) – в новом окне или текущем;
  • настроить каким образом подгонять размер изображения при уменьшении масштаба страницы (11) – обрезать по краям или масштабировать;
  • задать цвет фона (12) для используемой картинки.



Для разработчиков

Решение Аспро: Digital-компания и Аспро: Корпоративный сайт 2.0 созданы на современной технологической платформе – Bootstrap 3.0, HTML5, CSS3, jQuery. Они имеют принципиально новую архитектуру, с которой по-настоящему удобно работать. В специальном разделе есть библиотеки кнопок, иконок и элементов для оформления.

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

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

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

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

Модификация кода шаблона

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

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



Главная страница

Для того, чтобы изменить компоновку главной страницы, перейдите в Центр управления Аспро. В блоке настроек «Главная» вы увидите поле «Тип главной страницы». Выберите пункт Custom – специальную опцию для разработчиков. 


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


Далее перейдите в структуру сайта. В корне найдите файлы, которые соответствуют типам компоновки главной страницы:

  • indexblocks_index1.php
  • indexblocks_index2.php
  • indexblocks_index3.php
  • indexblocks_index4.php

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

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


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

Шапка сайта

Изменения для шапки сайта выполняются по аналогичному алгоритму. Перейдите в Центр управления Аспро. В настройках найдите блок «Шапка». Подключите опцию для разработчиков Custom.

Вид сайта в публичной части снова изменился:


Перейдите в структуру сайта по адресу /bitrix/templates/aspro-digital/page_blocks. Найдите в списке файлы с кодом для различных типов шапки сайта. Всего их 15:

  • header_1.php
  • header_2.php
  • ...
  • header_15.php

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

Подвал сайта

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


Перейдите в структуру сайта /bitrix/templates/aspro-digital/page_blocks. Найдите файлы, которые могут понадобиться для работы:

  • footer_1.php
  • footer_2.php
  • footer_4.php
  • footer_5.php 


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

Мобильная шапка и мобильное меню

Перейдите в Центр управления Аспро и подключите опцию Custom для разработчиков в зависимости от того, что хотите изменить - мобильную шапку или тип мобильного меню.


Перейдите в структуру сайта: /bitrix/templates/aspro-digital/page_blocks. Найдите нужные файлы.

Содержат код мобильной шапки:

  • header_mobile_1.php
  • header_mobile_2.php

Содержат код мобильного меню:

  • header_mobile_menu_1.php
  • header_mobile_menu_2.php

Файлы, в которые нужно вносить изменения:

  • header_mobile_custom.php – для мобильной шапки
  • header_mobile_menu_custom.php – для мобильного меню.

Отредактируйте нужный файл и сохраните изменения.


Графические материалы

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

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


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


Для приверженцев интересной подачи материала приведен пример оформления цитат и буквиц, гармонирующий с общей стилистикой решения.

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

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


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


В этом же разделе вы можете ознакомиться со стилями оформления таблиц, которые удобно использовать для представления структурированной информации (к примеру, отображения реквизитов компании).

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


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


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


Раздел «Элементы» содержит примеры внешнего вида ярлыков (Labels) – иконок, содержащих исчерпывающую информацию, например, об участии предложения в действующей акции или отношение товара к хитам продаж.


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

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


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


Один из вариантов аккордеона используется на странице «Вакансии» в решении Аспро: Digital-компания при выборе соответствующей темы оформления раздела.


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


Размеры навигационной панели по страницам раздела представлены в 3х вариантах.


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


Также в поставку включены элементы для работы с изображениями – Carousel, Fancybox и рамки для миниатюрных изображений.


Использование библиотеки UI-элементов

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



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

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




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




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



Скопируйте код интересующих вас элементов и вставьте на странице своего сайта. 



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

После сохранения изменений на странице отображаются нужные элементы:










Кастомизация предпросмотра товара в списке элементов

Установка модулей сторонних разработчиков

Решения «Аспро» поддерживают стандартный набор модулей и компонентов 1С-Битрикс.

Мы не тестируем модули и компоненты сторонних разработчиков, поэтому не можем гарантировать совместимость с решениями «Аспро» и 100% работоспособность на готовом сайте.  Для того, чтобы установить такое решение, рекомендуем обратиться к сертифицированным партнерам 1С-Битрикс.

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