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

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

Месяц конструктора бесплатно

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

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

Начать делать сайт

Содержание

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

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

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

Титульный баннер одностраничника

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

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

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

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

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

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

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

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

Движок для одностраничного сайта SitePro — Выбор шаблона

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

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

Делаем одностраничный сайт в конструкторе SitePro — Редактор сайта

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

Где создать одностраничный сайт — Кнопка «Просмотр» в шапке конструктора

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

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

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

Создаём одностраничный сайт своими руками — Строка для включения просмотра с разных устройств

И напоследок ещё один момент — не открывайте конструктор одновременно в двух вкладках или с нескольких устройств, иначе изменения могут не сохраниться и всё придётся делать заново.

3. Создайте стили для текста

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

Делается это в настройках сайта. В правом верхнем углу конструктора нажмите на значок шестерёнки и перейдите в раздел «Стили».

Как делать одностраничные сайты — Раздел «Стили» в настройках конструктора

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

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

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

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

Как создать одностраничник — Настройки стиля «Normal», вкладка «Стандартный»
Вкладка «Стандартный»
Конструктор сайтов одностраничников — Настройки стиля «Normal», вкладка «Ссылки»
Вкладка «Ссылки»
Конструктор одностраничника — Настройки стиля «Normal», вкладка «Расширенные функции»
Вкладка «Расширенные функции»

Заголовки H1. Используйте этот заголовок только один раз на странице — для оформления титульного заголовка. Так правильнее с точки зрения SEO. 

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

Как создать сайт одностраничник — Настройки стиля «Heading 1», вкладка «Стандартный»
Вкладка «Стандартный»
Как создать свой одностраничный сайт — Настройки стиля «Heading 1», вкладка «Расширенные функции»
Вкладка «Расширенные функции»

Заголовки H2. Этим стилем хорошо оформлять заголовки разделов. Он не такой большой как H1, но всё равно выглядит солидно.

Как разработать одностраничник — Настройки стиля «Heading 2», вкладка «Стандартный»
Вкладка «Стандартный»
Разработка одностраничника — Настройки стиля «Heading 2», вкладка «Расширенные функции»
Вкладка «Расширенные функции»

Заголовки H3. Этот стиль подойдёт, для подзаголовков в колонках. Больше, чем обычный текст, но почти в два раза меньше, чем заголовок H2 (не будет перетягивать с него внимание).

Разработка одностраничного сайта — Настройки стиля «Heading 3», вкладка «Стандартный»
Вкладка «Стандартный»
Разработка одностраничных сайтов — Настройки стиля «Heading 3», вкладка «Стандартный»
Вкладка «Расширенные функции»

После изменения параметров стиля текста не забудьте нажать кнопку «Применить».

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

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

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

Дизайн одностраничника — Секция «Титульный баннер»

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

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

Изготовление одностраничного сайта своими руками — Добавляем на сайт новую секцию

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

Изготовление одностраничных сайтов — Выбираем структуру секции

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

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

Раздел «Отступы» на боковой панели конструктора

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

Раздел «Расширенные функции» на боковой панели конструктора

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

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

Раздел «Структура страницы» на боковой панели конструктора

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

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

На боковой панели найдите раздел «Макет» и в самом его верху кликните по опции «Фон».

Раздел «Макет» на боковой панели конструктора

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

Всплывающее окно с настройками фона секции

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

Всплывающее окно с выбором изображения для фона секции

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

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

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

Всплывающее окно с настройками фона секции

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

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

Раздел «Размер» на боковой панели конструктора

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

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

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

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

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

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

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

Раздел «Размер» на боковой панели конструктора

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

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

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

После выбора стиля кликните по тексту два раза или нажмите на всплывающей панели кнопку «Редактировать текст». Далее замените шаблонный текст на свой и выберите свой вариант стиля «Heading 1» в карусели.

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

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

Раздел «Отступы» на боковой панели конструктора

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

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

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

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

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

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

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

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

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

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

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

Раздел «Отступы» на боковой панели конструктора

Секция №2. Иконки с базовой информацией: адрес, телефон, время работы

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

Дизайн сайта одностраничника — Секция «Иконки»

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

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

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

Добавление блока «Макет» в область подвала сайта

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

Добавление блока «Макет» сразу после другого блока «Макет»

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

Всплывающее окно с выбором структуры блока «Макет»

Конструктор сразу же добавит отступы внутри, как у предыдущей секции. Запоминает, старается.

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

Раздел «Расширенные функции» на боковой панели конструктора

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

Добавление блока «Макет» внутрь другого блока «Макет»

Во всплывающем окне выберите структуру из трёх колонок.

Всплывающее окно с выбором структуры блока «Макет»

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

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

Раздел «Отступы» на боковой панели конструктора

Дальше — измените фон секции на светло-серый. Это стоит сделать, чтобы немного разнообразить внешний вид одностраничника. Несколько следующих секций будут с белым фоном.

Выберите основной контейнер секции и кликните по кнопке «Фон» в разделе «Макет» на боковой панели.

Раздел «Макет» на боковой панели конструктора

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

Всплывающее окно опции «Фон» в разделе «Макет» на боковой панели конструктора

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

Дополнительно скачивать иконки не понадобится, в конструкторе есть встроенная библиотека от Font Awesome. Там есть всё, что нам нужно: телефон, локация и часы. Если вам захочется какие-то другие иконки, в интернете полно сайтов, где их можно найти. Просто загуглите «бесплатные иконки».

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

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

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

Настройки цвета и размера иконки на боковой панели конструктора

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

Кнопка «Дублировать» во всплывающем меню

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

Всплывающее окно со всеми иконками Font Awesome в конструкторе

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

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

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

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

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

После этого добавьте отступ перед заголовком. На боковой панели в разделе «Отступы» измените стандартное значение в верхней оранжевой ячейке. 10-20 пикселей будет достаточно.

Раздел «Отступы» на боковой панели конструктора

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

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

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

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

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

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

Обратите внимание, что при выборе этого стиля на всплывающей панели в левом верхнем углу горит буква «B». Из-за этого текст получается жирным, хотя в параметрах стиля этого не указано.

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

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

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

Секция №3. Услуги и цены

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

Как сделать сайт одностраничник — Секция «Наши услуги»

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

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

Блок «Расширенные функции» на боковой панели конструктора

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

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

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

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

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

Всплывающее окно при добавлении блока «Макет»

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

Раздел «Отступы» на боковой панели конструктора

Теперь начнём создавать прайс-лист. Сначала перетащите в левую колонку блок «Фигура». Это будет разделительная линия между услугами.

Добавление блока «Фигура»

Во всплывающем окне с фигурами выберите фигуру с линией из точек.

Линия из чёрных точек во всплывающем окне с фигурами

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

Разделы «Line» и «Размер» на боковой панели конструктора

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

Добавление блока «Текст» над блоком «Фигура»

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

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

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

Добавление блока «Текст» рядом с другим блоком «Текст»

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

Неправильное расположение блоков «Текст» и «Фигура»

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

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

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

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

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

Переключение на вид с мобильного

Как видите, на экранах смартфонов название услуги и её цена будут располагаться не рядом друг с другом, а друг над другом.

Режим просмотра сайта в конструкторе с мобильного телефона

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

Пункт «Переключать на вертикальную компоновку на небольших экранах» на боковой панели конструктора

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

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

Всплывающее окно по клику на значке карандаша

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

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

Предпросмотр готового блока «Наши услуги»

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

Раздел «Отступы» на боковой панели конструктора

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

Раздел «Отступы» на боковой панели конструктора

После этого в предпросмотре секция выглядит лучше.

Предпросмотр готового блока «Наши услуги»

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

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

Как создать одностраничный сайт с нуля самому — Секция «Галерея»

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

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

Блок «Расширенные функции» на боковой панели конструктора

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

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

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

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

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

Заготовленные стили для блока «Галерея»

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

Раздел «Отступы» на боковой панели конструктора
Раздел «Отступы» на боковой панели конструктора

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

Раздел «Галерея» на боковой панели конструктора

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

Менеджер изображений галереи

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

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

Менеджер загрузок конструктора

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

Менеджер изображений галереи

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

Раздел «Галерея» на боковой панели конструктора

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

Раздел «Миниатюры» на боковой панели конструктора

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

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

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

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

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

Как сделать одностраничный сайт самому — Раздел «Отзывы»

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

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

Как сделать сайт одностраничник — Блок «Расширенные функции» на боковой панели конструктора

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

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

Создание одностраничного сайта в конструкторе — Всплывающее окно с выбором стиля текста

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

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

Создание сайтов одностраничников — Всплывающее окно при добавлении блока «Фигура»

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

Создать одностраничник онлайн — Разделы «Line» и «Размер» на боковой панели конструктора

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

Опция «Дублировать» в контекстном меню по клику на любом блоке конструктора

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

Как создать одностраничный сайт самому — Добавление блока «Текст»

Замените шаблонный текст на свой и выберите в карусели со стилями стиль «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 карты» найдите опцию «Адрес». В ней кликните по иконке с локацией справа, чтобы открыть карту и вручную выбрать локацию вашего магазина.

Опция «Адрес» в разделе «Google карты» на боковой панели конструктора

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

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

Информация при наведении на значок ? в опции «Ключ API»

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

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

Раздел «Свойства» на боковой панели конструктора

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

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

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

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

Всплывающая панель при выборе блока «Текст»

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

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

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

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

Раздел «Отступы» на боковой панели конструктора

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

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

Всплывающее окно при добавлении блока «Картинка»

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

Всплывающее окно со всеми иконками Font Awesome

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

Опция «Ссылка» в разделе «Картинка» для блока «Картинка»

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

Раздел «Отступы» на боковой панели конструктора

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

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

Раздел «Макет» на боковой панели конструктора

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

Раздел «Отступы» на боковой панели конструктора

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

Раздел «Размер» на боковой панели конструктора

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

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

Секция «Контакты»

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

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

Раздел «Макет» на боковой панели конструктора

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

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

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

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

Раздел «Макет» на боковой панели конструктора

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

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

Секция «Шапка сайта»

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

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

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

Раздел «Отступы» на боковой панели конструктора

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

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

Всплывающее окно при добавлении блока «Меню»

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

Всплывающая панель под меню

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

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

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

Кнопка «Новый элемент» во всплывающем окне мастера редактирования меню

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

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

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

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

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

Мастер добавления элементов меню

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

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

Всплывающая панель опции «Шрифт» в разделе «Пункты меню»

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

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

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

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

Всплывающая панель в опции «Стиль – При наведении – Рамка»

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

Всплывающая панель в опции «Стиль – Активный»

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

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

Раздел «Макет» на боковой панели конструктора

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

Раздел «Размер» на боковой панели конструктора

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

Раздел «Структура страницы» на боковой панели конструктора

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

Раздел «Размер» на боковой панели конструктора

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

Переключение в режим просмотра сайта на экранах смартфона

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

Шапка одностраничника — вид со смартфона

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

Опция «Стиль – Мобильная – Фон» в режиме просмотра со смартфона

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

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

Всплывающее окно при выборе блока «Картинка»

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

Раздел «Размер» на боковой панели конструктора

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

Раздел «Макет» на боковой панели конструктора

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

Опция «Пространство между» на всплывающей панели секции

Что дальше

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

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

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

Была ли статья полезной?

Спасибо за отзыв!