Jak utworzyć okrągłe menu ikon, które rozwija się po kliknięciu w Divi

Okrągłe menu z ikonami to eleganckie rozwiązanie do dodawania prostego menu do witryny Divi. Ten styl menu jest intuicyjny i bardzo dobrze sprawdza się jako stałe menu dla urządzeń mobilnych. Dzisiaj pokażemy, jak stworzyć okrągłe menu ikon w Divi w sposób, który naprawdę podkreśla potężne możliwości projektowe Divi Builder. Udostępnimy też prosty fragment kodu JavaScript, który umożliwia otwieranie i zamykanie menu po kliknięciu.

Zacznijmy

zapowiedź

Oto szybki rzut oka na okrągłe menu ikon, które zbudujemy.

Pobierz układ menu ikony koła ZA DARMO

Aby położyć swoje ręce na projekcie 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ć układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj zainstalowany motyw Divi (lub wtyczkę Divi Builder, jeśli nie używasz motywu Divi).
2. Utwórz nową stronę w WordPress i włącz Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).

W tym samouczku użyjemy wbudowanych ikon Divi z modułu notki, więc nie ma potrzeby korzystania z żadnych zasobów zewnętrznych.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Część 1

Gdy Divi Builder jest włączony do edycji strony w interfejsie, dodaj jeden wiersz kolumny do domyślnej zwykłej sekcji.

Następnie otwórz ustawienia wiersza i dodaj następujące dopełnienie:

Wypełnienie: góra 300px

Ma to po prostu zapewnić trochę miejsca na okrągłe elementy menu, które wyskakują po kliknięciu.

Tworzenie ikon menu za pomocą modułów Blurb

Rozmycie nr 1

Po dopełnieniu wiersza dodaj moduł notki do kolumny. Będzie to pierwsza z 5 wszystkich notek, które dodamy do naszego okrągłego menu ikon. Nazywamy to notką #1.

Następnie zaktualizuj treść notki, usuwając tytuł i treść. Następnie dodaj ikonę do notki w następujący sposób.

Użyj ikony: Tak
Ikona: zobacz zrzut ekranu

Następnie zaktualizujemy ustawienia projektu w następujący sposób:

Kolor ikony: #29a1f2
Ikona koła: TAK
Kolor koła: #222222
Pokaż obramowanie koła: TAK
Kolor obramowania koła: #29a1f2
Użyj rozmiaru czcionki ikony: TAK
Rozmiar czcionki ikony: 25px
Rozmiar tekstu ciała: 20px
Margines: 0px

Oprócz stylizacji okrągłej ikony dodaliśmy również rozmiar tekstu podstawowego. Nie ma tekstu podstawowego, ale przyda się to później, gdy użyjemy jednostki długości em (która odnosi się do rozmiaru tekstu nadrzędnego), aby rozmieścić nasze pozycje menu/rozrywki za pomocą translacji transform. Więcej o tym później.

Następnie usuń domyślną animację obrazu/ikony.

Animacja obrazu/ikony: brak animacji

Następnie ustaw indeks Z dla tego modułu na 1, aby znajdował się nad innymi, które ostatecznie usiądą za nim.

Indeks Z: 1

I na koniec usuń domyślny dolny margines pod ikoną, dodając następujący niestandardowy CSS do obrazu Blurb.

margin-bottom: 0px;

Rozmowa #2

Aby utworzyć drugą notkę, po prostu zduplikuj notkę #1.

Następnie otwórz ustawienia nowej notki (spis nr 2) i zmień ikonę oraz ustaw indeks Z z powrotem na wartość domyślną (0).

Następnie zmniejszmy ikonę za pomocą skali transformacji w następujący sposób:

Skala transformacji: 70%

Tworzenie Blurbów #3, #4 i #5

Kolejne trzy notki można utworzyć poprzez powielenie notki nr 2 i zaktualizowanie ikony dla każdego z nich.

Układanie Blurbów w tej samej pozycji bezwzględnej

Domyślny stan naszego menu będzie zawierał wszystkie notki w absolutnej pozycji, a cztery notki dotyczące pozycji menu będą ułożone za notatką z ikoną głównego menu hamburgera. Aby uzyskać nasze notki w tej samej pozycji bezwzględnej, użyj funkcji wielokrotnego wyboru (przytrzymaj ctrl/cmd i kliknij każdy z nich), aby wybrać wszystkie pięć modułów notatek. Następnie otwórz ustawienia jednej z wybranych notatek, aby zaktualizować ustawienia elementów dla wszystkich 5 jednocześnie.

Następnie dodaj następujący niestandardowy kod CSS do głównego elementu:

position: absolute !important;
bottom: 20px;
left: 20px;

Spowoduje to umieszczenie notek w lewym dolnym rogu wiersza.

Pozycjonowanie ikon menu za pomocą Tłumacz przekształcenia

Gdy wszystkie notki zostaną ustawione w stanie domyślnym, możemy rozpocząć pozycjonowanie pozycji menu dla stanu kliknięcia (gdzie znajdą się po kliknięciu przycisku menu głównego). Aby to zrobić, możemy użyć właściwości transform translate w konstruktorze Divi. W konstruktorze Divi nie ma stanu kliknięcia (takiego jak najechanie kursorem), ponieważ jest to obsługiwane przez JavaScript. Dlatego zamierzamy teraz umieścić nasze pozycje menu tam, gdzie chcemy, aby były dostępne po kliknięciu. Następnie użyjemy JavaScript, aby włączać i wyłączać tę pozycję po kliknięciu przycisku menu głównego.

Chcemy zachować notkę nr 1, ponieważ jest to przycisk menu głównego. Jednak chcemy przenieść notki #2, #3, #4 i #5. A ponieważ nasze notki są teraz nakładane w kreatorze wizualnym, włączmy tryb szkieletowy, aby zaktualizować pozycje dla każdej notki.

Plamka pozycji nr 2

Otwórz ustawienia notki nr 2 i zaktualizuj następujące elementy:

Przekształć Przesuń oś Y: -10em

Oto nowa pozycja notki #2.

Plamka pozycji nr 3

Otwórz ustawienia notki nr 3 i zaktualizuj następujące elementy:

Przekształć Przesuń oś Y: -8,6 em
Przekształć Przesuń oś X: 5em

Oto nowa pozycja notki #3.

Plamka pozycji nr 4

Otwórz ustawienia notki nr 4 i zaktualizuj następujące elementy:

Przekształć Przesuń oś Y: -5em
Przekształć Przesuń oś X: 8,6 em

Oto nowa pozycja notki #4.

Plamka pozycji nr 5

Otwórz ustawienia notki nr 5 i zaktualizuj następujące elementy:

Przekształć Przesuń oś Y: 0px
Przekształć Przesuń oś X: 10em

Oto nowa pozycja notki #5.

Dodawanie niestandardowych klas CSS do Blurbs

Aby nasz JavaScript działał poprawnie, musimy dodać kilka klas CSS, które będą służyć jako selektory dla dodatkowej stylizacji i funkcjonalności.

Dodaj klasę CSS do Blurb #1

W trybie widoku szkieletowego otwórz ustawienia dla notki nr 1 i dodaj następującą klasę CSS:

Klasa CSS: transform_target

Dodaj klasy CSS do Blurbs #2, #3, #4 i #5

Pozostałe cztery notki będą współdzielić te same klasy CSS, więc możemy użyć funkcji wielokrotnego wyboru, aby wybrać Blurb #2, #3, #4 i #5 oraz zaktualizować klasę CSS dla wszystkich czterech w następujący sposób:

Klasa CSS: has-transform toggle-transform-animation

Zauważ, że istnieją dwie klasy CSS oddzielone spacją.

Dodawanie zewnętrznego CSS i JavaScript za pomocą modułu kodu

Po dodaniu naszych klas CSS do notek, jesteśmy gotowi do dodania naszego kodu do strony za pomocą modułu kodu. Aby to zrobić, dodaj moduł kodu w notce #5.

Następnie wklej następujący kod do modułu kodu:

<style>
  .has-transform, .transform_target .et-pb-icon {
    transition: all 400ms ease-in-out;
  } 
  .toggle-transform-animation {
    transform: none !important;
  }
  .transform_target {
    cursor: pointer;
  }
  .toggle-active-target.et_pb_blurb .et-pb-icon {
    background-color: transparent;
  }
</style>

Jest to zewnętrzny CSS używany w połączeniu z kodem jQuery.

<script>
(function($) {
  $(document).ready(function(){
    $('.transform_target').click(function(){
      $(this).toggleClass('toggle-active-target');
      $('.has-transform').toggleClass('toggle-transform-animation');   
    });    
  });
})( jQuery );   
</script>

I to jest JavaScript potrzebny, aby elementy menu z okrągłymi ikonami rozszerzały się po kliknięciu przycisku menu.

Upewnij się, że tag style owinięty wokół kodu CSS, a tag script wokół kodu JavaScript/jQuery.

Sprawdź efekt końcowy funkcjonalności na aktywnej stronie.

Dodawanie adresów URL pozycji menu

Ponieważ jest to menu, cztery pozycje menu będą wymagały linków/adresów URL. Aby dodać adresy URL wymagane dla każdego elementu menu, otwórz ustawienia modułu notatek dla każdego z 4 elementów menu i dodaj adres URL łącza modułu.

Przyklejanie przycisku menu (lub stałe)

Ponieważ to menu jest małe i intuicyjne dla urządzenia mobilnego, możesz chcieć, aby menu było przyklejone, aby pozostało stałe w lewym dolnym rogu przeglądarki.

Aby to zrobić, zaznacz wszystkie pięć notatek za pomocą funkcji wielokrotnego wyboru, a następnie zaktualizuj niestandardowy CSS w elemencie głównym, zastępując wartość pozycji „absolutna” wartością „stała”.

position: fixed !important;
bottom: 20px;
left: 20px;

Teraz menu pozostanie naprawione w lewym dolnym rogu okna przeglądarki.

Aby upewnić się, że menu znajduje się nad inną zawartością strony, zaktualizuj indeks z wiersza w następujący sposób:

Indeks Z: 11

Następnie wyjmij wypełnienie rzędu:

Padding: 0px na górze, 0px na dole

Ostateczny projekt

Oto ostateczny projekt stałej okrągłej ikony z gotowym układem.

I oto jest na telefonie komórkowym.

Jak łatwo dostosować rozmiar menu i odstępy?

Jak wspomniano wcześniej, menu zostało zaprojektowane przy użyciu jednostki długości em do pozycjonowania elementu menu na osi x i y (przy użyciu translacji transformacji). Jednostka długości em jest zależna od rozmiaru nadrzędnego rozmiaru tekstu treści. W związku z tym, ponieważ każdy z naszych modułów notatek ma ten sam rozmiar tekstu głównego wynoszący 20 pikseli, możemy użyć funkcji wielokrotnego wyboru, aby zmienić tekst główny wszystkich notatek jednocześnie.

W razie potrzeby zwiększy to lub zmniejszy odstępy między pozycjami menu.

Możesz też zrobić to samo dla rozmiaru czcionki Icon. Po prostu użyj funkcji wielokrotnego wyboru, aby dostosować rozmiar czcionki ikony dla wszystkich elementów menu jednocześnie.

Końcowe przemyślenia

Kto by pomyślał, że dodanie do strony stałego menu z okrągłymi ikonami może być tak proste dzięki Divi. Jest to również idealny rodzaj menu na urządzenia mobilne! Jasne, potrzeba kilku niestandardowych fragmentów kodu, ale fakt, że możesz zaprojektować i ustawić stan kliknięcia elementów menu za pomocą wizualnego konstruktora, jest całkiem fajny. Nie zapomnij zapoznać się z różnymi kolorami, rozmiarami i projektami najechania kursorem, dzięki którym menu będzie pasować do Twojej witryny.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!