Как создать таймлайн. Sutori

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

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

Чтобы начать работу, зарегистрируйтесь или войдите через учётные записи. Удобно заходить через Гугл, если используете Google Classroom, или учётную запись Майкрософта, если работаете с Teams.

Дизайны в сервисе называются story — истории. При создании новой истории вы можете выбрать один из готовых шаблонов, они разделены на три вкладки, или начать с чистого листа (Blank).

Пустое цветное поле сверху — это баннер, обложка для истории. Кликните по нему, чтобы вставить изображение или удалить. Если решили вернуть удалённый баннер, нажмите на три точки в правом верхнем углу. Добавленное изображение можно сместить или увеличить, не забудьте затем подтвердить изменения кнопкой Save.

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

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

Собираем таймлайн

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

Сначала добавьте изображения. Потом – текст. Для этого кликните по карточке с изображением (не по самой картинке!). Появится поле для ввода текста. Ограничений на количество символов нет. 

Добавленный текст можно отформатировать (жирность, наклон, подчёркивание, три размера шрифта, маркированный и нумерованный список, выравнивание текста).

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

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

Также на карточке есть кнопка комментария – она доступна на платном тарифе.

Сохраняем таймлайн

Таймлайн готов? Вернитесь к заголовку и найдите над ним кнопку Share. У вас появится окно с тремя опциями.

  • Invite. Пригласить человека. Выберите одного из пользователей сервиса Sutori или введите почту коллеги. Он получит приглашение. При добавлении пользователей можно настроить права использования – будет им доступен только просмотр или же редактирование дизайна.
  • Share. Поделиться ссылкой. Можно добавить таймлайн сразу в гугл классрум или майкрософт тимс. Ниже — видимость дизайна (личный, секретный — с доступом только по ссылке или публичный).
  • Embed. Встроить на сайт. Вы получаете код, который вставляете на интернет-страницу. Теперь при внесении изменений в таймлайн он будет автоматически обновляться на всех сайтах. На вкладке нажмите кнопку Make public. Если код сразу не появился, закройте это окно и откройте его снова.

Рядом с кнопкой Share есть ещё Present — это предпросмотр в режиме презентации. Может понадобится, если вы на вебинаре показываете таймлайн со своего компьютера. Sutori размещает каждую карточку на отдельном слайде, автоматически подгоняя размер текста.

Каждым событием таймлайна можно поделиться. Для этого найдите в левом нижнем углу карточки ссылку Share и выберите подходящий вариант. По этой ссылке отдельная карточка будет открываться как веб-страница.  

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

Вот такой таймлайн под интригующим названием «Никто больше не хочет работать» у нас получился. 

Над материалом работали:
Анастасия Пахорукова
Иллюстрации:
Скриншоты сервиса
Инструкция актуальна:
Март 2023 года

Подводя итоги:

1
Придумайте идею
2
Напишите текст и подберите картинки
3
Сделайте вертикальный таймлайн