Skal lave et hex-kort med svæveeffekt gennem den kraftfulde Side Builder Elementor ? Hvis ja, så find ud af i denne artikel, hvordan du kommer dertil.
Hvis du vil have et overblik over, hvad vi vil tale om i denne tutorial, inviterer vi dig til at se følgende video:
For at fuldføre denne tutorial skal du bruge Pro-versionen af Elementor, da vi vil bruge tilpasset CSS-kode, som kun understøttes af denne version afElementor.
Læs også vores vejledning om: Sådan tilføjer du brødkrummer til en hjemmeside med Elementor
Lad os oprette en ny sektion med en struktur til 3 kolonner, så lad os i panelet definere Højde ud af Min Højdeog så Minimum højde lad os klikke videre VH og indstil skyderen til 100.
Lad os tilføje en Intern sektion widget – Indre sektion – i den midterste kolonne. Denne widget er som standard konfigureret med 2 kolonner, lad os slette en af dem. Lad os konfigurere det Højde ud af Min Højde og Minimum højde lad os definere det skyderen til 400.
I fanen stil, lad os indstille baggrundsbilledet ved at vælge et billede fra dit bibliotek og derefter indstille dets position til Superior centreret, Gentag videre Ikke-gentaget og størrelsen på Dække over.
Om BaggrundsoverlejringKlik på Forringet for Baggrundstype, vælg og skift hovedfarven til #2299EF og placering på 20, derefter den sekundære farve på #1917 f.Kr og placering på 50, vinklen på 140 og opaciteten på 0.85
Tilføj derefter a Titel-widget iIndre sektion og som titel, Lad os give et navn, og skift derefter farven til under fanen Stil i Titel-widgetten #FFFFFF. Tilføj derefter a Teksteditor-widget, og i fanen stil Centrer teksten og skift farven til #FFFFFF.
Se også: Sådan tilføjes billede til pristabelwidget med Elementor
Vælg igen Indre Sektion, gå til fanen Fremskreden, i afsnittet Intern margin, gå ind 25-2-2-2
Vælg den indre sektion igen og gå til fanen Avanceret, og i sektionen Brugerdefineret CSS skal du kopiere og indsætte følgende kode:
/*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;
}
Lad os derefter tilføje det andet kodestykke nedenfor til det 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;
}
Så lad os også indsætte uddraget 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);
}
Lad os derefter vælge den midterste kolonne og i fanen avanceret, gå ind hexa-mor i marken CSS klasser.
Lad os duplikere denne kolonne 2 gange og slette de andre 2 kolonner.
Lad os ændre baggrundsbilledet for andre widgets Indre sektion, titlen og indhold af teksteditoren og også farverne på baggrundsoverlejringsgradienterne. Du skal have et resultat, der ser sådan ud:
Her har du lige løst denne opgave nemt. Bare se en forhåndsvisning af din tablets og smartphones arbejde, og prøv at ændre margener, så de passer til hver enhed.
Hent Elementor Pro nu!
Konklusion
Så! Det er det for denne artikel, der viser dig, hvordan du opretter et hex-kort med effekt. Hvis du er i tvivl om, hvordan du kommer dertil, så lad os det vide inden for kommentarer.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
