Dolne szuflady to przydatne dodatki do każdego Witryna internetowa, ponieważ przechowują dodatkowe treści łatwo dostępne dla użytkowników. Szuflady stopki to kontenery treści internetowych (takie jak sekcja Divi), które można otwierać i zamykać, klikając przycisk lub najeżdżając na nie kursorem. To tak, jakby mieć mały zapas na treści premium.
W tym samouczku zaprojektujemy pływającą szufladę stopki w Divi. Dodamy szufladę stopki do globalnego obszaru stopki szablon strony internetowej aby szuflada stopki była dostępna w całej witrynie z normalną zawartością stopki.
Dzięki procesowi, którego będziemy używać, każdą sekcję Divi (i jej zawartość) można przekształcić w szufladę stopki w ciągu kilku minut.
Jak dodać szablon szuflady stopki do witryny Divi
Dodanie tego modelu spowoduje zastąpienie szablon strony internetowej domyślnie (jeśli masz) na swojej stronie Divi. Sugerujemy dodanie go do witryny testowej, aby nie zepsuć niczego w działającej witrynie.
Aby samodzielnie zaimportować stały szablon szuflady stopki Witryna internetowa, rozpakuj pobrany plik ZIP, aby uzyskać dostęp do pliku JSON.
Następnie przejdź do pulpitu WordPress i przejdź do Divi> Theme Builder.
Następnie kliknij ikonę przenośności w prawym górnym rogu strony.
W oknie przenośności wybierz właśnie rozpakowany plik JSON i wybierz opcję „Pobierz kopię zapasową przed importem”, na wypadek gdybyś wcześniej miał coś w szablon strony internetowej default, którego nie chcesz zastępować.
Następnie kliknij przycisk Importuj.
Na koniec zapisz zmiany w generatorze motywów i wyświetl stronę na żywo, aby zobaczyć stały pasek stopki.
Przejdźmy teraz do samouczka, dobrze?
Część 1: Dodawanie globalnej stopki
Generator motywów Divi pozwala zamienić domyślną stopkę na nową, aktualizując domyślny szablon strony internetowej.
Aby utworzyć globalną stopkę, przejdź do pulpitu WordPress i przejdź do Divi> Theme Builder. Następnie kliknij pole „Dodaj stopkę globalną” w domyślnym szablonie witryny.
Następnie z listy rozwijanej wybierz opcję „Utwórz stopkę globalną”.
Dodaj predefiniowany układ do globalnego układu stopki
Spowoduje to wdrożenie Edytora układu modelu, w którym natychmiast pojawi się monit z trzema opcjami dotyczącymi sposobu rozpoczęcia budowy. Wybierz opcję „Wybierz wstępnie zdefiniowany układ”.
W wyskakującym oknie Załaduj z biblioteki znajdź układ strony docelowej papeterii. Następnie kliknij „Użyj tego układu”.
Usuń niechcianą zawartość z gotowego układu
Po załadowaniu układu do edytora rozwiń wyskakujące okno Warstwy, klikając ikonę warstw w menu ustawień. Następnie usuń wszystkie sekcje układu z wyjątkiem dwóch ostatnich.
Przenieś i oznacz dwie sekcje
Po usunięciu sekcji powinieneś mieć dwie sekcje, jedną zatytułowaną „Stopka”, a drugą zatytułowaną „Jak to działa”. Przenieś sekcję „Stopka” na górę układu.
Zmień sformułowanie w dolnej części na „Szuflada ze stopką”. To będzie sekcja, której użyjemy jako zawartość naszej szuflady stopki.
Część 2: Tworzenie stałej szuflady na stopki
Teraz, gdy wyznaczyliśmy jedną z sekcji jako stopkę, a drugą jako szufladę ze stopką, jesteśmy gotowi do rozpoczęcia tworzenia naszej szuflady ze stałą stopką. Zacznijmy od utworzenia ikony notatek, której użyjemy do przełączania szuflady stopki.
Utworzenie przycisku szuflady stopki
Dodaj nową linię
W dolnej części stopki dodaj nowy wiersz do kolumny.
Oznacz nowy wiersz etykietą „Przycisk szuflady”, ponieważ jest to wiersz, który będzie zawierał przycisk używany do przełączania otwierania i zamykania szuflady. Następnie przenieś linię na górę sekcji.
Wypełnienie rzędu
Przed dodaniem modułu otwórz ustawienia wiersza i zaktualizuj wypełnienie w następujący sposób:
- Wypełnienie: 0px wysoki, 0px niski
Wypełnienie sekcji
Następnie otwórz ustawienia w sekcji „Szuflada stopki” i zaktualizuj wypełnienie w następujący sposób:
Aby utworzyć klikalny przycisk, który przełącza szufladę stopki, użyjemy modułu blurb z ikoną. I nadamy mu unikalny kształt kropli wody, łącząc kwadratowy kształt pojemnika Blurb pod z ikoną koła.
Oto jak.
Dodaj moduł Blurb
Dodaj moduł tekstowy prezentacji do wiersza „Przycisk szuflady” u góry sekcji.
Napis / ikona
Następnie usuń domyślny tytuł i treść i wybierz ikonę strzałki wskazującą lewy górny róg (patrz zrzut ekranu). Używamy częściowo obróconej ikony, ponieważ zamierzamy ją później obrócić.
Projekt blurb
Następnie podaj tekst prezentacji w następujący sposób:
- Kolor tła: # 081540
Następnie zaktualizuj parametry projektu w następujący sposób:
- Kolor ikony: #eeeeee
- Ikona koła: TAK
- Kolor okręgu: # 081540
- Użyj rozmiaru czcionki ikony: TAK
- Rozmiar czcionki ikony: 17 piksele
Rozmiar tekstu prezentacji
Teraz nadaj modułowi wysokość i szerokość w następujący sposób:
- Szerokość: 30px
- Wysokość: 30px
Spowoduje to przepełnienie ikony koła do kontenera tekstu i utworzenie kształtu kropli wody.
Pozycja blurb
Następnie nadaj tekstowi prezentacji bezwzględną pozycję w górnej środkowej części sekcji.
- Pozycja: absolutna
- Lokalizacja: Top Center
Ustawienia transformacji Blurb
Teraz możemy użyć opcji transformacji, aby obrócić notkę / ikonę w górę i umieścić ją tuż nad kontenerem sekcji. Teraz, gdy ukryjemy sekcję pod oknem przeglądarki, ikona pozostanie widoczna / klikalna.
Zaktualizuj następujące elementy:
- Przekształcenie osi X przesuwania: -50%
- Przekształcenie osi Y: -250%
- Przekształć obrót osi Z: -45 stopni
Następnie usuń domyślną animację ikon:
- Animacja obrazu / ikony: brak animacji
Będziemy używać JQuery do przełączania szuflady, więc musimy skierować tekst / ikonę jako klikalny element z klasą CSS, której użyjemy później w kodzie. Dodaj następującą klasę CSS:
- Klasa CSS: szuflada docelowa
Ustawienia sekcji szuflady w stopce
Teraz zamierzamy ukryć sekcję „Szuflada stopki” za pomocą opcji translacji transformacji. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Przekształcenie osi Y przesuwania: 100%
Piękno korzystania z transformacji polega na tym, że wartości procentowe są oparte na rzeczywistym rozmiarze przedmiotu. Zatem 100% na osi Y będzie bezpośrednio związane z wysokością przekroju (bez względu na to, jaka jest w danym momencie). Innymi słowy, element zostanie przesunięty w dół na dokładną odległość równą jego własnej wysokości.
Aby przywrócić widok „Szuflady ze stopkami”, będziemy musieli odwrócić tłumaczenie transformacji, które właśnie dodaliśmy do sekcji. Aby to zrobić, będziemy musieli wskazać element za pomocą klasy CSS i wyłączyć transformację tłumaczenia, klikając ikonę (przywróć całą sekcję z powrotem do pierwotnej pozycji).
Dodaj klasę CSS do sekcji szuflady stopki
Na karcie Zaawansowane dodaj następującą klasę CSS:
- Klasa CSS: has-transform
Część szuflady stopki Stała pozycja
W ostatnim kroku musimy naprawić szufladę stopki tak, aby (z ikoną) unosiła się na dole okna przeglądarki.
Zaktualizuj pozycję sekcji „Szuflada stopki” w następujący sposób:
- Pozycja: stała
- Lokalizacja: u dołu po lewej
- Indeks Z: 13
Wyłącz treści mobilne
Ponieważ będziesz mieć ograniczoną ilość zawartości szuflady stopki, która będzie pasować do tabletu i telefonu (ze względu na ograniczoną wysokość ekranów), będziesz musiał wyłączyć / ukryć niepotrzebne elementy z wyświetlacza. W tym przykładzie ukryjemy środkowy wiersz układu sekcji.
Otwórz ustawienia od drugiego do ostatniego wiersza w sekcji „Szuflada stopki”. Na karcie zaawansowane zaktualizuj opcję widoczności, aby wyłączyć linię na telefonie i tablecie.
Dodawanie niestandardowego kodu
Aby dodać funkcję klikania i przełączania w szufladzie stopki, musimy dodać do strony niestandardowe CSS i JQuery. Aby to zrobić, utwórz nowy moduł kodu w module Blurb używanym dla przycisku.
Następnie wklej następujący kod w obszarze kodu:
.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;} .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation'); $('.has-transform').toggleClass('toggle-drawer-animation'); }); });})( jQuery );
Zapisz zmiany
Pamiętaj, aby zapisać układ przed wyjściem z edytora.
Zapisz również zmiany w generatorze motywów.
Ostateczny wynik
Teraz możemy przejść do dowolnej strony Twojego Witryna internetowa aby zobaczyć efekt końcowy.
końcowe przemyślenia
Mam nadzieję, że pływająca szuflada stopki Ci pomoże promować treści w zabawny i przystępny sposób. Jak każdą szufladę, możesz ją wypełnić niemal wszystkim, co przyjdzie Ci do głowy.
Inne zasoby
Oto lista samouczków, które mogą pomóc Ci osiągnąć więcej dzięki wewnętrznym funkcjom Divi.
- Jak utworzyć przybornik motywu na Divi
- Jak stworzyć animowaną sekcję promocyjną na Divi
- Jak dostosować siatki do Divi
Tłumaczenie z: eleganckie tematy
