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:
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.
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.
Na kartě Styl změňte barvu nadpisu, velikost na 15 a tuku na 300
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.
...