Пошаговая инструкция создания сайта
В этой статье рассмотрим, как создать секцию «О нашей компании» с заголовком, текстом и картинкой.
Подробные пошаговые видеоинструкции, как создать сайт с нуля, можно найти по ссылке.
Перейдите в редактор дизайна, чтобы начать создавать сайт.
![Document image Document image](https://downloads.intercomcdn.com/i/o/716205125/7f7ca1b425da39c3dc2211e3/Screenshot+2023-04-19+at+11.23.55.png)
Для начала на холст добавьте секцию, далее в секцию — контейнер, а в него два div-блока. В первый div-блок добавьте два текстовых элемента, во второй — картинку.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/d1k9b1v8s52zLVUJW0TqK_izobrazhenie.png?format=webp)
Иерархическую структуру элементов, добавленных на страницу, можно увидеть на вкладке Слои (Layers) левой панели.
Также структура отображается внизу страницы в “хлебных крошках”.
Далее добавьте контент в текстовые элементы.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/-Zf2Pze_0_yGG3W-85UAK_izobrazhenie.png?format=webp)
Для того, чтобы отобразить границы элементов, включите их направляющие Shift+O
Установите элементам стили. Для этого выберите элемент (на холсте или на вкладке Слои левой панели).
Установите для него стили на вкладке Стили (Styles) правой панели
![Для Контейнера установлен Display: flex, поэтому два Div-блока внутри него выстроились в ряд Для Контейнера установлен Display: flex, поэтому два Div-блока внутри него выстроились в ряд](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/ng3fAuFEm6vLNQcszUslH_izobrazhenie.png?format=webp)
![Для Картинки установлены размеры: ширина (W) - 100%, высота (H) - 250px, закругление углов - 20px Для Картинки установлены размеры: ширина (W) - 100%, высота (H) - 250px, закругление углов - 20px](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/u0YRAF_J2sPNcE6j0pbrY_izobrazhenie.png?format=webp)
![У Секции установлен цвет фона #F4F4F4 У Секции установлен цвет фона #F4F4F4](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/Imz0Lzms3KOJIpE_9_xST_izobrazhenie.png?format=webp)
![У текста заголовка установлен размер шрифта - 40px, жирность - Bold У текста заголовка установлен размер шрифта - 40px, жирность - Bold](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/a6mVSAeX0eM9lu46rOAr0_izobrazhenie.png?format=webp)
![Добавлен эффект Тень (Drop Shadow) Добавлен эффект Тень (Drop Shadow)](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/poEAYEAMLmt1LKMl9uhmd_izobrazhenie.png?format=webp)
Перетаскивайте элементы на Холст из панели Элементов (Elements) и устанавливайте для них стили на вкладке Стили правой панели. Каждый раздел страницы размещайте в отдельной Секции.
Рекомендуем установить интерактивным элементам, например, кнопкам или пунктам меню стили для разных состояний. Например, изменить стили при наведении на элемент (Hover).
- Выберите элемент;
- Установите нужные стили для этого состояния в соответствующих разделах вкладки Стилей (например, добавьте эффект тени Картинке).
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/K1oUYSaSzYhDstDCyPB4d_izobrazhenie.png?format=webp)
![У Картинки добавлен эффект тени для состояния при наведении (Hover) У Картинки добавлен эффект тени для состояния при наведении (Hover)](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/0CKDeStVp-5cyR6_vvN4l_izobrazhenie.png?format=webp)
Установите настройки для элементов, которым необходимы дополнительные опции
- Выберите элемент;
Например, вы можете изменить структуру Меню или управлять отображением элементов Блоклиста.
![Document image Document image](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/tB70VXs6WnC1HWcTxkCax_izobrazhenie.png?format=webp)
Сделайте адаптацию сайта под разные устройства, чтобы сайт был удобным для пользователя при просмотре на экране любого размера. Для этого нужно установить разные стили элементам для каждого режима отображения (Breakpoint).
- Переключитесь на нужный режим отображения на верхней части Холста (Tablet, Mobile Landscape, Mobile Portrait);
- Установите элементам стили для выбранного режима отображения в соответствующих разделах вкладки Стилей (например, размер, расположение, отступы, количество элементов в Списке и другие);
- При необходимости повторите действия для разных режимов отображения.
![Режим отображения Desktop Режим отображения Desktop](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/jTPHCPqsg48FYU9faRi51_izobrazhenie.png?format=webp)
![Режим отображения Tablet Режим отображения Tablet](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/ZIuT8qhpkivoFGaWqrK2a_izobrazhenie.png?format=webp)
![Режим отображения Mobile Landscape Режим отображения Mobile Landscape](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/QyvDB6Hf7PZT_kD56HYXB_izobrazhenie.png?format=webp)
![Режим отображения Mobile Portrait Режим отображения Mobile Portrait](https://images.archbee.com/aRtDa67qY7h5V_hQeJwhz/VGW2pTob3JZU1gZbqizIn_izobrazhenie.png?format=webp)