Разбираемся с назначением основных типов блоков и учимся применять их на практике. Начнем с обложки будущего сайта.
Итак, приступим к созданию красивой обложки для нашего сайта. Для этого нажмем на кнопку «Все блоки». Слева появится панель с библиотекой блоков. Заходим в категорию «Обложка» и видим множество вариантов дизайна данного блока (см. рисунок 1). Чтобы выбрать нужный, достаточно просто кликнуть по нему левой кнопкой мыши. Выберем, к примеру, блок CR04.
Добавим название сайта и краткое описание. В качестве описания можно указать Ваше уникальное торговое предложение, слоган компании, пару слов о чем ресурс. Все зависит от тематики сайта.
Наполнять этот блок контентом можно непосредственно в его визуальной (как в обычном текстовом редакторе) части, или в специального меню. Дважды кликнув левой кнопкой мыши на шаблонную надпись вы сможете ее редактировать (см. рис. 2).
В верхней части интерфейса появится панель с опциями форматирования (наподобие Word). Здесь можно изменить семейство шрифта, его размер, насыщенность, цвет и т. п. Введите необходимую информацию и оформите контент так, как посчитаете нужным, ведь это Ваш сайт).
Теперь давайте разберемся с расширенными возможностями блока. Для этого нажмем на кнопку "Контент" (см. рис. 3а) в его левом верхнем углу. Это можно сказать "мини-админка", которая есть практически у каждого блока Tilda.
Примечание: Кнопка «Настройки» нам пока не нужна. Нажав на нее мы попадем в настройки самого блока. О том, что с ними делать мы узнаем в продвинутом курсе.В открывшейся панели вы увидите те же поля, что заполняли в визуальном редакторе. Количество и названия полей, в зависимости от выбранного варианта блока могут отличаться. Однако, их суть примерно одинакова — отразить ключевую информацию о ресурсе: название, слоган, логотип и т. п.
Обратите внимание на нижнюю часть панели (см. рис. 3а). Там есть важная «фишка», которую нельзя применить в визуальном редакторе — вставка фонового изображения.
Нажмите на кнопку «Загрузить файл». Выберите на своем компьютере подходящее фото и перетащите его в открывшееся окно (см. рис. 3в). Также можно выбрать фото, используя стандартный Проводник Windows или указав прямую ссылку на изображение (если оно лежит в облаке или на сервере). Выбрав изображение и внеся необходимые корректировки в поля, не забудьте нажать кнопку «Сохранить и закрыть» (см. рис. 3б).
Еще одно примечание: Разница между кнопками «Сохранить» и «Сохранить и закрыть» состоит в том, что нажав первую, Вы сохраните сделанные изменения и сможете продолжить в панели дальше, а нажав вторую — сохраните изменения и закроете панель «Контент».
Готово! Блок обложка создан! Для того, чтобы он стал виден в интернете, жмем кнопку «Опубликовать» (см. рис 4а). Кстати, эту кнопку рекомендуется нажимать после любого значимого изменения на сайте.
После нажатия, появится окошко с уведомлением, что публикация прошла успешно и Ваш сайт доступен в интернете по указанной ссылке (см. рис. 4б). Вы можете открыть страницу, нажав соответствующую кнопку, и посмотреть сделанные изменения. Сайт откроется в новом окне. Пока он состоит только из обложки, но по ходу курса будет увеличиваться в размерах:)
Итак, обложка у нас есть. В следующем занятии мы научимся создавать меню. Добавим соответствующие блоки и настроим навигацию по странице.