В конце 2012 года, на волне популярности iPad, медиажурналисты стали искать новые форматы и экспериментировать с формой подачи информации.
Наибольшим успехом оказался новый формат сторителлинга — интерактивная история Snowfall редакции New York Times. Так начиналась история лонгридов — интерактивных и эмоциональных медиаисторий с глубоким погружением в тему.
Чтобы создать лонгрид, необязательно обладать навыками программиста, дизайнера и верстальщика. Все эти функции возьмёт на себя российский сервис Tilda.
В бесплатном аккаунте можно создать до 50 отдельных страниц-лонгридов, а можно — и один сайт опять же до 50 страниц. Для работы будут доступны только базовые блоки, но даже с их помощью можно создать весьма симпатичную публикацию.
Для размещения информации и медиа сервис выделяет до 50 мегабайт свободного пространства. Немного, конечно. Поэтому тяжелые фотографии лучше сжимать перед публикацией.
Лонгрид создаётся из отдельных модулей-«кубиков», каждый из которых доведён до совершенства программистами и дизайнерами. А таких модулей внутри сервиса более 500.
Все действия с ними производятся в интуитивно понятном интерфейсе. Например, если вставить текстовый модуль, в нем уже будут подобраны шрифт, цвет, отступы, межстрочный интервал. При необходимости можно внести изменения, но даже без них всё будет выглядеть красиво.
Например, вот так (щёлкайте по ссылке или по картинке).
Регистрация
Заходим на сайт Tilda, нажимаем на кнопку «Регистрация» в правом верхнем углу.
Чтобы создать аккаунт, надо указать имя, адрес электронной почты и пароль. Нажимаем на кнопку «Зарегистрироваться».
Тут же открывается окошко, в котором предлагается создать проект и придумать ему название. Нажимаем «Создать».
После регистрации на платформе лучше заглянуть в раздел «Тарифы и оплата».
Если вы первый раз на сайте, после регистрации можно активировать на две недели платный тариф Personal. Так можно попробовать все возможности сервиса без ограничений.
Через две недели тариф автоматически перейдет в режим «Free» (бесплатный). Платные блоки внутри созданных лонгридов не исчезнут, но только в том случае, если статьи не редактировать.
Шаблоны и блоки
Так выглядит рабочий кабинет. Изначально работе присваивается адрес, состоящий из слова «project» и номера. В настройках эти слова можно убрать и заменить на свое название.
Чтобы перейти к конструктору страницы, нажимаем «Редактировать сайт».
Чтобы перейти к созданию лонгрида, нажимаем на кнопку «Создать новую страницу».
Переходим к выбору шаблона. Можно начать с пустой страницы, а можно начать с шаблона (так проще для новичков). Шаблонные страницы Tilda состоят из модулей, которые можно настраивать, менять местами, удалять и добавлять.
Каждый шаблон можно просмотреть перед выбором. Есть универсальные страницы под любое содержимое, есть шаблоны для событий, мастер-классов, концертов, фестивалей, хакатонов, выставок, семинаров, даже для Дня города.
Если в шаблоне понравились многие блоки или приглянулось оформление, можно его взять за основу, а затем отредактировать под себя. Любые блоки из шаблона можно удалить и заменить на свои, оформление тоже можно настроить по-своему.
В категории «Pro» есть несколько шаблонов со сложной версткой, нестандартной типографикой и анимацией. Они рассчитаны на продвинутых пользователей.
Открываем шаблон для редактирования. Внутри каждого шаблона уже есть несколько блоков, которые можно менять и редактировать. Чтобы вызвать меню редактирования каждого блока (модуля), достаточно навести курсор на этот самый модуль.
Для начала попробуем отредактировать обложку — модуль с картинкой и названием лонгрида.
В верхнем левом углу находится выпадающее меню. Используем его, чтобы выбрать один из шаблонов модуля. При наведении курсора на описание шаблона модуля система отображает его миниатюру. У каждого модуля свое обозначение, например, модули обложки обозначены буквами СR.
Обязательно проверяем, чтобы стоял переключатель напротив надписи «Сохранять контент при переключении». В этом случае мы можем бесконечно менять шаблоны – содержимое не пострадает, а будет перестраиваться под новый шаблон.
Итак, шаблон модуля выбран. Можно его редактировать.
В сервисе два режима редактирования: быстрое и с помощью выпадающего меню. Экспресс-редактирование доступно для текстов: щёлкаем в текст шаблона – и можно стирать и вписывать свое содержание.
Вверху появится меню для редактирования: здесь настройки шрифта, цвета, начертания и т.д. Можно добавлять списки и гиперссылки.
В целом этот вид редактирования не очень удобный вариант – больше подходит для точечных изменений.
Для масштабных изменений, лучше вызвать меню «Контент». Здесь можно не только изменить текст надписи, но и поменять фоновое изображение… То есть выполнить все возможные манипуляции с содержимым блока. Не забываем нажать «Сохранить и выйти».
В меню «Настройки» доступны разные опции в зависимости от блока. Обычно можно настраивать внешний вид, размеры, указывать диапазон видимости на разных экранах. Для некоторых блоков доступны настройки типографики и анимации.
В сервисе используется 12-колоночная сетка страницы. То есть условно вся ширина поля делится на 12 колонок. Колонками измеряются все модули и блоки.
Например, в этом случае выбран модуль «изображение с текстом». В нем 2 столбика. Ширина первого столбика (блока) – 4 колонки, ширина 2 блока – 6 колонок, то есть упор делается на изображение, ему больше уделяется места. Плюс есть отступ слева (поля) – 2 колонки. В сумме получается 12.
Можно самостоятельно изменить эту разметку и выставить другие размеры. Например, увеличить ширину текстового поля и уменьшить ширину поля с картинкой, увеличить или уменьшить отступ слева.
Совсем отказываться от отступа нельзя (минимум одна колонка должна быть), иначе статья будет смотреться как большая простыня контента, может не поместиться в экран, читателям придется прокручивать страницу по горизонтали, чтобы все просмотреть.
Ещё важно правильно установить расстояние между блоками (сверху и снизу). Лучше, чтобы они были во всех блоках одинаковыми – так сайт будет смотреться аккуратнее. Например, отступ сверху – 3 линии, снизу – 2,5. Еще проще – сделать отступы везде одинаковыми: и сверху, и снизу.
Сохраняем настройки и возвращаемся к модулю.
Справа вверху находится меню управления модулем. С его помощью можно дублировать, удалить, спрятать или изменить положения модуля на странице.
Какие бывают модули?
На страницу можно добавить дополнительные модули из библиотеки. Для этого нажимаем на значок «+» на границе блока и в библиотеке выбираем и добавляем нужный модуль.
В библиотеке модулей — практически всё, что только можно придумать. От обложки до подвала. Кстати, подвал – это то, что находится внизу веб-страницы (копирайт, ссылки на соцсети, контактная информация).
Можно просматривать все блоки и модули и выбирать самый подходящий для своего контента.
Чтобы добавить внутрь лонгрида видео, выбираем одноимённый модуль.
Видеоролики вставляются по ссылке из хостингов YouTube и Vimeo. Есть несколько вариантов оформления видео. Можно вставить внутрь лонгрида целый плейлист, два видео в двух колонках и трансляцию с YouTube вместе с комментариями.
Как прокачать Тильду?
Если не нашлось подходящего модуля для контента, стоит заглянуть в раздел модулей, который называется «Другое» и находится в самом конце списка модулей.
Раздел в основном платный. Он помогает прокачать Тильду и добавить к ней так называемые виджеты. Что можно добавить с его помощью? Любые встраиваемые объекты (выставки, игры, викторины, презентации), интерактивную карту Google или Яндекс, голосования, опросы и даже украшения сайта.
Чтобы добавить на страницу встраиваемый объект, выбираем модуль «HTML-код» (блок платный).
Добавляем модуль, открываем вкладку «Настройки» и вставляем код. По умолчанию все, что мы встроили, откроется на весь экран. Если этот вариант не подходит, можно изменить код, выставить свои высоту и ширину объекта.
Нулевой блок
«Нулевой» блок (Zero Block) — это профессиональный редактор внутри Тильды, который позволяет реализовать любую идею, создавая блоки с собственным дизайном.
Чтобы добавить «Нулевой блок» на страницу, нажимаем на кнопку Zero внизу страницы. Либо выбираем его в библиотеке блоков — он находится в самом низу, после категории «Другое».
Чтобы добавить элемент внутрь блока, нажимаем на «плюс» в левом верхнем углу. Можно добавить текст, изображение, объект, кнопку, видео, tooltip, блок кода, форму или галерею. Tooltip — это интерактивный элемент, при наведении на который появляется подсказка с текстом и/или изображением.
В Zero Block поддерживаются все основные манипуляции, выполняемые с помощью мышки: элементы можно перемещать, менять размер, копировать (зажав клавишу Alt), выделять несколько объектов. Полные настройки элемента открываются при клике на кнопку Settings в правом нижнем углу экрана.
Следующий этап – адаптация блока, чтобы он корректно отображался на всех типах устройств. Создатели сервиса предусмотрели адаптацию для основных типов экранов:
1200 – max (компьютеры)
980 – 1200 (планшет горизонтальный)
640 – 980 (планшет вертикальный)
480 – 640 (смартфон горизонтальный)
320 – 480 (смартфон вертикальный)
Этого достаточно, чтобы дизайн отображался корректно на всех устройствах.
После того, как мы создали дизайн на компьютере, надо попереключать разные экраны и там, где необходимо, поправить, например, ширину колонки текста, размер изображения, размер шрифта, высоту или расположение элементов.
Сохраняем блок, нажав на кнопку «Save», и закрываем с помощью кнопки «Close».
Публикация
После того, как все модули добавлены и отредактированы, можно сохранять страницу и публиковать её.
Справа вверху есть кнопка для предпросмотра. Кнопка «Еще» вызывает карту страницы – можно проверить, не забыли ли вы какой-нибудь блок. После этого можно публиковать страницу.
После публикации вам предложат дать название странице (латиницей) и сразу ее просмотреть.
У каждой страницы есть свои настройки. Чтобы их открыть, возврщаемся в личный кабинет (нажимаем на название проекта в правом верхнем углу) и жмём на кнопку «Настройки» напротив названия страницы.
В разделе «Главное» можно поменять название статьи и добавить к ней описание.
В разделе «Бейджик» при необходимости меняем изображение, которое используется в превью страницы.
В разделе «Соцсети» можно посмотреть, как будет выглядеть ссылка на страницу в соцсетях, и отредактировать её.
В разделе «Действия» есть полезная кнопка «Дублировать страницу». Это очень удобно для создания серии лонгридов с одинаковым дизайном. Можно создать одну страницу, настроить ее, а далее копировать и добавлять внутрь новое содержимое.
