Trebuie să creați o hartă hexagonală cu efect de hover datorită puternicului Page Builder Elementor ? Dacă da, aflați în acest articol cum să ajungeți acolo.
Dacă doriți să obțineți o imagine de ansamblu despre ceea ce vom vorbi în acest tutorial, vă invităm să vizionați următorul videoclip:
Pentru a finaliza acest tutorial, veți avea nevoie versiunea Pro a Elementor, deoarece vom folosi cod CSS personalizat, care este acceptat numai de această versiune aElementor.
Citiți și ghidul nostru despre: Cum să adăugați pesmet pe un site web cu Elementor
Să creăm o nouă secțiune cu o structură pentru 3 coloane, apoi în panou, să definim Înălțime pe Înălțime minşi apoi Inaltimea minima hai să facem clic VH și să setăm glisorul la 100.
Să adăugăm un Widget Secțiunea internă – Secțiunea interioară – în coloana din mijloc. Acest widget este configurat implicit cu 2 coloane, haideți să ștergem una dintre ele. Să-l configuram Înălțime pe Înălțime min și Inaltimea minima hai sa o definim glisor la 400.
În filă Stil, haideți să setăm imaginea de fundal selectând o imagine din biblioteca dvs., apoi setăm poziția acesteia la Superior Centrat, Repetați Nerepetat și dimensiunea activată Acoperi.
pe Suprapunere de fundalFaceți clic pe Degradat pentru Tip de fundal, selectați și modificați culoarea principală #2299EF și Locație activată 20, apoi culoarea secundară activată #1917BC și Locație activată 50, unghiul pe 140 și opacitatea activată 0.85
Atunci să adăugăm un Widget de titlu înSecțiunea interioară și așa Titlu, Să dăm un Nume, apoi în fila Stil a widget-ului Titlu, schimbați culoarea în # FFFFFF. Atunci să adăugăm un Widget Editor de text, iar în filă Stil Centrați textul și schimbați culoarea în # FFFFFF.
Vezi și: Cum să adăugați o imagine la widgetul Tabel de prețuri cu Elementor
Selectați din nou Sectiunea Interioara, accesați fila Avansat, în secțiune Marja internă, introduce 25-2-2-2
Selectați din nou secțiunea interioară și accesați fila Avansat, iar în secțiunea CSS personalizat, copiați și inserați următorul cod:
/*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;
}
În continuare, să adăugăm al doilea fragment de cod de mai jos celui precedent:
/*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;
}
Apoi, să lipim și fragmentul de mai jos.
/*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);
}
Apoi să selectăm coloana din mijloc și în filă avansat, introduce hexa-mamă în câmp Clasele CSS.
Să duplicăm această coloană de 2 ori și să ștergem celelalte 2 coloane.
Să schimbăm imaginea de fundal a altor widget-uri Secțiunea interioară, Titlul și cuprins ale editorului de text și, de asemenea, culorile gradienților de suprapunere de fundal. Ar trebui să aveți un rezultat care arată astfel:
Aici tocmai ați finalizat această sarcină cu ușurință. Doar previzualizați-vă munca pe tabletă și smartphone, încercând să modificați marginile pentru a se potrivi cu fiecare dispozitiv.
Obțineți Elementor Pro acum!
Concluzie
Asa de ! Asta este tot pentru acest articol care vă arată cum să creați o hartă hexagonală cu efect. Dacă aveți nelămuriri cu privire la cum să ajungeți acolo, anunțați-ne în comentarii.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
