«Как помочь клиентам пересечь реку»: руководство по дизайну

Как сверстать необычный пост с помощью Setka Editor

Setka Editor был разработан программистами с большим опытом создания самых разных онлайн-изданий. Они отлично понимают потребности редакторов и дизайнеров и, чтобы помочь им, разработчики создали инструмент с продуманным интерфейсом, который легко могут использовать даже люди без дизайн-бэкграунда. Но чтобы показать, как делать что-то сложное, мы решили рассказать, как создавался один из наших недавних постов — «„Как помочь клиентам пересечь реку“: Крис Лема делится пятью приемами создания бизнес-нарратива».

Мы попросили арт-директора Accent Дмитрия Распопова поделиться несколькими полезными советами.

1

Выберите систему сеток, которая подходит для воплощения вашей идеи

Вот что мы выбрали для интервью с Крисом Лемой:

6 колонок (940px)

Межколоночный отступ — 20px, минимальная ширина внешних отступов — 40px

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

2

Поставьте иллюстрации на всю ширину

Когда вы используете Setka Editor для верстки постов, весь ваш контент «живет» внутри поста. Фоновые изображения или иллюстрации не могут быть больше, чем ширина поста. Она, в свою очередь, зависит от настроек темы WordPress, которую вы используете. Если ширина постов ограничена сайдбарами или другими элементами темы, вы можете изменить это, установив специальный плагин — Full width Page Templates — или вручную отредактировав CSS-файлы вашей WordPress-темы. Когда вы внесете эти поправки, вы сможете ставить изображения на всю ширину экрана. Для того чтобы узнать больше о настройках изображений, откройте наш Help Center.

3

Используйте инструмент Smart quote

Smart quote – инструмент, превращающий выделенный фрагмент текста в цитату. Для того чтобы использовать его, включите режим Smart design, выберите любое предложение или абзац и нажмите на значок цитаты слева. Текст автоматически отформатируется и визуально выделится в посте. Для того чтобы узнать больше о режиме Smart design, нажмите сюда.

4

Акцентируйте внимание на важной информации с помощью карточек

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

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

5

Подберите фон под цвета иллюстрации

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

6

Добавьте анимации

В Setka Editor можно анимировать абзацы текстов, изображения, инфографику. Анимация применяется к параграфу, картинке, сетке. Анимации можно задать направление движения (Direction): вправо-влево, вниз-вверх, настроить первый кадр (first frame) — чтобы он увеличивался, сдвигался или поворачивался. Для того чтобы разнообразить верстку, мы решили анимировать несколько блоков с дополнительной информацией. Чтобы узнать больше об этой функции, нажмите сюда.

7

Сохраните пост как шаблон

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

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