Каталог блоков страниц услуг

Первый экран с оффером и двумя вариантами разработки.

Первый экран без предложений с ценами: заголовок, лид, кнопки и фотография справа при необходимости. Факты выводятся двумя способами: proofs — подписи строкой под кнопками, bullets — список с красными точками над кнопками. imageSize=wide — колонки текста и картинки 1:1, картинка крупнее (для макета продукта с мелкими репликами); на телефоне место картинки задает imageMobile.

Первый экран услуги продвижения: цена, преимущества и демонстрация ежемесячного отчета справа вместо предложений с ценами.

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

Полная сетка преимуществ 3 на 2.

Цифры и факты сеткой: число крупное и красное, под ним пояснение. Для масштаба компании.

Три коротких доказательства без пояснений.

Нумерованные преимущества неровной сеткой: заголовок и пояснение в каждой карточке. Из версии 2.

Какие задачи должен решать сайт.

В каких ситуациях компании нужен сайт.

Когда услуга решает задачу бизнеса: нумерованные причины и сноска про соседние услуги. Из версии 1.

Ситуация слева, пояснение справа строками. Отклоненный вариант второго экрана. rightTone=ink — правая колонка основным цветом текста: для развилок, где главное — ответ.

Ситуации клиента карточками: заголовок ситуации и пояснение под ним.

Развилка «когда нужна эта услуга, а когда другая» двумя или тремя колонками; три колонки ниже 900 px встают друг под другом. Пункт — строка или объект { title, text }: заголовок пункта жирным, пояснение ниже. mark: 'dash' — серый прочерк вместо галочки. Имя по позиции в каркасе, содержание свое.

Уникальное объяснение услуги, схема или сравнение.

Объяснение услуги: место ролика слева, четыре шага работы с результатом справа.

Интерактивный состав с вертикальными вкладками.

Что входит в запуск и что считается отдельно.

Состав и границы услуги двумя колонками: входит и не входит. Из версии 1.

Гарантии карточками в сетке: по карточке на обещание, без перечня исключений. Необязательно: list с заголовком listTitle — проверяемый список под карточками (лист приемки) с галочками в две колонки, note — спокойная приписка под блоком, columns={2} — карточки два в ряд для четырех длинных.

Гарантии по составу, стоимости и сроку с отдельными границами сметы. Прежняя версия оформления.

Нейтральная сетка карточек «заголовок и текст»: объяснения, условия, технические пункты, когда по смыслу не подходят ситуации клиента и гарантии. Номера 01, 02… по желанию.

Что понадобится от клиента: список с пометками «нужно» и «если есть». Из версии 2. Проп layout="columns" — две колонки: слева «нужно», справа «если есть», заметка под обеими; на телефоне колонки друг под другом.

Заголовок и несколько абзацев с ограниченной шириной строки. Смысловой блок для рассказа.

Два основных варианта цены.

Два варианта цены с построчной разбивкой суммы. Проп featuresAlign="top" — список пунктов идет сразу за текстом карточки, а не прижат к ее низу: для карточки с коротким списком рядом с длинным.

Цена карточками: вариант на карточку, под ними общий состав работ с подсказками и позиция студии. Для услуг с тремя вариантами. Одна карточка с составом раскладывается сама: на компьютере карточка слева, около 40 % ширины, состав справа двумя колонками; на телефоне столбиком.

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

Вывод и сворачиваемая подробная таблица сравнения. Якорь id; note — абзацы под таблицей, строка или список строк.

Два уровня дизайна рядом: экран сайта в рамке браузера, примеры, цена и выровненные строки различий; премиум на темной колонке. Создан 11.09 для сайта на WordPress. Цена необязательна: без price крупно идет label. Проп mobile="pairs" — на телефоне сначала обе шапки с экранами, затем строки различий парами с подписями колонок.

Один экран «было / стало» с ползунком-разделителем: кадр 16:10 на ширину контейнера, ручку тянут мышью, пальцем или стрелками, подписи в нижних углах, пометка над кадром. Под кадром строки различий двумя колонками, на телефоне одной. Без скрипта две картинки друг под другом. Для редизайна и других работ, где разница видна глазами. Создан 11.09.

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

Интерактивный подбор редакции 1С-Битрикс по шести понятным функциям сайта. Первые два уровня ведут к Старту, торговые функции — к Малому бизнесу, многоскладовость и несколько типов цен — к Бизнесу.

Карточки решений с назначением и полной разбивкой цены.

Сетка готовых решений без внешней плашки.

Дополнительные работы и модули строками «название — цена». У пункта необязательные text и fit: описание и строка «Условия» (подпись меняет fitLabel) под названием, цена справа; на телефоне цена под названием.

Интерактивный расчет стоимости.

Один процесс в обычной сетке. lastRow="stretch" растягивает последний шаг неполного ряда, note — примечание под сеткой (например, о сроке).

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

Два самостоятельных процесса в сетке с переключателем.

Интерактивная последовательность работы.

Шесть направлений SEO вкладками и программа работ по периодам аккордеоном.

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

Масштаб полного плана работ числами по месяцам и пример в модальном окне.

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

Ежемесячный отчет одним окном с пятью вкладками: работы, позиции, трафик, обращения и план.

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

Было и стало по ситуациям во вкладках: экран «Сейчас», экран «После» в CSS-рамке телефона или браузера и текст. На телефоне один экран и переключатель «Сейчас | После». Для адаптации, ускорения, редизайна. Создан 11.09.

Комплект по одной статье: слева лист документа с темой, поисковой задачей, H1, нумерованными подзаголовками H2 и объемом, справа Title и Description сниппетом выдачи без логотипов поисковиков и рекомендации по размещению списком (необязательно). На телефоне все друг под другом. Для услуг текстов. Создан 11.09.

Учебный разговор живым окном вместо картинки: слева окно, справа шаги столбиком, шаг показывает разговор, накопленный до него, прошлые реплики приглушены; у шага может быть карточка письма или уведомления менеджеру. channel — окно консультанта на сайте в рамке браузера (site) или условный мессенджер в рамке телефона (telegram, messenger), без логотипов. Реплика может нести заголовок, строки «подпись — значение», приписку и кнопки рядами. На телефоне шаги вкладками над окном, реплики не мельче 15 px. Без скрипта виден весь разговор. Создан 11.09.

Живая схема обмена «сайт ↔ внешняя система» HTML вместо картинки: две карточки по краям, стрелки туда и обратно с подписями, под ними журнал «Время · Операция · Итог» с отметкой успеха или ошибки и плашкой уведомления под ошибочной строкой. На телефоне карточки друг под другом, стрелки вертикальные, строки журнала карточками, текст не мельче 14 px. Проп scenarios — сценарии вкладками с текстом у каждой, без скрипта все подряд. Для интеграций, обмена с 1С, фидов, CRM. Создан 11.09.

Преимущества Менокома в сетке 3 на 2.

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

Преимущества нумерованным списком и колонка цифр рядом. Из версии 1.

Слайдер работ с подписями и соседними кадрами.

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

Классический слайдер кейсов с текстом.

Темная визуальная галерея первых экранов.

Сетка логотипов клиентов.

Сетка логотипов во всю ширину экрана, без анимации.

Логотипы клиентов бегущими лентами с общим замедлением всего блока под курсором и по тапу.

Четыре ленты с общей скоростью и кирпичным сдвигом. Под курсором замедляется только наведенная строка; на тач-экране управление скоростью отключено. Проп quote = { text, author, href } — цитата клиента под лентами.

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

Документы специалиста с изображением и ссылкой на проверку у издателя. Один документ — скан рядом с текстом; несколько — одним блоком: имя и роль один раз, документы в ряд.

Отзывы с миниатюрами документов.

Полноэкранная карусель отзывов.

Отзывы карточками подряд, со сканом письма внутри карточки. Из версии 1, с 11.09 в оформлении sv6 со своими стилями: на странице услуги выглядит так же, как в каталоге.

Статьи прямоугольниками: слева обложка, справа рубрика, заголовок и ссылка.

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

Компактная консультация через мессенджеры.

Консультация с полной формой.

FAQ: заголовок слева, вопросы справа.

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

Смежные услуги.

Финальный темный контактный блок. note — строка-подсказка под кнопками, например рабочее время.

Финальное обращение с подсказкой, что указать в сообщении: адрес сайта и регион.