Tlačítka s ikonickými písmy mají ve světě webového designu mnoho využití. Vzhledem k tomu, že ikonická písma zůstávají ostrá v barvě a designu, protože se zvětšují na různé velikosti, je dobré je používat v tlačítkách. A vytvoření tlačítka s ikonickými písmy v Divi je ve skutečnosti docela snadné pomocí písem z knihovny “ ElegantIcons". V tomto tutoriálu vám ukážu, jak můžete pomocí ikonových písem s modulem tlačítka Divi vytvořit jediné tlačítko s ikonou.
Některé z hlavních bodů tohoto tutoriálu patří:
- Jak používat ElegantIcons přidat ikonu jako text tlačítka
- Jak přidat polstrování a poloměr ohraničení, aby tlačítko vypadalo jako dokonalý čtverec nebo kruh
- Jak nahradit ikonu tlačítka jinou ikonou, když umístíte ukazatel myši
- Jak umístit ikonu tlačítka na překrytí obrázku
- a další ...
přehled
Zde je náhled toho, co přichází ...
Co potřebujete?
Pro tento tutoriál použiji následující:
- Divi téma (očividně)
- Stylové písmo ikony, návod na Elegantní téma je mnohem přesnější. Jakmile si stáhnete soubor zip z příspěvku na blogu, přetáhneme ho do souboru písma eleganticons.ttf, který použijeme jako vlastní písmo pro náš modul tlačítek.
- Domovská stránka Bed & Breakfast (k dispozici zdarma od Divi Builder)
Začněme!
Přidejte do svého tlačítka tlačítko písmo Elegant Icons
Přidejte modul tlačítka
Chcete-li začít, vytvořte novou stránku a nasaďte vizuální builder. Vyberte možnost „Sestavit od začátku“, poté po nasazení vizuálního nástroje přidejte do sekce řádek sloupce a do řádku přidejte tlačítkový modul.
Přetáhněte stylové ikonové písmo
Chcete-li získat barevnou hru ElegantFontssi můžete stáhnout tento balíček písem prostřednictvím tohoto odkazu. Extrahujte to obsah ze souboru zip a vyhledejte soubory písem elegantní ikony tak, že přejdete na elegant_font > HTML CSS > class. Poté přetáhněte soubor „ElegantIcons.ttf“ do počítače a vložte jej do vizuálního tvůrce.
Tím se vyvolá modal Automaticky stahovat písmo. Stačí kliknout na tlačítko pro stažení a stáhnout písmo do Divi Builder.
Nyní budete mít přístup ke stylovému písmu ikon při přizpůsobování písma mod ve vizuálním nástroji.
Přejděte do nastavení modulu tlačítka a aktualizujte písmo tlačítka novým písmem Elegant Icon, které jste právě stáhli. Zobrazí se v seznamu ikon v části „Vlastní písma“.
Můžete si všimnout, že se text vašeho tlačítka změnil na spoustu ikon. Každý znak zadaný do oblasti pro zadávání textu tlačítka má nyní ikonu odpovídající aktuálně používanému písmenu / znaku.
Protože pro naše tlačítko potřebujeme pouze jednu ikonu, můžete vybrat libovolný znak na klávesnici a vygenerovat ikonu spojenou s tímto znakem. Například zadejte číslo 5 pro text tlačítka, abyste získali šipku doprava.
Vyměňte ikony tlačítek při najetí myší
Jak víte, modul tlačítka obsahuje možnost přidat ikony při najetí myší. Tuto funkci můžeme použít k nahrazení písma ikony ikonou přechodu pro pěkný efekt přechodu. Vše, co musíme udělat, je změnit nastavení tlačítek následujícím způsobem:
Tlačítko Velikost textu: 30px Ikona tlačítka: viz screenshot (toto bude ikona, která nahradí ikonu písma použitou pro tlačítko) Ikona Barva tlačítka: # 0c71c3 (která by měla odpovídat barvě použité pro text tlačítka ) Umístění ikony tlačítka: Barva textu kurzoru vlevo: rgba (255,255,255,0) (toto je zcela průhledné, aby skrylo písmo ikony kurzoru). Vlastní výplň: 1. vlevo, 1. vpravo (tato výplň nahradí rozšiřující se při vznášení)
Nyní vše, co musíme udělat, je nahradit okraj předního prvku ve vlastním css. Přejděte na kartu Upřesnit a do předního pole zadejte následující kód CSS:
margin-left: 0 !important; |
Nyní bude ikona vašeho tlačítka nahrazena ikonou najetí myší.
Kreativní ikona tlačítka s kruhem v měřítku s velikostí textu tlačítka
Tlačítka ve tvaru kruhu fungují skvěle pro tlačítka s jednou ikonou. A pokud rozumíte vnitřnímu fungování rozteče modulů tlačítek, můžete vytvořit dokonale kruhová tlačítka, která se přizpůsobí velikosti textu tlačítka.
Trik spočívá v rozmístění tlačítka pomocí jednotky délky „em“. Tato jednotka délky je relativní k velikosti textu na vašem tlačítku. Pokud je tedy velikost textu tlačítka 30px, 1em je také 30px (2em bude 60px atd.). Víme to, musíme se jen ujistit, že naše polstrování kolem našeho tlačítka bude stejné na všech 4 stranách. Ale možná jste neuvažovali, že výška textového řádku tlačítka je ve výchozím nastavení 1.7 em. To znamená, že to musíme vzít v úvahu, když přidáme naše horní a dolní hodnoty výplně.
Pro ty z vás, kteří chtějí znát matematiku za hodnotami výplně potřebnými k vytvoření kruhových tlačítek, je zde:
U levé a pravé výplně nastavte obě na 1em. To znamená, že celková šířka vašeho tlačítka bude 90px (nebo 3em), protože ...
30px výplň vlevo + 30px pro písmo-ikona + 30px výplň vpravo = 90px celkem
Výška textového řádku tlačítka je 1.7 em, což odpovídá 170% velikosti textu tlačítka (30 pixelů), což je 51 pixelů.
Pro horní a dolní výplň nastavte obě na 0,65 em. 0.65em je ekvivalent 65% velikosti textu tlačítka (30px), což odpovídá 19.5px.
Takže ...
19.5px horní výplň + 51px výška řádku + 19.5px spodní výplň = 90px celkem
To znamená, že když je text tlačítka nastaven na 30px, bude celková velikost tlačítka 90px na 90px (perfektní čtverec). Ve skutečnosti o tom můžete přemýšlet. Bez ohledu na velikost textu tlačítka je celková velikost tlačítka trojnásobkem hodnoty. Text tlačítka 3px vytvoří tlačítko 40px na 120px atd.
V tuto chvíli má tlačítko správné rozměry, ale stále je čtvercové. Jediné, co musíme udělat, je přidat 50% poloměr ohraničení, aby se čtvercové tlačítko změnilo na tlačítko dokonalého kruhu.
Zde je to, co potřebujete pro změnu tlačítka na kruhové tlačítko:
Tlačítko hranice poloměru: 50%
Vlastní čalounění: 0.65em, 0.65em, 1em, 1em vlevo
Nezapomeňte, že můžete upravit velikost textu tlačítka a tlačítko zůstane v kruhu dokonale jako výplň velikosti textu.
Přidání tlačítek na Divi
Divi usnadňuje přidávání a přizpůsobování jedinečných ikonových tlačítek tak, aby odpovídaly designu jakéhokoli předdefinovaného rozvržení.
V tomto příkladu vám ukážu, jak přidat tlačítko jedné ikony do rozvržení domovské stránky Bed & Breakfast.
Chcete-li na stránku přidat rozložení, otevřete nabídku nastavení kliknutím na fialovou ikonu v dolní části stránky (zkontrolujte, zda je povolen vizuální generátor). Poté klikněte na ikonu Načíst z knihovny. Vyberte rozvržení domovské stránky Bed & Breakfast a kliknutím na tlačítko „Použít toto rozvržení“ rozvržení na stránce nasaďte.
Přidání tlačítka ikony k obrázku
Předpokládejme, že chcete přidat malé tlačítko s ikonou, které překryje roh obrázku další výzvou k akci související s konkrétním produktem nebo službou. Vše, co musíte udělat, je přidat modul tlačítka pod obrázek a přizpůsobit jej tak, aby zahrnoval písmo ikony, a překrýt obrázek s vlastními mezerami.
Na domovské stránce vyhledejte část „O nás“. Poté přidejte tlačítkový modul přímo pod jeden z obrázků použitých k prezentaci „Double Room“ (první v prvním sloupci řady tří sloupců).
Poté otevřete nastavení tlačítka a do textového pole tlačítka vložte velké písmeno „P“. To se v naší ikoně změní, jakmile vyberete úžasné sady pozadí, jako je písmo tlačítka.
Chcete-li rychle začít porovnávat design tlačítka s rozvržením, uložte nastavení tlačítek a najděte tlačítko „Zarezervovat“ v horní části rozvržení. Otevřete Nastavení tlačítka a zkopírujte styly tlačítek kliknutím pravým tlačítkem myši na možnost Možnosti přepínače a výběrem možnosti „Kopírovat styly tlačítek“ ze seznamu.
Nyní klikněte pravým tlačítkem na modul, který jste přidali pod obrázek, a vyberte příkaz „Vložit styl tlačítka“.
Poté aktualizujte nastavení tlačítka následujícím způsobem:
Tlačítko písma: Awesome písmo
tlačítko písma Šířka ohraničení: 0px
Zobrazit ikonu tlačítka: NE
Pak přidejte naše chytré vlastní vycpávky, aby tlačítko bylo dokonalým čtvercem:
Zakázková výplň: 0.65 Top, 0.65em dolů, 1em vlevo, 1em vpravo
Chcete-li umístit tlačítko tak, aby zakrývalo pravý dolní roh obrázku, musíte nejprve odstranit spodní okraj z modulu obrázku výše. Otevřete nastavení modulu Image Image přímo nad tlačítkem a nastavte Bottom Margin na 0px.
Nyní musíme přetáhnout tlačítko přes obrázek pomocí vlastní hodnoty záporného okraje rovné výšce tlačítka. Abychom to mohli udělat, musíme určit výšku našeho tlačítka.
Jak již bylo zmíněno dříve v tomto článku, s vlastní výplní můžeme znát přesnou velikost našeho tlačítka na základě aktuální velikosti textu tlačítka. Jelikož velikost textu tlačítka je 20px, víme, že naše výška tlačítka je 3em (trojnásobek velikosti textu tlačítka), což je 3px. Proto musíme nastavit vlastní okraj pro naše tlačítko takto:
Vlastní marže: -60px nahoru
A pak můžeme umístit naše tlačítko napravo úpravou zarovnání tlačítka napravo.
Nyní, když máme funkční design pro náš obrázek a naše tlačítko. Jediné, co musíme udělat, je přidat stejné tlačítko ke všem obrázkům v sekci.
Protože jsme odstranili spodní okraj obrázku, můžeme tuto změnu snadno použít na všechny obrázky v sekci pomocí možnosti Rozšířit styly. Klikněte pravým tlačítkem na obrázek a vyberte možnost „Rozšířit styly obrázků“.
V dialogovém okně Rozšířit styly vyberte možnost „Tato sekce“ pro možnost Napříč a klikněte na tlačítko Rozbalit. Nyní mají všechny obrázky spodní okraj 0px.
Posledním krokem je zkopírování a vložení modulů Button pod každý obrázek.
Zde je konečný návrh.
A protože jsme použili správné techniky mezer, tlačítko zůstane na místě i v mobilu ...
Ikony dostupné pomocí tlačítkového modulu
Protože text tlačítka modulu tlačítka je omezen na znaky dostupné na klávesnici, budete muset tyto klávesy prozkoumat, abyste našli dostupné ikony spojené s každou klávesou. Snadný způsob, jak to udělat, je vytvořit modul tlačítka s nastavením písma tlačítka na elegantní písmo a zadáním znaků do textového pole tlačítka.
Zde je snímek obrazovky s příslušnou ikonou písma:
Pokud vám tento seznam připadá poněkud vyčerpávající, můžete vždy použít textový modul k vytvoření ikonových odkazů pomocí uvedených kódů Unic. zde .
Závěrečné myšlenky
Použití elegantních ikon s Divi's Button Module je pohodlný způsob, jak vytvořit jedinečná tlačítka Webové stránky. To otevírá dveře kreativitě s nastavením modulu pro přizpůsobení tlačítka pomocí jedinečných stylů textu, efektů vznášení a dalších. Obzvláště se mi líbí vlastní hodnoty mezer mezi tlačítky, které zajišťují, že tlačítka mají tvar dokonalého čtverce nebo kruhu.
Existuje mnoho způsobů použití ikonových tlačítek. Doufejme, že příklad použití zahrnutý v tomto kurzu dodá inspiraci vašim vlastním projektům.
