Chciałbyś stworzyć oryginalne menu Divi w formie obracającego się koła po najechaniu myszką?

Tworzenie obracającego się koła menu po najechaniu myszą to świetny sposób na zaprezentowanie przydatnych linków na Twoim Witryna internetowa. Byłby to świetny sposób na umieszczenie w nagłówku wielu wezwań do działania, aby skierować użytkowników tam, gdzie powinni się udać. Byłoby to również fajne menu podkategorii Twój blog.

W tym samouczku pokażemy, jak utworzyć obrotowe kółko menu po najechaniu kursorem w Divi. Można to zrobić za pomocą kombinacji wbudowanych opcji Divi i niektórych niestandardowych fragmentów kodu css.

badanie

Zanim przejdziemy do tego samouczka, spójrzmy na rezultat, jaki chcemy osiągnąć.

Pobierz DIVI teraz !!!

Utwórz nową stronę za pomocą Divi Builder

Aby rozpocząć, będziesz potrzebować:

Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.

oryginalne menu Divi w postaci obracającego się koła po najechaniu kursorem

Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder

Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)

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

Projekt obracającego się koła menu w Divi

Utwórz sekcję i linię 1

W sekcji obecnej domyślnie dodaj wiersz o następującej strukturze kolumn.

Następnie dodaj do wiersza moduł tekstowy o następującej treści.

Następnie zaktualizuj projekt tekstu w następujący sposób:

  • Czcionka tekstu: udostępnij technologię
  • Odstępy między literami tekstu: 1px
  • Rozmiar tekstu nagłówka 2: 8vw

Dodaj linię 2, aby zbudować koło

Następnie musimy dodać nowy wiersz do kolumny poniżej wiersza 1.

Zanim zaczniemy dodawać nasze moduły tekstowe do naszych linków, musimy zaprojektować naszą linię jako koło. Potrzebujemy wielu optymalizacji w rzędzie, aby zaprojektować nasz projekt koła.

Czytaj także: Jak odsłonić zawartość na dzielniku sekcji Hover w Divi 

Aby rozpocząć, otwórz ustawienia wiersza 2 i zaktualizuj następujące elementy:

  • Kolor tła: #02366b
  • Kolor gradientu lewego tła: rgba(0,0,0,0.45)
  • Prawy kolor gradientu tła: #02366b
  • Typ gradientu: Okrągły
  • Kierunek promieniowy: Środek
  • Pozycja wyjściowa: 36%
  • Pozycja końcowa: 0%
  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 500px
  • Maksymalna szerokość: 500px (komputer), auto (tablet i telefon)
  • Wysokość: 500px (komputer stacjonarny), auto (tablet i telefon)
  • Wypełnienie (pulpit): 0px (góra i dół)
  • Wypełnienie (tablet i telefon): 20px (góra, dół i lewo)
  • Marża (telefon): -10% (prawo)

Musimy ustawić zarówno wysokość, jak i szerokość linii na 500 pikseli, aby była to idealny kwadrat. To pozwoli nam nadać mu idealny okrągły kształt przy użyciu opcji zaokrąglonych rogów Divi (promień obramowania).

  • Zaokrąglone rogi: 50%

Następnie możemy dodać kolejny poziom projektu koła za pomocą cienia pudełkowego w następujący sposób:

  • Siła rozmycia cieni w pudełku: 0px
  • Siła rozprzestrzeniania się cieni w pudełku: 210px
  • Kolor cienia: rgba (2,54,107,0.66 XNUMX)

Następnie dodamy mały fragment kodu CSS, aby wyśrodkować zawartość naszego wiersza w pionie. Pod zakładką Zaawansowane, dodaj następujący niestandardowy kod CSS w głównym elemencie.

display:flex;align-items:center;

Dodawanie linków

Każdy link w kole zostanie utworzony za pomocą modułu Tekst. Stworzymy w sumie sześć modułów Tekst. Pięć modułów Tekst będzie zawierał linki do koła, a drugi będzie zawierał tytuł menu.

Zacznij od stworzenia nowego modułu „Tekst”.

Następnie zaktualizuj ustawienia tekstu w następujący sposób:

  • Body: „Element 1”
  • Czcionka tekstu: udostępnij technologię
  • Kolor tekstu: #ffffff
  • Rozmiar: 16px (domyślnie), 20px (najechanie)
  • Odstępy między literami: 1px
  • Wysokość linii tekstu: 60px
  • Szerokość: 250px (komputer), auto (tablet i telefon)
  • Wysokość: 60px
  • Dopełnienie (po lewej): 20px

Zapisz na razie ustawienia. Następnie zduplikuj moduł tekstowy 4 razy, aby utworzyć łącznie 5 modułów tekstowych.

Pozycjonowanie linków/modułów tekstowych

Jesteśmy teraz gotowi do umieszczenia naszych linków na obwodzie koła. W tym celu zaktualizujemy każdy moduł Tekst z opcjami transformacji, które przesuwają/tłumaczą i obracają moduł w miejscu.

Odkryj również: Jak utworzyć płynną siatkę słupów po najechaniu myszą w divi

Aby to ułatwić, wdróż tryb wyświetlania modelu krawędziowego i oznacz moduły tekstowe, zaczynając od łącza 1 u góry do łącza 5 na dole.

Link 1

Zaczniemy od edycji Link 1. Otwórz ustawienia modułu Tekst dla Link 1 i zaktualizuj następujące elementy:

  • Transform Translate (oś Y): 120 px (komputer), 0 px (tablet i telefon)
  • Transformacja Obrót (oś Z): 60 stopni (komputer), 0 pikseli (tablet i telefon)
  • Pochodzenie: 50% (w środku po prawej)

Link 2

Otwórz ustawienia modułu tekstowego dla łącza 2 i zaktualizuj następujące elementy:

  • Przekształcać
    • Translacja (oś Y): 60px (Desktop), 0px (Tablet i Telefon)
    • Obrót osi Z: 30 stopni (komputer stacjonarny), 0 pikseli (tablet i telefon)
    • Pochodzenie: 50% (w środku po prawej)

Link 3

Ponieważ moduł tekstowy dla łącza 3 znajduje się pośrodku, możemy go pozostawić na swoim miejscu.

Link 4

Otwórz ustawienia modułu tekstowego dla łącza 2 i zaktualizuj następujące elementy:

  • Przekształć :
    • Przesuń oś Y: -60px (komputer), 0px (tablet i telefon)
    • Obrót osi Z: -30 stopni (komputer), 0 pikseli (tablet i telefon)
    • Pochodzenie: 50% (w środku po prawej)

Link 5

Otwórz ustawienia modułu tekstowego dla łącza 2 i zaktualizuj następujące elementy:

  • Przekształć :
    • Przesuń oś Y: -120px (komputer), 0px (tablet i telefon)
    • Obrót osi Z: -60deg (komputer), 0px (tablet i telefon)
    • Pochodzenie: 50% (w środku po prawej)

Zobaczmy teraz wynik do tej pory. Zwróć uwagę, jak linki/teksty w modułach tekstowych biegną idealnie wzdłuż obwodu koła.

Dodano etykietę menu

Aby dodać etykietę menu, musimy dodać kolejny moduł tekstowy do pięciu modułów tekstowych, które już mamy. Śmiało i dodaj nowy moduł tekstowy nad łączem 1.

Następnie zaktualizuj zawartość treści w następujący sposób:

Menu

Następnie, aby przyspieszyć projektowanie, skopiuj style modułu Tekst dla łącza 3 i wklej te style modułu do nowego modułu Tekst.

Następnie zaktualizuj następujące elementy:

  • Wysokość linii tekstu: 300px (komputer), 20px (tablet i telefon)
  • Wysokość: przywróć ustawienia domyślne (automatycznie)
  • Transformacja obrotu (oś Z): 180 stopni (komputer), 0 stopni (tablet i telefon)
  • Pochodzenie transformacji: 50% (w środku po prawej)

Po zakończeniu musimy nadać modułowi Tekst etykiety menu pozycję bezwzględną. Aby to zrobić, dodaj następujący niestandardowy kod CSS do głównego elementu:

position: absolute!important;

Teraz sprawdź wynik. Powinieneś zobaczyć pozycję menu do góry nogami po prawej stronie koła.

Dodano efekt obracającego się najechania na linię/koło

Aby dodać efekt obrotowego najechania do wiersza, zaktualizuj ustawienia wiersza w następujący sposób:

  • Transformacja obrotu (oś Z): 180 stopni (komputer), 0 stopni (najechanie), 0 stopni (tablet i telefon)

Następnie zaktualizuj ustawienia przejścia w następujący sposób:

  • Czas trwania przejścia: 450 ms
  • Przejście krzywej prędkości: łatwość-w-out

Teraz obserwuj, jak koło kręci się po najechaniu na niego.

Tworzenie dwukolumnowego układu sekcji

Obecnie układ składa się z dwóch jednokolumnowych rzędów ułożonych jeden na drugim. Możemy jednak użyć właściwości flex css, aby wyrównać dwie linie w poziomie. 

Aby to zrobić, możemy dodać do sekcji mały fragment niestandardowego CSS. Gdy to zrobimy, będziemy musieli trochę dostosować odstępy, aby wszystko było w porządku.

Otwórz ustawienia sekcji i dodaj następujący niestandardowy css do głównego elementu:

display:flex;

Zaktualizuj odstępy linii 1

Następnie zaktualizuj rozmiar i odstępy linii 1 w następujący sposób:

  • Szerokość: 40% (komputer stacjonarny)
  • Margines (komputer stacjonarny): pozostało 5%

Ostateczny wynik

Zobaczmy teraz końcowy wynik.

Pobierz DIVI teraz !!!

Alternatywna konstrukcja półkoła

Fajnym alternatywnym projektem jest ukrycie prawej połowy koła na zewnątrz sekcji, aby linki były ukryte, a następnie ujawnione po najechaniu. 

Aby to zrobić, zduplikuj całą sekcję zawierającą właśnie utworzony rysunek. 

W sekcji duplikatów zaktualizuj parametry w wierszu 1 w następujący sposób:

  • Szerokość: 70% (stacjonarna)

Następnie zaktualizuj ustawienia w wierszu 2, aby wypchnąć koło z sekcji w następujący sposób:

  • Margines: -250px prawy

Musimy użyć -250px, ponieważ całkowita szerokość koła to 500px i chcemy ukryć dokładnie połowę linii.

Następnie ustaw widoczność sekcji na ukrytą w następujący sposób:

  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: ukryte

Oto wynik końcowy.

oryginalne menu Divi w postaci obracającego się koła po najechaniu kursorem

Pobierz DIVI teraz !!!

Wnioski

Koło obrotowe jest jednym z tych stylowych elementów konstrukcyjnych, które mogą angażować odwiedzający z subtelnym i unikalnym efektem zawisu. To zdumiewające, jak łatwo można wykonać ten projekt dzięki wbudowanym ustawieniom projektowym Divi. 

Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...