Czy chcesz wiedzieć, jak korzystać z modułu Icon of Divi tworzyć niestandardowe ikony?
Przyciski ikon stały się podstawą w świecie projektowania stron internetowych. Ikony zapewniają zwięzłe wizualne wezwania do działania, które świetnie sprawdzają się na urządzeniach mobilnych, ponieważ nie zajmują dużo miejsca. Działają również dobrze jako przyciski przełączania lub wyskakujące, które użytkownicy intuicyjnie rozpoznają bez potrzeby wpisywania tekstu.
W dzisiejszym samouczku pokażemy Ci, jak zaprojektować przyciski ikon za pomocą Divi. Utwórz przycisk ikony w Divi jest dość proste i przyjemne.
Korzystając z modułu Ikony, możemy wybierać spośród setek ikon i korzystać z niezliczonych wbudowanych opcji projektowania Divi Konstruktor do tworzenia niemal dowolnego rodzaju przycisku z ikoną, jaki możesz wymyślić.
Mamy nadzieję, że ten artykuł pomoże Ci rozpocząć tworzenie niesamowitych przycisków ikon do następnego projektu.
Zacznijmy!
badanie
Oto krótki przegląd przycisków ikon, które będziemy tworzyć w tym samouczku.
Utwórz nową stronę za pomocą Divi Builder
Zobacz też: Divi: Jak dostosować ikony koszyka i wyszukiwania w module „Menu o pełnej szerokości”
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
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.
Twórz przyciski ikon za pomocą modułu Divi Icons
Część 1: Tworzenie przycisku ikony
Na początek dodajmy wiersz z jedną kolumną do domyślnej zwykłej sekcji.
Następnie dodaj nowy moduł Ikona do kolumny.
Ikona, adres URL linku i kolor tła
Pod zakładką Treść ustawienia modułu ikon, zaktualizuj następujące elementy:
- Ikona: Strzałka w prawo (patrz zrzut ekranu)
- Ikona linku URL: # (na razie tylko wypełniacz)
- Tło: #3e22ff
Granica i promień granicy
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Zaokrąglone rogi: 10px
- Szerokość obramowania: 2px
- Kolor obramowania: #7272ff
Pole cienia
- Cień pudełka: Zobacz zrzut ekranu
- Kolor cienia: rgba(62,34,255,0.48)
Dopasowanie klikalnego miejsca do rozmiaru przycisku ikony
Obecnie moduł ikon obejmuje całą szerokość kontenera nadrzędnego (lub kolumny). Oznacza to, że klikalne miejsce jest większe niż rzeczywisty przycisk ikony.
Aby dopasować klikalną przestrzeń do rozmiaru przycisku ikony, możemy nadać modułowi maksymalną szerokość, która jest taka sama jak szerokość przycisku ikony.
W tym przykładzie całkowita szerokość przycisku wynosi 94 piksele.
Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do głównego elementu:
max-width: 94px
Oto wynik.
Część 2: Utwórz kwadratową ikonę przycisku
Aby utworzyć nasz kwadratowy przycisk ikony, zduplikuj wiersz zawierający pierwszy przycisk ikony, który właśnie utworzyliśmy. To da nam zduplikowany przycisk w rzędzie do pracy.
Nadaj ikonie tę samą wysokość i szerokość, utrzymując ją wyśrodkowaną
Duża kolekcja ikon dostępnych do użycia w module Icon zawiera zarówno ikony Divi, jak i ikony Fontawesome. Jednak nie wszystkie ikony będą miały tę samą wysokość i szerokość. To sprawia, że nieco trudniej jest określić dokładną szerokość i wysokość przycisku ikony.
Aby stworzyć idealnie kwadratowy przycisk, który angażuje ikonę po najechaniu kursorem, możemy dodać niestandardowy CSS, aby ustawić wysokość i szerokość ikony, a także wyśrodkować ikonę za pomocą właściwości CSS Flex.
Oto jak.
Najpierw otwórz zduplikowane ustawienia ikony. Następnie zaktualizuj ikonę o nową z selektora ikon.
Usuń wypełnienie z modułu ikon. Nie będzie to konieczne, ponieważ zamierzamy ustawić wysokość i szerokość ikony.
Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do Ikona Elementu :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Teraz przycisk ikony będzie miał wysokość i szerokość równą 90 pikseli, co czyni go idealnym kwadratem. Ponadto właściwość flex wyrównuje ikonę w środku modułu. Pozwala to na łatwą aktualizację rozmiaru ikon w module ikon.
Aby zakończyć ten przycisk, nadajmy mu gradient tła i biały kolor obramowania w następujący sposób:
- Gradient zatrzymuje się:
- 0%: #3e22ff
- 100%: #ff2000
- Kolor obramowania: #fff
Oto wynik końcowy.
Utwórz okrągły przycisk ikony
Gdy przycisk ikony jest idealnym kwadratem, uczynienie go okrągłym jest proste. Ale zanim pokażemy ci tę prostą sztuczkę, zduplikujmy poprzednią linię, aby zacząć budować nasz okrągły przycisk z ikoną.
Teraz otwórz ustawienia naszej nowej ikony duplikatów i pod zakładką Wnętrze, zaktualizuj promień obramowania (lub zaokrąglone rogi) w następujący sposób:
- Zaokrąglone rogi: 50%
I tak po prostu mamy okrągły przycisk z ikoną!
Aby nieco zmienić projekt, nadajmy modułowi ikon inną ikonę i kolor tła w następujący sposób:
- Ikona: zobacz zrzut ekranu
- Tło: #121212
Oto wynik.
Utwórz menu poziome przycisku ikony
Popularnym trendem jest używanie ikon do tworzenia menu ikon, które zwykle składa się z kilku przycisków umieszczonych obok siebie. W tym celu możemy użyć właściwości flex.
Oto jak to zrobić.
Najpierw dodaj nowy wiersz do kolumny na stronie.
Otwórz ustawienia linii i zaktualizuj szerokość rynny do 1.
- Szerokość rynny: 1
Następnie otwórz ustawienia kolumn w wierszu i dodaj następujący niestandardowy kod CSS do głównego elementu kolumny:
display:flex;
align-items:center;
Dodaj nowy moduł Ikona do kolumny.
Pod zakładką Treść ustawienia ikony, wybierz ikonę i dodaj adres URL łącza ikony.
Pod zakładką Wnętrze, zaktualizuj następujące informacje:
- Kolor ikony: #3e22ff
- Rozmiar ikony: 40 pikseli
- Margines (lewy i prawy): 10px
- Szerokość obramowania: 2px
- Kolor obramowania: #3e22ff
UWAGA : Margines stworzy przestrzeń między sąsiednimi przyciskami, gdy dodamy więcej później.
Pod zakładką Zaawansowane, dodaj następujący niestandardowy kod CSS w polu Ikona Elementu (tak jak zrobiliśmy wcześniej dla przycisku z kwadratową ikoną):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Teraz za każdym razem, gdy dodamy nowe przyciski ikon, pojawią się one obok siebie. Aby to zilustrować, skopiujmy istniejący przycisk ikony trzy razy, aby utworzyć w sumie cztery przyciski ikon w poziomym menu.
Następnie możemy wrócić i w razie potrzeby zaktualizować ikony.
Oto wynik.
Dodano efekty najechania na przycisk ikony
Trudno mówić o projektowaniu przycisków ikon bez wspominania o efektach najechania. Są po prostu zbyt zabawne, by je zignorować.
Zmiana koloru tła i koloru ikony po najechaniu myszą
Zmienianie kolorów przycisków to popularny i skuteczny efekt najechania. Na przykład możemy jednocześnie zmienić kolor tła i kolor ikony, gdy użytkownik najedzie kursorem na przycisk.
Aby to zrobić, otwórz ustawienia modułu ikon i włącz opcje najechania dla koloru tła i wybierz inny kolor dla stanu najechania. Następnie możesz zrobić to samo dla ikony.
W tym przykładzie zmieniamy kolor tła z białego na niebieski, a ikonę z niebieskiego na biały.
Zmień ikonę po najechaniu kursorem
Innym efektem najechania, który może Ci się spodobać, jest całkowita zmiana ikony. Aby to zrobić, możesz wybrać inną ikonę dla stanu najechania, gdy wybierzesz ikonę w ustawieniach ikon.
Skala przycisku ikony po najechaniu kursorem
Trudnym do zignorowania efektem najechania jest efekt skalowania. To powiększa lub powiększa ikonę przycisku. Najlepszym sposobem dodania tego typu efektu najechania jest użycie opcji transformacji Divi. Umożliwi to wzrost przycisku bez wpływu na otaczające go elementy.
Aby dodać efekt najechania na skalę do przycisku ikony, otwórz ustawienia ikony i pod zakładką Wnętrze, poszukaj opcji transformacji. Włącz opcje aktywowania, a następnie przypisz następującą skalę transformacji do stanu aktywowania:
- Transformacja Y: 118%
- Transformacja X: 118%
Spowoduje to zwiększenie rozmiaru przycisku ikony o 18%, gdy użytkownik najedzie na niego kursorem.
Przycisk obracania ikony po najechaniu kursorem
Obracanie unoszących się obiektów to zawsze przyjemna mikrointerakcja. Aby obrócić ikonę przycisku po najechaniu, możemy użyć opcji transformacji transformacji. Ale wcześniej ustawmy przycisk okrągły, aby tylko ikona wydawała się obracać.
Aby ikona była okrągła, zakładając, że przycisk jest kwadratem, po prostu zaktualizuj ustawienie zaokrąglonych rogów do 50% we wszystkich czterech rogach.
Następnie zaktualizuj opcje przekształcania, aby uwzględnić następującą wartość obrotu transformacji w stanie najechania:
- Transformacja Obrót Z: 180 stopni
Rzućmy okiem na nasze 4 efekty najechania w akcji.
Ostateczny wynik
Przyjrzyjmy się końcowym wynikom naszego samouczka.
Czytaj także: Divi: Jak podświetlić moduł „Blurb” po najechaniu kursorem i rozmyć inne?
Oto nasze trzy przyciski ikon (standardowe, kwadratowe i okrągłe).
A oto poziome menu z przyciskami ikon z efektami najechania.
Pobierz DIVI teraz !!!
Wnioski
Dowiedz się, jak zaprojektować przyciski ikon dla Witryna internetowa jest niezbędna. Jak widzieliśmy w tym samouczku, z Divi nie jest to takie trudne. Divi's Icon Module ma wiele wbudowanych opcji, które otwierają drzwi do kreatywnych projektów przycisków ikon.
Mamy nadzieję, że techniki opisane w tym artykule pomogą Ci odblokować magię własnych projektów przycisków ikon.
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.
...
