CodeWatchers

Как создать привлекательную вкладку с переключателем липкого заголовка в Divi

Rifat Divi Tutorials Jul 8, 2021

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

Как создать привлекательную вкладку с переключателем липкого заголовка в Divi

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

Присоединяйтесь, и давайте приступим к нашему сегодняшнему дизайну.

Предварительный просмотр дизайна

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

Создавайте потрясающие сайты

С лучшим бесплатным конструктором страниц Elementor

Начать сейчас

Часть первая: импорт и настройка шаблона

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

Импортировать шаблон

Мы надеемся, что вы успешно загрузили файл JSON по указанной выше ссылке. Теперь разархивируйте его и получите файл JSON. Затем перейдите в панель управления WordPress и в параметре создания тем щелкните значок переносимости.

Перейдите к параметру импорта, снимите флажки с отмеченных параметров и нажмите «Импортировать шаблон Divi Theme Builder».

Теперь нажмите «Импортировать как статический макет» и двигайтесь вперед.

Теперь наш макет импортирован. Удалите раздел нижнего колонтитула, нажмите «Сохранить изменения» и откройте настройки редактирования.

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

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

Часть вторая: создание вкладки переключения с закрепленным заголовком

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

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

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

  • Класс CSS: et-divi-sticky-header
  • Липкая позиция: придерживаться верха

Переключить создание вкладки из модуля Blurb

Мы добавим модуль рекламных сообщений в модуль меню.

Настройка содержания рекламного сообщения

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

  • Удалить содержимое заголовка
  • Удалить содержимое тела
  • Значок использования: ДА
  • Значок: стрелка вверх (см. Снимок экрана)
  • Цвет фона: #ffffff

Настройки дизайна рекламного объявления

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

  • Цвет значка: # 1a3066
  • Использовать размер шрифта значка: ДА
  • Размер шрифта значка: 40 пикселей

Откройте настройку размера и внесите следующие изменения.

  • Ширина: 45 пикселей
  • Высота: 45 пикселей
  • Поля: 0 пикселей по нижнему краю
  • Закругленные углы: 12 пикселей внизу слева, 12 пикселей внизу справа.
  • Преобразовать преобразовать ось Y: 100%
  • Анимация изображения / значка: без анимации

Расширенные настройки Blurb

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

  • Класс CSS: et-divi-sticky-toggle
  • Позиция: Абсолютная
  • Расположение: внизу справа
  • Горизонтальное смещение: 20 пикселей
  • Индекс Z: -1

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

Часть третья: добавление кода

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

Добавить код CSS

Добавьте следующий код CSS в модуль кода. Обязательно поместите их в тег стиля . 

.et-divi-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}
 
.et-divi-sticky-toggle:hover {
  cursor: pointer;
}
 
.et-divi-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}
 
.et-divi-sticky-header {
  transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}
 
.et-divi-sticky-toggle .et-pb-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}
 
.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
  transform: rotateX(180deg);
}

Добавить код JQuery

Добавьте код JQuery в модуль кода и поместите их в тег Script . 

jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-divi-sticky-header");
  $stickyToggle = $(".et-divi-sticky-toggle");
 
  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop >= headerHeight AndAnd
      !$stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.addClass("et-show-toggle");
    } else if (
      winScrollTop < headerHeight AndAnd
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });
 
  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

Часть четвертая: окончательные настройки

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

Окончательный дизайн

Это результат того, что мы сделали до сих пор. Надеемся, что вас это устраивает.

Заключение

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

Divi WordPress Theme