Одностраничные веб-сайты хорошо выполняют определенную работу: они помещают каждую часть информации, необходимой посетителю, в один свиток. Никаких щелчков вокруг. Нет второй страницы. Просто герой, о, услуги, контакт, сделано.
В этом руководстве рассказывается о том, как создать одностраничный веб-сайт с Elementor с помощью бесплатного плагина, легкой темы и нескольких виджетов из Master Addons, где заканчивается бесплатный набор Elementor. К концу у вас появится сайт, который будет чисто прокручиваться сверху вниз, со ссылками на навигацию, которые переходят в каждый раздел вместо загрузки новой страницы.
Если спешите, перейдите к ярлыку набора шаблонов внизу. Если хотите действительно понять, что вы строите, начните сверху.
Что такое одностраничный веб-сайт и когда он действительно работает
Одностраничный веб-сайт размещает весь ваш контент на одном URL-адресе. Вместо перехода к /about или /services, меню переходит к закрепленным разделам на той же странице.
Это хорошо работает для:
- Фрилансеры демонстрируют небольшое портфолио
- Посадочные страницы мероприятия (свадьба, конференция, запуск продукта)
- Малый сервисный бизнес (консультанты, парикмахеры, дизайнеры)
- Скоро появятся страницы или объявления MVP
- Личные резюме и портфолио
Это работает хуже для:
- Блоги, которым нужны отдельные URL-адреса публикаций для SEO
- Интернет-магазины с более чем несколькими товарами
- Сайты, ориентированные на несколько ключевых слов с длинным хвостом
Если ваш контент может поместиться примерно в 7-12 разделов, не испытывая чувства переполненности, один пейджер, вероятно, будет подходящим форматом.
Что вам нужно, прежде чем начать
Три ингредиента:
- Установка WordPress (самостоятельная или на любимом хосте).
- Бесплатно Элементор и бесплатное Привет, тема Элементора. Привет, корабли без какого-либо стиля, а это именно то, чего вы хотите, когда Элементор все рисует.
- Бесплатный Плагин Master Addons для виджетов Elementor не включает (фильтруемые галереи, таблицы цен, информационные окна, карусели команд, стиль контактной формы 7).
Большую часть этого можно построить только с помощью бесплатного Элементора, но несколько разделов становятся неловкими без дополнительных виджетов. Я отмечу их на ходу.
Выберите правильную тему и шаблон страницы
Установите Hello Elementor из Внешний вид > Темы > Добавить новое. Это чистый лист: нет боковых панелей, нет стилей по умолчанию, нет мнений. Элементор рисует всю страницу.
Раз активен:
- Создать новую страницу (Страницы > Добавить новое).
- Откройте его в Элементоре.
- Нажмите на механизм настройки внизу слева, перейдите к Макет страницыи выбирай Элементор Холст.
Холст полоски WordPress заголовок и нижний колонтитул. ваш один пейджер становится всей страницей.
Если вы хотите сравнить варианты тем, лучшие легкие темы WordPress для Elementor сводка новостей охватывает альтернативы, но Hello не просто так является стандартом по умолчанию.
11 разделов одностраничной схемы элементов
Большинство приличных пейджеров следуют одному и тому же ритму Вот стек, который я использую:
- Меню навигации (липкое)
- Раздел Героев
- О
- Услуги или функции
- Команда
- Портфолио или тематические исследования
- Цены
- Отзывы
- Контактная форма
- Социальные иконы
- Нижний колонтитул
Не каждому сайту нужны все одиннадцать, Одиночный фрилансер, вероятно, пропускает Team. консультант B2B может пропустить ценообразование. выберите те, которые действительно приближают вашего посетителя к контакту с вами, и бросьте остальные.
Создайте меню навигации
Сначала создайте меню в WordPress: Внешний вид > Меню > Создать новое меню.
Добавить Пользовательские ссылки с URL-адресами заполнителя. пока используйте хеш (#), за которым следует имя раздела: #about, #services, #pricing. Вы правильно их подключите в конце, как только каждый раздел будет иметь соответствующий идентификатор.
Сохранить меню.
Теперь, внутри Элементора, опустите раздел вверху с двумя столбцами. Поместите свой логотип в левый столбец. Для правого столбца у вас есть два варианта:
- Свободный Элементор: Используйте виджет меню WP.
- Мастер Аддоны: Используйте Виджет меню навигации. Он поддерживает мегаменю, эффекты наведения, мобильный переключатель и берет только что созданное меню без дополнительной настройки.
Сделайте раздел липким Настройки раздела > Дополнительно > Эффекты движения > Липкий: Верх. Если вы хотите полного прохождения, липкий заголовок в руководстве Elementor ломает.
Создайте секцию героев
Герой задает тон Коротко: обещание, поддерживающая линия, кнопка.
Добавить новый раздел прямо под меню.Откройте раздел Настройки и установите:
- Ширина контента: Полная ширина
- Высота: Подходит для экрана
- Вертикальное выравнивание: Средний
Опустите большой заголовок, одну строку описательного текста и кнопку. Используйте фоновое изображение или сплошной цвет в стиле раздела. темное наложение помогает читать текст, когда фоновое фото занято.
Если вы хотите получить фору, Master Addons отправляет шаблоны разделов героев в Библиотека шаблонов. Импортируйте один, поменяйте местами копию и изображение, и вы закончите за несколько минут.
Добавить раздел "О программе"
Здесь ничего не причудливого Стандартный раздел с двумя колонками:
- Левый столбец: фотография (ваша, вашей команды или вашего рабочего пространства)
- Правый столбец: Заголовок + текстовый редактор + кнопка
Направьте ссылку привязки кнопки в разделе Услуги ниже (“Смотрите, что я делаю”), чтобы посетители, которые прокручиваются мимо About, по-прежнему имели четкий путь вперед.
Создайте раздел услуг
Здесь свое место зарабатывает виджет Infobox.Free Elementor имеет Icon Box, но ограничен.The Master Addons Виджет Infobox дает вам несколько макетов, расположение значков, состояния наведения и поле URL-адреса во всем поле, чтобы можно было щелкнуть всю карту.
Создать раздел, добавить заголовок (“Services” или “What I Do”), затем внутренний раздел, разбитый на три или четыре столбца.Опустите один Инфобокс на столбец.
Каждый ящик должен отвечать на один вопрос: для чего сервис, для кого он и какой результат он выдает Не сбрасывайте сюда списки функций Для этого и предназначена выделенная страница услуг, а на одном пейджере ее нет.
Добавить раздел команды
Пропустите этот раздел, если вы одиноки.
Для 1-4 человек: использовать виджет Участник команды. каждый участник получает карту с фотографией, именем, ролью, короткой биографией, и социальными значками.
Для больших команд: используйте карусель членов команды. она показывает трех или четырех членов одновременно и прокручивается горизонтально, что сохраняет раздел визуально содержащимся.
Держите все фотографии команды одинаковой культуры и соотношения сторон. несовпадающие размеры головы в сетке выглядят неряшливее, чем вы ожидали. Документация: Виджет "Член команды" и Члены команды Карусель. Автономный гид см. как создать раздел членов команды.
Добавить фильтруемый портфель
Галерея изображений Free Elementor подходит для статической сетки, но не фильтруется по категориям.
Если вы хотите, чтобы посетители нажали “Branding” или “Web” и произвели перестановку сетки, вам нужна фильтруемая галерея. у Master Addons есть один. Он поддерживает вкладки категорий, всплывающий лайтбокс, ленты (например, значки “NEW” или “FEATURED”) и наложение метаданных на ховер.
Настройка: загляните Фильтруемый виджет галереи, загрузить изображения, пометить каждое с категорией, и стиль. больше контекста в Обновление фильтруемых галерей Elementor если вы хотите увидеть, как он сочетается с альтернативами.
Добавить таблицы цен
Если вы продаете продуктивные услуги или подписки, раздел цен конвертируется лучше, чем расплывчатый “contact для quote.”
У Free Elementor нет виджета ценообразования, так что это территория Master Addons.The Виджет таблицы цен находится в бесплатной версии и дает вам заголовки, цену, список функций со значками чеков или крестиков, значок для рекомендуемого плана и кнопку CTA.
Три столбца - это сладкая точка для одного пейджера Посетители сканируют глаза слева направо, а средний столбец - это место, где вы поместите план, который вы действительно хотите, чтобы они выбрали. Отметьте его “Самый популярный” лентой и стилизуйте его немного по-другому (более мягкая граница, заполненная кнопка).Еще советы по шаблону в Виджет таблицы цен Elementor пост.
Добавьте отзывы клиентов
Два-три настоящих отзыва били стену из фальшиво выглядящих.
Базовым макетом занимается Свидетельская карусель Free Elementor Если вам нужна более чистая одноколоночная версия (одна большая цитата, которая вращается), карусель Team Members в Master Addons, как ни странно, тоже хорошо работает здесь: бросайте фотографии клиентов в слоты для участников и помещайте цитату в поле био.
Попросите отзывы, в которых упоминается конкретный результат (“got 3 клиентов в первый месяц”), а не общая похвала (“отлично работать с”).Убедительна специфика. расплывчатые прилагательные являются наполнителем.
Добавить контактную форму
Установите бесплатную Плагин контактной формы 7 из каталога плагинов Создайте форму, возьмите шорткод.
В Elementor опустите виджет Text Editor и вставьте шорткод. форма будет отображаться, но будет выглядеть просто.
Вот тут-то и берет верх виджет Контактная форма 7 Master Addons Вместо вставки шорткода он позволяет стилизовать метки, поля, границы, сообщения об ошибках, кнопку отправки с панели Элементор. нет пользовательских CSS.
Полное прохождение в Контактная форма 7, документ о настройке. Если вам нужен значок "Шрифт потрясающий" внутри кнопки "Отправить", там есть отдельный пост применение значков шрифта Awesome к кнопкам CF7.
Добавить социальные значки
Бесплатный Элементор включает виджет Социальные значки.Он охватывает Facebook, X (ранее Twitter), LinkedIn, Инстаграм, YouTube, и горстка других. вы контролируете цвет (бренд или пользовательский), размер, форму (округленный квадрат или круг), и расстояние.
Положите их выше или внутри вашего подножия. держите счет на трех или четырех платформах, где вы на самом деле активны.Двенадцать значков, половина из них мертвые аккаунты, выглядят хуже, чем три здоровых.
Расположите нижний колонтитул
На одном пейджере нижний колонтитул может быть однострочным.
Добавить раздел под контактной формой, один столбец, по центру Короткая строка авторских прав (© 2026 Your Name. All rights reserved.) делает работу Если вам нужна политика конфиденциальности или условия ссылки, опустите их здесь тоже. больше ничего не принадлежит в одном пейджере footer.
Свяжите меню с каждым разделом (часть, в которой большинство людей ошибаются)
Это шаг, который спотыкает новичков вверх Пункты меню, которые вы настроили в начале (#about, #services, и так далее) пока ничего не делать, потому что в разделах нет совпадающих ID.
Вот исправление, сделанное один раз на раздел:
- Наведите курсор на раздел, щелкните шеститочечный дескриптор посередине, чтобы выбрать его.
- Иди в Продвинутый вкладка на левой панели.
- Прокрутить до ИДЕНТИФИКАТОР CSS.
- Введите идентификатор без хеша. Итак
about, нет#about.
Сохранить. повторите для каждого раздела, в который вы хотите перейти в меню. Если вы предпочитаете не проводить якоря рукой (говорит на длинных постах в блоге вместо посадочной страницы ♪ плагин оглавления автоматически создает для вас эти ссылки перехода.
Тогда возвращайся к Внешний вид > Меню и подтвердить ссылку каждого пункта меню - хеш-версия (#about, #services, #pricing). Сохранить меню.
Перезагрузите интерфейс, щелкните пункт меню, и страница должна плавно прокручиваться до соответствующего раздела. Если он резко скачет вместо прокрутки, в теме отсутствует правило CSS плавной прокрутки. Добавьте это к Настройка > Дополнительный CSS:
html { scroll-behavior: smooth; }Сделано.
Пропустите ручную работу: начните с набора шаблонов
Если вам не хочется строить одиннадцать секций с нуля, Master Addons поставляет более 30 полных Шаблонные наборы, многие из них один пейджер для конкретных отраслей (агентство, ресторан, портфолио, SaaS, консультант).
Импортируйте комплект, меняйте изображения и копируйте, настраивайте цвета в соответствии со своим брендом, и вы будете жить днем, а не неделей. The как импортировать шаблоны Elementor пост покрывает шаг импорта, если вы никогда этого не делали.
Так же я рекомендую начинающим начинать. строить из рабочего шаблона, узнавать, как структурирован каждый раздел, а затем настраивать оттуда.
Советы по скорости и производительности для одностраничных сайтов
Поскольку весь сайт живет на одном URL, этот URL-адрес должен загружать каждое изображение, шрифт и сценарий для каждого посетителя. Раздутый один пейджер - убийца конверсии.
Быстрые победы:
- Сжимайте каждое изображение перед загрузкой (TinyPNG, Squoosh или плагин, например Imagify).
- Используйте формат WebP, где это возможно. The лучшие плагины оптимизатора изображений WordPress облава охватывает варианты.
- Ленивая загрузка изображений ниже складки (Elementor обрабатывает это по умолчанию в современных версиях).
- Ограничьте количество веб-шрифтов двумя семействами, макс.
- Минимизируйте CSS и JS с помощью плагина кэширования (LiteSpeed Cache, WP Rocket или Autoptimize).
Больше в как ускорить сайты Elementor. Master Addons v3 в три раза быстрее, чем v2, и загружает виджет CSS и JS только для фактически используемых виджетов, что имеет большее значение на сайте с одним URL-адресом, чем на многостраничном.
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ
Могу ли я создать одностраничный веб-сайт с Elementor бесплатно?
Да. бесплатный Элементор плюс бесплатная тема Hello Elementor плюс бесплатный плагин Master Addons охватывает каждый раздел в этом руководстве. вам не нужен Pro для одного пейджера, если вам не нужны дополнительные виджеты или собственный конструктор тем.
Какая тема лучше всего подходит для одностраничного сайта Elementor?
Привет Элементор. поставляется с нулевым стилем, быстро загружается и позволяет Элементору нарисовать всю страницу. Любая самоуверенная тема (Astra, GeneratePress) тоже работает, но они добавляют стилистику, которую придется переопределить.
Как заставить ссылки меню переходить в разделы вместо загрузки новой страницы?
Назначьте идентификатор CSS каждому разделу (раздел > Дополнительно > идентификатор CSS, без хеша), затем свяжите пункт меню с тем же именем с префиксом хеш. Идентификатор раздела about соответствует URL-адресу меню #about.
Подходит ли одностраничный веб-сайт для SEO?
Для одного сфокусированного ключевого слова или локального намерения, да. для более широкого SEO, охватывающего несколько тем, нет. один пейджер конкурирует за одно основное ключевое слово (заголовок страницы). многостраничные сайты могут быть нацелены на десятки отдельных.
Сколько времени занимает создание одностраничного сайта в Elementor?
С нуля, 4-8 часов для чистой сборки Начиная с набора шаблонов, 1-3 ч. большую часть времени уходит на копирование и выбор изображения, а не на саму работу Elementor.
Завершение
Одностраничный сайт с Elementor не является сложным. выберите Hello Elementor, установите страницу на Canvas, создайте одиннадцать разделов (или меньше), назначьте идентификаторы CSS и подключите меню к хеш-ссылкам. Готово.
Где Master Addons ускоряет процесс:
- Виджет меню навигации с мегаменю и мобильным переключателем
- Виджет Infobox для услуг
- Фильтруемая галерея для портфолио
- Таблица цен (бесплатно) со встроенной лентой и списком функций
- Контактная форма 7 стилистика без написания CSS
- Члены команды и члены команды Карусель
- Более 30 полных наборов шаблонов, если вы хотите пропустить сборку вручную
Скачать the плагин бесплатных главных дополнений и начните с того участка, который вы наименее уверенно строите с нуля. Работайте оттуда вовне.
Связанное чтение: 100 лучших дополнений Elementor · Как импортировать шаблоны элементов · Виджеты и расширения · Мастер Аддоны Цены
