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

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

В конструкторе 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. Используйте этот заголовок только один раз на странице — для оформления титульного заголовка. Так правильнее с точки зрения SEO. 

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

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

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

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

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

Секция №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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В разделе «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%.

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

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

Замените шаблонный текст на свой и выберите в карусели со стилями стиль «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 в конструкторе