Behöver skapa en hex-karta med svävningseffekt genom den kraftfulla Page Builder Elementor ? Om så är fallet, ta reda på i den här artikeln hur du tar dig dit.
Om du vill ha en överblick över vad vi kommer att prata om i den här handledningen, inbjuder vi dig att titta på följande video:
För att slutföra den här handledningen behöver du Pro-versionen av Elementor, eftersom vi kommer att använda anpassad CSS-kod som endast stöds av den här versionen avElementor.
Läs också vår guide om: Hur man lägger till brödsmulor på en webbplats avec Elementor
Låt oss skapa ett nytt avsnitt med en struktur till 3 kolumner, sedan i panelen, låt oss definiera HÖGMOD sur Min höjdoch sedan Minsta höjd låt oss klicka vidare VH och ställ in reglaget på 100.
Låt oss lägga till en Intern sektionswidget – Inre sektion – i mittkolumnen. Denna widget är som standard konfigurerad med 2 kolumner, låt oss ta bort en av dem. Låt oss konfigurera det HÖGMOD sur Min höjd och Minsta höjd låt oss definiera det reglaget till 400.
På fliken Stil, låt oss ställa in bakgrundsbilden genom att välja en bild från ditt bibliotek och sedan ställa in dess position till Överlägsen centrerad, Upprepa på Ej upprepad och storleken på Omslag.
på BakgrundsöverläggKlicka på Degradera för Bakgrundstyp, välj och ändra huvudfärgen på #2299EF och plats på 20, sedan sekundärfärgen på #1917 f.Kr och plats på 50, vinkeln på 140 och opaciteten på 0.85
Lägg sedan till a Titelwidget iInre sektion och som Titel, Låt oss ge ett namn och ändra sedan färgen till på fliken Stil i titelwidgeten # FFFFFF. Lägg sedan till a Textredigeringswidget, och i fliken Stil Centrera texten och ändra färgen till # FFFFFF.
Se även: Hur man lägger till bild till pristabellswidget med Elementor
Välj igen Inre sektion, gå till fliken Avancerad, i avsnittet Intern marginal, stiga på 25-2-2-2
Välj den inre sektionen igen och gå till fliken Avancerat och i sektionen Anpassad CSS, kopiera och klistra in följande kod:
/*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;
}
Låt oss sedan lägga till det andra kodavsnittet nedan till det föregående:
/*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;
}
Låt oss sedan också klistra in utdraget nedan.
/*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);
}
Låt oss sedan välja mellankolumnen och i fliken advanced, stiga på hexa-mamma i fältet CSS klasser.
Låt oss duplicera denna kolumn 2 gånger och ta bort de andra 2 kolumnerna.
Låt oss ändra bakgrundsbilden för andra widgets Inre sektion, titeln och innehåll i textredigeraren och även färgerna på övertoningar för bakgrundsöverlägg. Du bör få ett resultat som ser ut så här:
Här har du precis slutfört denna uppgift enkelt. Förhandsgranska bara din surfplatta och smartphone och försök ändra marginalerna så att de matchar varje enhet.
Skaffa Elementor Pro nu!
Slutsats
Så ! Det var allt för den här artikeln som visar hur du skapar en hex-karta med effekt. Om du har några funderingar kring hur du tar dig dit låt oss veta inom commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
