Chtěli jste někdy prezentovat vytvořit kartu produktu s Elementor  ?

To je to, co vám ukážeme v tomto tutoriálu. Abyste získali poměrně přesnou představu o tom, o čem dnes budeme mluvit, zveme vás ke shlédnutí následujícího videa:

vytvořte kartu produktu pomocí Elementor

Tento tutoriál je o představení produktů, kterými jsou boty, zvýrazněním jejich velikostí, barev a tlačítka Koupit u každého z nich. Když najedete na každou z karet, zobrazí se tato informace. Zde je krátké shrnutí toho, co budeme dělat.

Chcete-li sledovat tento tutoriál, zveme vás, abyste našli obrázky bot a měli Pro verzi Elementor. Pokud jej ještě nemáte, získejte jej kliknutím na tento odkaz.

Ale vraťme se k tomu, kvůli čemu jsme tady.

Vytvoříme stránku a upravíme ji pomocí Elementor.

V tomto případě zvolíme strukturu se 3 sloupci. Pojďme to urovnat povýšenost z min výška , minimální výšku na VH a nastavte kurzor na 100.

Na kartě Styl vyberte barvu pozadí #130640

Do prostředního sloupce vložte a Obrázek widget výběrem obrázku boty z vaší knihovny.

vytvořte kartu produktu pomocí Elementor

Přejděte na kartu Styl a ve vlastnosti obrázku nastavte šířku na 80

Poté přetáhněte a Titulkový widget a zadejte název Boty Nike - Toto je příklad, může to být úplně jiná značka -  

Čtěte také: Jak optimalizovat rozložení vašich webových stránek pomocí Elementoru

Nastavte HTML Tag na H3 a zarovnání vycentrujte

Přejděte na kartu Styl a změňte barvu textu na bílou

Změňte i typografii

Poté přetáhněte a Widget Vnitřní sekce pod Titulkový widget které jste vložili výše.

Ve výchozím nastavení vám tento widget nabídne 2 sloupce, jeden z nich odstraňte. V tomhle Widget Vnitřní sekce, Vložte a Titulkový widget.

Dej to jako titulek Střih : a nastavte značku HTML na Rozsah.

vytvořte kartu produktu pomocí Elementor

Na kartě Styl změňte barvu nadpisu, velikost na 15 a tuku na 300

vytvořte kartu produktu pomocí Elementor

V záložce Upřesnit nastavte pouze Pravý okraj na 5 a ve vlastnosti polohovací vybrat Inline (automaticky).

Přidejte do stejné vnitřní části widget Button s pro Text 8 a mezery mezi ikonami na 0.

Čtěte také: Jak procházet dlouhým obrázkem portfolia pomocí Elementor

Na záložce Styl změňte barvu textu a barvu pozadí tlačítka na Černou a Bílou a do Vnitřního okraje zadejte 6-10-6-10 pro Vnitřní horní-pravý-dolní okraje -Levý.

Na kartě Upřesnit nastavte pouze levý okraj na 5 a ve vlastnosti Umístění vyberte Inline (Auto).

Duplikujte toto tlačítko 3x a změňte text posledních 3 tlačítek na 9,10,11 - můžete to udělat také pomocí písmen S, M, L, XL, XXL-

Klikněte na upravit sekci a nastavte Horizontální zarovnání na Střed

Poté duplikujte tuto Vnitřní část -Vnitřní část- a upravte Velikost podle barvy, odstraňte 3 tlačítka a na tom, které zůstane, vymažte text tlačítka.

Na kartě Obsah tlačítka, vyberte ikonu Kruh z knihovny ikon a kliknutím na Vložit ji přidejte do tlačítka.

V záložce Styl dejte typografii velikost 24 a propojte Vnitřní okraje a zadejte 0. V barvě pozadí nastavte průhlednost na min a poté můžete změnit barvu textu například na modrou.

Poté toto tlačítko 3x duplikujte a změňte barvy dalších dvou na žlutou a červenou. Poté klikněte na vnitřní část a upravte ji a na kartě Upřesnit nastavte horní a dolní okraj na -5 a 10.

Nyní přidáme widget Button pod druhý widget Inner Section, zadejte jej jako text Kup nyní a Zarovnání na střed. Na kartě Styl nastavte tlačítko na bílou a text tlačítka na černou a poté nastavte poloměry všech okrajů na 20.

Vyberte hlavní sloup, na kterém jsme pracovali, a nastavte zarovnání Vertikální z Milieu, na kartě Styl vyberte typ pozadí jako Degradován a jako Typ vyberte Radiální pak na hlavní barvě nastavte průhlednost a umístění na 94. Pro druhou barvu nastavte umístění na 77 a poloměr hran větší než 10.

Na kartě Upřesnit nastavte okraje na 0-35-0-35 a vnitřní okraje na 50-20-50-20.

Panel pak můžete skrýt, abyste viděli, jak vaše práce vypadá. Uvidíte, že vaše mapa je velmi pěkná, ale my ji oživíme oživením určitých sekcí. A k tomu se chystáme animovat velikost, barvu a tlačítko koupit.

Viz též: Jak změnit záhlaví při rolování stránky na Elementoru

Nejprve rozdělíme první část Interní, která zobrazuje velikost produktu a na záložce Upřesnění definujme Fade In Up jako Pohybový efekt - Vstup Animace a zpoždění animace zapnuty 300.

Udělejme totéž s vnitřní sekcí, která zobrazuje barvy, ale se zpožděním animace 800. U tlačítka koupit bude jeho zpoždění 1000

Nyní přiřadíme třídu schovat-nejprve Vnitřní část a tlačítko Koupit. Vyberte první vnitřní sekci, na kartě Upřesnit a ve vlastnosti Upřesnit zadejte do pole Třídy CSS hodnotu hide-first. Udělejte totéž pro druhou vnitřní sekci a pro tlačítko koupit.

Chystáme se proto přidat CSS kód, který bude animovat celý sloupec. Zkopírujte následující kód:

selektor {

    výška: 400px;

    displej: flex;

}

/ * CSS pro Zobrazit / Skrýt * /

selektor .hide-first {

    display: none;

}

selektor: hover .hide-first {

    zobrazení: blok;

}

/ * Transformace obrázku * /

selektor img {

    přechod: snadnost .5s;

}

selektor: podržte img {

    transformace: přeložení (-20px, -40px) otočení (-25deg) měřítko (1.4);

}

/ * Mobilní přehled * /

@media (max. šířka: 767 pixelů) {

 selektor: podržte img {

    transformace: přeložit (-20px, 0px) otočit (-10deg) měřítko (1);

}

selektor {

    okraj: 50px 10px;

}

}

Vyberte sloupec, který chcete upravit, a přejděte na kartu Upřesnit a do pole Vlastní CSS vložte tento kód.

Poznámka: Měli byste vědět, že tato možnost je k dispozici pouze v případě, že máte verzi ProElementor.

Pokud to uděláte, vaše mapa se animuje při přejetí myší a ve výchozím nastavení skryje velikosti, barvy a tlačítko Koupit.

Pokud jde o vysvětlení kódu, část komentáře poskytuje přehled. Ale úpravou hodnot pochopíte, k čemu každá instrukce je.

Viz také: Jak přidat dvě tlačítka vedle sebe do stejného sloupce s Elementorem

Pokud vše funguje normálně, duplikujte tento sloupec dvakrát a odstraňte ostatní prázdné sloupce.

Jediné, co musíte udělat, je nahradit obrázky a názvy ostatních bloků a nakonec zobrazit náhled vaší práce.

Právě jste vytvořili krásnou produktovou kartu.

Získejte nyní prvek Elementor Pro!

Proč investovat do čističky vzduchu?

Tak ! To je vše pro tento tutoriál, který vám ukáže, jak vytvořit kartu produktu pomocí Elementor. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět v commentaires.

Můžete však také konzultovat 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.

...