Elementor: How to Create Hex Map with Effect

Need to create a hex map with hover effect through the powerful Page Builder Elementor ? If so, find out in this article how to get there.

If you want to have an overview of what we will talk about in this tutorial, we invite you to watch the following video:

To complete this tutorial, you will need the Pro version of Elementor, because we will be using custom CSS code which is only supported by this version ofElementor.

Also read our guide on: How to Add Breadcrumbs to a Website with Elementor

Let's create a new section with a structure to 3 columns, then in the panel, let's define the Height on Min Height, And then Minimum height let's click on VH and set the slider to 100.

Let's add a Internal Section widget – Inner Section – in the middle column. This widget is by default configured with 2 columns, let's delete one of them. Let's configure it Height on Min Height and Minimum height let's define it slider to 400.

In the tab Style, let's set the background image by selecting an image from your library, then set its position to Superior Centered, Repeat on Non-Repeated and the Size on Cover.

Public chat Background overlay, click on Dégradé for the Background type, select and change the main color on #2299EF and location on 20, then the secondary color on #1917BC and location on 50, the angle on 140 and the opacity on 0.85

Then add a Title Widget in theInner Section and like Title, Let's give a Name, then in the Style tab of the Title widget, change the color to # FFFFFF. Then add a Text Editor widget, and in the tab Style Center the text and change the color to # FFFFFF.

See also: How to Add Image to Price Table Widget with Elementor

Select again the Inner Section, go to the tab Advance, in the section Internal Margin, enter 25-2-2-2

Select the Inner Section again and go to the Advanced tab and in the Custom CSS section, copy and paste the following code:

/*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;
}

Next, let's add the second code snippet below to the previous one:

/*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;
}

Then let's also paste the snippet below.

/*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);
}

Then let's select the middle column and in the tab Advanced, enter hexa-mom in the field CSS classes.

Let's duplicate this column 2 times and delete the other 2 columns.

Let's change the background image of other widgets Inner Section, the Title and the contents of the text editor and also the colors of the Background Overlay gradients. You should have a result that looks like this:

Here you have just completed this task easily. Just preview your tablet and smartphone work, trying to change the margins to match each device.

Get Elementor Pro Now!

Conclusion

So ! That's it for this article that shows you how to create a hex map with effect. If you have any concerns about how to get there let us know within Comments.

However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.

But meanwhile, share this article on your different social networks.

...