Jak tworzyć przyciski czcionek ikon za pomocą Divi

Przyciski czcionek ikon mają wiele zastosowań w świecie projektowania stron internetowych. Ponieważ ikony czcionek pozostają wyraźne w kolorze i wyglądzie, gdy skalują się do różnych rozmiarów, sensowne jest używanie ich w przyciskach. A tworzenie przycisku czcionki ikony w Divi jest dość łatwe przy użyciu eleganckiej czcionki ikon. W tym samouczku pokażę, jak używać czcionek ikon z modułem przycisków Divi, aby utworzyć pojedynczy przycisk ikony.

Niektóre z najważniejszych elementów tego samouczka obejmują:

• Jak używać eleganckiej czcionki, aby dodać ikonę jako tekst przycisku
• Jak dodać wyściółkę i promień obramowania, aby przycisk miał kształt idealnego kwadratu lub koła?
• Jak zastąpić ikonę przycisku inną ikoną po najechaniu kursorem?
• Jak ustawić ikonę przycisku tak, aby nakładała się na obraz?
• i więcej…

zapowiedź

Oto zapowiedź tego, co ma nadejść…

Czego potrzebujesz

W tym samouczku będę używać następujących elementów:

• Motyw Divi (oczywiście)
• Eleganckie ikony czcionek – Po pobraniu pliku zip z wpisu na blogu przeciągniemy plik czcionki eleganticons.ttf, który będzie używany jako niestandardowa czcionka dla naszego modułu przycisków.
• Układ strony głównej Bed & Breakfast (dostępny bezpłatnie z Divi Builder)

Zacznijmy!

Dodawanie eleganckiej czcionki ikon do modułu przycisków

Dodaj moduł przycisku

Aby rozpocząć, utwórz nową stronę i wdróż konstruktor wizualny. Wybierz „Buduj od podstaw”, a następnie, po wdrożeniu wizualnego konstruktora, dodaj wiersz jednej kolumny do sekcji, a następnie dodaj moduł przycisku do wiersza.

Przeciągnij elegancką czcionkę ikon

Aby uzyskać czcionkę Elegant Icon, przejdź do wpisu na blogu Elegant Icon Font i pobierz plik czcionki. Wyodrębnij zawartość pliku zip i znajdź eleganckie pliki czcionek ikon, przechodząc do elegant_font > HTML CSS > czcionki. Następnie przeciągnij plik „ElegantIcons.ttf” z pliku na komputerze i upuść go w kreatorze wizualnym.

Spowoduje to automatyczne wyświetlenie modalnej czcionki Prześlij czcionkę. Po prostu kliknij przycisk przesyłania, aby przesłać czcionkę do Divi Builder.

Teraz będziesz mieć dostęp do eleganckiej czcionki ikon podczas dostosowywania dowolnej czcionki modułu w kreatorze wizualnym.

Przejdź do ustawień modułu przycisków i zaktualizuj czcionkę przycisku za pomocą nowej, właśnie przesłanej czcionki eleganckiej ikony. Pojawi się na liście ikon w sekcji „Czcionki niestandardowe”.

Możesz zauważyć, że teraz tekst przycisku został przekształcony w kilka ikon. Dzieje się tak, ponieważ każdy znak wprowadzony w polu wprowadzania tekstu przycisku ma teraz ikonę odpowiadającą aktualnie używanej literze/znaku.

Ponieważ potrzebujemy tylko jednej ikony do użycia dla naszego przycisku, możesz wybrać dowolny znak na klawiaturze, aby wygenerować ikonę powiązaną z tym znakiem. Na przykład wprowadź cyfrę 5 dla tekstu przycisku, aby uzyskać strzałkę w prawo.

Wymień ikony przycisków po najechaniu kursorem

Jak wiesz, moduł przycisków zawiera opcję dodawania ikon po najechaniu myszą. Możemy użyć tej funkcjonalności, aby zastąpić czcionkę ikon ikoną najechania, aby uzyskać ładny efekt najechania. Wystarczy, że zmodyfikujemy ustawienia przycisków w następujący sposób:

Rozmiar tekstu przycisku: 30px
Ikona przycisku: zobacz zrzut ekranu (będzie to ikona, która zastąpi czcionkę ikony używaną dla przycisku)
Kolor ikony przycisku: #0c71c3 (powinien odpowiadać kolorowi tekstu przycisku)
Umieszczenie ikony przycisku: w lewo
Kolor tekstu najechania przycisku: rgba(255,255,255,0) (jest to całkowicie przezroczyste, aby ukryć czcionkę ikony przycisku po najechaniu)
Niestandardowe dopełnienie: 1 em w lewo, 1 em w prawo (to dopełnienie zastąpi domyślne dopełnienie przycisku i zapobiegnie jego rozwijaniu po najechaniu myszą)

Teraz wszystko, co musimy zrobić, to nadpisać margines dla elementu before w niestandardowym css. Przejdź do zakładki Zaawansowane i wprowadź następujący kod CSS w polu przed:

margin-left: 0 !important;

Teraz ikona przycisku zostanie zastąpiona ikoną najechania kursorem.

Tworzenie idealnie okrągłych przycisków ikon, które skalują się z rozmiarem tekstu przycisku

Projekty przycisków w kształcie kółek działają naprawdę dobrze w przypadku przycisków z jedną ikoną. A jeśli zrozumiesz wewnętrzne działanie odstępów między modułami przycisków, możesz utworzyć idealnie okrągłe przyciski, które skalują się zgodnie z rozmiarem tekstu przycisku.

Sztuczka polega na rozmieszczeniu przycisku za pomocą jednostki długości „em”. Ta jednostka długości jest zależna od rozmiaru tekstu przycisku. Więc jeśli rozmiar tekstu przycisku to 30px, 1em to również 30px (2em będzie to 60px i tak dalej…). Wiedząc o tym, musimy tylko upewnić się, że nasza wyściółka wokół naszego przycisku będzie taka sama ze wszystkich 4 stron. Ale być może nie brałeś pod uwagę, że wysokość linii tekstu przycisku domyślnie wynosi 1,7 em. Oznacza to, że musimy wziąć to pod uwagę podczas dodawania naszych górnych i dolnych wartości wypełnienia.

Dla tych z Was, którzy chcą poznać matematykę stojącą za wartościami dopełnienia potrzebnymi do utworzenia przycisków kół, oto:

W przypadku dopełnienia lewego i prawego ustaw oba na 1em. Oznacza to, że nasza całkowita szerokość przycisku wyniesie 90px (lub 3em), ponieważ…

30px lewego dopełnienia + 30px czcionki ikony + 30px prawego dopełnienia = łącznie 90px

Wysokość linii tekstu przycisku wynosi 1.7em, co odpowiada 170% rozmiaru tekstu przycisku (30px), który jest równy 51px.

W przypadku wyściółki górnej i dolnej ustaw oba na 0,65em. 0,65em to odpowiednik 65% rozmiaru tekstu przycisku (30px), co daje 19,5px.

W związku z tym…

19,5px górnego dopełnienia + 51px wysokości linii + 19,5px dolnego dopełnienia = łącznie 90px

Oznacza to, że gdy tekst przycisku jest ustawiony na 30px, całkowity rozmiar przycisku będzie wynosił 90px na 90px (idealny kwadrat). W rzeczywistości możesz o tym myśleć w ten sposób. Niezależnie od tego, co ustawisz jako rozmiar tekstu przycisku, całkowity rozmiar przycisku będzie 3 razy większy od tej wartości. Tak więc tekst przycisku 40px utworzy przycisk o wymiarach 120 na 120 pikseli i tak dalej.

W tej chwili przycisk ma odpowiednie wymiary, ale nadal jest kwadratowy. Wszystko, co musimy zrobić, to dodać promień obramowania o wartości 50%, aby zmienić kwadratowy przycisk w idealny okrąg.

Oto, czego potrzebujesz, aby zmienić przycisk w przycisk koła:

Promień obramowania przycisku: 50%
Niestandardowe wypełnienie: 0,65 em góra, 0,65 em dół, 1 em w prawo, 1 em w lewo

Nie zapomnij, że możesz dostosować rozmiar tekstu przycisku, a przycisk pozostanie idealnie okrągły, ponieważ wypełnienie będzie skalowane do rozmiaru tekstu.

Dodawanie przycisków ikon do układu Divi

Divi ułatwia dodawanie i dostosowywanie pojedynczych przycisków ikon, aby pasowały do ​​​​projektu dowolnego gotowego układu.

W tym przykładzie pokażę, jak dodać pojedynczą ikonę przycisku do układu strony głównej Bed & Breakfast.

Aby dodać układ do swojej strony, otwórz menu ustawień, klikając fioletową ikonę u dołu strony (upewnij się, że konstruktor wizualny jest włączony). Następnie kliknij ikonę Wczytaj z biblioteki. Wybierz układ strony głównej Bed & Breakfast i kliknij przycisk „Użyj tego układu”, aby wdrożyć układ na stronie.

Dodawanie przycisku ikony do obrazu

Załóżmy, że chcesz dodać małą ikonę przycisku, aby nałożyć róg obrazu na dodatkowe wezwanie do działania, które prowadzi do określonego produktu lub usługi. Wszystko, co musisz zrobić, to dodać moduł przycisku pod obrazem i dostosować go, aby zawierał czcionkę ikony i nakładał się na obraz z niestandardowymi odstępami.

Znajdź sekcję „O nas” w układzie strony głównej. Następnie dodaj moduł przycisku bezpośrednio pod jednym z obrazów użytych do prezentacji „Pokój dwuosobowy” (jest to pierwszy element w pierwszej kolumnie w rzędzie trzech kolumn).

Następnie otwórz ustawienia przycisku i umieść duże „P” w polu tekstowym przycisku. To zmieni się w naszą ikonę, gdy wybierzesz czcionkę Elegant jako czcionkę przycisku.

Aby szybko rozpocząć dopasowywanie projektu przycisku do układu, zapisz ustawienia przycisku i znajdź przycisk „Zarezerwuj teraz” w górnej części układu. Otwórz ustawienia przycisków i skopiuj style przycisków, klikając prawym przyciskiem myszy Opcje przycisku Przełącz tytuł i wybierając opcję "Kopiuj style przycisków" z listy.

Teraz kliknij prawym przyciskiem myszy moduł przycisku dodany pod obrazem i wybierz „Wklej style przycisków”.

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

Czcionka przycisku: elegancka czcionka
Szerokość obramowania przycisku: 0px
Pokaż ikonę przycisku: NIE

Następnie dodajmy nasze sprytne niestandardowe wypełnienie, aby upewnić się, że przycisk jest idealnym kwadratem:

Niestandardowe wypełnienie: 0,65 em góra, 0,65 em dół, 1 em w lewo, 1 em w prawo

Aby ustawić przycisk tak, aby zachodził na prawy dolny róg obrazu, musisz najpierw pozbyć się dolnego marginesu modułu obrazu powyżej. Otwórz ustawienia modułu obrazu obrazu bezpośrednio nad przyciskiem i ustaw dolny margines na 0px.

Teraz musimy przeciągnąć przycisk nad obraz, używając niestandardowej wartości ujemnego marginesu równej wysokości przycisku. W tym celu musimy określić wysokość naszego przycisku. Jak wspomniano wcześniej w tym poście, dzięki niestandardowemu dopełnieniu możemy poznać dokładny rozmiar naszego przycisku na podstawie bieżącego rozmiaru tekstu przycisku. Ponieważ rozmiar tekstu przycisku to 20px, wiemy, że wysokość naszego przycisku to 3em (3 razy rozmiar tekstu przycisku), czyli 60px. Dlatego musimy ustawić niestandardowy margines dla naszego przycisku w następujący sposób:

Margines niestandardowy: -60px Top

A następnie możemy ustawić nasz przycisk po prawej stronie, dostosowując Wyrównanie przycisku do prawej.

Teraz, gdy mamy działający projekt naszego obrazu i przycisku. Wszystko, co musimy zrobić, to dodać ten sam przycisk do wszystkich obrazów w sekcji.

Ponieważ wyjęliśmy dolny margines obrazu, możemy z łatwością zastosować tę zmianę do wszystkich obrazów w sekcji za pomocą Rozszerz style. Kliknij obraz prawym przyciskiem myszy i wybierz „Rozszerz style obrazu”.

W wyskakującym okienku Rozszerz style wybierz "Ta sekcja" dla opcji Cała i kliknij przycisk rozszerzania. Teraz wszystkie obrazy mają dolny margines równy 0 pikseli.

Ostatnim krokiem jest po prostu skopiowanie i wklejenie modułów Button pod każdym z obrazów.

Oto ostateczny projekt.

A ponieważ zastosowaliśmy odpowiednie techniki odstępów, przycisk pozostanie na swoim miejscu również na urządzeniach mobilnych…

Ikony dostępne za pomocą modułu przycisków

Ponieważ tekst przycisku modułu przycisku jest ograniczony do znaków dostępnych na klawiaturze, musisz zbadać te klawisze, aby znaleźć dostępne ikony powiązane z każdym klawiszem. Prostym sposobem na to jest utworzenie modułu przycisku z czcionką przycisku ustawioną na czcionkę elegancką i wpisanie znaków w polu tekstowym przycisku.

Oto zrzut ekranu postaci z odpowiadającą im ikoną czcionki:

Jeśli uważasz, że ten proces jest ograniczony, zawsze możesz użyć modułu tekstowego, aby utworzyć łącza do ikon przy użyciu wymienionych tutaj kodów Unicode.

Końcowe przemyślenia

Używanie eleganckiej czcionki ikon z modułem przycisków Divi to wygodny sposób na tworzenie pojedynczych przycisków ikon dla Twojej witryny. To otwiera drzwi do kreatywności dzięki ustawieniom modułu, aby dostosować swój przycisk za pomocą unikalnych stylów tekstu, efektów najechania i nie tylko. Szczególnie podobają mi się te niestandardowe wartości odstępów między przyciskami, które zapewniają, że przyciski mają kształt idealnego kwadratu lub koła.

Istnieje mnóstwo zastosowań przycisków ikon. Mamy nadzieję, że przykładowy przypadek użycia, który omówiłem, doda trochę inspiracji do własnych projektów.

Aby uzyskać więcej pomysłów, sprawdź, jak korzystać z eleganckiej czcionki ikon lub jak osadzić czcionkę ikon na swojej stronie internetowej.

Chętnie zamieściłbym tu kilka pomysłów od Ciebie w komentarzach poniżej.

Pozdrawiam!