Как сделать сайт-одностраничник

Сайты одностраничники отлично подходят, чтобы прорекламировать свой бизнес, красиво показать свои работы в портфолио или прорекламировать мероприятие: курсы, лекцию, вебинар или встречу.

Сделать такой сайт вы можете в конструкторе SitePro на нашем хостинге. В этой инструкции мы покажем, как в нём работать. По шагам создадим демонстрационный сайт для воображаемого бизнеса.

Содержание

1. Начало работы
2. Секция №1. Титульный баннер
3. Секция №2. Иконки
4. Секция №3. Услуги и цены
5. Секция №4. Галерея
6. Секция №5. Отзывы
7. Секция №6. Про нас
8. Секция №7. Контакты
9. Секция №8. Подвал сайта
10. Секция №9. Шапка сайта

Что получится в итоге

Вот одностраничный сайт, который мы будем создавать при помощи этой инструкции. Точнее его титульный баннер. Посмотреть сайт полностью можно по адресу landingpage.hostiq.tk.

Мы выбрали барбершоп в качестве примера, но инструкция подходит также и для других подобных бизнесов. Например, тату-студии, салона маникюра, пирсинга или массажа, студии вокала или курсов по изучению чего угодно.

Одностраничник состоит из стандартных разделов: титульного баннера, цен на услуги, галереи с примерами работ, отзывами и контактами. Вы научитесь создавать эти секции с нуля, а также сможете на их примере создавать свои секции, если понадобится. Например, блок с акциями или ответами на часто задаваемые вопросы.

В будущем, если понадобится расширить сайт, добавить дополнительные страницы, магазин или версию на другом языке, это тоже можно сделать. Больше информации об этом вы найдете в других инструкциях на нашем сайте.

Начало работы

После покупки хостинга на вашу почту придёт письмо с темой «Доступы к вашему конструктору и сайту». В письме будет ссылка на редактор сайта. Добавьте её в закладки браузера, чтобы в будущем можно было быстро попасть в редактор.

1. Выберите шаблон

Первым делом после попадания в редактор вам предложат выбрать шаблон одностраничника. Мы выберем «Пустой шаблон», чтобы показать, как сделать одностраничный сайт с нуля. А вообще, можно выбрать и готовый дизайн, а потом изменить шаблонное содержимое на своё

Создание одностраничных сайтов с нуля — более сложный способ, чем при помощи готовых шаблонов, но так вам будет проще понять принцип построения секций. Вы сможете использовать его, чтобы создавать секции, которых нет в шаблонах.

2. Запомните основные моменты по работе с конструктором

После выбора пустого шаблона откроется редактор сайта. Сверху на панели инструментов будут блоки для создания секций, чуть ниже — рабочее пространство, куда вы будете перетаскивать эти блоки. А в правой части экрана — боковая панель, на которой можно менять параметры блоков.

Чтобы открыть предварительный просмотр и увидеть страницу глазами посетителя, перед тем как публиковать изменения, нажмите кнопку «Просмотр» слева на верхней панели.

Чтобы сохранить изменения, наведите курсор на кнопку «Опубликовать» слева на верхней панели и выберите из выпадающего списка «Сохранить черновик».

Чтобы просмотреть страницу с разных устройств, выберите нужное устройство в строке между верхней панелью конструктора и областью для работы с блоками.

И последнее — не открывайте редактор сайта в нескольких вкладках или на разных устройствах одновременно. Из-за этого могут не сохраниться изменения и нужно будет всё делать заново.

3. Создайте стили для заголовков и обычного текста

В конструторе вы можете либо вручную указывать параметры для каждого блока с текстом на странице, либо применять к тексту заранее созданные стили — свой шрифт, размер текста, толщину букв и другие параметры. Это ощутимо упростит создание одностраничника.

Создать стиль можно в настройках конструктора. Они расположены в правом верхнем углу экрана. Кликните по иконке с изображением шестерёнки и перейдите в подраздел «Стили».

Во всплывающем окне слева будет список всех доступных стилей текста, а справа — настройки выбранного стиля. В настройках будет три вкладки:

• Стандартный — здесь настраивается основная типографика: шрифт, размер, цвет, высота строки, межбуквенное расстояние, выравнивание. В окошке «Просмотр» внизу сразу будет виден результат выбранных параметров.
• Ссылки — здесь настраивается внешний вид ссылок в тексте: цвет по умолчанию и при наведении, подчёркивание, прозрачность. Если на сайте будут ссылки на другие страницы, так вы сможете визуально выделить их в тексте.
• Расширенные функции — здесь настраиваются отступы и размеры текста на разных устройствах: компьютерах, ноутбуках, планшетах, смартфонах. Можно добавить отступ после каждого абзаца или заголовка, а также отрегулировать как стиль масштабируется на маленькие экраны.

Использовать все стили не обязательно. Как правило используют как минимум четыре основных стиля: заголовки H1, H2, H3 и обычный текст. Вот значения для каждого из этих стилей, которые использовали мы. Можете использовать такие же, можете придумать свои.

Normal — обычный текст. Самый маленький шрифт для больших абзацев текста. На демонстрационном сайте используется в разделах «Про нас» и «Контакты».

Heading 1 — заголовок H1. Используется на странице один раз для оформления титульного заголовка (так правильнее делать с точки зрения SEO).

Мы использовали белый цвет, потому что титульный баннер тёмный. Вкладку «Ссылки» мы не трогали. На вкладке «Расширенные» чуть уменьшили значения для планшетов и смартфонов.

Heading 2 — заголовок H2. Отлично подходит для заголовков секций. Тоже нет смысла трогать настройки на вкладке «Ссылки». На вкладке «Расширенные» — такие же параметры как и у заголовков H1.

Heading 3 — заголовок H3. Отлично подходит для подзаголовков. Более мелкий стиль, выделяется на фоне обычного текста, но не перетягивает внимание с заголовков H2.

Когда укажете новые параметры стилей, не забудьте нажать «Применить» в правом нижнем углу всплывающего окна.

Ну что, на этом подготовка к работе закончена. Стили для текста создали, самое время создать одностраничник 🙂

Секция №1 — Титульный баннер

Титульный баннер — первое, что будут видеть люди, когда будуть попадать на сайт. Как правило здесь размещают название и описание сайта. Либо на цветном фоне, либо на фоне изображения. Часто также добавляют логотип и кнопку с призывом к действию (сделать заказ/записаться на приём).

Шаг 1: Создайте макет

Это первое, что нужно сделать при создании любой секции. Перетащите блок «Макет» с верхней панели конструктора в область для работы с содержимым — чуть ниже зоны для шапки сайта (её границы отмечены пунктиром). Место, где приземлится блок, будет выделено синим цветом.

Появится всплывающее окно, где нужно выбрать структуру макета. Выберите структуру из одной колонки.

Сразу после добавления макета добавьте внутренние отступы. Они нужны, чтобы контент не прилипал к границам экрана или границам секции. По сути эти отступы — всё равно, что рамки в книге. Выполняют ту же роль.

Делается это в разделе «Отступы» на боковой панели. Там вам нужно заменить стандартные значения в синих ячейках. Мы использовали такие: 60 пикселей сверху и снизу, 20 пикселей по бокам.

Дальше откройте на боковой панели раздел «Расширенные функции» и заполните два поля. В поле «Название якоря» впишите «home», а в поле «Имя» впишите «Титульный баннер». Как на скриншоте ниже.

Название якоря нужно, если вы хотите, чтобы разделы меню в шапке сайта переносили посетителя страницу сразу к нужной секции.

Имя нужно для порядка. В верхней части боковой панели есть раздел «Структура страницы». Там можно увидеть иерархию всех блоков на странице и быстро перейти сразу к нужному блоку/секции. Пока что тут пусто, но скоро здесь будут десятки строк. Имя секции поможет их различать в этом списке.

Шаг 2: Добавьте изображение

Это первое, что увидит посетитель. Здесь можно поставить реальное фото вашего рабочего места или красивое тематическое фото на тему вашего бизнеса. Возможно, фото вас за работой или результат вашего труда — то, за чем к вам приходят клиенты.

Чтобы загрузить изображение секции, найдите на боковой панели раздел «Макет» и клацните по изображению в опции «Фон».

Появится всплывающее окно. Кликните в нём по опции «Изображение/Видео».

Появится ещё одно всплывающее окно, нажмите в нём кнопку «Добавить», затем выберите изображение у себя на компьютере и нажмите внизу кнопку «Выбрать».

Вас вернёт к первому всплывающему окну. Теперь вы можете изменить параметры только что добавленного изображения:

• Опция «Непрозрачность» — добавить наложение поверх фото (цвет можно выбрать левее). Нужно, чтобы затемнить фото и сделать текст на баннере более читабельным.
• Опция «Положение» — точка фокуса на изображении. Как правило влияет на то, что будет видно на маленьких экранах. Потому что на них изображение обрезается. Переключиться между устройствами можно при помощи полоски между шапкой конкструктора и рабочей областью.
• Опция «Повторять» — настройки повторения изображения. Пункт «Не прокручивать фон» даёт возможность зафиксировать изображение, чтобы при прокрутке следующие секции как бы наезжали на титульный баннер, а сам он оставался на месте.
• Опция «Размер» — несколько вариантов позиционирования изображения. Если оставить галочку в пункте «Автоматически», можно оставить «авто» в соседних полях или указать конкретные значения в пикселях/процентах. Если убрать галочку с пункта «Автоматически», вместо выпадающих списков появится два заготовленных варианта заполнения изображения: по высоте или по ширине контейнера.

На изображении выше в каждой опции указаны стандартные значения. А вот так мы их изменили, чтобы изоражение нормально смотрелось на демонстрационном сайте. Попробуйте разные варианты, чтобы найти параметры, которые подходят в вашем случае.

Ещё один момент — высота изображения. Изначально она не будет фиксированной. Она будет повторять высоту блока «Макет» с учётом его внутренних отступов и количества содержимого.

Чтобы указать фиксированную высоту секции, выберите блок «Макет» и откройте раздел «Размер» на боковой панели. Измените значение «Мин.» в опции «Высота». В нашем случае мы выбрали 650 пикселей. Почти на весь экран.

Шаг 3: Добавьте логотип

Используйте блок «Картинка» на верхней панели конструктора, чтобы загрузить изображение. Если нужно, обработайте изображение в фотошопе, чтобы у него был прозрачный фон и логотип был подходящего по цвета (светлый или тёмный).

После добавления блока «Картинка» появится всплывающее окно с заготовленными стилями для изображений. Выберите первый вариант.

На следущем экране нажмите кнопку «Добавить» и выберите нужный файл на вашем компьютере. После этого нажмите во всплывающем окне кнопку «Выбрать».

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

Шаг 4: Добавьте название сайта

Перетащите блок «Текст» под логотип. Во всплывающем окне выберите любой из стандартных стилей для текста. Какой — неважно, сейчас вы всё равно измените его на один из стилей, которые создавали заранее.

Когда выберите один из стандартных стилей, два раза кликните мышкой по тексту или нажмите на всплывающей панели кнопку «Редактировать текст». Затем замените шаблонный текст на свой и выберите в карусели созданный ранее стиль «Heading 1».

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

Шаг 5: Добавьте кнопку

Перетащите блок «Кнопка» под титульный заголовок. Во всплывающем окне выберите первый из стандартных стилей, которые предлагает конструктор. Будем разбираться, как его изменить.

Обратите внимание, что сверху от кнопки автоматически добавится такой же отступ, как и у заголовка. И — искусственный интеллект! 🙂

Изменить текст на кнопке, её размер и цвет можно в разделе «Button» на боковой панели. Также там можно добавить ссылку, на которую должна вести кнопка.

Используйте для кнопки такой же шрифт, который назначали в глобальных стилях. В нашем случае — обычный Open Sans. На скриншоте ниже вы также можете увидеть значения, которые мы указывали в остальных полях.

Цвет фона кнопки на вкладке «По умолчанию» сделали белым, а цвет текста — чёрным. Так кнопку будет хорошо видно на тёмном фоне. Цвет фона на вкладке «При наведении» сделали оранжевым (такой же как при наведении на ссылки), а цвет текста сделали белым. Код HEX для оражевого указан на скриншоте.

Чтобы изменить размер кнопки, можно использовать раздел «Отступы», а можно раздел «Размер». Для демонстрационного сайты мы просто увеличили вдвое значения в голубых ячейках в разделе «Отступы».

Отступ сверху от кнопки в оранжевой ячейке тоже немного увеличили ради оптической компенсации. На предварительном просмотре казалось, что кнопка находится слишком близко к заголовку.

Секция №2 — Иконки с информацией о бизнесе

Это базовая информация, которую люди могут искать в первую очередь. Поэтому есть смысл разместить её сразу после титульного баннера. Например, если человек уже слышал про ваш бизнес и зашёл на сайт, чтобы связаться или понять, как вас найти.

Шаг 1: Создайте макет

Ещё раз повторим стандартные действия, которые мы делали при создании предыдущей секции. Сначала — перетащим блок «Макет». Будьте аккуратны, чтобы случайно не разместить новую секцию в зоне, где должен быть подвал сайта. Она указана пунктирной линией.

Ориентируйтесь на синий цвет, чтобы понять, куда приземлится блок. Если подсветка выглядит как на скриншоте ниже, блок опустится в зону подвала.

Нужно навести курсор с блоком прямо на границу предыдущей секции. Подсветка должна проходить чётко по её нижней границе. Как на скриншоте ниже.

Дальше выберите структуру макета с одной колонкой. Вообще, в этой секции должно быть три колонки, но сначала добавим макет, который будет выполнять функцию общего контейнера, а уже в него потом добавим ещё один блок «Макет» со структурой из трёх колонок.

Конструктор автоматически добавит такие же внутренние отступы, какие мы задали для него в прошлый раз. Вроде мелочь, а приятно. 🙂

Дальше придумайте название якоря и имя секции в разделе «Расширенные функции». В поле «Название якоря» мы вписали слово «icons», а в поле «Имя» — «Иконки».

Теперь добавьте ещё один блок «Макет» внутрь только что созданной секции.

Выберите во всплывающем окне макет с тремя колонками.

На смартфонах эти колонки будут автоматически перестраиваться и располагаться друг под другом. Чтобы на таких экранах колонки не были слишком близко друг к другу, увеличьте отступы сверху и снизу каждой колонки.

Для этого выберите колонку и перейдите в раздел «Отступы» на боковой панели. Измените стандартные значения в верхнем и нижнем оранжевом поле. Затем точно так же добавьте отступы и для остальных колонок.

Также есть смысл изменить фон секции. Например, на светло-серый. Это поможет немного разнообразить внешний вид одностраничника. Чтобы не все секции были на белом фоне.

Для этого выберите основной контейнер секции в разделе «Структура страницы», затем раскройте раздел «Макет» и кликните по кнопке «Фон».

Во всплывающем окне выберите на палитре какой-то светлый оттенок серого. Чтобы контрастировал с белым, но не мешал читать текст. Например, можете использовать значение #F1F1F1. Введите его в ячейку справа от палитры.

Шаг 2: Добавьте иконки

Для этого в конструкторе есть встроенная библиотека с иконками Font Awesome. В ней много базовых иконок, которые часто используют бизнесы. В нашем случае нужны телефон, локация, часы. Если какой-то иконки не хватает, загуглите «бесплатные иконки» и поищите на бесплатных стоках.

Перетащите блок «Картинка» в одну из колонок. Во всплывающем окне со стилями изображений пролистайте в самый низ — иконки будут там. Здесь не все варианты, поэтому просто выберите любой, а через минуту замените на нужный.

Но сначала измените стандартный цвет и размеры иконки в разделах «Картинка» и «Размер». Мы использовали чёрный цвет и размер в 100 пикселей.

Дальше таким же образом добавьте иконки в другие колонки. Чтобы не нужно было каждый раз заново менять размер и цвет, кликните по первой иконке правой кнопкой мыши и выберите «Дублировать» в контекстном меню. Затем просто перетащите дубликат в новую колонку.

Чтобы изменить иконку, кликните по ней, а потом кликните по её изображению на боковой панели. Появится всплывающее окно с библиотекой иконок. В поиске вы можете ввести на английском ключевые слова, чтобы быстрее найти то, что нужно. Например, map или clock.

Шаг 3: Добавьте заголовки

Используйте для этого блок «Текст». Перетащите его под иконку и во всплывающем окне выберите любой из стандартных стилей.

Нажмите на верхней панели кнопку «Редактировать текст» и замените шаблонный текст на свой. Затем выберите в карусели стиль «Heading 3».

Дальше добавьте отступ сверху от заголовка. Это делается в разделе «Отступы» на боковой панели. Оранжевая ячейка. Мы использовали 10 пикселей.

После этого точно так же добавьте заголовки для остальных колонок. Можете дублировать уже настроенный блок, чтобы дело прошло быстрее.

Шаг 4: Добавьте текст

Добавьте под созданный только что заголовок ещё один блок «Текст». Выберите любой стандартный стиль во всплывающем окне.

Нажмите кнопку «Редактировать текст» на всплывающей панели и замените шаблонный текст на свой. Затем выберите в карусели стиль «Normal».

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

При помощи этих опций на всплывающей панели вы можете изменить конкретный блок с текстом, не меняя при этом глобальный стиль. Конкретно в этой секции жирное начертание смотрится неплохо, поэтому его можно даже не отменять.

Дальше точно таким же образом добавьте описания в остальные колонки.

Секция №3 — Прайс-лист

Этот блок тоже есть смысл расположить повыше, поскольку цена — один из важных критериев при выборе услуг. Если она не подходит, посетителю может быть уже всё равно на остальное.

Шаг 1: Создайте макет

Уже стандартно — начинаем создание секции с добавления блока «Макет». Во всплывающем окне выбираем структуру с одной колонкой. Затем придумываем имя для секции, а также якорную ссылку. В поле «Название якоря» вписываем, например, «services», а в поле «Имя» — «Услуги и цены».

Шаг 2: Добавьте заголовок

Используйте для этого блок «Текст». Во всплывающем окне выберите любой стандартный стиль из предложенных. Затем нажмите на всплывающей панели кнопку «Редактировать текст» и впишите «Наши услуги» вместо шаблонного текста. Потом выберите в карусели стиль текста «Heading 2».

Шаг 3: Добавьте список услуг с ценами

Добавьте после заголовка секции ещё один блок «Макет» и выберите структуру из двух колонок.

После этого добавьте отступ сверху, чтобы макет не прилипал к заголовку. В верхней оранжевой ячейке укажите 50 вместо нуля.

Дальше можно создавать список услуг с их ценами. Для этого сначала добавьте блок «Фигура» в левую колонку. Это будет разделительная линия между блоками с текстом.

Сначала выберите во всплывающем окне вариант стиль линии, который нравится вам больше всего. Мы выбрали точки.

Стиль, цвет и толщину линии можно изменить в разделе «Line» на боковой панели. Также в разделе «Размер» можно изменить высоту блока. Это нужно, чтобы отступ между линией и текстом не был слишком большим. Значения, которые использовали мы, указаны на скриншоте ниже.

Теперь добавим название первой услуги. Для этого перетащите в левую колонку блок «Текст» и расположите его сверху от разделительной линии.

Выберите любой стандартный стиль во всплывающем окне. Дальше кликните два раза по тексту и замените шаблонный текст на свой. Затем примените к этому тексту стиль «Normal».

После этого добавьте ещё один блок «Текст» и разместите его справа от названия услуги. Это будет её цена. Точно таким же образом выберите любой стандартный стиль, замените шаблонный текст, а потом измените стиль на «Normal».

Наверное, вы уже заметили, что пока что эта композиция из трёх блоков выглядит некрасиво. Название услуги и цена расположились в одном контейнере, а разделительная линия — в другом. Сейчас мы это исправим.

Раскройте на боковой панели раздел «Структура страницы». Как видите, блок «Линия» расположен не на одном уровне с двумя блоками «Текст». Вручну перетащите его под нижний блок «Текст», чтобы линия тоже оказалась вложенной в «Горизонтальный макет».

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

Ну и финальный штрих в этой конструкции — подправить внешний вид этого блока на маленьких экранах. Для этого включите версию сайта для смартфонов сверху — в строке между шапкой конструктора и рабочей областью.

Как видите, на экранах смартфонов название услуги и цена располагаются друг над другом. А нам нужно, чтобы рядом друг с другом.

Чтобы это реализовать, перейдите на боковой панели раздел «Макет» и уберите галочку в пункте «Переключать на вертикальную компоновку на небольших экранах».

После этого блок с одной услугой и её стоимостью будет готов. Вам останется только добавить остальные позиции. Для этого проще всего будет дублировать контейнер, где находится текст с разделителем. Его можно выбрать в разделе «Структура страницы».

Когда выберите нужный контейнер, в его правом верхнем углу кликните правой кнопкой мыши по иконке с изображением карандаша. Затем выберите «Дублировать» из контекстного меню. После этого измените текст с ценой и продолжайте дублировать контейнеры до тех пор, пока не перечислите все услуги.

Шаг 4: Добавьте отступы вокруг колонок

Когда закончите добавлять услуги, всё будет выглядеть примерно таким образом:

Вроде бы всё окей, смущает только разве что расстояние по бокам от колонок. Чтобы его изменить, выберите сначала левую колонку и найдите раздел «Отступы» на боковой панели. Укажите в оранжевых полях 50 пикселей слева и 20 пикселей справа.

Затем точно так же добавьте отступы для правой колонки. Только наоборот — 50 пикселей справа, 20 слева.

После этого прайс-лист должен выглядеть симпатичнее.

Секция №4 — Галерея

После основной информации покажите посетителю результат или процесс своей работы, чтобы помочь составить дальнейшее мнение про ваш бизнес.

Шаг 1: Создайте макет

По традиции сначала добавьте блок «Макет» сразу под предыдущим макетом. Во всплывающем окне выберите структуру с одной колонкой. Затем перейдите в раздел «Расширенные функции» на боковой панели, чтобы вписать имя блока и якорную ссылку. В поле «Название якоря» впишите «gallery», а в поле «Имя» впишите «Галерея».

Шаг 2: Добавьте заголовок

Перетащите внутрь макета блок «Текст». Во всплывающем окне выберите любой из стандартных стилей. Затем кликните по тексту два раза или нажмите на всплывающей панели кнопку «Редактировать текст». Вместо шаблонного текста впишите «Галерея» и выберите стиль «Heading 2» в карусели.

Шаг 3: Добавьте галерею

Перетащите внутрь макета блок «Галерея» и разместите его под заголовком. Во всплывающем окне с заготовленными стилями выберите первый стиль.

Сразу после того как добавите галерею, добавьте для неё отступ сверху, чтобы она не прилипала к заголовку секции. Для этого на боковой панели найдите раздел «Отступы» и добавьте в верхней оранжевой ячейке 50 пикселей.

Теперь загрузите собственные фотографии вместо шаблонных. Для этого на боковой панели найдите раздел «Галерея» и кликните по опции «Картинки».

Во всплывающем окне — Менеджере изображений галереи — удалите все шаблонные изображения из галереи, затем нажмите «Добавить фотографии» в левом нижнем углу окна.

Откроется менеджер загрузок конструктора. В нём вы увидите всё те же шаблонные изображения. Хотя вы только что удалили их из галереи, в целом, в памяти конструктора они ещё остались. Если хотите, удалите их и отсюда.

Дальше нажмите вверху кнопку «Загрузить фотографию», выберите у себя на компьютере фото, которые должны быть в галерее, затем нажмите в нижнем правом углу кнопку «Применить».

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

Изображения в галерее обновятся. На боковой панели в разделе «Галерея» вы можете добавить ещё фото или наоборот удалить лишние. Также там можно изменить стиль галереи.

В разделе «Миниатюры» на боковой панели вы можете изменить ширину каждой из миниатюр, а также отступ между ними. Мы увеличили стандартную ширину до 100 пикселей, после чего в рабочей области вместо трёх колонок стало две. На самом деле колонок всё равно будет три, они просто не влезают. Если откроете сайт в предпросмотре, вы это увидите.

По большому счёту это все разделы, которые вам понадобятся. Разве только вы захотите добавить к фотографиям подписи — их внешний вид настраивается в разделе «Подписи» на боковой панели.

Также есть раздел «Анимация», где вы можете настроить для изображений эффект по умолчанию (он будет виден, когда человек впервые доскроллит до галереи) или эффект при наведении на отдельно взятую фотографию.

Секция №5 — Отзывы

Что говорят клиенты про ваш сервис — тоже важный момент. Для этого мы сделали скриншоты на Google Отзывах, красиво обрезали их, чтобы они были одинаковыми по высоте, и разместили по три скриншота рядом друг с другом в фотошопе. Дальше создали галерею, где люди смогут листать эти изображения по три скриншота.

В принципе можно было собрать каждый отзыв вручную, но это долго и добавлять новые отзывы в будущем будет запарно. Использованный нами способ быстрее, проще и всё равно выглядит аккуратно. Главное — найти нормальные пропорции при обрезке скриншотов, чтобы не обрезать случайно какой-то из отзывов.

Шаг 1: Создайте контейнер

В очередной раз добавьте блок «Макет» сразу под последним макетом. Выберите структуру из одной колонки во всплывающем окне. Затем на боковой панели откройте раздел «Расширенные функции» и в поле «Название якоря» впишите «reviews», а в поле «Имя» впишите «Отзывы».

Шаг 2: Добавьте заголовок

Перетащите внутрь макета блок «Текст». Выберите любой из стандартных стилей во всплывающем окне. Затем кликните по тексту два раза, впишите вместо шаблонного текста «Отзывы» и выберите стиль «Heading 2» в карусели.

Шаг 3: Добавьте подзаголовок с вашим средним рейтингом

Перетащите внутрь макета блок «Фигура» и разместите его под заголовком секции. Во всплывающем окне выберите горизонтальную линию из точек.

На боковой панели настройте стиль линии. В разделе «Line» можно изменить толщину, цвет и стиль. В разделе «Размер» — ширину и высоту блока. Можно использовать такие же параметры, как и в блоке с услугами, но только сократить ширину до 25%.

Сразу после настройки продублируйте блок, чтобы сделать линию и перед и после заголовка. Для этого кликните по блоку правой кнопкой мыши и выберите «Дублировать» во всплывающем меню.

Добавьте ещё один блок «Текст» и разместите его между блоками «Линия».

Замените шаблонный текст на свой и выберите на всплывающей панели стиль «Heading 3».

Теперь добавьте звёздочку. Для этого перетащите блок «Картинка» и разместите его слева от только что добавленного заголовка.

Во всплывающем окне выберите в нижней части изображение с заполненной звёздочкой.

Первое, что нужно сделать после — уменьшить огромный размер звёздочки. Это делается в разделе «Размер» на боковой панели. 50 пикселей в полях «Мин» и «Макс» для ширины и высоты будет в самый раз.

Дальше — добавьте отступ справа от звезды, чтобы она не была так близко к заголовку. Это делается в разделе «Отступы» на боковой панели. 10 пикселей в правой оранжевой ячейке должно быть достаточно.

Как вы наверняка уже заметили, блок со звездой и текстом получается слишком большого размера. Это потому что блоки, которые располагаются рядом друг с другом, формируют общий блок «Макет». И конкретно в этом блоке «Макет» скопировались наши стандартные отступы внутри.

Выберите блок «Макет» и увидите синие отступы. Удалите их на боковой панели в разделе «Отступы». После этого всё снова станет компактным. Можно оставить разве что отступ справа — для оптической компенсации. Чтобы заголовки располагались больше друг под другом.

Ну и последнее — добавьте отступ перед верхним разделителем, чтобы отодвинуть блок с рейтингом от заголовка секции. Для этого выберите разделитель и на боковой панели в разделе «Отступы» добавьте 50 пикселей в верхнем оранжевом поле.

Шаг 4: Добавьте галерею

Перетащите блок «Галерея» в нижнюю часть макета. Во всплывающем окне с шаблонными стилями выберите стиль «Слайд-шоу» в нижнем левом углу.

Как и в случае с галереей из предыдущей секции, кликните по опции «Картинка» в разделе «Галерея» на боковой панели. Далее удалите текущие фото и добавьте вместо них свои.

Снимите галочку в пункте «Автоматическая подрезка» в разделе «Галерея». Из-за этой галочки часть ваших изображений будет обрезаться, чтобы все изображения вписывались в контейнер внутри галереи. Без галочки изображения сохранят свои изначальные пропорции.

В разделе «Слайд-шоу» на боковой панели настраиваются параметры анимации слайд-шоу. Если хотите вообще отключить анимацию, чтобы посетители листали вручную, установите значение в опции «Изменить частоту» на ноль.

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

Секция №6 — Про нас

В конце страницы можно разместить небольшой блок с информацией про ваш бизнес. Здесь можно сказать пару слов про ваш подход к работе или историю про то, как вы открылись.

Шаг 1: Создайте макет

Как вы уже догадались, опять нужно добавить блок «Макет» в самый низ сайта. В этот раз выберите структуру из двух колонок во всплывающем окне. Затем раскройте раздел «Расширенные функции» на боковой панели. В поле «Название якоря» впишите «about», а в поле «Имя» впишите «Про нас».

До этого у нескольких секций был белый фон. Для разнообразия сделайте фон этой секции серого цвета. В разделе «Макет» на боковой панели кликните по опции «Фон» и замените стандартный цвет в ячейке справа от палитры цветов. Используйте такой же оттенок серого, как и в секции с иконками.

Шаг 2: Добавьте заголовок

Перетащите в левую колонку блок «Текст» и во всплывающем окне выберите любой из заготовленных заранее стилей. Затем кликните по тексту два раза, впишите вместо шаблонного текста «Про нас» и выберите стиль «Heading 2» в карусели.

После того как настроите заголовок, нажмите «Сделано» в верхнем правом углу всплывающей панели. Появится предыдущая всплывающая панель. Выберите на ней выравнивание по левому краю. Это более читабельный вариант, поскольку после заголовка будет ещё абзац текста. С выравниванием по центру это всё будет смотреться не очень.

Шаг 3: Добавьте текст про ваш бизнес

Перетащите блок «Текст» под только что добавленный заголовок. Выберите любой из стандартных стилей и замените шаблонный текст на свой. На всплывающей панели со стилями выберите стиль «Normal».

Шаг 4: Добавьте изображение

Перетащите блок «Картинка» в правую колонку и выберите во всплывающем окне первый из стандартных стилей.

В открывшемся менеджере загрузок нажмите вверху «Загрузить фотографию», выберите её у себя на компьютере, затем нажмите кнопку «Выбрать» в правом нижнем углу всплывающего окна.

Шаг 5: Добавьте отступы внутри колонки с текстом

Секция почти готова, остаётся только немного подправить отступы. Сначала добавьте отступ между абзацем текста и заголовком. Выберите блок с абзацем текста и в разделе «Отступы» на боковой панели добавьте 50 пикселей в верхней оранжевой ячейке.

Дальше сделайте всю колонку с текстом и заголовком чуть более узкой. Сейчас она смотрится как-то слишком растянуто. Выберите колонку и в разделе «Отступы» на боковой панели добавьте по 50 пикселей по бокам в оранжевых ячейках.

Добавляйте отступы сбоку именно в оранжевых ячейках, потому что конструктор будет автоматически убирать их на маленьких экранах. А вот отступы в голубых ячейках конструктор убирать не будет. Поэтому на смартфонах содержимое блоков с такими отступами может выглядеть плохо.

Для симметрии выберите вторую колонку и добавьте к ней тоже отступ справа. Иначе будет так, что у левой колонки поле шире, чем у правой. Только выбрать нужно именно колонку, а не изображение. Проще всего сделать это в разделе «Структура страницы» на боковой панели.

Затем в разделе «Отступы» увеличьте стандартный отступ в правой оранжевой колонке до 50 пикселей.

И последний момент — выравнивание содержимого всей секции по центру. С ним текст и фотография будут располагаться гармонично относительно друг друга. Чтобы включить такое выравнивание, выберите основной макет секции и на боковой панели в разделе «Макет» активируйте иконку, где горизонтальная линия находится по центру двух вертикальных линий, как указано на скриншоте.

Секция №7 — Контакты

Последняя секция нашего одностраничника — традиционно «Контакты» Перечислите здесь варианты связаться с вами: телефон, почту, соцсети, канал на YouTube.

Шаг 1: Создайте макет

Снова добавьте в конец одностраничника блок «Макет» и выберите во всплывающем окне структуру с двумя колонками. В одной будет Google Карта, в другой текст. Затем в разделе «Расширенные функции» на боковой панели в поле «Название якоря» впишите «contacts», а в поле «Имя» — «Контакты».

Сразу увеличьте стандартные отступы по бокам от колонок, чтобы их содержимое не прилипало друг к другу и не было сильно близко к краям страницы.

Выберите левую колонку и в разделе «Отступы» на боковой панели вместо стандартных отступов по бокам в оранжевых ячейках впишите число 50. Затем выберите правую колонку и точно так же увеличьте отступ с правого края до 50 (для симметричности).

Шаг 2: Добавьте карту с локацией

Перетащите в левую колонку блок «Карты». Во всплывающем окне вы увидите несколько стандартных стилей на выбор. Выберите любой.

На боковой панели в разделе «Google карты» найдите опцию «Адрес». В ней нажмите на иконку с локацией справа, чтобы открыть карту и вручную выбрать локацию вашего магазина.

Следующий момент — Ключ API. Это специальный набор символов, который вы сможете получить бесплатно, после того как зарегистрируете бизнес в своём аккаунте Google.

Наведите курсор на знак вопроса в названии опции на боковой панели, чтобы увидеть ссылку на инструкцию по получению ключа API. Без ключа карта работать не будет.

Дальше — основные опции для настройки карты. Кроме уже упомянутых опций в разделе «Google карты» вы можете изменить тему карты и её тип, а также изменить масштабирование. Чем выше число в поле «Масштабирование», тем больше будет размер у элементов на карте.

В разделе «Свойства» вы можете выбрать, какие элементы управления должны быть на карте.

Шаг 3: Добавьте заголовок

Перетащите в правую колонку блок «Текст» и выберите любой из заготовленных заранее стилей. Затем замените шаблонный текст на «Контакты» и выберите стиль «Heading 2».

Дальше нажмите «Сделано» в верхнем правом углу всплывающей панели со стилями. На открывшейся панели выберите для заголовка выравнивание по левому краю.

Шаг 4: Добавьте адрес и телефон

Перетащите под заголовок ещё один блок «Текст». Измените стандартный текст и примените стиль «Normal». Чтобы сделать жирным только часть текста, выделите нужную часть текста и нажмите комбинацию клавиш «Ctrl + B».

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

Шаг 5: Добавьте иконки соцсетей

Перетащите под текст с контактной информацией блок «Картинка». Во всплывающем окне выберите иконку Facebook или другой соцсети, которую хотите добавить.

Если нужной иконки нет, возможно, её нет просто на всплывающем окне. Выберите какую-то другую соцсеть, затем на боковой панели кликните по иконке в разделе «Картинка». Появится всплывающее окно с полным списком доступных иконок. Там их больше, чем на первоначальном всплывающем окне.

Таким же образом добавьте остальные соцсети, которые вам нужны. Чтобы добавить к иконке ссылку, выберите её и в разделе «Картинка» на боковой панели найдите опцию «Ссылка». Кликните по тексту «Ссылка не выбрана», после чего откроется всплывающее окно, где вы сможете всё настроить.

Дальше — настройте отступы в блоке с иконками. Выберите общий блок, где находятся все иконки, и в разделе «Отступы» на боковой панели установите нули во всех оранжевых полях.

После отступов измените выравнивание иконок. В разделе «Макет» на боковой панели выставьте выравнивание по левому краю, как указано на скриншоте.

Также снимите галочку с опции «Переключать на вертикальную компоновку на небольших экранах». Иначе на смартфонах иконки будут располагаться вертикально.

И последний нюанс — отступы между иконками. Выберите первую иконку и добавьте 20 пикселей в оранжевую ячейку справа в разделе «Отступы» на боковой панели. Затем сделайте так же с остальными иконками.

Чтобы изменить размер иконок, выберите какую-то из них и найдите на боковой панели раздел «Размер». Поэкспериментируйте со значениями «Мин» и «Макс» в опциях «Ширина» и «Высота».

Секция №8 — Подвал сайта

Подвал не то чтобы обязательно должен быть на сайте, но без него одностраничник обрывается как бы внезапно, с ним как-то более естественно.

Шаг 1: Создайте макет

Добавьте в область подвала блок «Макет» и выберите во всплывающем окне структуру из одной колонки. На боковой панели в разделе «Макет» измените цвет фона на чёрный. Чтобы контрастировал с остальным содержимым.

Вместо текста о защите авторских прав может быть и что-то другое. Годы работы вашей компании, кто сделал сайта или просто название вашего бизнеса.

Шаг 2: Добавьте текст копирайта

Перетащите в подвал блок «Текст». Замените шаблонный текст на название своего сайта и фразу «© Все права защищены» с новой строки. Затем во всплывающем окне выберите стиль «Normal». Чуть выше стилей в этом же всплывающем окне вы можете также отрегулировать жирность текста, выровнять его по центру и изменить цвет на белый.

Чтобы разместить блок «Текст» по центру секции, выберите её и на боковой панели в разделе «Макет» измените вертикальный макет на горизонтальный. После этого чуть ниже появятся опции выравнивания содержимого по вертикали. Нажмите кнопку с горизонтальной линией по центру двух вертикальных, как указано на скриншоте ниже.

Секция №9 — Шапка сайта

В одной стороне шапки разместим меню, чтобы посетитель мог сразу перейти к нужному разделу. В другой стороне разместим ссылку на ваш профиль в инстаграме — пусть люди заходят посмотреть фото, подписываются, задают вопросы.

Шаг 1: Создайте макет

В последний раз перетащите блок «Макет» в область для шапки. Во всплывающем окне выберите структуру с одной колонкой.

На боковой панели перейдите в раздел «Отступы» и добавьте внутренние и внешние отступы. Внутренние отступы (синие ячейки) — 20 пикселей по бокам, 10 сверху и снизу. Внешние (оранжевые ячейки) — 50 пикселей по бокам.

Шаг 2: Создайте меню

Перетащите в макет блок «Меню». Во всплывающем окне с шаблонными стилями выберите первый же стиль.

Сначала изменим элементы меню. Нажмите «Редактировать меню» на всплывающей панели под меню или на боковой панели в разделе «Меню».

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

Удалите все элементы, кроме элемента «Главная». Для этого наведите мышкой на нужный элемент и рядом появится значок крестика. Только не удаляйте элемент «Главная», потому что это может всё сломать.

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

В новом всплывающем окне введите в первом поле название нового элемента меню. Например, «Услуги». Чуть ниже выберите вариант «Ссылка», затем выберите вариант «Якорь для». В выпадающем списке выберите строку с названием якоря, которое соответствует созданному элементу меню. Для элемента «Услуги» это «services». После этого нажмите «Применить».

Точно таким же образом добавьте элементы для других секций вашего одностраничника: «Галерея», «Отзывы», «Про нас», «Контакты». Для секции «Иконки» элемент меню можно и не создавать.

Когда создадите все элементы, кликните на каждый из них и проверьте, не сбилась ли настройка в опции «Тип связи». Почему-то она бывает слетает сразу после создания нового элемента, но если выбрать правильный вариант заново, больше слетать не должно.

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

Элементы меню готовы. Теперь изменим их внешний вид. На боковой панели раскройте раздел «Пункты меню». Здесь настраивается шрифт элементов меню, их цвет, а также отступы между элементами.

В опции «Шрифт» выберите размер шрифта, как у обычного текста в стиле «Normal» — 18 пикселей. В опции «Регистр» выберите «Нет», чтобы элементы были написаны прописными буквами.

В этом же разделе найдите опцию «Стиль». Это цвета элементов меню. Обратите внимание, что у этой опции есть три вкладки: «По умолчанию», «При наведении» и «Активный».

Перейдите на вкладку «При наведении». Здесь замените выбранный по умолчанию жёлтый цвет на оранжевый, который мы уже использовали в кнопке — #ea7e2c.

На вкладке «При наведении» кликните по опции «Рамка». В левой части всплывающей панели выберите нижний центральный квадратик. Затем кликните по опции «Цвет» и сможете подставить своё значение.

Точно таким же образом измените цвет на вкладке «Активный». Только там нужно изменить как цвет рамки, так и цвет текста.

Теперь измените выравнивание меню, чтобы оно располагалось прямо по центру шапки. Выберите макет секции и перейдите на боковой панели в раздел «Макет».

Смените тип макета с «Вертикального» на «Горизонтальный». После этого чуть ниже появятся дополнительные иконки, которые как раз дают возможность выровнять содержимое по центру. А именно — иконка, на которой изображена горизонтальная линия по центру двух вертикальных линий.

Теперь изменим высоту шапки. Пока выбрана именно вся секция, раскройте на боковой панели раздел «Размер». В опции «Высота» вы увидите галочку возле ячейки «Мин». Снимите её.

Ничего не изменилось. Но это потому что есть ещё одна секция, где нужно сделать всё то же самое. Раскройте раздел «Структура страницы» в самом верху боковой панели и выберите там самый первый элемент — строку «Header».

Теперь в разделе «Размер» тоже отключите минимальную высоту. После этого шапка автоматически станет меньше. Если новая высота вам не нравится, можете задать её вручную. Например, 50 или 75 пикселей.

Остаётся только немного изменить внешний вид меню на смартфонах. Переключитесь на вид с мобильных телефонов в строке между шапкой конструктора и содержимым сайта.

Вы увидите, что у переключателя меню почему-то фиолетовый цвет. Такие стандартные настройки в этом стиле шапки. В предварительном просмотре сайта также можно увидеть, что у выпадающего списка с меню тоже фиолетовый фон.

Выберите переключатель меню и на боковой панели перейдите в раздел «Меню». Найдите там опцию «Стиль» и перейдите на вкладку «Мобильная». Там вы увидите опцию «Фон», нажав на которую сможете изменить цвет. Измените его на белый. Это повлияет сразу и на иконку и на выпадающий список с разделами меню.

Шаг 3: Добавьте иконку инстаграма

Перетащите в шапку блок «Картинка» и разместите его справа от блока «Меню». Во всплывающем окне найдите логотип Инстаграма.

На боковой панели в разделе «Размеры» вы можете немного уменьшить максимальную ширину и высоту логотипа. Например, до 50 пикселей, как в секции «Контакты».

Добавить к иконке ссылку на ваш профиль можно в разделе «Макет». Саму ссылку найдите у себя в профиле.

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

Что дальше

На этом всё. Мы рассказали, как сделать одностраничный сайт самому, без программирования и специальных навыков. Надеемся, у вас всё получилось. Если что-то непонятно, задайте вопрос в комментариях к этой статье, постараемся помочь разобраться.

Чтобы добавить на сайт функционал записи на приём, можете воспользоваться сервисом Altegio. Мы видели, что на реальных сайтах часто используют именно его. У них на сайте есть инструкции по подключению онлайн-записи.

Ну и конечно, на этом работа над сайтом не прекращается. Вот ещё несколько статей с нашего сайта, которые могут пригодиться в дальнейшем:

• Как настроить мобильную версию сайта
• Как продавать товары в конструкторе
• Как настроить параметры SEO в конструкторе