Конструктор лендингов (landing page), создать одностраничный сайт бесплатно

Главная

Конструктор сайтов

Создание одностраничного сайта-лендинга

Преимущества конструктора одностраничных сайтов hostfly.by

Простое использование

Интуитивно понятный интерфейс позволит самостоятельно создать одностраничный сайт, даже если вы взялись за это впервые.

Готовый дизайн

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

Адаптивность сайта

Благодаря адаптивной верстке ваш Landing Page замечательно смотрится на всех типах устройств, от персонального компьютера до планшета и смартфона.

Поисковая оптимизация

Встроенные инструменты поисковой оптимизации позволяют вам улучшить позицию своего сайта в результатах поиска Google, Yandex

Подключить конструктор

Более 200 шаблонов

Более 200 готовых шаблонов сайтов и лендингов.

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

Электронная коммерция.
Расширенный e-Commerce — конструктор подходит для создания интернет-магазинов. На его базе создают товарные позиции с текстовым описанием, ценой, размером скидок и другими данными. К готовому магазину можно подключить WebMoney bePaid банковские переводы и другие платежные системы (при покупке хостинга Cloud Старт и Cloud Бизнес). 

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

Импорт сайтов.
Перенос веб-ресурсов — вы можете перенести готовый сайт на наш хостинг и управлять им при помощи расширенного набора настроек. Эта функция доступна даже при утрате паролей доступа.

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

Техническая поддержка 24/7
Круглосуточная поддержка — команда сервиса ответит на вопросы, объяснит функции, поможет подключить плагины и расширить функционал. Обратитесь к ней, если создание сайта лендинга на конструкторе вызывает у вас проблемы. Напишите нам!

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

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

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

Важно: Упрощенный конструктор сайтов и лендингов в Минске доступен на любом тарифе hosting от HostFly.by.

Открыть Интерактивное руководство пользователя

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

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

Смотрите также:

• Конструктор интернет магазина
• Конструктор сайта визитки

Наши Клиенты

ООО «Суппорт чейн» является резидентом Парка высоких технологий

© 2022 ООО «Суппорт чейн». Провайдер облачного хостинга и регистратор доменных имен в Беларуси.
проспект Победителей, дом 106, офис 14 г. Минск, 220062, Республика Беларусь [email protected] +375 29 336-73-73

Как создать одностраничный сайт на wordpress бесплатно

Привет друзья! Последнее обновление плагина Page Builder от Site Origin сделало веб-разработку еще проще и доступней. Независимо от того знаете вы код или нет,прочитав эту статью до конца вы поймете как создать одностраничный сайт на WordPress бесплатно и самостоятельно.
Итак, чтобы сделать одностраничник на wordpress понадобится всего четыре инструмента:

1. СMS WordPress
2. Тема North
3. Плагин Page Builder
4. Плагин Site Origin сборник виджетов

Быстрая установка wordpress

Я надеюсь, что вы знаете, как установить вордпресс и подробно рассматривать этот вопрос не буду. Но если вам сложно сориентироваться в этом вопросе то знайте что ваш хостинг скорее всего имеет предустановленный автоустановщик всех популярных CMS. Называется это приложение Softaculous. С его помощью можно активировать установку wordpress и других скриптов прямо в cPanel хостинга. Установка интуитивно понятна:

• Выбираете версию вордпресс
• протокол http:// или если есть предустановленный ssl сертификат, то https://
• Директорию установки (папку куда будет загружена cms)
• Дайте сайту название (например, «Simple OnePage»)
• Сделайте описание сайта (например, «Одностраничник на wordpres»)
• Имя админа
• Пароль
• E-mail админа
• Название базы данных и префиксы таблиц можете оставить по умолчанию
• Жмете на кнопку «Установка» и все.

Базовая настройка одностраничного сайта

После того как вы попадете в консоль управления сайтом, войдите на вкладку Страницы и переименуйте страницу «Пример страницы» на «Simple OnePage». Ну, или дайте свое название. Затем идем во вкладку Настройки > Чтение и сделайте страницу «Simple OnePage» главной.

Настройка Главной страницы сайта на вордпресс

Выбор и установка темы

Чтобы установить тему сайта идем во вкладку Внешний вид > Темы и жмем на кнопку «Добавить новую». Я рекомендую установить тему North. Эта тема хоть и бесплатная, но имеет много настроек и удобна для создания одностраничника на wordpress. Вам не нужно лезть в файлы шаблона и многие базовые настройки можно сделать, не выходя из админ панели непосредственно в настройках страницы или в кастомайзере. Например, установить шрифты Google, подобрать цвет шрифта для заголовков и меню, сделать меню фиксированным, настроить разметку страницы с сайдбаром или на всю ширину.

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

Настройки темы wordpress в кастомайзере

После активации темы откройте снова главную страницу сайта и на вкладке «Атрибуты страницы» настройте разметку страницы Page Layout, активируйте контейнер как Full Width, то есть он будет на всю ширину. Также уберите метку флажка с чекбокса в поле Page Title, чтобы отключить показ заголовка страницы. Здесь же нужно убрать отступ под верхнем меню в поле Must Head bottom Margin убрав флажок с соответствующего чекбокса. После всех настроек страница готова чтобы импортировать в нее шаблон одностраничного сайта.

Установка плагинов и импорт шаблонов страниц

Идем во вкладку Плагины > Добавить новый и выбираем «Page Builder от Site Origin». Жмем на кнопку «установить» и активируем его. Также устанавливаем и активируем плагин со сборником виджетов «Site Origin виджеты». Эти два плагина работают в паре. С помощью первого создается разметка страницы любой сложности. Второй добавляет содержимое внутрь разметки.

После активации плагинов возвращаемся на страницу, очищаем ее от ненужного текста и переключаемся в режим пейдж билдера. Здесь нам нужна кнопка «Layouts», которая открывает путь к готовым шаблонам страниц. Активируем опцию «Каталог макетов» и получаем доступ к 26-ти макетам страниц wordpress.

Через кнопку «Preview» можно расмотреть каждый шаблон в отдельности. Некоторые из них подходят для страницы «Контакты», так как имеют карты google, контактные формы и разметку с адресом, телефонами и почтой. Другие подойдут для landing page поскольку имеют красивый первый экран с фоновым изображением, поверх которого написан текст с призывом к действию и настраиваемой кнопкой «заказать», «купить», «отправить» и т.д.

Импорт шаблона страницы в page builder

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

Я сделаю импорт с нескольких шаблонов, один называется Fitness Gym, второй Sport и третий Simple Business Contact с контактной формой. Ненужные ряды я удалю, а нужные оставлю.

Чтобы импортировать шаблон нужно выбрать его предварительно выделив, затем нажать на кнопку «Вставить». После нажатия на кнопку откроется окно с выбором позиции для размещения контента. Можно заменить имеющийся контент на вашей web-странице нажав на replace или вставить его до или после. Поскольку у нас страница пустая то все равно, на какую кнопку мы нажмем. Но когда будем выбирать следующий шаблон нужно смотреть внимательно и вставлять его либо before или after размещенного контента чтобы не затереть нужные элементы.

Когда мы вставим содержимое шаблона на свой одностраничник на wordpress увидим такую разметку.

Разметка страницы сайта с использованием плагина Page Builder by Site Origin

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

Концепция одностраничника

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

Классический одностраничник состоит из нескольких экранов или блоков. На первом обычно находится красивое фоновое изображение и краткое, но емкое описание о том кто вы и чем занимаетесь. Попав на сайт, пользователь должен сразу увидеть, что вы предлагаете ему то, что он ищет. Для этого предназначен первый экран сайта. Так же здесь размещена кнопка с призывом к действию, который может повториться еще раз где-нибудь в шаблоне ниже. Первый экран сайта делается с помощью виджета Hiro (большое изображение с несколькими настройками).

Первый экран сайта

Второй экран – это список ваших особенностей или преимуществ. Делается он с помощью виджета для создания заголовков и Особенности (Features). Здесь оба виджета вставляются в один ряд, один под другим.

Список услуг

В третий экран я вставлю раздел «О нас» с кнопкой «Задать вопрос». Кнопку можно сделать с всплывающим модальным окном и контактной формой для вставки номера телефона клиента. Решается это с помощью плагинов Contact Form7 и Easy Modal.

О нас

Четвертый экран сделан с таблицей цен на услуги и кнопками заказа услуги.

Цены

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

Контактная форма и информация

Делаем меню с якорными ссылками

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

Настройка ссылки

Я сделал пять якорных ссылок в меню на пять разделов – Intro, About, Membership, Price, Contact. Они начинаются со знака # хештега или октоторп (по латински восемь концов) и ведут на id блока. После знака # пишется имя якоря. Например, чтобы сделать ссылку на блок About, ему нужно прописать id About в поле предназначенное для идентификаторов блоков. Чтобы сделать скролл на этот блок в меню делаем «Произвольную ссылку» #About. Все, теперь на этот ряд произойдет плавный скролл. У меня получилось вот такое меню. Фоновый цвет и цвет ссылок меняется в кастомайзере.

Настройка менюВид меню

Заключение

Понятно что, все тексты на странице, фото, шрифты и цвета нужно заменить и настроить под свои нужды. Но это уже будет сделать несложно, поскольку функционал данной темы и плагины позволяют сделать это даже неосведомленному человеку, нужно только быть внимательным и не бояться экспериментировать. Красивые фотографии можно взять на бесплатном фотостоке unsplash.com, ну а тексты лучше приготовить заранее и ни в коем случае не копипастить их на других интернет ресурсах, поскольку поисковые системы это легко вычисляют. Статьи нужно писать самостоятельно или заказать на бирже контента, например text.ru.

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

Как создать потрясающий одностраничный веб-сайт для вашего бизнеса

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

Одной из последних тенденций является создание одностраничного сайта. Его простота значительно упрощает создание, навигацию и обслуживание.

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

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

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

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

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

Рекомендуем прочитать: 10 потрясающих примеров одностраничных веб-сайтов

Как создать одностраничный сайт: видеоурок

Если вы предпочитаете учиться с помощью видео, посмотрите этот простой видеоурок о том, как создать одностраничный веб-сайт с помощью Zyro.

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

Итак, вы хотите создать одностраничный сайт.

Отлично, но прежде чем мы перейдем к тому, «как» все это. Мы действительно должны остановиться на секунду и подумать о том, «почему».

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

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

1. Решите, подходит ли одностраничный сайт
2. Планирование контента
3. Выберите свой шаблон
4. Разделите его на части
5. Изучите некоторые основные эффекты
6. Связывание
7. Дизайн для удобства пользователей
8. Донесите свою точку зрения (не заблудитесь) 930
Планирование для
9. Кроссплатформенность

1. Решите, подходит ли одностраничный сайт

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

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

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

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

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

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

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

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

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

2. Планирование контента

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

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

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

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

Тогда пора подумать о специфике вашего бизнеса. Фотогалереи и отзывы клиентов — общие черты одностраничного веб-сайта. Больше всего ваш веб-сайт должен сделать стратегический акцент на CTA (призыв к действию). Одностраничный веб-сайт — отличный способ избавиться от отвлекающих факторов и сфокусировать внимание пользователя на CTA.

Поймите свои приоритеты. Держите его обтекаемым. Меньше — больше. Одностраничный веб-сайт должен быть двумя вещами: простым и организованным.

3. Выберите шаблон своего веб-сайта

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

Вот что нужно учитывать при выборе правильного шаблона для одностраничного веб-сайта:

Ниша

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

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

Отзывчивость и совместимость с браузерами

В 2019 году мобильные устройства обеспечили 48 % просмотров веб-страниц по всему миру. Интересно, что 57 % от общего числа просмотров приходятся на Chrome, что делает его самым популярным браузером на рынке.

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

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

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

4. Делим

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

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

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

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

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

5. Изучите некоторые основные эффекты

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

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

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

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

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

6. Связывание

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

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

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

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

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

7. Дизайн для удобства пользователей

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

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

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

8. Донести свою точку зрения (не заблудитесь)

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

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

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

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

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

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

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

Нижний колонтитул

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

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

9. План SEO

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

Одностраничный веб-сайт или нет — он должен занимать первое место в вашем списке приоритетов.

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

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

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

Благодаря конструктору веб-сайтов Zyro все наши шаблоны для вашего нового одностраничного веб-сайта или обычного веб-сайта оптимизированы для SEO. Создание веб-сайта с помощью Zyro занимает всего одну минуту, и как только ваш веб-сайт будет запущен, он уже проиндексирован Google и готов подняться в рейтинге.

10. Кроссплатформенность

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

Благодаря конструктору веб-сайтов Zyro все наши шаблоны веб-сайтов прекрасно выглядят на мобильных устройствах, компьютерах и планшетах.

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

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

Вдохновение для одностраничного веб-сайта

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

КРО Трэвел Инжиниринг

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

Три

На этом одностраничном веб-сайте оператора мобильной связи Three веб-дизайнеры использовали 3D-рендеринг и закрепили якорное меню в верхней части страницы.

Мома

Moma — всемирно известная художественная галерея в Нью-Йорке — также использует одностраничный веб-сайт. Обратите внимание на заблокированное якорное меню в шапке сайта.

Как сделать одностраничный сайт на WordPress (шаг за шагом)

Хотите узнать, как сделать одностраничный сайт на WordPress?

Одностраничные веб-сайты легко создавать. Они также могут иметь более высокие коэффициенты конверсии, чем более сложные веб-сайты.

В этом уроке мы покажем вам, как создать свой собственный сайт на WordPress.

Может ли сайт быть одной страницей?

Да, сайт может быть одной страницей!

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

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

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

Что включить в свой одностраничный веб-сайт

Одностраничный веб-сайт может иметь все части многостраничного веб-сайта.

Для одностраничного веб-сайта о вашем бизнесе вам необходимо иметь следующие разделы:

Заголовок

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

О нас

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

В разделе «О нас» расскажите немного о себе. Это также отличное место, чтобы показать, что вы действительно понимаете потребности своего клиента.

Раздел «О нас» должен быть не только о вас. Вы должны объяснить, как ваш бизнес может помочь читателю.

Избегайте этих распространенных ошибок, убивающих конверсию, в разделе «О нас».

Услуги/Продукты

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

Если вы продаете услугу, объясните, что вы можете сделать для читателя. Сосредоточьтесь на преимуществах, которые принесет ваша услуга, а не на всех деталях планирования или оплаты. (Эта часть появится позже!)

Если вы продаете товар, покажите его фотографии. Опять же, не просто перечислите функции. Поговорите о том, как каждая функция может помочь читателю получить то, что он хочет.

Социальное доказательство

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

Социальное доказательство — это способ показать, что другим людям нравится ваша услуга или продукт. Некоторые примеры социального доказательства включают обзоры продуктов, отзывы, тематические исследования, упоминания в СМИ или отраслевые награды.

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

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

Узнайте, как использовать возможности социальных доказательств с помощью TrustPulse.

Призыв к действию

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

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

Или, возможно, вы хотите, чтобы они подписались на вас в социальных сетях или поделились одним из ваших сообщений. Вы можете использовать Smash Balloon для отображения контента социальных сетей на одностраничном веб-сайте.

Контактная информация

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

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

Заполняемая контактная форма позволяет посетителям легко получить ответы на свои вопросы.

Перед созданием одностраничного веб-сайта

Мы знаем, что вы хотите научиться создавать одностраничный веб-сайт на WordPress.

Но прежде чем начать, убедитесь, что у вас есть все необходимое.

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

Вы хотите иметь следующие вещи:

• Брендинг: Заранее решите, какие цвета и шрифты вы будете использовать. Также подготовьте свой логотип, если он у вас есть.
• Изображения:  Сохраните любые изображения продуктов или брендов, которые вы хотите использовать, в указанную папку.
• Копия:  Напишите, что вы собираетесь сказать в каждом разделе своего одностраничного веб-сайта.
• Список адресов электронной почты:  Если вы планируете использовать форму подписки по электронной почте, убедитесь, что у вас есть учетная запись у поставщика услуг электронной почты, такого как Mailchimp или ConvertKit.

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

Теперь вы готовы создать одностраничный сайт на WordPress. Всего за 6 шагов и все будет готово!

Шаг 1: Зарегистрируйтесь на хостинге

Во-первых, вы хотите подписаться на веб-хостинг и доменное имя.

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

Мы рекомендуем Bluehost для хостинга, потому что они также предлагают бесплатное доменное имя.

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

Шаг 2. Установите SeedProd

Следующим шагом будет установка подключаемого модуля SeedProd.

Самый простой способ — воспользоваться поиском плагинов для установки бесплатной версии SeedProd.

Поиск SeedProd. Затем нажмите Установить. Наконец, нажмите Активировать.

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

Шаг 3: Создайте новую целевую страницу

Теперь у вас есть новая опция в области администрирования WordPress. Сначала нажмите SeedProd » Целевые страницы . Затем нажмите кнопку Создать новую целевую страницу.

Поскольку все одностраничные веб-сайты разные, мы будем использовать пустой шаблон . Обещаем показать вам все этапы!

Появится окно. Введите название вашей страницы. Не волнуйтесь, вы можете изменить это позже, если вам нужно!

Нажмите Сохранить и начать редактирование страницы.

Шаг 4. Создайте свой одностраничный веб-сайт

Теперь вы находитесь в SeedProd Builder.

Глобальные настройки

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

Нажмите на значок шестеренки в нижнем левом меню, чтобы вызвать глобальные настройки.

Выберите шрифт заголовка и шрифт основного текста из раскрывающихся меню.

Вы также можете нажать на Темы шрифтов , чтобы увидеть некоторые рекомендуемые пары шрифтов.

Далее мы выберем глобальные цвета.

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

Как и в случае со шрифтами, нажмите Цветовые палитры  , чтобы увидеть готовые комбинации цветов.

Добавить раздел

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

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

Вы можете изменить цвет фона раздела, нажав на раздел, выделенный фиолетовым цветом.

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

Добавить блоки

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

Необходимые блоки будут зависеть от того, какую секцию вы строите. Вот наши рекомендации:

• О разделе: Используйте блоки Заголовок, Текст, Видео, и Изображение , чтобы рассказать историю происхождения вашего бизнеса.
Раздел
• «Услуги/продукты»: используйте блоки «Заголовок », «Текст», «Изображение», «Карусель изображений», или «Таблица цен » , чтобы поделиться своими предложениями.
Раздел
• Social Proof: используйте отзывы , комментарии Facebook, или Twitter Embed Timeline Блоки, чтобы показать, что другие люди говорят о вашей компании.
• Раздел «Призыв к действию». Пригласите посетителей присоединиться к вашему списку адресов электронной почты с помощью блока Optin Form или включите блок Button , ведущий на страницу бронирования или покупки.
Раздел контактов
• : включите свою контактную информацию в блок Text или добавьте блок Contact Form , чтобы люди могли связаться напрямую.

Шаг 5. Добавьте ссылки привязки

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

Сначала мы добавим якоря. Якоря — это невидимые блоки, которые называют раздел вашего одностраничного веб-сайта. Найдите блок Anchor в разделе Advanced Blocks.

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

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

Добавьте якорный блок для каждого раздела, который вы хотите связать.

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

Найдите блок Nav Menu в разделе Advanced Blocks.

Перетащите его в раздел, где вы хотите свое меню.

Нажмите на блок Nav Menu в live Builder. Это вызовет настройки меню.

Нажмите на образец ссылки, автоматически сгенерированный SeedProd. Вместо полного URL-адреса вы поместите имя привязки для первого раздела, на который хотите сослаться. Добавьте хэштег или знак решетки # перед названием анкора. Это должно выглядеть так:

Повторите этот процесс для всех якорей, которые вы сделали ранее.

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

Шаг 6. Добавьте призыв к действию (CTA)

Ваш призыв к действию (CTA) является важной частью вашего одностраничного веб-сайта. SeedProd позволяет легко добавлять различные CTA. Мы рассмотрим два наиболее распространенных: контактную форму и форму подписки.

Контактная форма

Найдите блок Контактная форма в разделе Расширенные блоки.

Перетащите его в нужный раздел.

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

Установка плагина займет всего несколько секунд.

Нажмите + Новая форма на панели редактирования.

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

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

Нажмите Сохранить , а затем кнопку X , чтобы выйти из окна WPForms.

Ваша контактная форма теперь находится на вашем одностраничном веб-сайте!

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

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

Щелкните вкладку Connect в верхней части конструктора.

Выберите службу электронного маркетинга и нажмите  Подключить .

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

Щелкните Сохранить сведения об интеграции.

Вернитесь на вкладку Design .

Найдите блок Optin Form в разделе Дополнительные блоки.

Перетащите его в нужный раздел.

Нажмите на блок Optin Form , чтобы настроить параметры. Он уже подключен к вашей службе маркетинга по электронной почте, поэтому вы готовы собирать электронные письма на своем одностраничном веб-сайте!

Примеры одностраничных веб-сайтов WordPress

Open Door Design

Чистая, простая цветовая схема Open Door Design позволяет портфолио по-настоящему сиять. Якорные ссылки знакомят вас со структурой команды, ценностями компании, образцами работ и объявлениями о вакансиях. Одностраничный веб-сайт заканчивается контактной формой. Интересно, что многие ссылки ведут на блог компании Medium.

Aprile

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

Always Creative

Домашняя страница Always Creative — прекрасный пример одностраничного веб-сайта для агентств. Якорные ссылки в фиксированной навигации позволяют легко переходить от их портфолио к описаниям их услуг и многому другому. Простая контактная форма приглашает посетителей связаться.

All N 1 House of Beauty

Салон All N 1 House of Beauty — потрясающее доказательство того, что формула одностраничного веб-сайта совсем не скучна. В полноэкранном вводном разделе есть кнопка, предлагающая пользователям прокрутить вниз для получения дополнительной информации о персонале салона, услугах и портфолио.

The Bancroft

Такому ресторану, как The Bancroft, нужен одностраничный веб-сайт, чтобы делать одну вещь: привлекать посетителей. Большие фотографии еды и пространства ресторана соблазняют посетителей продолжать прокручивать страницу. Затем интерактивное меню дразнит посетителей тем, что они могут съесть на следующий прием пищи. Конец страницы — это просто местонахождение ресторана, часы работы и контактная информация.

Лучше иметь одностраничный веб-сайт или несколько страниц?

Ответ зависит от потребностей вашего бизнеса.

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

Одностраничные веб-сайты легче оптимизировать для мобильных устройств.