Divi: Tema më e mirë e WordPress të të gjitha kohërave!

më shumë Shkarkimet e 901.000, Divi është tema më e popullarizuar e WordPress në botë. Është i plotë, i lehtë për t'u përdorur dhe vjen me më shumë se shabllona falas 62.

Dëshironi të mësoni se si të krijoni një kartë me efektin e një portofoli? Në këtë tutorial të ri, ne do t'ju tregojmë se si ta bëni atë me Elementor.

Nëse nuk e keni idenë se për çfarë duam të flasim sot, ju ftojmë të shikoni videon e mëposhtme:

krijoni një kartë me efekt portofol

Atëherë le të kthehemi te pse jemi këtu.

Për të përfunduar këtë tutorial, do t'ju duhet versioni Pro i Elementor, pasi ne do të përdorim kodin e personalizuar CSS i cili mbështetet vetëm nga ky version i Elementor.

Lexo gjithashtu: Si të shfaqni tekstin mbi një imazh me Elementor

Le të krijojmë një seksion të ri me një strukturë me 3 kolona, ​​më pas në panel, le të përcaktojmë Lartësia sur Lartësia minimale, pastaj në Lartësia minimale le të klikojmë VH dhe vendoseni rrëshqitësin në 100.

Seksioni me 3 kolona

Le të zgjedhim kolonën e mesme dhe të hedhim në këtë kolonë Widget i seksionit të brendshëm. Miniaplikacioni i Seksionit të Brendshëm është konfiguruar me 2 kolona si parazgjedhje. Nën 2 kolonat, le të hedhim miniaplikacionin Titull me titullin Restaurante, zgjidhni H4 për etiketën HTML, dhe Qendra për shtrirjen.

Në skedë i përparuar i miniaplikacionit Titulli, Le të hyjmë 30 për Marzhi i lartë

krijoni një kartë me efekt portofol

Le të zgjedhim edhe një herë seksionin tonë të brendshëm. Në panel, le ta modifikojmë atë Lartësia sur Lartësia minimale dhe Lartësia minimale le ta vendosim kursorin në 380. Pastaj, le të fshijmë kolonën e djathtë ose të majtë të seksionit të brendshëm

krijoni një kartë me efekt portofol

Le ta heqim atë Miniaplikacioni i imazhit në seksionin e brendshëm dhe futni një imazh nga biblioteka jonë. le të zgjedhim I tërë për Madhësia e imazhit et Qendra për Radhitje.

krijoni një kartë me efekt portofol

NB: Nëse dëshironi të keni faqe të plota si tonat, ju ftojmë të kapni faqet me ndihmën e shtesës së Chrome GoFullPage, por mund të përdorni edhe një tjetër.

Zbuloni gjithashtu: Si të krijoni një galeri imazhesh me Elementor

Krijoni me lehtësi faqen tuaj të internetit me Elementor

Elementor ju lejon të krijoni Lehtë dhe Falas çdo dizajn uebsajti apo blogu me pamje profesionale. Mos paguani shumë për një faqe interneti që mund ta bëni vetë.

Pastaj në skedën Stili, klikoni mbi PX de gjerësi, le ta vendosim rrëshqitësin në 260 dhe rrezet kufitare sur 10

Më pas, le të modifikojmë Box Shadow duke ndryshuar Blur në 40 dhe Diffuse në -10.

krijoni një kartë me efekt portofol

Në skedën Advanced, në seksion pozicionimi, zgjidhni absolut për pozitë, Orientimi horizontal sur majtas, dekalazh sur 0, € ™ sOrientimi vertikal sur Bas.

Le të dublikojmë dy herë miniaplikacionin tonë të imazhit. Në mënyrë të pashmangshme do të mbivendosen të gjithë. Le të shfaqim Navigatorin në mënyrë që të mund të aksesojmë miniaplikacionet e tjera të fshehura nga i pari.

krijoni një kartë me efekt portofol

Le të zëvendësojmë imazhin e Widget-it të dytë dhe në skedën e tij i përparuar, le t'i modifikojmë ato kufijtë e poshtëm et majtas duke hyrë 30 per secilin. Tani do të shihni një vonesë të lehtë, 

Bëni të njëjtën gjë për Widget-in e tretë të Imazhit, por aplikoni Margjinat 60 për kufijtë e poshtëm dhe të majtë. Tani duhet të keni një përmbledhje të të 3 miniaplikacioneve të imazhit.

krijoni një kartë me efekt portofol

Le të zgjedhim miniaplikacionin tonë të Seksionit të Brendshëm, shkojmë te Skeda e tij i përparuar dhe në pjesën Custom CSS, kopjoni dhe ngjisni fragmentin e mëposhtëm të kodit:

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;
}

(Nëse nuk e keni këtë seksion, atëherë nuk keni versionin Pro, nëse dëshironi të vazhdoni, duhet të përmirësoni versionin tuaj)

Dëshironi të shisni produktet tuaja në internet?

Shkarkoni WooCommerce falas, shtojcat më të mira të tregtisë elektronike për të shitur produktet tuaja fizike dhe dixhitale në WordPress dhe për të krijuar lehtësisht dyqanin tuaj online. E përkryer për fillestarët.

Tani nëse qëndroni pezull mbi hartën tonë, do të keni një animacion zmadhimi

krijoni një kartë me efekt portofol

Le të zgjedhim miniaplikacionin tonë të parë të imazhit (më i ulëti) dhe në skedën e tij i përparuar, le të kapim front-img për Klasat CSS.

Për miniaplikacionin e dytë të imazhit, le të shkruajmë mesi i imazhit për klasat CSS.

Për miniaplikacionin e tretë të imazhit, le të shkruajmë fundit-img për klasat CSS.

Shih gjithashtu: Si të krijoni një galeri imazhesh me skeda me Elementor

Duke qëndruar pezull mbi kolonën tonë tani do të shohim një animacion të bukur të përmbajtjes së Seksionit tonë të Brendshëm.

krijoni një kartë me efekt portofol

Le të shfaqim faqen tonë në modalitetin e tabletit Do të shohim që imazhet nuk do të shfaqen siç duhet.

krijoni një kartë me efekt portofol

Zgjidhni miniaplikacionin e parë Image, në skedën e tij Style, le të modifikojmë gjerësinë duke klikuar në PC dhe më pas duke futur 150 si gjerësi. Le të bëjmë të njëjtën gjë me 2 miniaplikacionet e tjera të imazhit.

Le të zgjedhim Seksionin tonë të Brendshëm, në seksionin e tij Përmbajtja, modifikojmë Lartësia minimale sur 225.

krijoni një kartë me efekt portofol

Le ta shfaqim faqen tonë në modalitetin Smartphone apriori, nuk paraqet asnjë problem. Por, nëse ka ndonjë, le të zgjedhim Seksionin tonë të Brendshëm, në seksionin e tij Përmbajtja, le të modifikojmë Lartësinë Minimale.

Tani le të kopjojmë dy herë kolonën tonë të mesme, pastaj fshijmë dy kolonat e tjera boshe.

krijoni një kartë me efekt portofol

Le të modifikojmë Titujt e këtyre kolonave dhe më pas të ndryshojmë imazhet

Ju do të duhet të keni një seksion të mrekullueshëm, rezultatet e të cilit janë këtu:

krijoni një kartë me efekt portofol

Ja ku shkoni, sapo e keni bërë këtë detyrë me lehtësi.

Merrni Elementor Pro Tani!

përfundim

Aty ajo është ! Kjo është ajo për këtë artikull që ju tregon se si të krijoni një kartë me efektin e një portofoli. Nëse keni ndonjë shqetësim se si të arrini atje, na tregoni brenda komente.

Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...

0 aksionet
pjesë
cicërimë
Regjistrohem