[Урок 20] Первый сайт на Zero Block (2 часть - начинаем вёрстку сайта)

Всем привет! Продолжаем изучение Zero Block'a. Пора сделать самый главный шаг - начать. Загружаем макет (материал 2 в меню) и приступаем к изучению урока!

Сегодня мы установим меню и фон для главного блока. Урок небольшой, простой, как раз для старта. Поехали!

Переходим в Zero Block

Буквально вчера мы уже создали наш первый блок и очистили его рабочую область. Параллельно открываем макет и приступаем.

Начинаем с фона сайта

Вот так выглядит наш макет и нам понадобится тот жёлтый цвет, который находится на фоне. Это цвет: fcb224

Переходим к настройкам фона в тильде (нажимаем на Settings в нижнем правом углу) и ищем BG Color. Вставляем туда нужный цвет.

Готово. Фон залился. Но у нас есть ещё один нужный элемент, это текст на блоке.

Идём к папке нашего макета и ищем файл "backimage.png". Устаналвиваем его поверх основного фона. Для этого возвращаемся к настройкам блока и заливаем этот файл как background image.

Далее смотрим высоту контейнера рабочей области. В макете это 650 пикселей. Устанавливаем значение в поле Grid container height (650).

И чтобы сделать данный блок на всю высоту ЛЮБОГО монитора указываем значение 100 в поле WINDOW CONTAINER HEIGHT.

Закрываем настройки, не забываем сохранять.

Вот что у нас получилось. Отлично. Теперь займёмся меню.

Делаем крутое меню

Закрываем редактор этого блока и во всех блоках выбираем менюху.

Мы установим сразу ДВА блока меню. Это блок МЕ101 и блок МЕ403.

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

Меняем логотип в блоке МЕ101

В материалах я залил логотип с названием "logo.png".

Настраиваем пункты в блоке МЕ403. О том как это сделать можно прочитать в уроке, где мы настраивали меню: https://teletype.in/@sitodeal/HbTTr4K7d

Перемещаем оба блока меню на самый верх, нажатием на эту стрелочку.

Сохраняем и смотрим! Вот что у нас получилось:

Готово! Первые шаги сделаны. Продолжайте заниматься и всё получится) Всем успехов!)