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

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

Лид в идеале должен быть 160-180 символов. Но это по возможности. Если лид нельзя сократить, то лучше разбить его на 2 абзаца пустой строкой, это нормально.

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

Содержание

Содержание составляем из заголовков второго уровня. Чтобы добавить ссылку, выбираем нужный текстовый блок с заголовком, нажимаем на иконку капельки, выбираем "параметры", добавляем ID-компонента (якорь). Затем выделяем нужный пункт меню, нажимаем на иконку ссылки, вставляем название якоря через #. Галочка "открывать в новой вкладке" должна быть отключена. 

Это секция для копирования, которая идёт после содержания. Просто перетаскиваем сюда блоки из примеров ниже.

Это секция для копирования, которая идёт после разрыва секций (например, всавки СТА). Просто перетаскиваем сюда блоки из примеров ниже.

Заголовок Н2. Размеры настроены для всех экранов.

Заголовок Н3. Размеры настроены для всех экранов.

Заголовок Н4. Размеры настроены для всех экранов.

Это блок с обычным текстом. Используем 16 размер, интервал 1.8, размеры и отступы для других экранов уже настроены, ничего менять не нужно. Просто берём этот блок, дублируем его и вставляем скопированный текст. В Creatium нет ограничения ширины по количеству колонок, поэтому ширину текста настраиваем через блок ограничителя ширины. 

В Creatium всё верстается через секции и блоки. В одну секцию можно добавить сколько угодно разных блоков: текст, изображения, таблицы и т.д. Разрывы секций нужно делать только тогда, когда мы добавляем сквозной блок (об этом ниже).

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

Если что-то нужно выделить в тексте, то выделяем нужную часть текста, появится диалоговое окно, в нём нажимаем на B (bold). 

Это ссылка в тексте: ссылка в тексте, делается она просто: выделяем нужную часть текста, нажимаем на иконку ссылки и вставляем ссылку. Всё. Оформление ссылки добавляется автоматически настройками страницы. Цвет поменять не получится. Всегда выбираем "открыть в новой вкладке".

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

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

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

Оформление ключевых мыслей и примеров

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

Вот пример оформления блока с примером. Он состоит из элемента "иконка с текстом" и контейнера, куда этот элемент помещён. Внутри блока настроены отступы. Копируем блок целиком, а не только элемент "иконка с текстом". 

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

Оформление цитат

Для оформления цитат наших технических специалистов и экспертов используем следующий блок:

Блок состоит из нескольких элементов: комментария, текста комментария, колонок с картинкой, текстом (ФИО) и ссылкой. Поэтому копируем блок целиком. Блок уже настроен под все экраны. 

Если нужно оформить цитату стороннего специалиста или эксперта, например, цитату врача, учёного, ВОЗ и тд, используем следующий блок (блок уже настроен под все расширения экрана, поэтому только меняем текст):

Оформление списков

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

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

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

Блок с галочками используем, когда просто идёт перечисление каких-либо характеристик. Для позитивных берём зелёный цвет, для негативных — серый.

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

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

Оформление таблиц

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

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

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

Также можно создавать сложные таблицы с объединением ячеек. Чтобы объединить ячейки нужно выделить нужные ячейки, откроется всплывающее окно, там выбираем "ячейка" и нажимаем "объединить". По такому же принципу добавляются столбцы и строки: выделяем строки или столбец и во всплывающем окне выбираем нужное действие. Пример таблицы с объединёнными ячейками ниже:

Методика выявления наиболее продуктивного времени

К таблице можно добавить подпись, пример подписи под таблицей выше. Просто копируем этот текстовый блок. Важно!  Если добавляем подпись к таблице, то нужно у самой таблицы поменять отступ снизу. Для этого выделяем блок с таблицей, нажимаем на иконку капельки, выбираем вкладку "отступы" и меняем нижний отступ на 0.  

Что делать, если таблица очень большая?

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

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

Изображения

Используем изображения на всю ширину текстового блока. Настройки можно не менять, изображение уже настроено на все экраны. Это обычная (не вписанная) картинка размером 100% ширины экрана с горизонтальным выравниванием по центру и со скруглением углов 7px. Настройки можно увидеть, кликнув на значок ключа. Отступы также уже настроены.

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

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

Методика выявления наиболее продуктивного времени

Обратите внимание: в Creatium нет встроенных подписей к изображениям, поэтому нужно добавлять их отдельный текстовым блоком. Пример блока с подписью к изображению выше (под блоком с картинкой) — копируем и блок с картинкой и текстовый блок. Текстовый блок уже настроен для всех экранов, менять нужно только текст.

Если нужно добавить слайдер, то используем следующий блок:

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

Обратите внимание! Изображения в слайдах настроены под разные экраны: это вписанная картинка, растянутая по ширине блока, с разной высотой для разных экранов. Поэтому лучше не добавлять новый слайд, а копировать слайд и на нём загружать новую картинку. 

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

Скриншоты отзывов и цитат

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

Обратите внимание: ширина картинки 70% для десктопов и 100% для планшетов и мобильных, также у картинки используются границы и скругление в 7 px. Картинка должна увеличиваться по клику (действие уже настроено). В идеале, скриншот должен быть на белом фоне (без фона мессенджера). 

Видео

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

СТА и врезки

Первая врезка, которая должна быть в каждой статье — это СТА с призывом на подписку в социальных сетях. Мы используем сквозной блок — единый для всех статей. Если внести изменения в этот блок, то он поменяется во всех статьях. Этот блок добавляется через новую секцию, поэтому тут будет разрыв. 

После СТА на подписку нужно добавить новую секцию. Обратите внимание, что у секции, которая идёт после СТА будут другие настройки отступов:

У обычной секции отступы следующие: сверху 40px, снизу 5px.

У секции после СТА на подписку отступы следующие: сверху 20px, снизу 5px.

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

Следующий обязательный блок для каждой статьи — это врезка с СТА на статью "Что такое бризер". Этот блок также сквозной — все изменения, внесённые в этот блок, внесутся и в остальные статьи. Блок также добавляется отдельной секцией, поэтому тут тоже будет разрыв, после которого нужно добавить новую секцию с отступом сверху в 20px (или скопировать эту секцию).

Это текстовый блок, который начинается в новой секции после врезки с СТА на статью "Что такое бризер".

Дополнительные СТА

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

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

СТА на вызов инженера для оценки уровня шума используем такой:

Не забываем, что после СТА идёт секция с отступом в 20px.

Адаптированные СТА под контекст статьи

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

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

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

Как оформляем врезки со ссылками на другие статьи

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

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

В блоке меняем фоновое изображение (берём обложку статьи), название статьи и ссылку на статью. 

Важно: нужно обязательно зайти в настройки кнопки и не забыть поставить нужную ссылку в формате: /blog/название_статьи. Для этого выбираем кнопку, нажимаем на ключик, вкладка "действие", указываем ссылку. 

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

Как оформляем выводы

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

Выводы/Итоговые рекомендации

Квизы

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

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

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

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

Переменные:
qw1 — для поля с первый вопросом “Какие проблемы нужно решить?”
qw2 — для поля со вторым вопросом “Какие у вас есть дополнительные требования?”
qw3 — для поля с третьим вопросом “В какое помещение планируете установку …?”
qw4B — для поля с четвёртым вопросом с подборкой бризеров “Какое количество человек чаще всего одновременно находятся в помещении?”
qw5B — для поля с пятым вопросом с подборкой бризеров “Куда выходят окна и насколько тихо за окном?”
qw4S — для поля с четвёртым вопросом с подборкой кондиционеров “Какова площадь помещения?”
qw5S — для поля с пятым вопросом с подборкой кондиционеров “Важно ли вам, чтобы кондиционер имел инвертор?”
qw4MS — для поля с четвёртым вопросом с подборкой мульти-сплит-системой “Какова общая площадь помещений?”
qw5MS — для поля с пятым вопросом с подборкой мульти-сплит-системой “Важно ли вам, чтобы у внутренних блоков мульти-сплит-систем был стильный дизайн и возможность выбора цвета корпуса?”

Обратите внимание! Если какие-то переменные невозможно соотнести с полем по примеру выше, то указываем этому полю уникальную переменную — qw6, а поля с вариантами ответов, в некоторых случаях, расширяем и делаем их понятными для менеджеров (примеры в инструкции ноушена), так как заголовок вопроса не будет передаваться в СРМ-систему и будет иметь общее название — «Дополнительная информация».

Инструкция по добавлению переменных в квиз в ноушене

Авторы

Блок с авторами добавляем сквозной секцией.

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

Авторы статьи:

Авторы статьи:

Блок расшаривания

Блок расшаривания добавляем сквозной секцией.

Понравилась статья? Напишите комментарий
или поделитесь в социальных сетях:

Ссылки на каталоги

После блока расшаривания добавляем ссылку на каталог. Ссылка добавляется через сквозную секцию. Готовые секции можно взять ниже:

Секция с рекомендованными статьями

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

В Creatium нельзя просто выбрать существующие статьи из списка, блок верстается вручную. Каждая карточка статьи состоит из изображения, заголовка и краткого описания. В настройках каждого блока (карточки статьи) задаётся ссылка на нужную статью.

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

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

Комментарии