Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar.

Behöver du skapa en hexagonkarta med svävningseffekt med hjälp av 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:

skapa hexagonal karta med svävningseffekt - Elementor

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 av Elementor.

Läs också vår guide om: Hur man lägger till brödsmulor på en webbplats med 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.

3 kolumn sektion

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.

Lägg till en Inner Section-widget

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.

Skapa enkelt din webbplats med Elementor

Elementor låter dig skapa Enkelt och gratis vilken webb- eller bloggdesign som helst med ett professionellt utseende. Sluta betala mycket för en webbplats du kan göra själv.

skapa hexagonal karta med svävningseffekt - Elementor

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

skapa hexagonal karta med svävningseffekt - Elementor

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;
}
skapa hexagonal karta med svävningseffekt - Elementor

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;
}
skapa hexagonal karta med svävningseffekt - Elementor

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);
}
skapa hexagonal karta med svävningseffekt - Elementor

Låt oss sedan välja mellankolumnen och i fliken advanced, stiga på hexa-mamma i fältet CSS klasser.

skapa hexagonal karta med svävningseffekt - Elementor

Låt oss duplicera denna kolumn 2 gånger och ta bort de andra 2 kolumnerna.

skapa hexagonal karta med svävningseffekt - Elementor

Låt oss ändra bakgrundsbilden för andra widgets Inre sektion, titeln och innehållet i textredigeraren och även färgerna på övertoningarna 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.

.

0 aktier
del
tweet
Enregistrer