Помогите развивать независимый студенческий журнал — оформите пожертвование.
 
Это твой гайд по заливке материалов на тильду
И это проще чем кажется. Скучно, но зато можно верстать так, как хочется само_й!
Сделан с любовью: от данечки и грибника!
Сделан для: лучших редакторо_к и авторо_к
Публикация: на время пока у нас не будет сайта!!
Что нужно знать перед заливкой? Быть внимательн_ой!
Тильда это инструмент, который предоставляет набор базовых блоков с которыми удобно работать. Но у нее есть и определенный набор минусов: ограниченный перечень блоков, которые можно использовать; негибкие блоки и периодические баги.

К счастью, эти проблемы не повлияют на твою заливку, поэтому это всего лишь общее знание, которая готовит тебя к худшему, но на самом деле все гораздо приятнее!

Место работы в тильде (как правило с текстом выделено серым, это активный блок, в котором работаешь ты. Белое поле вокруг блока - переключение на базовое меню и отмена работы с текущим блоком.)
  1. Тильда офигенно умеет копировать блоки.
Попробуй навестись на этот блок и ты увидишь интерфейс блока справа. Первый символ - дублировать блок (он копируется и размещается сразу под текущим блоком).
Второй символ - удалять блок.
Третий символ отключить блок (сделать его невидимым, я честно говоря не пользовался этим ни разу)
Четвертый символ - перейти к возможным действиям: копировать, вырезать, вставить
Пятый и шестой символ - перенести блок на один вверх или на один блок вниз.

Очень рекомендую поиграть с этим или любым другим блоком и попробовать его поперемещать. А еще можно перемещать блоки между страницами. Если ты скопируешь блок из соседней вкладки из любого другого материала - он отлично вставится сюда. Поэтому уже залитые материалы можно использовать как шаблоны для заливки будущих.
Вот ты накопировал_а кучу блоков и наиграл_ась с ними. Что делать дальше? Как снова навести порядок в тильде? Базово хочется нажать ctrl/cmd+z, но, к сожалению, тильда не так умна как хотелось бы.

2. Как отменить предыдущие действия?

Нажми на белое пространство вокруг этого блока и ты увидишь кнопку "отменить". Она работает как cntrl/cmd+z, но одним нажатием отменяется только последнее действие. С редактурой текстов я не рекомендую пользоваться ей, но для того, чтобы отменить действия с блоками - работает отлично!

Еще тильда все сохраняет автоматически, что позволяет не думать о сохранении впринципе!
Теперь у тебя есть основная информация, которая нужна для того, чтобы представить как работает тильда. Давай разберемся с типами блоков, которые мы используем для заливки материалов.

3.Типы блоков

  1. Самый первый блок, который есть на этой странице -TL01. Попробуй найти его и понять как он работает. Это блок заголовка и подзаголовка. Заголовок выделяется жирным, а подзаголовок не выделяется. Ни в заголовке, ни в подзаголовке не должно быть точек (они выглядят скучно и некрасиво)
  2. Второй тип блоков, который есть на этой странице - TX01. Это самый простой текстовый блок в тильде, внутри которого можно играться с выделениями и шрифтами (можно делать подзаги внутри текста другим размером шрифта и выделять их жирным/курсивом/подчеркиваниями). Тут также работают комбинации ctrl/cmd+b/i/u.
  3. Для текстов еще обязательно используется блок TX02.
  4. Внутри блока мы используем не дефолтный черный цвет, а почти черный. Его код — #212427. Чтобы поменять цвет для всего блока, нужно зайти в настройки этого блока → типографика — текст: цвет
  5. Указывайте этот текст везде (в заголовках, ключах, простых текстовых блоков), но не указывайте его в лиде — лид и так немного серый!
Это блок для лида (вводного текста). Он отличается шрифтом, размером и цветом. Круче всего работает, когда в нем 1-2 абзаца. Размещается чаще всего под иллюстрациями в начале текста.
4. Подзаголовки внутри текстовых блоков выглядят скучнее, чем отдельный блок с подзагом. По нескольким причинам: интервалы, единый стандарт шрифт+размер. Поэтому для подзаголовков мы используем блок TL02.
Стандартный размер текста: 32px, выделение: жирным
Хотел написать, что эти 4 текстовых блока - все что нужно для заливки самого простого текста. В целом это так и есть, но есть три дополнительных типа блоков, которые часто очень важны и материалы без них выглядят как колонка в газете без форматирования.

5. Блок с подписями авторо_к! Он тоже есть в начале, где я подписался как человек сделавший вот этот гайд. Это блок CL01, в котором указываются: автор_ка, редактор_ка, иллюстратор_ка (слева). И дата публикации (справа)!
На всех людей делавших тексты можно делать гиперссылки, но это все уже должно быть готовым в гугл-доке!

6. Блок с цитатами. За время моих заливок я пробовал от самого дефолтного варианта, который предлагает тильда до разных форматов. Идеальным мне кажется использование блока IP101, с шириной блока в 8 колонок и отступом слева в 2 колонки. С размерами можно экспериментировать, но я скорее за 20px, чтобы текст не сильно выбивался и отличался от подзагов. Выделение жирным.
Остался всего один блок и ты знаешь о тильде самое основное!
7. Поп-апы! Когда меня бросили в море тильды и попросили взять на себя заливку - я испугался что это за дрянь! Оказалось, что эти штуки - крутой инструмент! Тут все работает не только через текстовый блок, но и через !эмодзи! Обычно мы используем белый квадратик ◻️ - наведись на него (если смотришь в предпросмотре) и ты узнаешь как он работает! Блок, который находится ниже - невидим для читатель_ницы сайта и видим только заливщи_це/технар_ке. Она будет видеть только то, что написано не жирным после "Текст:". Это блок T198. Он не обязан стоять под блоком, в котором находится эмодзи. Этот блок можно смело поместить в конец текста, чтобы не отвлекал во время заливки
  1. Тебе нужно вставить белый квадратик или любое другое эмодзи в место, где нужен поп-ап.
  2. Выделить эмодзи и нажать на скрепку в верхней панели (да, на эмодзи нужно прикрепить гиперссылку в формате: #1). решетка позволяет работать как гиперссылка, число или цифра - порядковый номер поп-апа
  3. для каждого поп-апа используется один блок (T198).
После того как все текстовые блоки готовы: нужно докрутить оформление текста и то как он выглядит. Есть три пункта оформления:

Гиперссылки. По умолчанию все гиперссылки открываются в той же вкладке, что и текст. И это плохо, потому что сильно снижает процент дочитываемости — люди уходят по гиперссылке, потом идут куда-то еще оттуда, потом еще куда-то, и вот изначальный материал уже затерялся. Чтобы такого не происходило, необходимо на каждой гиперссылке выбрать галочку «Открыть ссылку в новой вкладке». Кликни на текст гиперссылки, не выделяя его, нажми «Редактировать» и появится окошко, где нужно указать ссылкам их поведение. После чекбокса не забывай нажать «Применить», иначе изменения не сохранятся!
Теперь по поводу стилизации гиперссылок: по умолчанию, при копировании из гугл доков гиперссылки проставляются уродски. Для того, чтобы во всех ссылках дефолтный стиль был заменен на нужный нам, надо добавить в любое место страницы (проще всего в самый конец) специальный блок, который называется «T193, модификатор: стиль ссылок»

В настройках этого блока нужно указать: цвет текста: оставить по умолчанию, линия для подчеркивания: #bf0000, толщина линии — 2px.

Часто тильда автоматически подчеркивает ссылку через cntrl/cmd+u. Поэтому у текста ее нужно отжимать, чтобы не было двух подчеркиваний на одной ссылке (это выглядит уродски). Гиперссылка должна выглядеть так
Выше — нужный блок с нужными настройками! Попробуй добавить на страницу его, а затем добавить любую ссылку. Она автоматически станет нужного нам стиля)

Важное! Чуть выше было рассказано про то, как работать с попапами в виде белого эмодзи квадратика. Но когда на странице присутствует модификатор, делающий все гиперссылки одинаковыми, он и квадратики подчеркивает (а мы такое не хотим!). Чтобы этого избежать, нежелательно подчеркнутую гиперссылку нужно выделить, нажать на кнопку «Ссылка» слева наверху и в цвете линии указать белый (#ffffff). Тогда цвет подчеркивания просто будет сливаться с фоном, а на квадратике будет оставаться попап, но как бы не будет подчеркивания! ◻️


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

Третий пункт оформления: типограф. Базово все тексты корректируются в гугл-доке, но для перестраховки можно использовать встроенный типограф тильды из верхней панели (значок книжечки). Но важно понимать, что после типографирования текст будет читать невозможно, потому что типографирование выглядит как-то так:
«Это оттипографированный текст, который выглядит достаточно стремно» — сложно представить что это реально. Но зато в предпросмотре все будет выглядеть мега красиво.
Медиафайлы
  1. Картинки;
С картинками все просто. Используется блок GL01, который может использоваться как для одной фотографии, так и для нескольких, который будет работать как галерея. (размер блока для горизонтальной фотографии - 10 колонок, для вертикальной фотографии - 6 колонок). Подпись к фотографиям можно добавлять через настройки блока, поле - контент, в котором нужно выбрать подблок "текст".

2. Видео;
Для видео можно использовать блок VD01, в который вставляется гиперссылка ютуба и видео красиво отображается в тексте

3. Эмбеды
С эмбедами сложнее, но они того стоят и мне очень жаль, что сейчас мы используем их крайне мало. Используется блок T123, с настройками: выравнивание по центру, ширина блоков = 7, отступ слева = 2 колонки. В поле блока вставляется код, который копируется из любой соцсети. Например, из твиттера и это будет выглядеть так:
Перед тем как начать публиковать текст - есть специальная задачка от Германа. Расставьте по тексту донатные блоки! Один блок лучше всего поставить в середину текста (большой), а другой в конце! Но еще это сильно зависит от размера текста, поэтому действуй по ситуации!
Финальные действия, которые нужно сделать, чтобы опубликовать текст на этой странице:
  1. Проверить, что все красиво и ровно
  2. В шапке зайти в настройки и настроить заголовок, подзаголовок и название ссылки.
  3. В конце материала обновить горизонтальный перечень предыдущих материалов. Туда вмещаются 6 материалов, можно ставить последние или любые другие.
  4. Перейти во вкладку «Бейджик» и подгрузить обложку материала.
  5. Перейти во вкладку «Соцсети» и загрузить обложку для предпросмотра в соцсетях. Тильда хоть и говорит, что изображение автоматически подтягивается из бейджика, часто это не работает, поэтому обязательно вручную нужно добавить изображение для соцсетей
  6. Перейти во вкладку «Дополнительно» и отключить эффект появления блоков при скролле. Это вроде и прикольно, но на самом деле мешает читать. И вообще раздражает.
  7. В конце обязательно нажми «сохранить изменения».
Теперь можно нажимать опубликовать, а значит и ссылка будет готова! По этой ссылке автор_ка или редактор_ка сможет проверить текст, чтобы вся ответственность была не только на тебе.

Вот данные для просмотра этой страницы:

логин: XY5OGBvjGIZe
пароль: 8pIlJkEitlTX
Не забывай, что текст должен быть опубликован еще и на главной! Для этого во вкладке страниц найди страницу "журнал DOXA", где есть значок домика и перейди на нее. Там ты увидишь основной слайдер и перечень материалов. При наведении на каждый из этих разделов появляется кнопка «Контент». Нажми на нее, докрути список до материала, который ты только что залил_а и поставь на нем галочку, а затем нажми на оранжевую кнопку вверху — «Сохранить и закрыть». Это нужно сделать и для главного слайдера, и для раздела с карточками материалов. Нажми опубликовать! Готово, твой материал есть на главной, и он готов для публикации через бот!
Лайфхаки и допматериалы
Самый простой способ заливать текст в уже готовый шаблон на тильде: в перечне материалов найти похожий материал. Сделать его копию и превратить в новый.

  1. Как сделать копию? Нажми "настройки", перейди во вкладки действия и нажми "дублировать страницу". Там сразу можно будет перейти на новую страницу и начинать заливать новый текст.
  2. Как снять страницу с публикации, если вы опубликовали ее раньше времени или чтобы показать кому-то предпросмотр: Настройки —> Дополнительно —> Снять
  3. Перечень материалов:
Выведение изменений на doxajournal.ru

Сейчас все изменения видны лишь на техническом домене: sepftsvonxwo.tilda.ws/some-text-URL

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

Порядок действий от и до таков:

  1. Заходите в «Актуальная версия сайта DOXA»
  2. Переходите в «Настройки сайта»
  3. В панели слева выбираете «Экспорт»
  4. Нажимаете «Скачать .zip архив»
  5. Прокручиваете страницу вниз и нажимаете «Начать экспорт»
  6. Ждете примерно 5–10 минут, после чего экспорт завершается успешно, и появляется ссылка на скачивание. По ней не нужно кликать — просто скопируйте ее и смотрите пункт 7
  7. В редакционном слаке заходите в канал #техотдел (если у вас его нет, нужно попросить грибника, данечку или ричарда добавить вас туда)
  8. В канал пишете «/export». После того, как напишете «/», появится небольшое окошко, где будут всякие шорткаты от слака. Не пугайтесь — просто допишите в этом окне «export» и отправьте это сообщение
  9. Вместо того, чтобы отправиться, появится окно, куда нужно будет вставить скопированную на 6-м шаге ссылку и описание того, что вы добавили/изменили. К примеру, если это новый материал, ссылка у которого — sepftsvonxwo.tilda.ws/goroda-pobratimy, напишите в описании что-то вроде «added goroda-pobratimy». А если вы что-то меняете в уже существующем материале, напишите что-нибудь вроде «changed something in goroda-pobratimy». Затем нажимайте ОК
  10. Все, остается только подождать 5–10 минут, после чего бот в канале техотдела отчитается, что экспорт завершен успешно. Спустя 2–3 минуты после сообщения от бота все изменения появятся на doxajournal.ru, вы прекрасны!
Ниже — галерея скриншотов, чтобы было максимально наглядно и понятно: