УРОК #5
Разработка страницы — ч.2 (визуальная часть)
В данном видео мы показали, как подбирать дизайн для вашей странички методом проб и ошибок. Тестируйте, изучайте и выбирайте то оформление, которое вам понравится. Почувствуйте себя дизайнером!

Размер изображения
Чтобы ваше изображение отображалось нормально в вашем блоке, нужно задать ему высоту, которой он соответсвует в действительности. Для этого вы можете кликнуть на ваше изображение на компьютере правой кнопкой мыши > «Свойства» и задать высоту в пикселях в Тильде.

Иногда у блока есть настройка блока ширины в колонках, обязательно обращайте на это внимание и также редактируйте, чтобы ваше изображение отображалось верно!


Работа с текстом
Если вам нужно выделить одно слово в тексте жирным, курсивом, добавить ссылку, увеличить кегль или сделать список — вы можете это сделать в разделе «Контент» или при двойном нажатии на текстовый блок.

У вас откроется дополнительная панель инструментов, где вы можете отредактировать каждое слово.
Пункты меню
Обращайте внимание, что если ваше меню «закреплено» в верхней части экрана, то оно будет иметь активный статус, когда находится на выбранном блоке пункта меню. Например, у вас есть блок «О нас», и когда пользователь находится на этом блоке, данный пункт меню называется «активный».

Лучше всего пункты меню делать в той же очереди, что и блоки вашей страницы, так как блок будет активным, пока не опустится до следующего активного блока.
Как сделать красивое меню для мобильной версии
Настройки для мобильной версии
Мобильную версию вашего сайта Tilda создает автоматически!
Но вы можете внести некоторые правки:

  • Настройте стандартный «бургер» для мобильной версии (кнопка с тремя горизонтальными полосами):
Настройки > Основные настройки > Показывать «бургер» в мобильной версии
Или сделайте дополнительное меню (как показано в видео)

  • Видимость блока на устройстве
Вы можете убрать отображение какого-то элемента в мобильной версии. Например, у вас есть большая картинка (на которой уже есть текст, например, инструкция) и она будет очень плохо выглядеть на телефоне. Вы можете отключить ее на устройствах с маленьким экраном:
Настройки > Диапазон видимости на устройствах (перемещайте ползунок)

  • Верное отображение изображений (обрезание в нужной части):
Настройки > Позиционирование фонового изображения (выбирайте, какая часть будет отображаться в первую очередь в зависимости от ширины экрана)
Вариант без дизайна: http://brainchallenge.tilda.ws/main
Вариант с дизайном: http://project1494728.tilda.ws/

Полезная статья об основных ошибках дизайна: http://tilda.education/design-mistakes
Домашнее задание
Полностью оформите вашу страницу сайта:
  • цвета и оформления каждого блока;
  • шрифты;
  • цвета и ховеры меню;
  • кнопки.

Пришлите ссылку на ваш готовый сайт преподавателю.

Сроки: 19 ноября
По любым вопросам можете писать нам на почту: info@formula-project.ru
Made on
Tilda