Přejít k hlavnímu obsahu

Jak vytvořit tlačítka s ikonami v programu Divi

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

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í ...

ikona tlačítka písma

změnit velikost tlačítka divi image.gif

demonstrační tlačítko divi list delements.png

Co potřebujete?

Pro tento tutoriál použiji následující:

  • Divi téma (samozřejmě)
  • 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řidat tlačítko divi builder.jpg

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 obsah souboru zip a vyhledejte soubory elegantních ikonových písem tím, že přejdete na třídu elegant_font> HTML CSS>. Poté přetáhněte soubor „ElegantIcons.ttf“ do počítače a umístěte jej do vizuálního nástroje.

extrahujte zip soubor divi.jpg

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.

dát online divi.jpg

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“.

tlačítko písmo divi.jpg

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.

použití ikony button.jpg

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.

ikona tlačítka divi 5.jpg

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í)

customizační tlačítko divi.jpg

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-left0 !important;

přidat okraj tlačítka diiv.png

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

Nyní bude ikona vašeho tlačítka nahrazena ikonou najetí myší.

demonstrační tlačítko nahrazeno na hover.gif

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

upravte tlačítko.png

Nezapomeňte, že můžete upravit velikost textu tlačítka a tlačítko zůstane v kruhu dokonale jako výplň velikosti textu.

přizpůsobte velikost tlačítka.gif

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.

vyberte rozvržení divi.png

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.

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

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ů).

tlačítko divi.png

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.

divi.png text 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“.

vložte modul style.jpg

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

ikona tlačítka písma

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.

přizpůsobení tlačítka.png

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.

změňte zarovnání tlačítka divi.png

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ů“.

rozšířit image style.jpg

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.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

konečné tlačítko designu divi.png

A protože jsme použili správné techniky mezer, tlačítko zůstane na místě i v mobilu ...

tlačítko náhledu na mobile.png

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:

seznam dostupných ikon divi.png

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žívání Elegant Icons s modulem tlačítek Divi je pohodlný způsob, jak vytvořit jedinečná tlačítka pro váš web. Tím se otevírají dveře kreativitě díky nastavení modulů k přizpůsobení tlačítka pomocí jedinečných stylů textu, efektů přechodu myší 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.

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
7 akcie
podíl4
tweet
Zadat3