Trenger å lage et hex-kart med sveveeffekt gjennom den kraftige Page Builder Elementor ? I så fall, finn ut i denne artikkelen hvordan du kommer dit.
Hvis du vil ha en oversikt over hva vi skal snakke om i denne opplæringen, inviterer vi deg til å se følgende video:
For å fullføre denne opplæringen trenger du Pro-versjonen av Elementor, fordi vi kommer til å bruke tilpasset CSS-kode som kun støttes av denne versjonen avElementor.
Les også vår guide om: Hvordan legge til brødsmuler på et nettsted avec Elementor
La oss lage en ny seksjon med en struktur til 3 kolonner, så i panelet, la oss definere Høyde på Min Høyde, og deretter Minimum høyde la oss klikke videre VH og sett glidebryteren til 100.
La oss legge til en Intern seksjon-widget – Innerseksjon – i midtsøylen. Denne widgeten er som standard konfigurert med 2 kolonner, la oss slette en av dem. La oss konfigurere det Høyde på Min Høyde og Minimum høyde la oss definere det skyveknappen til 400.
I fanen Stil, la oss angi bakgrunnsbildet ved å velge et bilde fra biblioteket ditt, og deretter angi posisjonen til Superior Sentrert, Gjenta på Ikke-gjentatt og størrelsen på Dekke.
Sur BakgrunnsoverleggKlikk på Degradert for Bakgrunnstype, velg og endre hovedfargen på #2299EF og plassering på 20, deretter sekundærfargen på #1917 f.Kr og plassering på 50, vinkelen på 140 og opasiteten på 0.85
Legg deretter til en Tittel-widget i L 'Indre seksjon og som Tittel, La oss gi et navn, og endre deretter fargen til i kategorien Stil i Tittel-widgeten # FFFFFF. Legg deretter til en Tekstredigerer-widget, og i fanen Stil Sentrer teksten og endre fargen til # FFFFFF.
Se også: Hvordan legge til bilde til pristabellwidget med Elementor
Velg på nytt den indre seksjonen, gå til fanen Avansert, i seksjonen Intern margin, Tast inn 25-2-2-2
Velg den indre delen igjen og gå til fanen Avansert, og kopier og lim inn følgende kode i Egendefinert CSS-delen:
/*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;
}
La oss deretter legge til den andre kodebiten nedenfor til den forrige:
/*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;
}
La oss da også lime inn kodebiten nedenfor.
/*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);
}
La oss deretter velge den midterste kolonnen og i fanen avansert, Tast inn hexa-mamma i felten CSS-klasser.
La oss duplisere denne kolonnen 2 ganger og slette de to andre kolonnene.
La oss endre bakgrunnsbildet til andre widgets Indre seksjon, tittelen og innhold av tekstredigereren og også fargene på bakgrunnsoverleggsgradientene. Du bør ha et resultat som ser slik ut:
Her har du nettopp fullført denne oppgaven enkelt. Bare forhåndsvis nettbrettet og smarttelefonen, og prøv å endre marginene for å matche hver enhet.
Få Elementor Pro nå!
konklusjonen
Så! Det er det for denne artikkelen som viser deg hvordan du lager et hex-kart med effekt. Hvis du har noen bekymringer om hvordan du kommer dit, gi oss beskjed innen commentaires.
Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
