Chtěli byste vědět, jak používat modul Icon of divi vytvořit vlastní ikony?
Ikonová tlačítka se ve světě webdesignu stala základem. Ikony poskytují stručné vizuální výzvy k akci, které skvěle fungují pro mobilní zařízení, protože nezabírají mnoho místa. Dobře fungují také jako přepínací nebo vyskakovací tlačítka, která uživatelé intuitivně rozpoznávají, aniž by potřebovali text.
V dnešním tutoriálu vám ukážeme, jak navrhovat tlačítka ikon pomocí divi. Vytvořte tlačítko ikony v divi je docela jednoduché a zábavné.
Pomocí modulu Ikony si můžeme vybrat ze stovek ikon a využít nespočet vestavěných možností designu divi Builder pro vytvoření téměř jakéhokoli typu tlačítka ikony, na které si vzpomenete.
Doufáme, že vám tento článek pomůže začít vytvářet úžasná tlačítka ikon pro váš další projekt.
Začněme!
přehled
Zde je rychlý přehled tlačítek ikon, která vytvoříme v tomto tutoriálu.
Vytvořte novou stránku pomocí Divi Builder
Viz také: Divi: Jak přizpůsobit košík a ikony vyhledávání v modulu "Nabídka plné šířky".
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder
poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
Vytvářejte tlačítka ikon pomocí modulu Divi Icons
Část 1: Vytvoření tlačítka ikony
Pro začátek přidáme do výchozí běžné sekce řádek s jedním sloupcem.
Poté přidejte nový modul Ikona do kolony.
Ikona, URL odkazu a barva pozadí
Na kartě Obsah nastavení modulu ikon, aktualizujte následující:
- Ikona: Šipka vpravo (viz snímek obrazovky)
- Adresa URL odkazu ikony: # (zatím jen výplň)
- Pozadí: #3e22ff
Hranice a hraniční poloměr
Na kartě Design, aktualizujte následující:
- Zaoblené rohy: 10px
- Šířka okraje: 2px
- Barva ohraničení: #7272ff
Stínová krabička
- Box Shadow: Viz snímek obrazovky
- Barva stínu: rgba (62,34,255,0.48)
Odpovídající klikací prostor s velikostí tlačítka ikony
V současné době bude modul ikony pokrývat celou šířku nadřazeného kontejneru (nebo sloupce). To znamená, že klikací prostor je větší než skutečné tlačítko ikony.
Aby prostor, na který lze kliknout, odpovídal velikosti tlačítka ikony, můžeme modulu přidělit maximální šířku, která je stejná jako šířka tlačítka ikony.
V tomto příkladu je celková šířka tlačítka 94 pixelů.
Na kartě Upřesnit přidejte do hlavního prvku následující vlastní CSS:
max-width: 94px
Zde je výsledek.
Část 2: Vytvořte tlačítko se čtvercovou ikonou
Chcete-li vytvořit naše tlačítko se čtvercovou ikonou, duplikujte řádek obsahující první tlačítko ikony, které jsme právě vytvořili. Tím získáme duplicitní tlačítko v řádku, se kterým můžeme pracovat.
Přidělte ikoně stejnou výšku a šířku a ponechte ji ve středu
Velká sbírka ikon dostupných pro použití v modulu Icon zahrnuje ikony Divi i ikony Fontawesome. Ne všechny ikony však budou mít stejnou výšku a šířku. Tím je o něco obtížnější určit přesnou šířku a výšku tlačítka ikony.
Abychom vytvořili dokonale čtvercové tlačítko, které zapojí ikonu při umístění kurzoru, můžeme přidat vlastní CSS pro nastavení výšky a šířky ikony a také vystředit ikonu pomocí vlastnosti CSS Flex.
Zde je návod.
Nejprve otevřete nastavení duplicitních ikon. Poté aktualizujte ikonu novou z nástroje pro výběr ikon.
Odstraňte výplň z modulu ikon. To nebude nutné, protože budeme nastavovat výšku a šířku ikony.
Na kartě Upřesnit přidejte následující vlastní CSS do Prvek ikony :
height: 90px
width: 90px
display: flex;
align-items: center;
justify-content: center;
Nyní bude mít tlačítko ikony výšku a šířku rovnou 90 pixelům, což z něj udělá dokonalý čtverec. Vlastnost flex také zarovná ikonu na střed modulu. To vám umožní snadno aktualizovat velikost ikony v modulu ikon.
Chcete-li toto tlačítko dokončit, dejte mu gradient pozadí a barvu bílého okraje následovně:
- Přechodové zastávky:
- 0 %: #3e22ff
- 100 %: #ff2000
- Barva ohraničení: #fff
Zde je konečný výsledek.
Tlačítko Vytvořit kruhovou ikonu
Jakmile je tlačítko ikony dokonalý čtverec, je kruhové jednoduché. Než vám však ukážeme tento jednoduchý trik, zkopírujeme předchozí řádek a začněte vytvářet naše kruhové tlačítko s ikonou.
Nyní otevřete nastavení naší nové duplicitní ikony a pod záložkou Design, aktualizujte poloměr ohraničení (nebo zaoblené rohy) následovně:
- Zaoblené rohy: 50 %
A stejně tak tu máme kruhové tlačítko s ikonou!
Chcete-li trochu změnit design, dejte modulu ikon jinou barvu ikony a pozadí následovně:
- Ikona: viz snímek obrazovky
- Pozadí: #121212
Zde je výsledek.
Vytvořte horizontální nabídku tlačítka ikony
Oblíbeným trendem je používání ikon k vytvoření nabídky ikon, která se obvykle skládá z několika tlačítek umístěných vedle sebe. K tomu můžeme použít vlastnost flex.
Zde je návod, jak to udělat.
Nejprve přidejte nový řádek do sloupce na stránce.
Otevřete nastavení čáry a aktualizujte šířku okapu na 1.
- Šířka žlabu: 1
Dále otevřete nastavení sloupců uvnitř řádku a přidejte následující vlastní CSS do prvku hlavního sloupce:
display:flex;
align-items:center;
Přidat nový modul Ikona do kolony.
Na kartě Obsah nastavení ikony, vyberte ikonu a přidejte adresu URL odkazu ikony.
Na kartě Design, aktualizujte následující:
- Barva ikony: #3e22ff
- Velikost ikony: 40px
- Okraj (levý a pravý): 10 pixelů
- Šířka okraje: 2px
- Barva ohraničení: #3e22ff
POZNÁMKA : Jakmile později přidáme další, vytvoří okraj mezeru mezi sousedními tlačítky.
Na kartě pokročilý, přidejte do pole následující vlastní CSS Prvek ikony (stejně jako dříve u tlačítka se čtvercovou ikonou):
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
Nyní, kdykoli přidáme nová tlačítka ikon, zobrazí se vedle sebe. Abychom to ilustrovali, zduplikujme třikrát stávající tlačítko ikony, abychom vytvořili celkem čtyři tlačítka ikon v horizontální nabídce.
Poté se můžeme vrátit a aktualizovat ikony podle potřeby.
Zde je výsledek.
Přidány efekty najetí na tlačítko ikony
Je těžké mluvit o designu tlačítka ikon, aniž bychom zmínili efekty vznesení. Jsou prostě příliš zábavné na to, abychom je ignorovali.
Změna barvy pozadí a barvy ikony při najetí myší
Oblíbeným a efektivním efektem visení je změna barev tlačítek. Můžeme například změnit barvu pozadí a barvu ikony současně, když uživatel najede na tlačítko.
Chcete-li to provést, otevřete nastavení modulu ikon a povolte možnosti přechodu pro barvu pozadí a vyberte jinou barvu pro stav přechodu. Poté můžete totéž udělat pro ikonu.
V tomto příkladu změníme barvu pozadí z bílé na modrou a ikonu z modré na bílou.
Změnit ikonu při umístění kurzoru myši
Dalším efektem vznesení, který by se vám mohl líbit, je úplná změna ikony. Chcete-li to provést, můžete při výběru ikony v nastavení ikony vybrat pro stav umístění kurzoru jinou ikonu.
Ikona tlačítko měřítko na přechodu
Těžko ignorovatelný efekt hoveru je efekt škálování hover. Tím se tlačítko ikony zvětší nebo zvětší. Nejlepší způsob, jak přidat tento typ efektu hover, je použít možnosti transformace Divi. To umožní tlačítku růst bez ovlivnění prvků kolem něj.
Chcete-li k tlačítku ikony přidat efekt přechodu měřítka, otevřete nastavení ikony a na kartě Design, vyhledejte možnosti transformace. Povolte možnosti přechodu a poté přiřaďte stavu přechodu následující měřítko transformace:
- Transformace Y: 118 %
- Transformace X: 118 %
Tím se zvětší velikost tlačítka ikony o 18 %, když na něj uživatel najede myší.
Tlačítko otočení ikony při umístění kurzoru
Otáčení vznášejících se objektů je vždy zábavná mikrointerakce. Chcete-li otočit tlačítko ikony při najetí myší, můžeme použít možnost otočení transformace. Předtím ale udělejme tlačítko kruhové, aby se otáčela pouze ikona.
Aby byla ikona kruhová, za předpokladu, že je tlačítko čtvercové, jednoduše aktualizujte nastavení zaoblených rohů na 50 % ve všech čtyřech rozích.
Poté aktualizujte možnosti transformace tak, aby zahrnovaly následující hodnotu rotace transformace ve stavu přechodu:
- Transformace Rotace Z: 180 stupňů
Pojďme se podívat na naše 4 hover efekty v akci.
Konečný výsledek
Pojďme se podívat na konečné výsledky našeho tutoriálu.
Čtěte také: Divi: Jak zvýraznit modul "Blurb" při najetí myší a rozmazat ostatní
Zde jsou naše tři tlačítka ikon (standardní, čtvercové a kruhové).
A zde je nabídka horizontálních ikon s efekty hoveru.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Vědět, jak navrhnout tlačítka ikon pro a Webové stránky je zásadní. A jak jsme viděli v tomto tutoriálu, s Divi to není tak těžké. Ikonový modul Divi má spoustu vestavěných možností, které otevírají dveře kreativním návrhům ikonových tlačítek.
Doufejme, že vám techniky v tomto článku pomohou odemknout některé kouzlo vašich vlastních návrhů ikonových tlačítek.
Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
