Design Unique Hero Section in Elementor with Custom Code

In this article, we will share how to create a Hero Section in Elementor. Everyone knows elementor is the best website page builder, but in the free version of Elementor, they can not provide extra features, so don’t worry, I will share with you the custom code as well. Let’s understand and create this.

To create this hero section i create a first container and in this container add two inner containers in the left container, add a heading, paragraph, button, and after button, add another container inside this, add a text and image.

for right container, add the first image, and after that, add another container. For this container, add class ” blur-back” and convert in position absolute, and inside this, add a heading and image.

Right image Absolute Container Code

 /*Overlay Image Blur*/ 
    .blur-back{
        backdrop-filter: blur(5px);
    }

Design Custom Button Code for Hero Section

/* Custom Button*/
    .btn-1 .elementor-button .elementor-button-content-wrapper .elementor-button-icon{
        background: white;
        padding: 10px;
        border-radius: 50%;
        fill: #222 !important; /* You can change the icon color from here. */
        color: #222 !important; /* You can change the icon color from here. */
        box-shadow: 1px 1px 15px rgba(0,0,0,0.1);
    }
    .btn-1 .elementor-button .elementor-button-content-wrapper{
        align-items: center;
    }
    

Use this code in elemetor html widget and in the style tag