Divi: Nejlepší WordPress téma všech dob!

více Stahování 901.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma.

Chtěli byste se naučit, jak vytvořit kartu s efektem portfolia? V tomto novém tutoriálu vám ukážeme, jak to udělat s Elementorem.

Pokud nevíte, o čem chceme dnes mluvit, zveme vás ke shlédnutí následujícího videa:

vytvořte kartu s efektem portfolia

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.

3 sloupcová sekce

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

vytvořte kartu s efektem portfolia

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í

vytvořte kartu s efektem portfolia

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í.

vytvořte kartu s efektem portfolia

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

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

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.

vytvořte kartu s efektem portfolia

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.

vytvořte kartu s efektem portfolia

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.

vytvořte kartu s efektem portfolia

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)

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

Když nyní najedete na naši mapu, zobrazí se vám animace přiblížení

vytvořte kartu s efektem portfolia

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 krásnou animaci obsahu naší Interní sekce.

vytvořte kartu s efektem portfolia

Zobrazme naši stránku v režimu tabletu Uvidíme, že se obrázky nebudou zobrazovat správně.

vytvořte kartu s efektem portfolia

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 naši Vnitřní sekci, v její sekci Obsah upravíme Minimální výška z 225.

vytvořte kartu s efektem portfolia

Zobrazme si také naši stránku v režimu Smartphone a priori to nepředstavuje žádný problém. Ale pokud nějaké má, vyberte náš Vnitřní oddíl, v jeho části Obsah upravte Minimální výšku.

Nyní 2krát duplikujme náš prostřední sloupec a poté vymažte 2 další prázdné sloupce.

vytvořte kartu s efektem portfolia

Upravme názvy těchto sloupců a poté změňme obrázky

Budete muset mít skvělou sekci, jejíž výsledky jsou zde:

vytvořte kartu s efektem portfolia

Tady to máte, právě jste tento úkol snadno provedli.

Získejte nyní prvek Elementor Pro!

závěr

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.

...

0 akcie
podíl
tweet
Zadat