Как создать одностраничный сайт

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

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

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

Затем нажмите «Новая страница»

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

Общий стиль страницы

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

Значок палитры стиля страницы находится в левом верхнем углу на верхней панели.

Нажмите на значок палитры и выберите «Настроить» напротив нужного элемента.

Цветовая палитра

Вы можете выбрать предустановленную цветовую схему.

Или настроить цветовую схему всех элементов по отдельности:

Фон контента — цвет для всех элементов по умолчанию, кроме элемента «Обложка».

Фон страницы — цвет пространства страницы за пределами всех блоков.

Текст — цвет текста для элемента «Текст» и текстовых элементов (лейбы, радиокнопки, чекбоксы) в «Форме подписки».

Основной цвет — цвет фона в элементе «Обложка», цвет фона кнопки со стилем «Основная» и цвет обводки для кнопки со стилем «Вторичная».

Вспомогательный цвет — цвет в элементе «Линия» и цвет фона кнопки со стилем «Вторичная».

Стили текста

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

Чтобы настроить шрифты для абзацев и заголовков по отдельности, перейдите в настройки.

Стили кнопок

Из предустановленного списка стилей кнопок можно выбрать один из стилей

Также вы можете настроить свой стиль для обоих видов кнопок:

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

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

Фон страницы

Также в общих настройках можно задать фоновое изображение для всей страницы:

Ширина контента

Вы можете задавать размер ширины сайта. Минимальное значение 420 px, максимально — 780 px. Задавая максимальную ширину для веб версии, сайт адаптируется и под мобильную версию.

Добавление элементов

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

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

Обложка

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

По умолчанию обложка состоит из аватарки, короткого текста и фона.

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

Затем переходите к настройке отображения аватарки — выберите выравнивание и укажите размер.

Чтобы отредактировать текст, кликните на него и вам откроется панель редактирования текста.

Внутри каждого элемента вы можете настраивать стили блока: фон, внутренние отступы от элемента до границы страницы, тень и скругление блока.

Текст

Используется для добавления текстового блока на страницу.

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

Чтобы изменить расположение и добавить фон, нажмите на настройки справа.

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

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

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

Также вы можете добавить ссылку и описание под каждой картинкой.

Введите название кнопки. Выберите ее тип: ссылка на сайт, телефон или email, а затем вставьте данные.

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

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

Соцсети

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

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

Настройте внешний вид элемента: отображать как кнопки или иконки, какого размера и в каком стиле.

Разделители: отступ и линия

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

Для элемента «Линия» можно выбрать ее цвет, толщину, тень, а также тип.

Форма подписки

Собирайте данные посетителей сайта и подписывайте их на рассылки с помощью формы подписки.

Выберите книгу, в которую будут попадать контакты.

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

Настройте стиль текста названия полей или скройте их тумблером.

Введите текст и выберите стиль кнопки подтверждения и передачи данных. 

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

Если вы сохраняете сделку в CRM, вы можете связать поле формы с полем контакта и сделки.

Чат-боты

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

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

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

Таймер

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

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

Также вы можете настроить внешний вид таймера: добавить разделители, изменить размер, цвет текста и стиль блока.

FAQ 

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

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

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

Предпросмотр, сохранение и публикация

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

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

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

Вы можете изменить адрес, название и фавикон своего сайта, добавить SEO элементы и подключить Google Analytics и Яндекс.Метрику. Для этого нажмите «Настройки сайта».

Тут же вы можете следить за статистикой посещений вашего сайта.

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

Оцените, насколько полезна статья "Как создать одностраничный сайт"

Оценка: 5 / 5 (2)

    Другие полезные страницы

    Популярное в нашем блоге

    Начните пользоваться сервисом SendPulse прямо сегодня