Nevojë për të krijuar një hartë hex me efekt hover përmes të fuqishmit Faqja Builder Elementor ? Nëse po, zbuloni në këtë artikull se si të arrini atje.
Nëse dëshironi të keni një pasqyrë të asaj që do të flasim në këtë tutorial, ju ftojmë të shikoni videon e mëposhtme:
Për të përfunduar këtë tutorial, do t'ju duhet versioni Pro i Elementor, sepse ne do të përdorim kodin e personalizuar CSS i cili mbështetet vetëm nga ky version iElementor.
Lexoni gjithashtu udhëzuesin tonë në: Si të shtoni Breadcrumbs në një faqe interneti me Elementor
Le të krijojmë një seksion të ri me një strukturë për të 3 kolona, pastaj në panel, le të përcaktojmë Lartësia sur Lartësia minimale, pastaj në Lartësia minimale le të klikojmë VH dhe vendosni rrëshqitësin në 100.
Le të shtojmë një Miniaplikacioni i seksionit të brendshëm – Seksioni i brendshëm – në kolonën e mesme. Ky miniaplikacion është konfiguruar si parazgjedhje me 2 kolona, le të fshijmë njërën prej tyre. Le ta konfigurojmë atë Lartësia sur Lartësia minimale dhe Lartësia minimale le ta përcaktojmë rrëshqitës në 400.
Në skedë Stili, le të vendosim imazhin e sfondit duke zgjedhur një imazh nga biblioteka juaj dhe më pas vendosim pozicionin e tij në Superiore në qendër, Përsëriteni E pa përsëritur dhe Madhësia në Mbulesë.
Për Mbivendosja e sfonditklikoni mbi I degraduar për Lloji i sfondit, zgjidhni dhe ndryshoni ngjyrën kryesore në #2299EF dhe vendndodhjen në 20, pastaj ngjyra dytësore ndizet #1917 para Krishtit dhe vendndodhjen në 50, këndi në 140 dhe patejdukshmëria në 0.85
Më pas shtoni një Miniaplikacioni i titullit dans l 'Seksioni i Brendshëm dhe si Titull, Le të japim një emër, më pas në skedën Style të miniaplikacionit Titulli, ndryshoni ngjyrën në #FFFFFF. Më pas shtoni një Miniaplikacioni i Redaktuesit të Tekstit, dhe në skedën Stili Përqendroni tekstin dhe ndryshoni ngjyrën në #FFFFFF.
Shih gjithashtu: Si të shtoni imazh në miniaplikacionin e tabelës së çmimeve me Elementor
Zgjidhni përsëri Seksioni i brendshëm, shkoni te skeda I avancuar, në seksionin Marzhi i brendshëm, hyni 25-2-2 2-
Zgjidhni përsëri seksionin e brendshëm dhe shkoni te skedari i avancuar dhe në seksionin Custom CSS, kopjoni dhe ngjisni kodin e mëposhtëm:
/*Traçage Hexagone*/
selector{
clip-path: polygon(0 25%, 50% 0, 100% 25%, 99% 75%, 50% 100%, 0 75%);
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
}
Më pas, le të shtojmë fragmentin e dytë të kodit më poshtë tek ai i mëparshmi:
/*CSS pour Afficher/Masquer la Superposition du dégradé*/
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
opacity: 0 !important;
}
selector:hover .elementor-background-overlay{
opacity: 0.85 !important;
}
/*CSS pour Afficher/Masquer l'élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
}
selector:hover .elementor-column{
opacity: 1;
}
Më pas, le të ngjitim edhe fragmentin më poshtë.
/*CSS d'effet de transition avec ombre*/
selector:hover{
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
.hexa-mom::before{
content: '';
position: absolute;
bottom: -70px !important;
width: 100%;
color: #fff;
height: 60px;
border-radius: 50%;
background: -webkit-radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
background: radial-gradient(rgba(0,0,0,0.15),transparent, transparent);
display: block;
-webkit-transition: all 0.8s !important;
transition: all 0.8s !important;
z-index: 999;
}
.hexa-mom:hover::before{
opacity: 1 !important;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
Pastaj le të zgjedhim kolonën e mesme dhe në skedën i përparuar, hyni heksa-mami në fushë Klasat CSS.
Le ta dublojmë këtë kolonë 2 herë dhe të fshijmë 2 kolonat e tjera.
Le të ndryshojmë imazhin e sfondit të miniaplikacioneve të tjera Seksioni i Brendshëm, Titulli dhe përmbajtje të redaktuesit të tekstit dhe gjithashtu ngjyrat e gradientëve të mbivendosjes së sfondit. Ju duhet të keni një rezultat që duket si ky:
Këtu sapo e keni përfunduar këtë detyrë me lehtësi. Thjesht shikoni paraprakisht punën e tabletit dhe smartfonit tuaj, duke u përpjekur të ndryshoni kufijtë që të përputhen me secilën pajisje.
Merrni Elementor Pro Tani!
Përfundim
Kështu që ! Kjo është ajo për këtë artikull që ju tregon se si të krijoni një hartë hex me efekt. 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.
...
