Как создать скользящую боковую панель в Divi

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

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

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

Давайте приступим к делу!

Sneak Peek

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

Скачайте макет БЕСПЛАТНО

Чтобы ознакомиться с макетом скользящей боковой панели из этого руководства, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

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

СКАЧАТЬ

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

Чтобы импортировать макет раздела в свою библиотеку Divi, перейдите в библиотеку Divi.

Щелкните кнопку Импорт.

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

Затем нажмите кнопку импорта.

После этого макет раздела будет доступен в Divi Builder.

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

Давайте перейдем к руководству, не так ли?

Что вам нужно для начала

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Выбрать готовый макет».
   
4. Выберите пакет макета мероприятия и щелкните, чтобы использовать макет домашней страницы мероприятия.
   

Как создать скользящую боковую панель в Divi

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

Создание раздела

Во-первых, давайте добавим на страницу новый обычный раздел.

Затем переместите раздел вверху страницы.

Настройки раздела

Откройте настройки раздела и обновите положение, которое нужно зафиксировать, следующим образом:

• Позиция: фиксированная
• Индекс Z: 9999

На вкладке дизайна обновите размер и интервал следующим образом:

• Ширина: 350 пикселей (компьютер и планшет), 100% (телефон)
• Высота: 100%
• Отступ: 100 пикселей сверху, 0 пикселей снизу.

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

Затем на вкладке «Дополнительно» присвойте разделу класс CSS:

• Класс CSS: et-push-sidebar

После того, как класс css размещен, задайте для раздела цвет фона:

• Цвет фона: # 1a1e36

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

• Ширина правой границы: 2 пикселя
• Цвет правой границы: #eeeeee

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

Создание кнопок переключения боковой панели

Для переключения боковой панели будут использоваться две кнопки. Первой кнопкой будет значок «X», который закроет мобильную версию боковой панели после ее открытия. Значок «X» будет построен с использованием модуля аннотации. Вторая - это основная кнопка переключения, которую мы создадим с помощью модуля рекламного объявления, который вращается с вертикальным текстом и располагается абсолютно рядом с боковой панелью / разделом.

Давайте перейдем к этому.

Создание ряда для кнопок

Создайте новую строку из одного столбца внутри раздела / боковой панели.

Откройте настройки строки и обновите следующее:

• Ширина желоба: 1
• Ширина: 100%
• Padding: 0px сверху, 0px снизу

На вкладке «Дополнительно» обновите параметры положения следующим образом:

• Позиция: Абсолютная
• Индекс Z: 1

Создание значка закрытия «X»

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

Содержание

Затем откройте настройки рекламного ролика. На вкладке содержимого выньте заголовок и содержимое основного текста и добавьте значок X в рекламное объявление.

• Значок использования: ДА
• Значок: x (см. Снимок экрана)

Дизайн

На вкладке дизайна обновите следующее:

• Цвет значка: #eeeeee
• Расположение значка изображения: слева
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 40 пикселей
• Ширина: 50 пикселей

Затем немного опустите значок, добавив следующее свойство transform translate:

• Transform Translate X: 100 пикселей
• Transform Translate Y: -10px

Передовой

На вкладке «Дополнительно» отключите рекламное объявление на планшете и компьютере, чтобы мы видели его только на дисплее телефона.

• Отключить: планшет и компьютер

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

• Класс CSS: et-slide-push-close
• Позиция: фиксированная
• Расположение: вверху справа

Это касается кнопки закрытия значка «X».

Создание кнопки переключения главной боковой панели

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

Содержание

Обновите заголовок и щелкните значок стрелки вниз.

• Название: Информация о событии
• Значок использования: ДА
• Значок: стрелка вниз (см. Снимок экрана)

Затем добавьте цвет фона к рекламному объявлению.

• цвет фона: #eeeeee

Дизайн

На вкладке дизайна обновите следующее:

• Цвет значка: # 1a1e36
• Расположение изображения / значка: слева
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 25 пикселей
• Шрифт заголовка: Overpass
• Толщина шрифта заголовка: полужирный
• Стиль шрифта заголовка: TT
• Цвет текста заголовка: # 1a1e36
• Интервал между заглавными буквами: 2 пикселя
• Высота строки заголовка: 1,2 мм
• Padding: 0,6em сверху, 1em слева, 1em справа
• Закругленные углы: 5 пикселей по двум нижним углам.

Чтобы расположить и повернуть рекламное объявление за пределами раздела, используйте следующие параметры преобразования:

• Transform Translate Y: 100 пикселей
• Трансформировать поворот по оси Z: -90 градусов
• Transform Origin: вверху справа

Передовой

На вкладке «Дополнительно» обновите следующее:

• Класс CSS: et-slide-push-toggle
• Позиция: Абсолютная
• Расположение: справа по центру

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

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

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

Затем вставьте следующий код в модуль кода.

<style>
  #page-container, #et-main-area, .et-push-sidebar, .et-slide-push-toggle .et-pb-icon {
    transition: all 300ms !important;
  }
/*
 * use if using blank template with no header or footer
 * 
  #page-container.et-push-sidebar-active {
    margin-left: 350px;
  }
*/  
  #page-container.et-push-sidebar-active #et-main-area {
    margin-left: 350px;
  }  
  .et-push-sidebar {  
    transform: translateX(-100%);
  }
  .et-fb .et-push-sidebar {  
    transform: translateX(0%);
  }
  .et-push-sidebar-active .et-push-sidebar {
    transform: translateX(0%);
  }
  .et-slide-push-toggle, .et-slide-push-close {
    cursor:pointer;
  }
  .et-push-sidebar-active .et-slide-push-toggle .et-pb-icon {
    transform: rotate(180deg);
  }
@media all and (max-width: 767px) {
  .et-push-sidebar-active .et-push-sidebar {
    overflow: scroll !important;
    overscroll-behavior: contain;
  }
  #page-container.et-push-sidebar-active #et-main-area, #page-container.et-push-sidebar-active {
    margin-left: 0px;
  }  
}  
</style>
<script>
(function($) {
  $(document).ready(function(){
    $('.et-slide-push-toggle').click(function(){
      $('#page-container').toggleClass('et-push-sidebar-active');
    });
    $('.et-slide-push-close').click(function(){
      $('#page-container').removeClass('et-push-sidebar-active');
    });    
  });
})( jQuery );   
</script>

Создание строки содержимого боковой панели

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

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

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

Откройте настройки новой строки и обновите следующее:

• Ширина: 100%
• Высота: 100%
• Заполнение: 5% сверху, 5% снизу, 5% слева, 5% справа.

На вкладке «Дополнительно» обновите параметры переполнения следующим образом:

• Горизонтальное переполнение: прокрутка (компьютер и планшет), авто (телефон)
• Вертикальное переполнение: прокрутка (компьютер и планшет), авто (телефон)

Заполнение боковой панели контентом / модулями

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

Конечный результат

Проверьте окончательный результат на живой странице.

Добавление скользящей боковой панели push к шаблону страницы

Если вы хотите использовать эту боковую панель на всех своих страницах по умолчанию, вам нужно будет добавить боковую панель / раздел в шаблон страницы с помощью Divi Theme Builder.

Сохранить макет раздела в библиотеку Divi

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

Создать новый шаблон страницы

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

Добавление скользящей боковой панели в шаблон страницы

Затем нажмите, чтобы отредактировать шаблон страницы.

Внутри редактора макета шаблона добавьте новый полноразмерный раздел.

Затем вставьте в раздел модуль Fullwidth Post Content.

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

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

Сохранить настройки построителя тем

Обязательно сохраните изменения в построителе тем.

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

Последние мысли

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

Я с нетерпением жду вашего ответа в комментариях.

Ваше здоровье!