Урок 3 из 8 · 20 мин · обновлено

Первая страница: блоки из библиотеки, тексты и фото

Как собрать страницу в Тильде из готовых блоков: добавить блок из библиотеки, отредактировать текст и картинки, настроить блок в разделе «Настройки», переставить, скопировать и скрыть блоки, посмотреть страницу в предпросмотре.

Добавляем блоки

Откройте страницу «Торты на заказ» в редакторе. На пустой странице есть кнопка «Все блоки»: откроется библиотека, разбитая по категориям — обложка, о проекте, заголовок, текстовый блок, изображение, галерея, преимущества, этапы, тарифы, отзывы, вопросы и ответы, форма, контакты и другие.

Соберём страницу по структуре из прошлого урока:

  1. Обложка — блок с фоновым фото, заголовком, подзаголовком и кнопкой.
  2. Галерея — примеры тортов.
  3. Этапы — «Как заказать» в 4 шага.
  4. Тарифы или текстовый блок — начинки и цены.
  5. Отзывы.
  6. Вопросы и ответы — раскрывающийся список.
  7. Форма — заявка.
  8. Контакты.

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

Тексты и картинки

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

Картинку меняют кликом по ней: загрузите своё фото. Советы:

  • настоящие фото продукта вызывают больше доверия, чем стоковые;
  • горизонтальные фото для обложки, не меньше 1600 пикселей по ширине;
  • сжимайте большие фото перед загрузкой: тяжёлые картинки замедляют сайт, особенно на телефоне;
  • заполняйте описание изображения (alt) — его читают поисковики и экранные дикторы для незрячих людей.

Контент и настройки

У каждого блока при наведении появляются кнопки:

  • «Контент» — что в блоке: тексты, картинки, ссылки, количество карточек. Например, в галерее — какие фото и подписи;
  • «Настройки» — как блок выглядит: отступы сверху и снизу, цвет фона, ширина, выравнивание, количество колонок, размеры шрифтов.

Например, чтобы кнопка обложки вела к форме, в «Контенте» обложки укажите ссылку на якорь формы, например #order. Якорь — имя блока, по которому на него можно сослаться. Его задают в «Настройках» блока формы.

Порядок, копии и предпросмотр

Слева от блока — кнопки, чтобы:

  • переместить блок выше или ниже;
  • скопировать — например, второй раз вставить кнопку «Заказать торт»;
  • скрыть — блок останется в редакторе, но посетители его не увидят. Удобно для черновиков;
  • удалить.

Кнопка «Предпросмотр» вверху показывает страницу так, как её увидит посетитель. Смотрите в предпросмотре после каждого крупного изменения: в редакторе всё выглядит немного иначе.

Попробуйте сами. Соберите в Тильде первые три блока лендинга «Торты на заказ»: обложку с оффером и кнопкой, галерею из 4–6 фото и этапы заказа. Сделайте так, чтобы кнопка на обложке вела к форме внизу страницы.

Подсказки
  • Обложка: заголовок «Торты на заказ к празднику», подзаголовок «Испечём и привезём к нужному часу. Заказ за 3 дня», кнопка «Заказать торт». Затемните фото в настройках, если текст плохо читается.
  • Галерея: 4–6 фото тортов, у каждого подпись — название и вес, например «Медовик, 2 кг».
  • Этапы: 1) оставьте заявку; 2) обсудим начинку и оформление; 3) внесите предоплату; 4) заберите или получите доставку.
  • Кнопка: добавьте блок формы, в его настройках задайте якорь order, а в ссылке кнопки обложки укажите #order. В предпросмотре нажмите кнопку — страница должна плавно прокрутиться к форме.

Мини-тест: проверьте себя

Закрепите урок: несколько вопросов, разбор ответов — в конце.

  1. Где в Тильде меняют отступы, фон и ширину блока?

  2. Блок ещё не готов, но удалять его не хочется. Что сделать?

  3. Почему для обложки лучше своё фото торта, а не стоковое?