Chtěli byste se naučit, jak vytvořit kartu s efektem portfolia? V tomto novém návodu vám ukážeme, jak na to Elementor.
Pokud nevíte, o čem chceme dnes mluvit, zveme vás ke shlédnutí následujícího videa:
Pak se vraťme k tomu, proč jsme tady.
K dokončení tohoto tutoriálu budete potřebovat Pro verzi Elementor, protože budeme používat vlastní kód CSS, který je podporován pouze touto verzíElementor.
Čtěte také: Jak zobrazit text nad obrázkem pomocí Elementor
Vytvořme novou sekci se 3 sloupcovou strukturou, pak v panelu definujme výška z Min. výška, a pak Minimální výška klikneme na VH a nastavte posuvník na 100.
Vybereme prostřední sloupec a vložíme do tohoto sloupce Widget vnitřní sekce. Widget Vnitřní sekce je standardně nakonfigurován se 2 sloupci. Pod 2 sloupci vypustíme widget Titul s titulem Restaurace, vyberte H4 pro značku HTML a Centrum pro zarovnání.
Na kartě pokročilý widgetu Title, Pojďme vstoupit 30 pro Horní okraj
Vyberme ještě jednou naši Vnitřní sekci. V panelu jej upravme výška z Min. výška a Minimální výška nastavíme kurzor na 380. Poté smažte pravý nebo levý sloupec sekce Interní
Nechme toho Obrázek widget v sekci Vnitřní a vložte obrázek z naší knihovny. pojďme vybrat Celý pro Velikost obrázku et Centrum pro Zarovnání.
Poznámka: Pokud chcete mít kompletní stránky, jako jsou ty naše, zveme vás k zachycení stránek pomocí rozšíření pro Chrome GoFullPage, ale můžete použít i jiné.
Objevte také: Jak vytvořit galerii obrázků s Elementorem
Poté v záložce Tab Styl, klikněte na PX de Šířka, nastavíme posuvník na 260 a hraniční paprsky z 10
Dále upravme Box Shadow změnou Blur na 40 a Diffuse na -10.
Na kartě Upřesnit v části polohovací, vyberte absolutní pro Pozice, Horizontální orientace z levýse décalage z 0, Vertikální orientace z Bas.
Zduplikujme náš widget Obrázek dvakrát. Nevyhnutelně budou všechny překryty. Vyvoláme Navigátor, abychom měli přístup k dalším widgetům skrytým tím prvním.
Nahradíme obrázek druhého Widgetu a v jeho Tab pokročilý, pojďme je upravit spodní okraje et levý zadáním 30 pro každého. Nyní uvidíte mírné zpoždění,
Udělejte totéž pro třetí widget obrázku, ale použijte okraje 60 pro spodní a levý okraj. Nyní byste měli mít přehled o všech 3 obrázkových widgetech.
Vyberme náš widget Vnitřní sekce, přejděte na jeho záložku pokročilý a v sekci Vlastní CSS, zkopírujte a vložte následující fragment kódu:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Pokud tuto sekci nemáte, nemáte verzi Pro, pokud chcete pokračovat, musíte svou verzi upgradovat)
Když nyní najedete na naši mapu, zobrazí se vám animace přiblížení
Vyberme náš první Image Widget (ten nejnižší) a v jeho záložce pokročilý, chytneme se přední obr pro CSS třídy.
Pro druhý Image Widget napište střední obr pro třídy CSS.
Pro třetí Image Widget napište last-img pro třídy CSS.
Viz též: Jak vytvořit záložkovou galerii obrázků pomocí Elementoru
Když nyní najedeme na náš sloupec, uvidíme velkolepou animaci obsah naší Interní sekce.
Zobrazme naši stránku v režimu tabletu Uvidíme, že se obrázky nebudou zobrazovat správně.
Vyberte první widget Obrázek, v jeho záložce Styl, upravte šířku kliknutím na PC a poté zadejte 150 jako šířku. Udělejme totéž s dalšími 2 obrázkovými widgety.
Vyberme si naši Vnitřní sekci v její sekci Obsah, pojďme upravit Minimální výška z 225.
Zobrazme naši stránku také v režimu Smartphone, a priori to nepředstavuje žádný problém. Ale pokud nějaké obsahuje, vyberme v jeho sekci naši Vnitřní sekci Obsah, upravme Minimální výšku.
Nyní 2krát duplikujme náš prostřední sloupec a poté vymažte 2 další prázdné sloupce.
Upravme názvy těchto sloupců a poté změňme obrázky
Budete muset mít skvělou sekci, jejíž výsledky jsou zde:
Tady to máte, právě jste tento úkol snadno provedli.
Získejte nyní prvek Elementor Pro!
Proč investovat do čističky vzduchu?
Je to tady ! To je vše pro tento článek, který vám ukáže, jak vytvořit kartu s efektem portfolia. Pokud máte nějaké obavy, jak se tam dostat, dejte nám vědět 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.
...
