Что нужно для создания липкого бокового меню с помощью Elementor

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

  • Обычный заголовок – это будет запасной заголовок, который ваш сайт использует для мобильных посетителей. Вы скроете этот заголовок для посетителей настольных компьютеров и планшетов, чтобы вместо этого использовать заголовок боковой панели.
  • Шаблон раздела – вы создадите отдельный шаблон раздела для вашего свернутого заголовка боковой панели (состояние по умолчанию).
  • Всплывающее меню – это полная навигация по боковой панели, которая появляется, когда посетитель нажимает на свернутое боковое меню. В приведенном выше примере всплывающее окно содержит фактические ссылки меню для “Домашняя страница”, “О программе” и т. Д.
  • Шаблон страницы – это то, что позволяет Elementor отображать заголовок боковой панели вместе с обычным контентом.

Поскольку вам нужно будет работать с всплывающими окнами и шаблонами тем, вам нужен Elementor Pro, чтобы следовать этому руководству. Если у вас его еще нет, вы можете приобрести свою копию здесь.

Как создать липкое боковое меню

1. Скрыть заголовок на рабочем столе и планшете

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

Для этого откройте шаблон заголовка с помощью Elementor Theme Builder (Шаблоны → Конструктор тем → Заголовок. Затем найдите имя заголовка и нажмите Изменить с помощью Elementor).

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

После того, как вы открыли интерфейс Elementor, откройте настройки для раздела, который содержит ваш заголовок:

  • Перейдите на вкладку Дополнительно.
  • Найдите адаптивные настройки.
  • Используйте переключатель, чтобы включить «Скрыть на рабочем столе» и «Скрыть на планшете» в настройках видимости.

2. Создайте новый шаблон для навигации по боковой панели

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

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

Чтобы создать шаблон, перейдите в область Шаблоны на панели мониторинга:

  1. Перейдите на вкладку Раздел.
  2. Нажмите Добавить новое.
  3. Назовите его Sticky Side-Nav Header.

Примечание # 2 – вы создаете обычный шаблон “Section”, а не шаблон “Header” с помощью Theme Builder (даже если вы собираетесь использовать этот шаблон в качестве заголовка sticky side–nav).

Настройка параметров раздела

Сначала создайте новый раздел с одним столбцом. В настройках макета настройте раздел следующим образом:

  • Ширина содержимого: полная ширина
  • Разрыв между столбцами: пробел отсутствует
  • Высота → Минимальная высота: 100vh (это настраивает заголовок боковой панели на 100% вертикальной высоты)
  • Положение столбца: Stretch
  • HTML-тег: заголовок (это необязательно, но для SEO полезно настроить его таким образом)

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

Configure Column Settings

Next, open the settings for the single column inside your section:

  • На вкладке Макет установите раскрывающийся список Выравнивание по вертикали равным пробелу междуними.
  • На вкладке Дополнительно добавьте отступ размером 50 пикселей в нижней части столбца.

Добавить виджеты

Теперь вы можете добавить виджеты для отображения в боковом меню. Для нашего примера мы добавили:

  • Логотип
  • Значок для открытия полного меню
  • Значки социальных подписчиков

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

Логотип сайта:

Добавьте изображение логотипа с помощью виджета изображения.

Значок:

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

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

Социальные иконки:

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

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

И это все! Обязательно опубликуйте / обновите шаблон раздела, а затем вернитесь на панель управления WordPress.

3. Создайте новый одностраничный шаблон, который включает в себя навигацию по боковой панели

Затем вам нужно использовать Elementor Theme Builder для создания нового одностраничного шаблона, который включает в себя как содержимое вашего сайта, так и заголовок sticky side-nav.

Для этого перейдите в Шаблоны → Конструктор тем:

  • Перейдите на вкладку «Одна страница»
  • Нажмите Добавить новое
  • Убедитесь, что в качестве типа шаблона выбрана одна страница
  • Назовите его страницей с фиксированной боковой навигацией

В редакторе Elementor создайте раздел с двумя столбцами:

  • Левая колонка – это будет держать липкую боковую панель
  • Правый столбец – это будет содержать обычный контент вашего сайта

Настройте правый столбец (содержимое)

Чтобы добавить свой обычный контент в правый столбец, добавьте виджет Post Content.

Настройте левый столбец (заголовок боковой панели)

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

Кроме того, перейдите в Дополнительные настройки для этого столбца и установите значение Z-index на 10000 (десять тысяч) и установите адаптивные элементы управления, чтобы включить скрытие на мобильномтелефоне. Это гарантирует, что только посетители настольных компьютеров и планшетов увидят ваш заголовок sticky side-nav.

Настройка интервала между столбцами / Макет

Прямо сейчас ваша боковая навигация занимает 50% страницы. Чтобы исправить это, выберите левый столбец (с боковой навигацией) и установите его ширину столбца равной 5% на вкладке Макет. Это должно автоматически сделать правый столбец равным 95%.

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

selector {
    width: 60px;
}

Этот CSS гарантирует, что боковая навигация всегда остается узкой, установив ширину, равную 60 пикселям. Не стесняйтесь регулировать это число в соответствии с вашими предпочтениями, просто не отклоняйтесь слишком сильно от 60px.

Настройка эффектов движения
Теперь мы хотим, чтобы боковая навигация всегда оставалась фиксированной на экране.
Для этого нажмите на шаблон в правой колонке:
Перейдите на вкладку Дополнительно. Нажмите Эффекты движения.
Установите Sticky в Top. Установите Sticky на рабочий стол и планшет.

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

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

4. Создайте всплывающее меню навигации

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

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

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

Настройка параметров всплывающего окна

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

  • Ширина: 450px
  • Высота: подходит для экрана
  • Горизонтальное положение: слева
  • Наложение: скрыть (выключено)
  • Анимация входа: слайд слева
  • Выход из анимации: выдвижение влево

Чтобы убедиться, что ваше всплывающее окно появляется справа от существующей боковой навигации, когда оно выдвигается, вам нужно добавить поле:
Перейдите на вкладку 
Дополнительно.
Найдите 
настройки полей.
Добавьте 60 пикселей влево (или вправо, если вы решили отобразить липкую боковую навигацию на другой стороне).
Добавьте 20 пикселей под 
заполнением.

Добавьте навигационное меню

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

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

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

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

Для этого перейдите в раздел Шаблоны → Сохраненные шаблоны и отредактируйте существующий шаблон заголовка Sticky Side-Nav.

Откройте настройки для значка навигации. Затем:

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

После того, как вы установили ссылку равной Popup:

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

Затем обновите шаблон раздела.

6. Протестируйте и наслаждайтесь

На данный момент, вы должны быть все готово! Откройте страницу на своем сайте и убедитесь, что ваш новый заголовок sticky side-nav работает должным образом.

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

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