Przejdź do głównej treści

Jak tworzyć animowane szuflady na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Szuflady stopek są przydatnymi dodatkami do każdej witryny, ponieważ przechowują dodatkowe treści, które są łatwo dostępne dla użytkowników. Szuflady stopek 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 niego kursorem. To tak, jakby mieć małą kryjówkę dla treści premium.

W tym samouczku zaprojektujemy pływającą szufladę stopki w Divi. Dodamy szufladę stopki do ogólnego obszaru stopki szablonu strony internetowej, aby szuflada stopki była dostępna w całej witrynie z normalną zawartością stopki.

W procesie, którego zamierzamy użyć, każdą sekcję Divi (i jej zawartość) można przekształcić w szufladę stopki w kilka minut.

Jak dodać szablon szuflady stopki do witryny Divi

Dodanie tego szablonu zastąpi domyślny szablon strony internetowej (jeśli taki masz) w witrynie Divi. Sugerujemy dodanie go do strony testowej, aby nie zepsuć niczego na aktywnej stronie.

Aby zaimportować model szuflady ze stałą stopką do własnej witryny internetowej, 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 w domyślnym szablonie witryny było coś, czego nie miałeś nie chciałem wymienić.

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.

Teraz przejdźmy 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> Konstruktor motywów. Następnie kliknij przestrzeń „Dodaj globalną stopkę” w domyślnym szablonie witryny.

Następnie wybierz opcję „Utwórz globalną stopkę” z listy rozwijanej.

Dodaj predefiniowany układ do globalnego układu stopki

Spowoduje to wdrożenie Edytora układu modelu, w którym natychmiast zostaną wyświetlone trzy opcje wyboru sposobu rozpoczęcia budowy. Wybierz opcję „Wybierz predefiniowany układ”.

W wyskakującym oknie Wczytaj z biblioteki znajdź układ strony docelowej materiałów biurowych. Następnie kliknij „Użyj tego układu”.

Usuń niechcianą zawartość z gotowego układu

Po załadowaniu układu w edytorze wdróż okno podręczne Warstwy, klikając ikonę warstw w menu ustawień. Następnie usuń wszystkie oprócz ostatnich dwóch sekcji układu.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Przenieś i oznacz dwie sekcje

Po usunięciu sekcji powinieneś mieć dwie sekcje, jedną zatytułowaną „Stopka”, a drugą „Jak to działa”. Przenieś sekcję „Stopka” na górę układu.

Zamień etykietę w dolnej części na „Szuflada stopki”. To będzie sekcja, której użyjemy jako treści do naszej szuflady na stopki.

Część 2: Tworzenie stałej szuflady na stopki

Teraz, gdy wyznaczyliśmy jedną sekcję jako stopkę, a drugą jako szufladę stopki, jesteśmy gotowi, aby rozpocząć tworzenie naszej stałej szuflady stopki. Zacznijmy od utworzenia ikony tekstu prezentacji, której będziemy używać do przełączania szuflady stopki.

Utworzenie przycisku szuflady stopki

Dodaj nową linię

W dolnej części stopki dodaj nowy wiersz do kolumny.

stała szuflada na stopy

Oznacz nowy wiersz „przyciskiem szuflady”, ponieważ jest to wiersz zawierający przycisk służący do przełączania szuflady w pozycji otwartej i zamkniętej. Następnie przenieś linię na górę sekcji.

Wypełnienie rzędu

Przed dodaniem modułu otwórz parametry linii 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 tekstu prezentacji z ikoną. I nadamy mu niepowtarzalny kształt łezki, łącząc kwadratowy kształt pojemnika modułu Blurb 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ślną zawartość z tytułu i treści i wybierz ikonę strzałki wskazującą lewy górny róg (patrz zrzut ekranu). Używamy częściowo obróconej ikony, ponieważ obrócimy ją później.

Projekt blurb

Następnie podaj tekst prezentacji w następujący sposób:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • 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 pikseli
Rozmiar tekstu prezentacji

Teraz nadaj modułowi wysokość i szerokość w następujący sposób:

  • Szerokość: 30px
  • Wysokość: 30px

Spowoduje to, że ikona koła w pojemniku tekstowym przepełni się, tworząc kształt łezki.

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ć tekst / ikonę prezentacji w górę i ustawić ją tuż nad pojemnikiem sekcji. Teraz, gdy ukryjemy sekcję pod oknem przeglądarki, ikona pozostanie widoczna / klikalna.

Zaktualizuj następujące elementy:

  • Przekształć Przetłumacz oś X: -50%
  • Przekształć tłumaczenie osi Y: -250%
  • Przekształć obrót osi Z: -45 stopni

Następnie usuń domyślną animację ikony:

  • Animacja obrazu / ikony: brak animacji

Będziemy używać JQuery do przełączania szuflady, więc musimy kierować tekst / ikonę jako klikalny element za pomocą klasy CSS, której będziemy używać później w kodzie. Dodaj następującą klasę CSS:

  • Klasa CSS: szuflada docelowa

Ustawienia sekcji szuflady w stopce

Teraz ukryjmy sekcję „Szuflada stopki” za pomocą opcji transformacji tłumaczenia. Otwórz ustawienia sekcji i zaktualizuj następujące elementy:

  • Przekształć Przetłumacz oś Y: 100%

Piękno użycia transformacji tutaj polega na tym, że wartości procentowe są oparte na faktycznym rozmiarze elementu. Zatem 100% na osi Y będzie bezpośrednio związane z wysokością przekroju (niezależnie od tego, jaka jest ona w danym momencie). Innymi słowy, element zostanie przesunięty w dół dokładnie o tę samą odległość co jego wysokość.

Aby przywrócić szufladę stopki z powrotem, musimy cofnąć tłumaczenie transformacji, które właśnie dodaliśmy do sekcji. Aby to zrobić, będziemy musieli skierować element na klasę CSS i dezaktywować transformację tłumaczenia, klikając ikonę (przywróć całą sekcję 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 ustawić 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ść szuflady na stopki, która będzie pasować do tabletu i telefonu (ze względu na ograniczoną wysokość ekranów), będziesz musiał wyłączyć / ukryć nieistotne elementy wyświetlacza. W tym przykładzie ukryjemy środkową linię układu przekroju.

Otwórz ustawienia dla przedostatniej linii 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 do szuflady stopki, musimy dodać niestandardowy CSS i JQuery do strony. 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:

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

<style> .has-transform, .drawer-target {przejście: wszystkie 400 ms easy-in-out;} .toggle-drawer-animation {transform: brak! ważne;}. toggle-icon-animation {transform: rotate (- 135deg)! Ważne;} .drawer-target {kursor: wskaźnik;} </style> <script> (function ($) {$ (document) .ready (function () {$ ('. Target-target'). kliknij (function () {$ (this) .toggleClass ('toggle-icon-animation'); $ ('. has-transform'). toggleClass ('toggle-drawer-animation');});});} ) (jQuery); </script>

Zapisz zmiany

Pamiętaj, aby zapisać układ przed opuszczeniem edytora.

Zapisz również zmiany w generatorze motywów.

Ostateczny wynik

Teraz możemy przejść do dowolnej strony w Twojej witrynie, aby zobaczyć wynik końcowy.

końcowe przemyślenia

Mamy nadzieję, że ruchoma szuflada stopki pomoże Ci promować zawartość w przyjemny i przystępny sposób. Jak każda szuflada, możesz wypełnić ją prawie wszystkim, co możesz wymyślić.

Inne zasoby

Oto lista samouczków, które mogą pomóc Ci osiągnąć więcej dzięki wewnętrznym funkcjom Divi.

Tłumaczenie z: eleganckie tematy

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
0 akcji
udział
ćwierkanie
Enregistrer