Пошаговая инструкция создания сайта
В этой статье рассмотрим, как создать секцию «О компании» с заголовком, текстом и картинкой.
Подробные пошаговые видеоинструкции, как создать сайт с нуля, можно найти по ссылке.
Шаг 1. Создайте новый проект
- Откройте Панель управления Taptop — https://dashboard.taptop.pro/.
- Нажмите кнопку Создать сайт в правом верхнем углу.
- Создайте Пустой проект, нажав кнопку Выбрать.
-
Введите название проекта
Готово! Новый проект создан и автоматически будет открыт Редактор дизайна, где вы можете работать над сайтом.
Шаг 2. Создайте структуру элементов
-
Добавьте на холст структурные элементы: секцию, а внутрь нее контейнер — Section → Container. Для этого откройте панель Элементов, нажав на + на левой панели, и выбирайте нужные элементы.
2. В контейнер добавьте картинку (Image) и Div-блок для текстов. Внутрь Div-блока добавьте тестовые элементы (Text). На вкладке Слои проверьте, что у вас получилась нужная структура.
Шаг 3. Задайте расположение элементов
- Для контейнера настройте авто-лейаут, чтобы элементы в нем располагались в ряд.
- Для Div-блока настройте авто-лейаут, чтобы элементы в нем друг под другом.
Подробнее о том, как задать расположение элементов, читайте в статье Расположение элементов.
Шаг 4. Наполните элементы контентом
- Загрузите изображение в Image. Для этого кликните два раза на виджете Image, а затем нажмите кнопку загрузки файла в левой панели.
Далее загрузите нужное изображение с компьютера и кликните по нему в левой панели, чтобы добавить его в Image.
- Добавьте тексты в текстовые элементы.
Шаг 5. Стилизуйте элементы
Для этого выберите элемент на холсте или в слоях и задайте ему стили на вкладке Дизайн на правой панели.
Подробнее о том, как настраивать стили для элементов, читайте в разделе Дизайн и стилизация.
- Настройте отступы для секции: внутренние отступы сверху и снизу 30px.
- Настройте максимальную ширину для контейнера 1600px.
- Настройте размеры для картинки: ширина 700px, высота auto.
- Настройте стили для текстов: задайте шрифт, размер шрифта, межсимвольное расстояние, цвет и др. параметры. Для первого текста также добавьте Границу 1px и Радиус 5px.
Для стилизации элементов с похожим дизайном (например, заголовков, текста, кнопок, карточек) удобно использовать классы. Подробнее читайте в статье: Классы.
Шаг 6. Адаптируйте сайт для разных устройств
Сделайте адаптацию сайта под разные устройства, чтобы сайт хорошо смотрелся на экране любого размера. Для этого нужно установить разные стили элементам для каждого режима отображения (Breakpoint).
Подробнее: Адаптация под разные устройства.
- Переключитесь на нужный режим отображения на верхней части Холста: Компьютер, Планшет, Мобильный телефон в горизонтальном режиме, Мобильный телефон в портретном режиме.
- На вкладке Дизайн задайте элементам стили для выбранного режима отображения — например, размер, расположение, отступы и другие.
- При необходимости повторите действия для разных режимов отображения.
Например, для режима Планшет можно поменять расположение элементов — текстовый блок и картинку разместить друг под другом. Для это нужно изменить настройки авто-лейаута для контейнера: Направление снизу вверх.