Блок десктопное меню с кнопкой

Необходимо проверять, чтобы при переносе/копировании не слетал якорь (#menu). Видимость блока (только десктоп)

Желательно не более 3х-4х пунктов, чтобы на небольших экранах меню не сбивалось в две строки.

Блок десктопное меню с кнопкой

Необходимо проверять, чтобы при переносе/копировании не слетал якорь (#menu). Видимость блока (только десктоп)

Желательно не более 3х-4х пунктов, чтобы на небольших экранах меню не сбивалось в две строки.

Блок мобильное меню

Обыкновенный бургер. Видимость блока (планшеты и мобильные)

Главный блок с текстом, большим интерфейсом и кнопкой по середине на градиентном фоне

В этом блоке скриншот — только целый экран (никаких ноутбуков). Ширина обязательно 2200px, высота приблизительная (около 1200px), PPI минимум 72 (т.е. нельзя просто взять маленький скриншот 640x480 и растянуть его до 2200px). Без теней и скругленных краев, это добавляется через CSS. 

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

Главный блок с текстом и кнопкой на градиентном фоне

Главный блок с текстом и кнопкой на светлом фоне

Главный блок с текстом, кнопкой и изображением справа на светлом фоне

В этом блоке скриншот оформляется по шаблону (есть исходник). Ширина обязательно 1080px, высота приблизительная (около 700px), PPI минимум 72 (т.е. нельзя просто взять маленький скриншот 640x480 и растянуть его). 

Также можно по шаблону оформить просто фотографию.

Главный блок с текстом, кнопкой и изображением cлева на светлом фоне

В этом блоке скриншот оформляется по шаблону (есть исходник). Ширина обязательно 1080px, высота приблизительная (около 700px), PPI минимум 72 (т.е. нельзя просто взять маленький скриншот 640x480 и растянуть его). 

Также можно по шаблону оформить просто фотографию.

Главный блок с текстом, кнопкой и изображением cправа на градиентном фоне

В этом блоке скриншот — только целый экран (никаких ноутбуков). Ширина обязательно 1440px, высота приблизительная (около 700px), PPI минимум 72 (т.е. нельзя просто взять маленький скриншот 640x480 и растянуть его до 1440px). Без теней и скругленных краев, это добавляется через CSS. 

Блок с иконками и тезисами (2шт)

Это блок для двух тезисов. Можно при желании сделать четыре (в два ряда). Иконки использовать только fontawesome, стиль №2

Блок с иконками и тезисами (3шт)

Это блок для трех тезисов. Можно при желании сделать шесть (в два ряда). Иконки использовать только fontawesome, стиль №2. Количество текста в карточках должно быть одинаковым — везде в одну строчку, либо везде в две строчки.

Необходимо проверять, чтобы при переносе/копировании не слетал якорь (#thesis03). Если будет использоваться два блока, то второй должен иметь якрорь (#thesis03B), третий (#thesis03C)

Блок с иконками и тезисами (4шт)

Это блок для четырёх тезисов. Иконки использовать только fontawesome, стиль №2

Блок с иконками и тезисами (6шт)

Это блок для шести тезисов. Иконки использовать только fontawesome, стиль №2

Блок с иконками и тезисами (10шт и более)

Это блок для 10+ тезисов. Разные иконки в этом блоке использовать не рекомендуется

Блок с описанием, картинкой и кнопкой

Картинка в этом блоке делается по шаблону (есть исходник). Коллаж из двух фото, либо фото + кусочек интерфейса, с добавлением большой иконки в новом стиле и дополнительных элементов. Подразумевается, что это делает дизайнер. Размер изображения 1080px x 900px

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

Главный блок для разделов 

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

Блок с большим изображением по центру

Блок позволяет крупно показать целиком окно интерфейса, либо какую-либо его выделенную часть, изображения в ноутбуке не подходят. Ширина обязательно 2200px, высота приблизительная (около 1200px), PPI минимум 72 (т.е. нельзя просто взять маленький скриншот 640x480 и растянуть его до 2200px). Без теней и скругленных краев, это добавляется через CSS.

Блок с доп фичами

Этот блок идет парой с блоком "Большое изображение по центру". Только три пункта, желательно одинаковое количество текста. Иконки менять не рекомендуется.

Блок кнопка по центру

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

Главный блок для разделов 

Цвета разделов рекомендуется чередовать, белый (#ffffff) и светло-серый (#fcfcfc)

Блок с крупным изображением и текстом справа

В этом блоке рекомендуется использовать целиком окно интерфейса, либо какую-либо его выделенную часть. Ширина обязательно 1460px, высота приблизительная (около 900px), PPI минимум 72 (т.е. нельзя просто взять маленький скриншот 640x480 и растянуть его до 1460px). Без теней и скругленных краев, это добавляется через CSS.

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

Блок с крупным изображением и текстом слева

В этом блоке рекомендуется использовать целиком окно интерфейса, либо какую-либо его выделенную часть. Ширина обязательно 1270px, высота приблизительная (около 900px), PPI минимум 72 (т.е. нельзя просто взять маленький скриншот 640x480 и растянуть его до 1270px). Без теней и скругленных краев, это добавляется через CSS. 

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

Блок с текстом и коллажем из интерфейсов слева

Для этого блока, чтобы выделить крупно какую-то фичу или деталь процесса, на основе исходника изготавливается коллаж. Ширина обязательно 1080px, высота приблизительная (около 800px), PPI минимум 72 (т.е. нельзя просто взять маленький скриншот и растянуть его. Подразумевается, что это делает дизайнер

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

Выделенный блок с важной информацией и кнопкой

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

Блок с вопросами

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

Блок перебивка с изображением на весь экран

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

Блок c текстом и несколькими шагами?

В данном случае это блок "Как начать?". Если справа нужно больше пунктов их можно добавить через суперблок

Блок про мобильное приложение

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

Футер

Он же блок про то, что Битрикс24 - это набор инструментов