Пошаговая инструкция создания сайта

14min
В этой статье рассмотрим, как создать  секцию «О нашей компании» с заголовком, текстом и картинкой.
Подробные пошаговые видеоинструкции, как создать сайт с нуля, можно найти по ссылке. 
Перейдите в редактор дизайна, чтобы начать создавать сайт.
﻿
Создание структуры
Для начала на холст добавьте секцию, далее в секцию — контейнер, а в него два div-блока. В первый div-блок добавьте два текстовых элемента, во второй — картинку.
﻿
Иерархическую структуру элементов, добавленных на страницу, можно увидеть на вкладке Слои (Layers) левой панели.
Также структура отображается внизу страницы в “хлебных крошках”.
﻿
Наполнение блока контентом
Далее добавьте контент в текстовые элементы.
﻿
Для того, чтобы отобразить границы элементов, включите их направляющие Shift+O
Стилизация блока
 Установите элементам стили. Для этого выберите элемент (на холсте или на вкладке Слои левой панели).
По клику на Div-блок он отмечается синей обводкой и меткой
﻿
Установите для него стили на вкладке Стили (Styles) правой панели
﻿
﻿
Настройте видимость и расположение элементов в разделе Настройки отображения (Display)﻿
Для Контейнера установлен Display: flex, поэтому два Div-блока внутри него выстроились в ряд
﻿
Настройте размеры и отступы между элементами в разделе Размер (Size)﻿
Для Картинки установлены размеры: ширина (W) - 100%, высота (H) - 250px, закругление углов - 20px
﻿
Используйте разделы Фон (Background) и Границы (Border) для визуальной стилизации элементов
У Секции установлен цвет фона #F4F4F4
﻿
Используйте раздел Текст (Text) для стилизации текста
У текста заголовка установлен размер шрифта - 40px, жирность - Bold
﻿
Используйте раздел Эффекты (Effects) для добавления визуальных эффектов
Добавлен эффект Тень (Drop Shadow)
﻿
﻿
Пошаговое создание сайта
Перетаскивайте элементы на Холст из панели Элементов (Elements) и устанавливайте для них стили на вкладке Стили правой панели. Каждый раздел страницы размещайте в отдельной Секции.
Стили для разных состояний
Рекомендуем установить интерактивным элементам, например, кнопкам или пунктам меню стили для разных состояний.  Например, изменить стили при наведении на элемент (Hover).
﻿
Выберите элемент;
В разделе Классы и Селекторы добавьте селектор для нужного состояния; 
Установите нужные стили для этого состояния в соответствующих разделах вкладки Стилей (например, добавьте эффект тени Картинке). 
﻿
У Картинки добавлен эффект тени для состояния при наведении (Hover)
﻿
Настройки элементов
Установите настройки для элементов, которым необходимы дополнительные опции
Выберите элемент;   
Установите для него настройки на вкладке Настройки (Settings) на правой панели. 
Например, вы можете изменить структуру Меню или управлять отображением элементов Блоклиста.
﻿
﻿
Адаптация сайта для разных устройств
Сделайте адаптацию сайта под разные устройства, чтобы сайт был удобным для пользователя при просмотре на экране любого размера. Для этого нужно установить разные стили элементам для каждого режима отображения (Breakpoint).
Переключитесь на нужный режим отображения на верхней части Холста (Tablet, Mobile Landscape, Mobile Portrait);
Установите элементам стили для выбранного режима отображения в соответствующих разделах вкладки Стилей (например, размер, расположение, отступы, количество элементов в Списке и другие);
При необходимости повторите действия для разных режимов отображения. 
Режим отображения Desktop
﻿
Режим отображения Tablet
﻿
Режим отображения Mobile Landscape
﻿
Режим отображения Mobile Portrait
﻿
﻿