Przyciski z ikonicznymi czcionkami mają wiele zastosowań w świecie projektowania stron internetowych. Ponieważ kultowe czcionki zachowują wyrazisty kolor i wygląd w miarę skalowania do różnych rozmiarów, dobrym pomysłem jest używanie ich w przyciskach. Utworzenie przycisku z ikonicznymi czcionkami w Divi jest w rzeczywistości dość łatwe przy użyciu czcionek z biblioteki ” ElegantIcons”. W tym samouczku pokażę, jak używać czcionek ikon z modułem przycisku Divi, aby utworzyć przycisk z pojedynczą ikoną.
Oto niektóre z najważniejszych cech tego samouczka:
- Narzędzie do komentowania komentarzy ElegantIcons aby dodać ikonę jako tekst przycisku
- Jak dodać dopełnienie i promień obramowania, aby przycisk wyglądał jak idealny kwadrat lub okrąg
- Jak zamienić ikonę przycisku na inną ikonę podczas najechania kursorem
- Jak ustawić ikonę przycisku, aby nałożyć obraz
- i więcej ...
badanie
Oto podgląd tego, co nadchodzi ...
Czego potrzebujesz?
W tym samouczku użyję następujących elementów:
- Motyw Divi (oczywiście)
- Stylowe ikony czcionek, samouczek na temat Elegancki motyw jest znacznie bardziej precyzyjny. Po pobraniu pliku zip z posta na blogu przeciągniemy go do pliku czcionki eleganticons.ttf, aby użyć go jako niestandardowej czcionki dla naszego modułu przycisków.
- Strona główna Bed & Breakfast (dostępny bezpłatnie w Divi Builder)
Zacznijmy!
Dodaj czcionkę Elegant Icons do modułu przycisków
Dodaj moduł przycisku
Aby rozpocząć, utwórz nową stronę i wdróż narzędzie wizualne. Wybierz opcję „Buduj od podstaw”, a po wdrożeniu narzędzia do tworzenia wizualizacji dodaj wiersz kolumny do sekcji, a następnie dodaj moduł przycisku do wiersza.
Przeciągnij stylową czcionkę ikony
Aby uzyskać kolorową grę ElegantFontsmożesz pobrać ten pakiet czcionek za pośrednictwem tego linku. Wyodrębnij to treść z pliku zip i znajdź eleganckie pliki czcionek ikon, przechodząc do eleganckiej czcionki > HTML CSS > klasa. Następnie przeciągnij plik „ElegantIcons.ttf” na swój komputer i upuść go w kreatorze wizualnym.
Spowoduje to wyświetlenie modalu Automatycznie pobierz czcionkę. Wystarczy kliknąć przycisk pobierania, aby pobrać czcionkę do Divi Builder.
Teraz będziesz mieć dostęp do stylowej czcionki ikon podczas dostosowywania czcionki mod w kreatorze wizualnym.
Przejdź do ustawień modułu przycisków i zaktualizuj czcionkę przycisku nową czcionką Elegant Icon, którą właśnie pobrałeś. Pojawi się na liście ikon pod „Własnymi czcionkami”.
Możesz zauważyć, że tekst przycisku został przekształcony w kilka ikon. Rzeczywiście, każdy znak wprowadzony w polu wprowadzania tekstu przycisku ma teraz ikonę odpowiadającą aktualnie używanej literze / znakowi.
Ponieważ potrzebujemy tylko jednej ikony dla naszego przycisku, możesz wybrać dowolny znak na klawiaturze, aby wygenerować ikonę skojarzoną z tym znakiem. Na przykład wprowadź liczbę 5 w tekście przycisku, aby uzyskać prawą strzałkę w kształcie szewronu.
Zamień ikony przycisków po najechaniu kursorem
Jak wiesz, moduł przycisków zawiera opcję dodawania ikon po najechaniu kursorem. Możemy użyć tej funkcji, aby zastąpić czcionkę ikony ikoną najechania, aby uzyskać ładny efekt najechania. Wszystko, co musimy zrobić, to zmienić ustawienia przycisków w następujący sposób:
Rozmiar tekstu przycisku: 30px Ikona przycisku: patrz zrzut ekranu (będzie to ikona, która zastąpi ikonę czcionki używanej dla przycisku) Ikona Kolor przycisku: # 0c71c3 (powinien pasować do koloru używanego dla tekstu przycisku ) Umiejscowienie ikony przycisku: Kolor tekstu po najechaniu lewym przyciskiem: rgba (255,255,255,0) (jest to całkowicie przezroczyste, aby ukryć czcionkę ikony przycisku najechania). Wypełnienie niestandardowe: pierwsze po lewej, pierwsze po prawej (to wypełnienie zastąpi rozwijanie po najechaniu kursorem)
Teraz wszystko, co musimy zrobić, to zastąpić margines przedniego elementu w niestandardowym css. Przejdź do zakładki Zaawansowane i wprowadź następujący kod CSS w przednim polu:
margin-left: 0 !important; |
Teraz ikona przycisku zostanie zastąpiona ikoną wskaźnika myszy.
Kreatywne ikony przycisków z okręgiem skalowanym według rozmiaru tekstu przycisku
Przyciski w kształcie koła świetnie sprawdzają się w przypadku przycisków z pojedynczą ikoną. A jeśli rozumiesz wewnętrzne działanie odstępów między modułami przycisków, możesz utworzyć idealnie okrągłe przyciski skalowane do rozmiaru tekstu przycisku.
Sztuczka polega na tym, aby rozmieścić guzik za pomocą jednostki długości „em”. Ta jednostka długości jest zależna od rozmiaru tekstu na przycisku. Więc jeśli rozmiar tekstu przycisku to 30px, 1em to także 30px (2em to 60px i tak dalej…). Wiedząc o tym, musimy tylko upewnić się, że wyściółka wokół naszego przycisku będzie taka sama ze wszystkich 4 stron. Ale to, czego mogłeś nie wziąć pod uwagę, to fakt, że wysokość linii tekstu przycisku wynosi domyślnie 1.7 em. Oznacza to, że musimy wziąć to pod uwagę, dodając nasze górne i dolne wartości dopełnienia.
Dla tych z Was, którzy chcą znać matematykę kryjącą się za wartościami dopełnienia potrzebnymi do tworzenia przycisków kółka, oto:
W przypadku wypełnienia lewego i prawego ustaw oba na 1em. Oznacza to, że całkowita szerokość Twojego przycisku wyniesie 90px (lub 3em), ponieważ ...
30px dopełnienie w lewo + 30px dla ikony czcionki + 30px dopełnienie w prawo = 90px ogółem
Wysokość linii tekstu przycisku wynosi 1.7 em, co odpowiada 170% rozmiaru tekstu przycisku (30 pikseli), czyli 51 pikseli.
Dla dopełnienia górnego i dolnego ustaw oba na 0,65em. 0.65em to 65% rozmiaru tekstu przycisku (30px), co odpowiada 19.5px.
Więc ...
Górna wyściółka 19.5px + wysokość linii 51px + dolna wyściółka 19.5px = suma 90px
Oznacza to, że gdy tekst przycisku jest ustawiony na 30 pikseli, całkowity rozmiar przycisku wyniesie 90 na 90 pikseli (idealny kwadrat). Właściwie możesz o tym myśleć w ten sposób. Niezależnie od rozmiaru tekstu przycisku, całkowity rozmiar przycisku jest trzykrotną wartością. Tak więc tekst przycisku o rozmiarze 3 pikseli utworzy przycisk o wymiarach 40 na 120 pikseli itp.
W tej chwili przycisk ma prawidłowe wymiary, ale nadal jest kwadratowy. Wszystko, co musimy zrobić, to dodać 50% promienia obramowania, aby zmienić kwadratowy przycisk w idealny przycisk koła.
Oto, co musisz zmienić przycisk na kółko:
Promień obramowania: 50%
Własna tapicerka: 0.65em Top, 0.65em Bottom, 1em Straight, 1em Left
Pamiętaj, że możesz dostosować rozmiar tekstu przycisku, a przycisk pozostanie w kółku idealnie tak, jak wypełnienie rozmiaru tekstu.
Dodawanie przycisków w Divi
Divi ułatwia dodawanie i dostosowywanie unikalnych przycisków ikon, aby pasowały do projektu dowolnego wstępnie zdefiniowanego układu.
W tym przykładzie pokażę, jak dodać przycisk z pojedynczą ikoną 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 generator wizualny jest włączony). Następnie kliknij ikonę Załaduj 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.
Dodanie ikony przycisku do obrazu
Załóżmy, że chcesz dodać mały przycisk z ikoną, aby nałożyć róg obrazu z dodatkowym wezwaniem do działania związanym z określonym produktem lub usługą. Wszystko, co musisz zrobić, to dodać moduł przycisku pod obrazem i dostosować go tak, aby zawierał czcionkę ikony i nakładał na obraz niestandardowe odstępy.
Poszukaj sekcji „O nas” na stronie głównej. Następnie dodaj moduł przycisku bezpośrednio pod jednym z obrazów używanych do przedstawienia „Pokoju dwuosobowego” (pierwszy w pierwszej kolumnie rzędu trzech kolumn).
Następnie otwórz ustawienia przycisku i wpisz duże „P” w polu tekstowym przycisku. Zmieni się to w naszej ikonie, gdy wybierzesz niesamowite zestawy tła, takie jak czcionka przycisku.
Aby szybko rozpocząć dopasowywanie projektu przycisku do układu, zapisz ustawienia przycisku i znajdź przycisk „Zarezerwuj teraz” u góry układu. Otwórz Ustawienia przycisków i skopiuj style przycisków, klikając prawym przyciskiem myszy Opcje przycisków, przełączając tytuł i wybierając z listy opcję „Kopiuj style przycisków”.
Teraz kliknij prawym przyciskiem myszy moduł dodany poniżej obrazu i wybierz „Wklej styl przycisku”.
Następnie zaktualizuj ustawienia przycisków w następujący sposób:
Przycisk czcionki: Fantastyczna czcionka
przycisk czcionki Szerokość obramowania: 0px
Pokaż ikonę przycisku: NIE
Następnie dodaj naszą sprytną niestandardową wyściółkę, aby przycisk był idealnym kwadratem:
Niestandardowe dopełnienie: 0.65em Top, 0.65em Bottom, 1em w lewo, 1em Right
Aby ustawić przycisk tak, aby obejmował prawy dolny róg obrazu, należy najpierw usunąć dolny margines z 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 na obraz, używając niestandardowej ujemnej wartości marginesu równej wysokości przycisku. Aby to zrobić, musimy określić wysokość naszego przycisku.
Jak wspomniano wcześniej w tym artykule, dzięki niestandardowemu wypełnieniu możemy poznać dokładny rozmiar naszego przycisku na podstawie aktualnego rozmiaru tekstu przycisku. Ponieważ rozmiar tekstu przycisku wynosi 20 pikseli, wiemy, że wysokość naszego przycisku wynosi 3em (3-krotność rozmiaru tekstu przycisku), czyli 60 pikseli. Dlatego musimy ustawić niestandardowy margines dla naszego przycisku w następujący sposób:
Margines niestandardowy: -60px Top
Następnie możemy ustawić nasz przycisk po prawej stronie, dostosowując wyrównanie przycisku po prawej stronie.
Teraz, gdy mamy działający projekt naszego obrazu i naszego przycisku. Wszystko, co musimy zrobić, to dodać ten sam przycisk do wszystkich zdjęć w sekcji.
Ponieważ usunęliśmy dolny margines obrazu, możemy łatwo zastosować tę zmianę do wszystkich obrazów w sekcji za pomocą opcji Rozszerz style. Kliknij obraz prawym przyciskiem myszy i wybierz „Rozszerz style obrazu”.
W oknie dialogowym Rozszerz style wybierz „Ta sekcja” dla opcji W poprzek i kliknij przycisk Rozwiń. Teraz wszystkie obrazy mają dolny margines 0 pikseli.
Ostatnim krokiem jest po prostu skopiowanie i wklejenie modułów Button pod każdym obrazem.
Oto ostateczny projekt.
A ponieważ zastosowaliśmy odpowiednie techniki odstępów, przycisk pozostanie na swoim miejscu na telefonie komórkowym ...
Ikony dostępne za pomocą modułu przycisków
Ponieważ tekst przycisku modułu przycisków jest ograniczony do znaków dostępnych na klawiaturze, należy zbadać te klawisze, aby znaleźć dostępne ikony skojarzone z każdym klawiszem. Łatwym sposobem na to jest utworzenie modułu przycisku z czcionką przycisku ustawioną na elegancką czcionkę i wpisanie znaków w polu tekstowym przycisku.
Oto zrzut ekranu przedstawiający postacie z odpowiadającą im ikoną czcionki:
Jeśli uznasz tę listę za dość wyczerpującą, zawsze możesz użyć modułu tekstowego, aby utworzyć łącza ikon za pomocą wymienionych kodów Unic. tutaj .
końcowe przemyślenia
Używanie eleganckich ikon z modułem przycisków Divi to wygodny sposób na tworzenie unikalnych przycisków dla Twojego Witryna internetowa. To otwiera drzwi do kreatywności dzięki ustawieniom modułu, które pozwalają dostosować przycisk za pomocą unikalnych stylów tekstu, efektów najechania i nie tylko. Szczególnie podobają mi się niestandardowe wartości odstępów między przyciskami, dzięki którym przyciski mają kształt idealnego kwadratu lub koła.
Przyciski ikon mają mnóstwo zastosowań. Mam nadzieję, że przykład użycia przedstawiony w tym samouczku doda inspiracji do twoich własnych projektów.
