Chceli by ste sa naučiť, ako vytvoriť kartu s efektom portfólia? V tomto novom návode vám ukážeme, ako na to Elementor.
Ak neviete, o čom dnes chceme hovoriť, pozývame vás pozrieť si nasledujúce video:
Potom sa vráťme k tomu, prečo sme tu.
Na dokončenie tohto návodu budete potrebovať verzia Elementor Pro, pretože budeme používať vlastný kód CSS, ktorý podporuje iba táto verziaElementor.
Čítajte tiež: Ako zobraziť text nad obrázkom pomocou Elementor
Vytvorme novú sekciu s 3 stĺpcovou štruktúrou, potom v paneli definujme Výška sur Min. výška, a potom Minimálna výška kliknime ďalej VH a nastavte posúvač na 100.
Vyberme prostredný stĺpec a umiestnime do tohto stĺpca Widget vnútornej sekcie. Widget Interná sekcia je štandardne nakonfigurovaný s 2 stĺpcami. Pod 2 stĺpcami vypustíme miniaplikáciu Názov s názvom reštaurácie, vyberte H4 pre značku HTML a Stred na zarovnanie.
Na karte pokročilý miniaplikácie Title, Poďme 30 pre Horný okraj
Vyberme ešte raz našu vnútornú sekciu. V paneli ho upravme Výška sur Min. výška a Minimálna výška nastavíme kurzor na 380. Potom vymažte pravý alebo ľavý stĺpec sekcie Interné
Nechajme to Obrázok widget v sekcii Interná a vložte obrázok z našej knižnice. vyberme si celý pre Veľkosť obrázku et Stred pre Zarovnanie.
Poznámka: Ak chcete mať kompletné stránky, ako sú tie naše, pozývame vás na zachytenie stránok pomocou rozšírenia pre Chrome GoFullPage, ale môžete použiť aj inú.
Objavte tiež: Ako vytvoriť galériu obrázkov s Elementorom
Potom na karte Tab Štýl, kliknite na PX de Šírka, nastavme posúvač na 260 a les hraničné lúče sur 10
Ďalej upravme Box Shadow zmenou Blur na 40 a Diffuse na -10.
Na karte Rozšírené v časti polohovacie, vyberte absolútny pre poloha, Horizontálna orientácia sur Neohrabanýsa décalage sur 0, TheVertikálna orientácia sur bas.
Zduplikujme náš widget Obrázok dvakrát. Nevyhnutne budú všetky prekryté. Spustite Navigátor, aby sme mali prístup k ďalším miniaplikáciám skrytým v prvom.
Nahraďte obrázok druhého Widgetu a v jeho Tab pokročilý, poďme si ich upraviť spodné okraje et Neohrabaný zadaním 30 pre každý. Teraz uvidíte mierne oneskorenie,
Urobte to isté pre tretiu miniaplikáciu obrázka, ale použite okraje 60 pre dolný a ľavý okraj. Teraz by ste mali mať prehľad o všetkých 3 obrázkových widgetoch.
Vyberieme miniaplikáciu Interná sekcia a prejdeme na jej kartu pokročilý a v sekcii Vlastné CSS, skopírujte a prilepte nasledujúci útržok 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;
}(Ak túto sekciu nemáte, nemáte verziu Pro, ak chcete pokračovať, musíte aktualizovať svoju verziu)
Teraz, keď umiestnite kurzor myši na našu mapu, zobrazí sa vám animácia priblíženia
Vyberieme náš prvý Image Widget (najnižší) a na jeho karte pokročilý, chytíme sa front-img pre CSS triedy.
Pre druhý Image Widget napíšme stredná obr pre triedy CSS.
Pre tretiu miniaplikáciu obrázka napíšme last-img pre triedy CSS.
Pozri tiež: Ako vytvoriť galériu obrázkov s kartami pomocou Elementor
Keď teraz podržíme kurzor nad naším stĺpcom, uvidíme nádhernú animáciu obsah našej internej sekcie.
Zobrazme našu stránku v režime tabletu Uvidíme, že obrázky sa nebudú zobrazovať správne.
Vyberte prvý widget Obrázok, v jeho záložke Štýl upravte šírku kliknutím na PC a zadaním 150 ako šírky. Urobme to isté s ďalšími 2 obrázkovými widgetmi.
Vyberme si našu Internú sekciu v jej sekcii Obsah, poďme upraviť Minimálna výška sur 225.
Zobrazme si našu stránku aj v režime Smartphone, a priori to nepredstavuje žiadny problém. Ak však nejaké obsahuje, vyberte v jeho sekcii našu internú sekciu Obsah, upravme Minimálnu výšku.
Teraz duplikujme náš stredný stĺpec 2-krát a potom vymažte 2 ďalšie prázdne stĺpce.
Upravme názvy týchto stĺpcov a potom zmeňte obrázky
Budete musieť mať skvelú sekciu, ktorej výsledky sú tu:
Tu to máte, práve ste túto úlohu urobili ľahko.
Získajte teraz prvok Elementor!
záver
Je to tu ! To je všetko pre tento článok, ktorý vám ukáže, ako vytvoriť kartu s efektom portfólia. Ak máte nejaké obavy, ako sa tam dostať, dajte nám vedieť Komentáre.
Môžete sa však tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
