Chcete na svou domovskou stránku přidat pole funkcí s ikonou?

Tato funkce zobrazuje důležité informace o vašich produktech a službách. Ukázalo se, že jde o poutavou techniku ​​při prezentaci produktů potenciálním zákazníkům.

V tomto tutoriálu vám ukážu, jak přidat tuto funkci do vašeho WordPress blog.

Ale dříve, pokud jste nikdy nenainstalovali WordPress objevit Jak nainstalovat a WordPress blog ve 7 krocích et Jak najít, nainstalovat a aktivovat WordPress téma na svém blogu 

Pak zpět k tomu, proč jsme tady.

přidat pole funkcí s ikonou

Co je to pole funkcí s ikonami?

Většina lidí, když navštíví web, jej úplně nečte. Jako lidé se stáváme profesionálními skenery.

To znamená, že jako vlastník online obchodu musíte prezentovat důležité informace způsobem, který je poměrně snadno analyzovatelný a poutavým způsobem.

Proto většina firemních webů obvykle obsahuje na posuvníku obrázek s tlačítkem výzvy k akci.

Přímo pod tím můžete použít pole funkcí, které vám umožní zobrazit důležité informace o vašich produktech a službách. Každé pole funkcí může mít každé své vlastní tlačítko výzvy k akci, aby se uživatelé mohli dozvědět více.

Zde je konkrétní příklad:jak přidat funkční pole wordpress ikonu

Jak přidat pole funkcí na domovskou stránku blogu WordPress

První věcí, kterou musíte udělat, je nainstalovat a aktivovat plugin Pokročilé sloupce WP, Více informací naleznete v našem průvodci Jak nainstalovat nebo přidat plugin na WordPress

Po aktivaci pluginu musíte přejít do umístění „ Nastavení> Pokročilé sloupce WP Konfigurace pluginu.

Musíte jen posunout dolů na možnost „ sloupec Class A zadejte text jako 'mycolumns' (Vrátíme). Nezapomeňte kliknout na tlačítko uložit pro uložení nastavení.

colclass

Pak vše, co musíte udělat, je přidat ikony SVG do polí funkcí. Za tímto účelem vás vyzývám k instalaci a aktivaci pluginu WP SVG ikony.

Nyní jste připraveni vytvořit pole funkcí. Můžete začít úpravou stránky, kde se má objevit pole funkcí.

V editoru příspěvků si všimnete dvou nových možností. První vám umožňuje přidat ikonu a je umístěna nad panelem nástrojů editoru. Druhý je umístěn na panelu nástrojů vizuálního editoru.

Pokud tuto možnost nevidíte, musíte rozbalit tlačítka na panelu nástrojů.

newbuttons

První, co musíte udělat, je kliknout na tlačítko " Pokročilé sloupce WP". Zobrazí se vyskakovací okno, na které můžete kliknout "Prázdný" a vyberte počet sloupců, které chcete přidat.

Tvorba-sloupceMůžete kliknout na každou oblast a přidat libovolný požadovaný text. Pokud nyní nepřidáte text, nebudete později vidět rozdíl mezi sloupci. Až budete hotovi, klikněte na „ Přidat sloupce Ve spodní části.

Všimnete si, že sloupce byly přidány ve vizuálním editoru. Dalším krokem je přidání ikon nad text.

Vezměte kurzor a přidejte jej na začátek textového pole a poté přidejte nový konec řádku. Tím se přidá nový prostor, kam můžete přidat ikonu. Nyní klikněte na tlačítko " Přidat novou ikonu“, A uvidíte nové okno, kde si můžete vybrat ikonu.

addingicons

V tomto okně můžete vybrat ikonu, kterou chcete přidat. Poté klikněte na tlačítko „rozpětí“, aby byl váš obsah přidán do prvku „ “.

Nakonec klikněte na tlačítko icon vložka“, Všimnete si, že v editoru byla přidána ikona SVG. V závislosti na názvu ikony bude zkrácený kód vypadat takto:

[wp-svg-icons icon = "rocket" wrap = "span"]

Postup opakujte pokaždé na ostatních polích. Až budete hotovi, nezapomeňte uložit svá nastavení.

Jste připraveni úlohu dokončit, ale pokud si všimnete, že ikony jsou velmi malé.

featureboxes-SmallIcons

Jediné, co musíte udělat, je přidat kód CSS, abyste problém vyřešili. Zde je příklad kódu CSS, který můžete přidat do souboru stylu podřízeného motivu.

span.wp-svg-rocket.rocket {velikost písma: 100px; } span.wp-svg-cloud.cloud {velikost písma: 100px; } span.wp-svg-headphones.headphones {velikost písma: 100px; } .mykolony {okraj: 1px solid #eee; min-výška: 250px; padding-top: 20px! }

Nezapomeňte, že třída ikon musí odpovídat třídě, kterou jste přidali. V tomto případě jsem použil následující ikony: raketa, mrak, sluchátka.

featureboxesfinal

Nezapomeňte, že jsme napsali tutoriál, který vám umožní zdokonalte své dovednosti v CSS. Můžete také použít a stránka stavitel úspěšnější jako Vizuální skladatel pro které jsme napsali a docela podrobný návod.

To je pro tento tutoriál vše. Doufám, že vám to pomůže vytvořit na vašem počítači dobré krabice funkcí WordPress blog. Neváhejte a podělte se o tento návod se svými přáteli. Rád bych využil této příležitosti a poslal vám vše nejlepší od celého týmu BlogPasCher.