[Урок 6] Создаём сайт на стандартных блоках (часть 2)

Всем привет! В данном уроке мы продолжим создавать сайт ресторана на стандартных блоках сервиса tilda.

Вот такой макет у нас получился ещё в первой части. Все проверили - всё ли на местах? Если нет, то советую ещё раз изучить ПЕРВУЮ ЧАСТЬ УРОКА - https://teletype.in/@sitodeal/gHAVjOEfT

Если всё на своих местах - продолжаем работу над макетом.

Переходим к настройкам блока обложки

Открываем настройки и видим большой список функций, которые мы сможем настроить в данном блоке.

Эффект при скролле

Три варианта выбора : без эффекта, с фиксацией, параллакс.

Без эффекта - объяснять как это работает думаю не нужно)

С фиксацией - фоновое изображение стоит на месте, контент передвигается при скролле

Параллакс - эффект параллакса применяется ко всем объектам блока

Все эффекты вы можете посмотреть сами путём "тыка". Выбираете эффект, нажимаете "Сохранить и закрыть" и нажимаем на кнопку "Предпросмотр" в верхнем правом углу страницы.

Давайте оставим режим параллакса, считаю, что тут он будет уместен. Идём далее.

Высота блока

Здесь мы можем выставить высоту блока обложки. Данный параметр задаётся в самом макете сайта.

Если в данном поле мы укажем размер "100, то блок будет растягиваться на 100% высоты браузера и центровать остальной контент внутри себя. Давайте сделаем 100% высоты на этот блок.

Цвет фильтра в начале и в конце

Данный параметр позволяет наложить любой цвет на фоновое изображение в начале или в конце блока соответственно.

Например : ставим чёрный цвет и непрозрачность 50%

Итог : наше изображение затемнилось в результате наложения на него ЧЁРНОГО блока с прозрачностью в 50%

Давайте оставим блок чёрным, но непрозрачность выставим на 40%

Стрелка

Автоматически добавляет стрелку для прокрутки страницы на блок ниже. Можно её включать, а можно и нет - по желанию. Плюс можно поставить галочку для её анимации.

Я не очень люблю стрелки и мало верю в их помощь, поэтому не буду делать её на нашем сайте.

Кнопки

В данном разделе мы можем редактировать кнопки, расположенные в блоке.

Здесь всё интуитивно понятно. В нашем случае давайте поменяем цвет первой кнопки на белый (#ffffff)

Типографика

Раздел, позволяющий вносить правки в то, что связанно с текстом на странице. Здесь так же всё должно быть понятно, сложных настроек просто нет. Каждый пункт подписан.

Изменим размер заголовка (текст: Уютный семейный ресторан...).

В поле "Заголовок : размер шрифта" установим значение 45.

Шрифт поставим Georgia, а в разделе ЗАГОЛОВОК: МЕЖСТРОЧНОЕ РАССТОЯНИЕ

установим значение 1.7

Сохраняем и видим результат:

Фоновое видео

Раздел редактирующий параметры фонового видео. Его мы пропустим. На эту тему сделаю отдельный подробный урок.

Анимация

Раздел задающий анимацию всем объектам, расположенным в данном блоке.

Сайт у нас серьёзный, выставим настройки анимации указанные на скриншоте ниже :

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

SEO тэг для заголовка

Устанавливаем H1 и забываем про него)

С параметрами блока разобрались, нажимаем кнопку "Сохранить и закрыть" и смотрим результат.

В следующем уроке мы доделаем меню сайта и опубликуем результат на тестовом домене тильды!) Всем успехов!