Пошаговая инструкция создания сайта
В этой статье рассмотрим, как создать секцию «О нашей компании» с заголовком, текстом и картинкой.
Подробные пошаговые видеоинструкции, как создать сайт с нуля, можно найти по ссылке.
Перейдите в редактор дизайна, чтобы начать создавать сайт.
Создание структуры
Для начала на холст добавьте секцию, далее в секцию — контейнер, а в него два div-блока. В первый div-блок добавьте два текстовых элемента, во второй — картинку.
Иерархическую структуру элементов, добавленных на страницу, можно увидеть на вкладке Слои (Layers) левой панели.
Также структура отображается внизу страницы в “хлебных крошках”.
Наполнение блока контентом
Далее добавьте контент в текстовые элементы.
Для того чтобы отобразить границы элементов, включите их направляющие Shift+O
Стилизация блока
Установите элементам стили. Для этого выберите элемент (на холсте или на вкладке Слои левой панели).
По клику на Div-блок он отмечается синей обводкой и меткой
Установите для него стили на вкладке Дизайн (Design) правой панели
Настройте видимость и расположение элементов в опциях Отображение в разделе Авто-лейаут (расположение элементов)
Настройте размеры и отступы между элементами в разделе Размер (Size)
Используйте разделы Фон (Background) и Границы (Border) для визуальной стилизации элементов
Используйте раздел Текст (Text) для стилизации текста
Используйте раздел Эффекты (Effects) для добавления визуальных эффектов
Пошаговое создание сайта
Перетаскивайте элементы на Холст из панели Элементов (Elements) и устанавливайте для них стили на вкладке Дизайн правой панели. Каждый раздел страницы размещайте в отдельной Секции.
Стили для разных состояний
Рекомендуем установить интерактивным элементам, например, кнопкам или пунктам меню стили для разных состояний. Например, изменить стили при наведении на элемент (Hover).
-
Выберите элемент;
-
В разделе Источники стилей добавьте селектор для нужного состояния;
-
Установите нужные стили для этого состояния в соответствующих разделах вкладки Стилей (например, добавьте эффект тени Картинке).
Настройки элементов
Установите настройки для элементов, которым необходимы дополнительные опции
- Выберите элемент;
- Установите для него настройки на вкладке Настройки (Settings) на правой панели.
Например, вы можете изменить структуру Меню или управлять отображением элементов Блоклиста.
Адаптация сайта для разных устройств
Сделайте адаптацию сайта под разные устройства, чтобы сайт был удобным для пользователя при просмотре на экране любого размера. Для этого нужно установить разные стили элементам для каждого режима отображения (Breakpoint).
- Переключитесь на нужный режим отображения на верхней части Холста (Tablet, Mobile Landscape, Mobile Portrait);
- Установите элементам стили для выбранного режима отображения в соответствующих разделах вкладки Стилей (например, размер, расположение, отступы, количество элементов в Списке и другие);
- При необходимости повторите действия для разных режимов отображения.