Создайте одностраничный веб-сайт с одностраничной навигацией в WordPress (с бонусом)

Вы хотите создать веб-сайт для своего бизнеса, но у вас нет времени на создание большого? Или не готовы взять на себя долгосрочное обслуживание сайта?

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

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

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

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

Что такое одностраничная навигация?

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

"Простота есть основа утонченности." - Леонардо да Винчи

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

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

Каковы преимущества одностраничного веб-сайта с одностраничной навигацией?

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

• Во-первых, это мобильность. Это очень важно учитывать, когда дело доходит до SEO-оптимизации веб-сайта (поисковая оптимизация). По состоянию на 2021 год 70% граждан США используют мобильные устройства для поиска в Интернете. Подобные данные являются причиной того, что Google отдает предпочтение веб-сайтам, удобным для мобильных устройств. Благодаря одностраничному дизайну ваш веб-сайт с самого начала попадает в хорошие книги Google.

• Большинство людей предпочитают простой, красивый и содержательный веб-сайт, а не излишне длинный.
• Google подсчитывает авторитетность ссылок на уровне домена и страницы до 40%. Это еще одна область, в которой ваш одностраничный сайт будет иметь преимущество.
• Одностраничные сайты загружаются быстрее, чем сайты с кучей страниц. Учитывая тот факт, что в настоящее время люди имеют неограниченные возможности, быстро загружаемый сайт действительно не подлежит обсуждению.
• Одностраничные сайты просты в обслуживании.
• Поскольку на одностраничном веб-сайте вся информация размещена на одной странице, навигация с прокруткой значительно упрощает навигацию, а эффект плавной прокрутки успокаивает пользователя.

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

Как создать отдельный веб-сайт с одностраничной навигацией в WordPress

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

Итак, приступим…

Шаг № 1: Установите необходимые плагины WordPress

После того, как вы установили WordPress в своей системе. Вам необходимо установить следующие плагины WordPress:

• Элементор (бесплатная версия)
• ElementsKit (бесплатная и профессиональная версии)
• Метформа (бесплатная версия)

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

Шаг № 2. Создайте веб-сайт с помощью готовой страницы ElementsKit.

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

Чтобы создать свой веб-сайт, на панели инструментов WordPress перейдите на страницы ⇒ Добавить новый

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

• Нажмите кнопку ElementsKit (EK), когда откроется окно Elementor Builder.

• Перейдите на вкладку « Страница », выберите « Свадебная страница» и нажмите « Вставить ».

Теперь нажмите «Обновить», чтобы сохранить

Шаг № 3: Как добавить одностраничную навигацию Elementor с помощью ElementsKit

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

Теперь давайте рассмотрим пошаговый процесс добавления одной навигационной ссылки прокрутки страницы на ваш сайт WordPress:

3.1 Включите модуль прокрутки одной страницы

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

• Перейдите в: Панель инструментов WordPress ⇒ ElementsKit ⇒ Модули
• Включить одностраничную прокрутку
• Нажмите «Сохранить изменения », чтобы обновить

3.2 Включить прокрутку одной страницы в настройках страницы

• Нажмите значок «Настройки» в левом нижнем углу панели Elementor.
• Откройте вкладку «Настройки ElementsKit».
• Включить опцию прокрутки одной страницы

Примечание. Если вы не можете найти параметр «Настройка прокрутки одной страницы», вероятно, вы не активировали ElementsKit Pro .

3.3 Выберите стиль навигации

Теперь пришло время выбрать стиль навигации. ElementsKit предоставляет несколько вариантов навигации. Например, под кругом вы получаете «Масштабирование», «Заполнение», «Заполнение» и т. д. Для квадратного шаблона у вас будут такие параметры, как масштабирование, а как часть «Линии» вы получите такие параметры, как линия для увеличения, заливка линии , сокращение строки и т. д.

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

Чтобы выбрать пользовательский значок

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

3.4 Настройка других параметров навигации

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

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

3.5 Добавьте разделы страницы к навигационным ссылкам

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

• Наведите курсор на раздел и нажмите на значок « Редактировать раздел ».
• Перейдите на вкладку «Дополнительно» .
• Развернуть параметр прокрутки на странице ElementsKit
• Включите включение раздела , чтобы сделать раздел видимым
• Включите параметр «Не делать », чтобы добавить этот раздел в качестве одной из навигационных ссылок.
• Укажите имя для текста всплывающей подсказки . Текст всплывающей подсказки будет отображаться, когда кто-то наведет курсор на ссылку
• Наконец, нажмите «Обновить», чтобы сохранить

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

Примечание. Вы можете добавить раздел навигации, а не внутренний раздел. Таким образом, вы не найдете параметр ElementsKit Onpage Scroll на вкладке «Дополнительно» для внутреннего раздела или любого другого виджета.

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

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

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

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

• Перейдите в ElementsKit ⇒ Верхний нижний колонтитул ⇒ Нажмите « Добавить новый ».

• Выберите «Тип в качестве заголовка », «Условия» в качестве « Весь сайт », включите параметр «Активировать/деактивировать» и, наконец, нажмите « Сохранить изменения ».

• Теперь, чтобы добавить раздел заголовка, нажмите «Изменить» в созданном меню.
• Нажмите «Редактировать содержимое».
• Нажмите на кнопку ЕК и перейдите на вкладку Разделы
• Выберите понравившийся дизайн шапки и нажмите «Вставить».

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

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

Шаг № 5: Добавьте контактную форму в качестве модального всплывающего окна (БОНУС)

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

Чтобы добавить модальное всплывающее окно, я собираюсь заменить кнопку RSVP всплывающим модальным окном и добавить к нему контактную форму.

• Перейдите в ElementsKit ⇒ Виджеты ⇒ Включите всплывающее окно ⇒ Нажмите «Сохранить изменения».

• Перейдите на свою страницу All Page ⇒ домашнюю страницу (или как вы назвали свою страницу) и нажмите «Редактировать с помощью Elementor ».

• В режиме редактирования прокрутите до раздела RSVP и удалите кнопку RSVP.
• Перетащите модальное всплывающее окно на место кнопки RSVP.

• Чтобы изменить текст модальной кнопки, перейдите в «Содержимое» ⇒ «Кнопка-переключатель» ⇒ «Ярлык» и измените «Открыть модальный» на «RSVP» (или что угодно).

• Перейдите на вкладку «Стиль» ⇒ «Кнопка переключения», чтобы изменить цвет фона кнопки, цвет текста, радиус границы и другие параметры как для обычного вида, так и для просмотра при наведении.

• Теперь перейдите в раздел «Контент» и включите режим «Включить шаблон», чтобы мы могли добавить нашу контактную форму.
• Нажмите на всплывающую кнопку. После открытия щелкните значок редактирования на теле, чтобы открыть редактор Elementor.

• Найдите Metform, перетащите виджет
• Нажмите на форму редактирования, чтобы выбрать контактную форму.
• Выберите нужную форму из списка и нажмите «Сохранить и закрыть».
• Наконец, нажмите «Обновить», чтобы сохранить

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

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

Шаг № 6: Обновите и просмотрите предварительный просмотр Один веб-сайт с одностраничной навигацией

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

Если вы правильно выполнили все шаги, вы должны получить одностраничный веб-сайт с одностраничной навигацией в WordPress, как показано ниже:

Заворачивать

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

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

Чтобы узнать больше о создании веб-сайтов с помощью WordPress, Elementor и волшебного ElementsKit, следите за нами в наших учетных записях в социальных сетях.