Jak utworzyć segmentowane okrągłe menu za pomocą Blurbs Divi

Zawsze fajnie jest być kreatywnym dzięki opcjom transformacji Divi. Pozwalają na stworzenie niesamowitych projektów „nieszablonowych”. W tym samouczku zamierzamy przekształcić niektóre notki Divi w piękne, podzielone na segmenty okrągłe menu, które rozwija się i zwija po kliknięciu. Sztuczka do tworzenia segmentowanych obszarów (takich jak wykres kołowy) polega na użyciu skośnego przekształcenia w dość wyjątkowy sposób. Inspiracja dla tego pomysłu pochodziła z tego samouczka i muszę powiedzieć, że tworzenie z Divi było niezwykle zabawne.

Zacznijmy.

zapowiedź

Oto szczyt segmentowego okrągłego menu, które zbudujemy w tym samouczku.

Pobierz układ Divi podzielonego na segmenty okrągłego menu za DARMO

Aby położyć swoje ręce na projekcie menu 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 użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).

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

Tworzenie podzielonego okrągłego menu na segmenty za pomocą Blurbs Divi

Ten projekt będzie używał kombinacji wbudowanych ustawień Divi i kodu zewnętrznego. Wykorzystamy kreatora wizualnego do stworzenia większości projektów naszego menu. Następnie wdrożymy tryb widoku szkieletowego, aby uzyskać dostęp do tych trudno dostępnych ustawień, gdy elementy zostaną ustawione absolutnie. Zaczniemy od stworzenia okrągłego menu, które składa się z wielu notek w rzędzie. Następnie zaprojektujemy dodatkową notatkę w osobnej sekcji, która będzie służyć jako nakładający się przycisk menu.

Tworzenie wiersza dla pozycji menu

W domyślnej zwykłej sekcji dodaj wiersz z jedną kolumną.

Stylizacja rzędu

Przed dodaniem modułu stylizujmy wiersz, aby uzyskać nasz okrągły kształt i kolor tła. Otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Kolor tła: #8857f2
• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość: 30em
• Wysokość: 30em
• Padding: 0px na górze, 0px na dole

Następnie dodaj zaokrąglone rogi i cień pudełka.

Zaokrąglone rogi: 50%
Cień pudełka: patrz zrzut ekranu

Wrócimy, aby dodać więcej dostosowań do rzędu, ale na razie możemy zacząć dodawać nasze notki.

Tworzenie komentarzy do menu

Dodaj nową notkę do jednego wiersza kolumny w okrągłym wierszu.

Stylizacja nr 1

Zaktualizuj treść pierwszej notki, aby zawierała tytuł i ikonę.

• Tytuł: link
• Użyj ikony: TAK
• Ikona: zobacz zrzut ekranu

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

• Kolor tła: #773ef2
• Kolor tła (najechanie): #222222
• Kolor ikony: #ffffff
• Rozmiar czcionki ikony: 40px (komputer), 30px (tablet)
• Wyrównanie tekstu: do środka

Następnie zaktualizuj styl tekstu tytułu w następujący sposób:

• Czcionka tytułu: Archiwum wąskie
• Styl czcionki tytułu: TT
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 14px (komputer), 12px (tablet)

Następnie musimy umieścić notkę za pomocą niestandardowego CSS. Przejdź do zakładki zaawansowane i dodaj następujący niestandardowy kod CSS do elementu głównego:

position:absolute !important;
left: 50%;
top: 50%;

Teraz wróć do zakładki projektu i zaktualizuj rozmiar i odstępy notki w następujący sposób:

• Szerokość: 15em
• Wysokość: 15em
• Margines: -15em w lewo

Spowoduje to umieszczenie prawego dolnego rogu notki bezpośrednio w środku okręgu.

Tworzenie segmentu za pomocą opcji transformacji

Aby zamienić notkę w wycinek koła, przekrzywimy i obrócimy notkę. Aby to zrobić, zaktualizuj następujące opcje transformacji:

• Przekształć pochylenie osi X: 60 stopni

• Pochodzenie transformacji: 100% 100% (prawy dolny róg)

Ponieważ prawy dolny róg naszej notki znajduje się bezpośrednio w środku okręgu, chcemy, aby początek transformacji również był ustawiony na prawy dolny róg. Dzięki temu czubek przekrzywionej notki będzie znajdował się w środku okręgu, tworząc segment.

Wyprostowanie treści Blurb

Tak naprawdę wszystko, co chcemy pochylić, to kształt notki, aby utworzyć kształt segmentu, a nie zawartość w środku (tj. Ikona i tekst). Ale ponieważ nie jest to możliwe, wszystko, co musimy zrobić, to dodać właściwość transformacji do treści blurb, która odwraca efekt pochylenia, tak aby wyglądał normalnie. Aby to zrobić, przejdź do zakładki zaawansowane i dodaj następujący niestandardowy kod CSS:

Kod CSS treści Blub:

transform: skew(-60deg) rotate(-75deg);
position: absolute;
height: 27em;
width: 27em;
bottom: -13.5em;
right: -13.5em;

Następnie zmniejsz margines między ikoną a tekstem tytułu, dodając następujący kod CSS dla obrazu Blurb:

Rozmycie obrazu CSS

margin-bottom: 15px;

A teraz, ponieważ przestrzeń treści notatek rozciąga się poza notkę (nawet jeśli jej nie widać), musimy ukryć przepełnienie w następujący sposób:

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

Jeśli tego nie dodamy, będziemy mieli niechcianą przestrzeń w najechaniu.

Tworzenie reszty Blurbs

Aby utworzyć pozostałe notki, włącz tryb widoku szkieletowego i zduplikuj istniejącą notatkę 5 razy, aby uzyskać łącznie 6 identycznych notek.

Obróć plamę #2

Następnie otwórz ustawienia notki nr 2 i obróć moduł w następujący sposób:

• Przekształć Obróć oś Z: 30deg

Spowoduje to obrót notki nr 2 zgodnie z ruchem wskazówek zegara od centralnego punktu okręgu.

Następnie możemy dalej obracać pozostałe notki o 30 stopni, aby utworzyć półkole segmentów.

Obróć plamę #3

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

• Przekształć Obróć oś Z: 60deg

Obróć plamę #4

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

• Przekształć Obróć oś Z: 90deg

Obróć plamę nr 5

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

• Przekształć Obróć oś Z: 120deg

Obróć Blurb #6

Otwórz ustawienia notki #6 i zaktualizuj następujące elementy:

• Przekształć Obróć oś Z: 150 stopni

Oto dotychczasowy wynik.

Tworzenie przycisku menu

Aby utworzyć przycisk menu, zmniejszymy rozmiar całej sekcji, a następnie użyjemy ikony z napisem do projektu przycisku.

Aby to zrobić, najpierw dodaj nową zwykłą sekcję pod bieżącą sekcją.

Następnie dodaj do sekcji wiersz z jedną kolumną.

Tworzenie ikony rozmycia dla przycisku

Następnie dodaj moduł notki do wiersza.

Usuń domyślny tytuł i treść i użyj ikony w następujący sposób:

• Użyj ikony: TAK
• Ikona: symbol plusa (patrz zrzut ekranu)

Kontynuuj aktualizację ustawień w następujący sposób:

• Kolor ikony: #222222
• Użyj rozmiaru czcionki ikony: TAK
• Rozmiar czcionki ikony: 50px
• Animacja obrazu/ikony: brak animacji

Następnie dodaj następujący niestandardowy kod CSS do elementu głównego, aby pozbyć się domyślnego marginesu pod ikoną.

Główny element CSS

margin-bottom: 0px;

Dopełnienie wiersza

Następnie wyjmij domyślne wypełnienie rzędu.

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

Ustawienia sekcji

Aby zakończyć przycisk, ukształtujemy naszą sekcję w okrąg.

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

• Szerokość: 100px
• Wysokość: 100px
• Padding: 0px na górze, 0px na dole
• Zaokrąglone rogi: 50%
• Cień pudełka: patrz zrzut ekranu

Następnie nadaj mu białe tło.

• Kolor tła: #ffffff

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do elementu głównego, aby ustawić przycisk jako ustalony na dole okna.

position: fixed !important;
bottom: -50px;
left: 50%;
margin-left: -50px;

Musimy również dodać klasę CSS, która może być kierowana za pomocą naszego jQuery. Dodaj następujące informacje:

• Klasa CSS: transform_target

Następnie zaktualizuj indeks Z, aby przycisk znajdował się nad resztą zawartości strony.

• Indeks Z: 12

Pozycjonowanie rzędu menu kołowego

Teraz, gdy przycisk menu jest na miejscu, musimy ustawić wiersz zawierający nasze podzielone na segmenty okrągłe menu tak, aby był również ustalony i wyśrodkowany na dole strony, z widoczną tylko górną połową okręgu.

Aby to zrobić, otwórz ustawienia wiersza dla wiersza zawierającego notki menu i dodaj następujący niestandardowy kod CSS:

Główny element CSS

position: fixed !important;
bottom: -10em;
left: 50%;
margin-left: -15em;
margin-bottom: -5em;

Zaktualizuj indeks z w następujący sposób:

• Indeks Z: 11

Następnie dodaj następującą klasę CSS.

• Klasa CSS: has-transform

Na koniec musimy całkowicie zmniejszyć (lub zmniejszyć) okrągłe menu za pomocą skali transformacji. Umożliwi nam to włączanie i wyłączanie efektu za pomocą jQuery, które rozwija i zwija menu po kliknięciu.

Zaktualizuj następujące elementy:

• Skala transformacji: 1%

Po umieszczeniu naszego podzielonego na segmenty okrągłego menu i przycisku menu wystarczy dodać niestandardowy CSS i jQuery, aby uzupełnić funkcjonalność przycisku.

Dodawanie zewnętrznego niestandardowego CSS do ustawień strony

Otwórz ustawienia strony z menu u dołu kreatora wizualnego i dodaj następujący niestandardowy CSS w zakładce Zaawansowane:

.has-transform, .transform_target .et-pb-icon, .toggle-transform-animation {
  transition: all 400ms ease-in-out;
} 
.has-transform, .toggle-transform-animation {
  font-size:14px;
}
.toggle-transform-animation {
  transform: none !important;
}
.transform_target {
  cursor: pointer;
}
.toggle-active-target .et_pb_blurb .et-pb-icon {
  transform: rotateZ(45deg);
}

@media all and (max-width: 980px) {
  .has-transform {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .has-transform, .toggle-transform-animation {
    font-size:10px;
  } 
} 

Dodawanie jQuery z modułem kodu

Następnie wdróż tryb widoku szkieletowego i dodaj moduł kodu pod notatką przycisku menu.

Następnie dodaj następujący kod do modułu.

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

Ostateczny wynik

Zobaczmy teraz końcowy wynik na aktywnej stronie.

Menu będzie dobrze współpracować z Twoją bieżącą stroną lub dowolnym z naszych gotowych układów, które możesz dodać, klikając ikonę plusa w menu ustawień.

Oto, jak wygląda układ strony docelowej naszego psychologa.

I oto jest na telefonie komórkowym.

Dostosowywanie rozmiaru okrągłego menu

Posegmentowane okrągłe menu jest budowane przy użyciu jednostek długości em, które są zależne od rozmiaru czcionki nadrzędnej. Ułatwia to zwiększanie i zmniejszanie rozmiaru menu. Aby zmienić rozmiar czcionki, po prostu zmień właściwość font-size dla klasy has-transform, która kieruje wiersz w niestandardowym CSS, który dodaliśmy do ustawień strony.

Końcowe przemyślenia

W tym samouczku omówiliśmy, jak utworzyć podzielone na segmenty okrągłe menu w Divi, kreatywnie korzystając z opcji transformacji Divi. Użyliśmy również niestandardowego CSS do takich rzeczy, jak stałe pozycjonowanie i „usuwanie” treści notatek dla elementów menu. jQuery pozwala nam włączać i wyłączać właściwość skali transformacji, aby stworzyć efekt rozwijania i zwijania menu po kliknięciu przycisku menu.

Ogólnie rzecz biorąc, myślę, że w tym poście znajdziesz wiele inspiracji. Zapraszam do rozwijania tej koncepcji, aby tworzyć więcej projektów. Na przykład możesz kontynuować dodawanie notatek i obracać je w krokach co 30 stopni, aby utworzyć cały okrąg z podzielonymi na segmenty łączami menu.

Możesz też stworzyć interaktywny wykres kołowy!

Oto okrągłe menu z ikonami, które również może Ci się spodobać.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!