Jak utworzyć kartę przełączania dla lepkiego nagłówka w Divi

Przyklejone nagłówki mogą skutecznie zapewniać użytkownikom dostęp do menu i innych ważnych wezwań do działania. Czasami jednak lepkie nagłówki mogą rozpraszać uwagę, szczególnie w przypadku dużych nagłówków na mniejszych ekranach. Zwykle uciekamy się do zmniejszania nagłówka i/lub ukrywania elementów w stanie przyklejenia, aby uzyskać więcej miejsca na treść. Jednak utworzenie zakładki przełączania dla tych lepkich nagłówków może być świetną alternatywą. Dołączenie małej zakładki przełączania pod przyklejonym nagłówkiem daje użytkownikom możliwość ukrycia/pokazania tego przyklejonego nagłówka, kiedy tylko chcą. W tym samouczku pokażemy, jak utworzyć kartę przełączania dla lepkiego nagłówka w Divi.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na zakładkę Sticky Header Toggle, którą zbudujemy w tym samouczku. Zwróć uwagę, jak karta przełączania staje się widoczna, gdy użytkownik przewinie poza wysokość nagłówka. Następnie użytkownik może przełączyć przyklejony nagłówek, klikając kartę. Gdy użytkownik przewinie się z powrotem na górę strony, nagłówek jest widoczny, a karta ukryta.

A oto kodek demonstrujący tę samą koncepcję.

Pobierz kartę Przełącz dla szablonu przyklejonego nagłówka ZA DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować szablon do biblioteki Divi, wykonaj następujące czynności:

1. Przejdź do Kreatora motywów Divi.
2. Kliknij ikonę przenośności w prawym górnym rogu strony.
3. W wyskakującym okienku przenoszenia wybierz kartę importu.
4. Wybierz plik do pobrania z komputera.
5. Następnie kliknij przycisk importu.

Po zakończeniu szablon będzie dostępny w Divi Theme Builder.

Stamtąd możesz otworzyć ustawienia szablonu i przypisać szablon do dowolnej lub wszystkich stron swojej witryny, aby przetestować wyniki. Możesz też kliknąć otwórz edytor szablonów nagłówków, aby edytować układ szablonu.

Przejdźmy do samouczka, dobrze?

Część 1: Przesyłanie gotowego szablonu nagłówka do kreatora motywów Divi

Aby przyspieszyć proces budowania tego samouczka, użyjemy gotowego nagłówka, który można bezpłatnie pobrać z naszego bloga.

Pobierz szablon

Aby uzyskać gotowy szablon nagłówka, przejdź do posta zawierającego nasz BEZPŁATNY szablon nagłówka i stopki dla pakietu układu tłumacza Divi.

Następnie wprowadź swój adres e-mail w opcji e-mail. Po zakończeniu zobaczysz przycisk „Pobierz pliki”. Kliknij przycisk, aby pobrać plik.

Po pobraniu pliku rozpakuj plik JSON.

Importuj szablon

Następnie przejdź do Divi> Theme Builder. I kliknij ikonę przenoszenia w prawym górnym rogu strony.

Wybierz zakładkę Importuj, wybierz właśnie rozpakowany plik JSON, odznacz opcje i kliknij przycisk importu.

Następnie wybierz opcję „Importuj je jako układy statyczne…” i ponownie kliknij przycisk Importuj.

Otwórz Edytor szablonów nagłówków

Po załadowaniu szablonu do kreatora motywów usuń stopkę szablonu i kliknij Zapisz zmiany. Następnie kliknij ikonę edycji, aby edytować niestandardowy nagłówek szablonu.

Otwórz warstwy modalne i usuń istniejący moduł kodu

W edytorze układu nagłówka otwórz menu ustawień u dołu strony i kliknij ikonę widoku warstw, aby otworzyć modalne warstwy. Pomoże nam to łatwiej uzyskać dostęp do naszych elementów Divi w przyszłości.

W trybie modalnym warstw kliknij przełącznik Otwórz/Zamknij wszystko, aby zobaczyć wszystkie elementy Divi. W drugim wierszu sekcji usuń moduł kodu. Nie będziemy potrzebować tego niestandardowego kodu w tym samouczku.

Część 2: Tworzenie przyklejonego nagłówka za pomocą zakładki Przełącz w Divi

Ustawienia sekcji

W przypadku tego nagłówka zamierzamy przykleić całą sekcję, tak aby nagłówek przyklejał się do góry strony podczas przewijania. Dodamy również do sekcji niestandardową klasę CSS, do której będzie można kierować później nasz niestandardowy kod.

Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

• Klasa CSS: et-divi-sticky-header
• Lepka pozycja: trzymaj się u góry

Tworzenie zakładki przełączania z modułem Blurb

Następnie stworzymy naszą zakładkę przełączania za pomocą modułu notki.

Aby to zrobić, dodaj nowy moduł notki na samym dole drugiego rzędu pod modułem menu.

Następnie otwórz ustawienia notki i zaktualizuj zawartość w następujący sposób:

• usuń zawartość tytułu
• usuń zawartość treści
• Użyj ikony: TAK
• Ikona: strzałka w górę (patrz zrzut ekranu)
• Kolor tła: #ffffff

Na karcie projekt zaktualizuj następujące elementy:

• Kolor ikony: #1a3066
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 40px
• Szerokość: 45px
• Wysokość: 45px

• Margines: 0px
• Zaokrąglone rogi: 12px na dole po lewej, 12px na dole po prawej
• Przekształć Przesuń oś X: 100%
• Animacja obrazu/ikony: brak animacji

UWAGA: Po ustawieniu transform translate Y na 100%, ikona przesunie się w dół dokładnie o 100% wysokości ikony (45px).

Na karcie Zaawansowane zaktualizuj następujące elementy:

• Klasa CSS: et-divi-sticky-toggle
• Pozycja: bezwzględna
• Lokalizacja: dolny prawy
• Przesunięcie w poziomie: 20px
• Indeks Z: -1

Teraz, gdy notatka ma pozycję bezwzględną (z translacją transformacji Y 100%), notatka (karta przełączania) będzie znajdować się tuż pod całą sekcją nagłówka. Jest to ważne, aby karta przełączania pozostała widoczna/klikalna, gdy pokażemy/ukryjemy nagłówek po kliknięciu karty przełączania.

Dodaj niestandardowy kod

Aby dodać funkcjonalność, której potrzebujemy dla tego przełącznika przyklejonego nagłówka, będziemy musieli dodać niestandardowe CSS i JQuery.

W tym celu dodamy nowy moduł kodu poniżej modułu notki.

W polu treści kodu wklej następujący kod CSS, upewniając się, że kod jest owinięty w niezbędne znaczniki stylu.

.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);
}

Pod końcowym tagiem skryptu otaczającym niestandardowy kod CSS wklej następujący kod JQuery, upewniając się, że kod został umieszczony w niezbędnych tagach skryptu.

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 &&
      !$stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.addClass("et-show-toggle");
    } else if (
      winScrollTop < headerHeight &&
      $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");
  });
});

Ostateczny wynik

Aby wyświetlić wynik końcowy, musisz przypisać szablon z nowym nagłówkiem do strony lub wszystkich stron Twojej witryny.

Aby to zrobić, zapisz układ i wyjdź z edytora szablonów nagłówków.

Następnie otwórz ustawienia szablonu (ikona koła zębatego) dla szablonu z nowym nagłówkiem zakładki lepkiego przełączania. Na karcie Użyj na wybierz Wszystkie strony i kliknij przycisk Zapisz.

WAŻNE: Spowoduje to wyświetlenie nagłówka na wszystkich stronach Twojej witryny. Upewnij się więc, że korzystasz ze strony testowej, a nie z witryny na żywo.

Teraz otwórz dowolną stronę w swojej witrynie, aby zobaczyć wynik.

Oto podgląd tego, jak będzie wyglądać na komputerze, tablecie i telefonie.

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak utworzyć kartę przełączania dla przyklejonego nagłówka. Może to być pomocne rozwiązanie zarówno dla programistów, którzy chcą zachować dostęp do ważnych treści nagłówka przyklejonego dla użytkowników, jak i dla użytkowników, którzy chcą ukryć lub pokazać ten nagłówek w dowolnym momencie. Mamy nadzieję, że przyda się to w przyszłym projekcie!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!