Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Chceli by ste sa naučiť, ako vytvoriť kartu s efektom portfólia? V tomto novom návode vám ukážeme, ako to urobiť s Elementorom.

Ak neviete, o čom dnes chceme hovoriť, pozývame vás pozrieť si nasledujúce video:

vytvorte kartu s efektom portfólia

Potom sa vráťme k tomu, prečo sme tu.

Na dokončenie tohto návodu budete potrebovať verzia Elementor Propretože budeme používať vlastný kód CSS, ktorý podporuje iba táto verzia Elementor.

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

3 stĺpcová časť

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

vytvorte kartu s efektom portfólia

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é

vytvorte kartu s efektom portfólia

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.

vytvorte kartu s efektom portfólia

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

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

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.

vytvorte kartu s efektom portfólia

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.

vytvorte kartu s efektom portfólia

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.

vytvorte kartu s efektom portfólia

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)

Chcete predávať svoje produkty na internete?

Stiahnite si zadarmo WooCommerce, najlepšie doplnky elektronického obchodu na predaj vašich fyzických a digitálnych produktov na WordPress a jednoduché vytvorenie vášho online obchodu. Ideálne pre začiatočníkov.

Teraz, keď umiestnite kurzor myši na našu mapu, zobrazí sa vám animácia priblíženia

vytvorte kartu s efektom portfólia

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 krásnu animáciu obsahu našej Internej sekcie.

vytvorte kartu s efektom portfólia

Zobrazme našu stránku v režime tabletu Uvidíme, že obrázky sa nebudú zobrazovať správne.

vytvorte kartu s efektom portfólia

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.

Vyberieme si našu Internú sekciu, v jej sekcii Obsah upravíme Minimálna výška sur 225.

vytvorte kartu s efektom portfólia

Zobrazme si našu stránku aj v režime Smartphone a priori to nepredstavuje žiadny problém. Ale ak nejaké má, vyberme si našu vnútornú sekciu, v jej sekcii 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.

vytvorte kartu s efektom portfólia

Upravme názvy týchto stĺpcov a potom zmeňte obrázky

Budete musieť mať skvelú sekciu, ktorej výsledky sú tu:

vytvorte kartu s efektom portfólia

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.

...

0 akcie
podiel
tweet
Registrovať