Оригинал материала
гайд по заливке
Это твой гайд по заливке материалов на тильду
И это проще чем кажется. Скучно, но зато можно верстать так, как хочется само_й!Сделан с любовью: от данечки и грибника!
Сделан для: лучших редакторо_к и авторо_к
Что нужно знать перед заливкой? Быть внимательн_ой!
Тильда это инструмент, который предоставляет набор базовых блоков с которыми удобно работать. Но у нее есть и определенный набор минусов: ограниченный перечень блоков, которые можно использовать; негибкие блоки и периодические баги.
К счастью, эти проблемы не повлияют на твою заливку, поэтому это всего лишь общее знание, которая готовит тебя к худшему, но на самом деле все гораздо приятнее!
Место работы в тильде (как правило с текстом выделено серым, это активный блок, в котором работаешь ты. Белое поле вокруг блока - переключение на базовое меню и отмена работы с текущим блоком.)
Да, это картинка, но о них позже!
- Тильда офигенно умеет копировать блоки.
Второй символ - удалять блок.
Третий символ отключить блок (сделать его невидимым, я честно говоря не пользовался этим ни разу)
Четвертый символ - перейти к возможным действиям: копировать, вырезать, вставить
Пятый и шестой символ - перенести блок на один вверх или на один блок вниз.
Очень рекомендую поиграть с этим или любым другим блоком и попробовать его поперемещать. А еще можно перемещать блоки между страницами. Если ты скопируешь блок из соседней вкладки из любого другого материала - он отлично вставится сюда. Поэтому уже залитые материалы можно использовать как шаблоны для заливки будущих.
Вот ты накопировал_а кучу блоков и наиграл_ась с ними. Что делать дальше? Как снова навести порядок в тильде? Базово хочется нажать ctrl/cmd+z, но, к сожалению, тильда не так умна как хотелось бы.
2. Как отменить предыдущие действия?
Нажми на белое пространство вокруг этого блока и ты увидишь кнопку "отменить". Она работает как cntrl/cmd+z, но одним нажатием отменяется только последнее действие. С редактурой текстов я не рекомендую пользоваться ей, но для того, чтобы отменить действия с блоками - работает отлично!
Еще тильда все сохраняет автоматически, что позволяет не думать о сохранении впринципе!
Именно так выглядит окно тильды, когда ты не работаешь с текстовым блоком
Теперь у тебя есть основная информация, которая нужна для того, чтобы представить как работает тильда. Давай разберемся с типами блоков, которые мы используем для заливки материалов.
3.Типы блоков
- Самый первый блок, который есть на этой странице -TL01. Попробуй найти его и понять как он работает. Это блок заголовка и подзаголовка. Заголовок выделяется жирным, а подзаголовок не выделяется. Ни в заголовке, ни в подзаголовке не должно быть точек (они выглядят скучно и некрасиво)
- Второй тип блоков, который есть на этой странице - TX01. Это самый простой текстовый блок в тильде, внутри которого можно играться с выделениями и шрифтами (можно делать подзаги внутри текста другим размером шрифта и выделять их жирным/курсивом/подчеркиваниями). Тут также работают комбинации ctrl/cmd+b/i/u.
- Для текстов еще обязательно используется блок TX02.
- Внутри блока мы используем не дефолтный черный цвет, а почти черный. Его код — #212427. Чтобы поменять цвет для всего блока, нужно зайти в настройки этого блока → типографика — текст: цвет
- Указывайте этот текст везде (в заголовках, ключах, простых текстовых блоков), но не указывайте его в лиде — лид и так немного серый!
Это блок для лида (вводного текста). Он отличается шрифтом, размером и цветом. Круче всего работает, когда в нем 1-2 абзаца. Размещается чаще всего под иллюстрациями в начале текста.
4. Подзаголовки внутри текстовых блоков выглядят скучнее, чем отдельный блок с подзагом. По нескольким причинам: интервалы, единый стандарт шрифт+размер. Поэтому для подзаголовков мы используем блок TL02.
Стандартный размер текста: 32px, выделение: жирнымХотел написать, что эти 4 текстовых блока - все что нужно для заливки самого простого текста. В целом это так и есть, но есть три дополнительных типа блоков, которые часто очень важны и материалы без них выглядят как колонка в газете без форматирования.
5. Блок с подписями авторо_к! Он тоже есть в начале, где я подписался как человек сделавший вот этот гайд. Это блок CL01, в котором указываются: автор_ка, редактор_ка, иллюстратор_ка (слева). И дата публикации (справа)!
На всех людей делавших тексты можно делать гиперссылки, но это все уже должно быть готовым в гугл-доке!
6. Блок с цитатами. За время моих заливок я пробовал от самого дефолтного варианта, который предлагает тильда до разных форматов. Идеальным мне кажется использование блока IP101, с шириной блока в 8 колонок и отступом слева в 2 колонки. С размерами можно экспериментировать, но я скорее за 20px, чтобы текст не сильно выбивался и отличался от подзагов. Выделение жирным.
7. Поп-апы! Когда меня бросили в море тильды и попросили взять на себя заливку - я испугался что это за дрянь! Оказалось, что эти штуки - крутой инструмент! Тут все работает не только через текстовый блок, но и через !эмодзи! Обычно мы используем белый квадратик ◻️ - наведись на него (если смотришь в предпросмотре) и ты узнаешь как он работает! Блок, который находится ниже - невидим для читатель_ницы сайта и видим только заливщи_це/технар_ке. Она будет видеть только то, что написано не жирным после "Текст:". Это блок T198. Он не обязан стоять под блоком, в котором находится эмодзи. Этот блок можно смело поместить в конец текста, чтобы не отвлекал во время заливки
- Тебе нужно вставить белый квадратик или любое другое эмодзи в место, где нужен поп-ап.
- Выделить эмодзи и нажать на скрепку в верхней панели (да, на эмодзи нужно прикрепить гиперссылку в формате: #1). решетка позволяет работать как гиперссылка, число или цифра - порядковый номер поп-апа
- для каждого поп-апа используется один блок (T198).
После того как все текстовые блоки готовы: нужно докрутить оформление текста и то как он выглядит. Есть три пункта оформления:
Гиперссылки. По умолчанию все гиперссылки открываются в той же вкладке, что и текст. И это плохо, потому что сильно снижает процент дочитываемости — люди уходят по гиперссылке, потом идут куда-то еще оттуда, потом еще куда-то, и вот изначальный материал уже затерялся. Чтобы такого не происходило, необходимо на каждой гиперссылке выбрать галочку «Открыть ссылку в новой вкладке». Кликни на текст гиперссылки, не выделяя его, нажми «Редактировать» и появится окошко, где нужно указать ссылкам их поведение. После чекбокса не забывай нажать «Применить», иначе изменения не сохранятся!
Очень-очень важно!
Теперь по поводу стилизации гиперссылок: по умолчанию, при копировании из гугл доков гиперссылки проставляются уродски. Для того, чтобы во всех ссылках дефолтный стиль был заменен на нужный нам, надо добавить в любое место страницы (проще всего в самый конец) специальный блок, который называется «T193, модификатор: стиль ссылок»
В настройках этого блока нужно указать: цвет текста: оставить по умолчанию, линия для подчеркивания: #bf0000, толщина линии — 2px.
Часто тильда автоматически подчеркивает ссылку через cntrl/cmd+u. Поэтому у текста ее нужно отжимать, чтобы не было двух подчеркиваний на одной ссылке (это выглядит уродски). Гиперссылка должна выглядеть так
Блок-модификатор для всех гиперссылок на странице
Выше — нужный блок с нужными настройками! Попробуй добавить на страницу его, а затем добавить любую ссылку. Она автоматически станет нужного нам стиля)
Важное! Чуть выше было рассказано про то, как работать с попапами в виде белого эмодзи квадратика. Но когда на странице присутствует модификатор, делающий все гиперссылки одинаковыми, он и квадратики подчеркивает (а мы такое не хотим!). Чтобы этого избежать, нежелательно подчеркнутую гиперссылку нужно выделить, нажать на кнопку «Ссылка» слева наверху и в цвете линии указать белый (#ffffff). Тогда цвет подчеркивания просто будет сливаться с фоном, а на квадратике будет оставаться попап, но как бы не будет подчеркивания! ◻️
Второй пункт оформления: Энтеры! В зависимости от того какие интервалы стоят в исходном гугл-доке бывает, что нужно отслеживать как копируются интервалы в док. Здесь нужно просто внимание и любовь к текстам, которые выходят в доксе (они все прекрасны).
Третий пункт оформления: типограф. Базово все тексты корректируются в гугл-доке, но для перестраховки можно использовать встроенный типограф тильды из верхней панели (значок книжечки). Но важно понимать, что после типографирования текст будет читать невозможно, потому что типографирование выглядит как-то так:
«Это оттипографированный текст, который выглядит достаточно стремно» — сложно представить что это реально. Но зато в предпросмотре все будет выглядеть мега красиво.
Медиафайлы- Картинки;
2. Видео;
Для видео можно использовать блок VD01, в который вставляется гиперссылка ютуба и видео красиво отображается в тексте
3. Эмбеды
С эмбедами сложнее, но они того стоят и мне очень жаль, что сейчас мы используем их крайне мало. Используется блок T123, с настройками: выравнивание по центру, ширина блоков = 7, отступ слева = 2 колонки. В поле блока вставляется код, который копируется из любой соцсети. Например, из твиттера и это будет выглядеть так:
Увидел в ленте речь Путина о том, что в некоторых странах отменили слово "мама" и заменили на "родитель 1" и "родитель 2". Ранее о том же говорила и Матвиенко. Давайте уж я расскажу откуда пошёл этот баян - ведь я и сам житель одной из этих "некоторых стран" - Швеции (тред)...
— Sam Klebanov ???????????????? (@SamKlebanov) November 30, 2019
Перед тем как начать публиковать текст - есть специальная задачка от Германа. Расставьте по тексту донатные блоки! Один блок лучше всего поставить в середину текста (большой), а другой в конце! Но еще это сильно зависит от размера текста, поэтому действуй по ситуации!
Финальные действия, которые нужно сделать, чтобы опубликовать текст на этой странице:
- Проверить, что все красиво и ровно
- В шапке зайти в настройки и настроить заголовок, подзаголовок и название ссылки.
- В конце материала обновить горизонтальный перечень предыдущих материалов. Туда вмещаются 6 материалов, можно ставить последние или любые другие.
- Перейти во вкладку «Бейджик» и подгрузить обложку материала.
- Перейти во вкладку «Соцсети» и загрузить обложку для предпросмотра в соцсетях. Тильда хоть и говорит, что изображение автоматически подтягивается из бейджика, часто это не работает, поэтому обязательно вручную нужно добавить изображение для соцсетей
- Перейти во вкладку «Дополнительно» и отключить эффект появления блоков при скролле. Это вроде и прикольно, но на самом деле мешает читать. И вообще раздражает.
- В конце обязательно нажми «сохранить изменения».
Вот данные для просмотра этой страницы:
логин: XY5OGBvjGIZe
пароль: 8pIlJkEitlTX
Не забывай, что текст должен быть опубликован еще и на главной! Для этого во вкладке страниц найди страницу "журнал DOXA", где есть значок домика и перейди на нее. Там ты увидишь основной слайдер и перечень материалов. При наведении на каждый из этих разделов появляется кнопка «Контент». Нажми на нее, докрути список до материала, который ты только что залил_а и поставь на нем галочку, а затем нажми на оранжевую кнопку вверху — «Сохранить и закрыть». Это нужно сделать и для главного слайдера, и для раздела с карточками материалов. Нажми опубликовать! Готово, твой материал есть на главной, и он готов для публикации через бот!
Лайфхаки и допматериалыСамый простой способ заливать текст в уже готовый шаблон на тильде: в перечне материалов найти похожий материал. Сделать его копию и превратить в новый.
- Как сделать копию? Нажми "настройки", перейди во вкладки действия и нажми "дублировать страницу". Там сразу можно будет перейти на новую страницу и начинать заливать новый текст.
- Как снять страницу с публикации, если вы опубликовали ее раньше времени или чтобы показать кому-то предпросмотр: Настройки —> Дополнительно —> Снять
- Перечень материалов:
- карточки: https://tilda.cc/page/?pageid=27843122;
- гайд: https://tilda.cc/page/?pageid=26676350;
- материал с фотографией облегающей текст: https://tilda.cc/page/?pageid=26622589;
- простой материал (текст + фото на обложке): https://tilda.cc/page/?pageid=27589312;
- материал, в котором много поп-апов: https://tilda.cc/page/?pageid=28048262;
- интервью + карточки:https://tilda.cc/page/?pageid=27557383 ;
- материал с эмбедами: https://tilda.cc/page/?pageid=27212461
Сейчас все изменения видны лишь на техническом домене: sepftsvonxwo.tilda.ws/some-text-URL
Чтобы добавить их на основной сайт, нужно сделать две вещи: экспортировать тильду и отдать ссылку боту в слаке. Все остальное автоматизировано
Порядок действий от и до таков:
- Заходите в «Актуальная версия сайта DOXA»
- Переходите в «Настройки сайта»
- В панели слева выбираете «Экспорт»
- Нажимаете «Скачать .zip архив»
- Прокручиваете страницу вниз и нажимаете «Начать экспорт»
- Ждете примерно 5–10 минут, после чего экспорт завершается успешно, и появляется ссылка на скачивание. По ней не нужно кликать — просто скопируйте ее и смотрите пункт 7
- В редакционном слаке заходите в канал #техотдел (если у вас его нет, нужно попросить грибника, данечку или ричарда добавить вас туда)
- В канал пишете «/export». После того, как напишете «/», появится небольшое окошко, где будут всякие шорткаты от слака. Не пугайтесь — просто допишите в этом окне «export» и отправьте это сообщение
- Вместо того, чтобы отправиться, появится окно, куда нужно будет вставить скопированную на 6-м шаге ссылку и описание того, что вы добавили/изменили. К примеру, если это новый материал, ссылка у которого — sepftsvonxwo.tilda.ws/goroda-pobratimy, напишите в описании что-то вроде «added goroda-pobratimy». А если вы что-то меняете в уже существующем материале, напишите что-нибудь вроде «changed something in goroda-pobratimy». Затем нажимайте ОК
- Все, остается только подождать 5–10 минут, после чего бот в канале техотдела отчитается, что экспорт завершен успешно. Спустя 2–3 минуты после сообщения от бота все изменения появятся на doxajournal.ru, вы прекрасны!
