Wondering how to create a modern elementor info card or simply to how display a curved shaped on hover in your elementor website?, well, this tutorial demonstrates how to do just that.

We’ll have fun playing with Elementor styles and settings without adding extra CSS whilst creating bespoke info card Elementor columns and sections. 

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Video: Modern Elementor Info Card Tutorial

Step 1: Add Elementor Inner Section

In your premade section in Elementor, go to the Widgets area on the left and drag the inner section widget (00:22)

By default, the inner section has 2 columns, and we need 3, so right-click on it and select the Add New Column option.

Step 2: Add Widgets To Elementor Inner Section

In the first column, go to your Widgets area, drag the icon, heading and text editor widgets to it (00:36).

Now select the icon widget, in the Edit Icon area on the left, browse to the media library and search for a Hamburger icon, then insert it. Under View select stacked, and for Shape select circle. On the Alignment option, align it to the left.

Go to Style, set the Primary Color to be transparent and the Secondary Color to yellow, then set the Size to 60 pixels.

Select the heading widget next, in the Edit Heading area on the left, under Content, on the Title option type; ‘Tasty Food’. 

Under Style, set Text Color to the heading color; black, then under Typography set the font to the heading font style.

Go to Advanced > Margins, add a Top margin of 45 pixels.

Select the text editor widget next and go to Style, set Text Color to the content color, for Typography use the content typography.

Select the column and under Advanced > Padding, add 40 pixels on all sides (01:39).

Also Read: Elementor Blobs Generator – Create Blobs with Gradients, Animations and Shapes

Select the column, right-click and choose the Duplicate option, duplicate it twice, then delete the 2 extra columns (01:48)

In the middle column, select the icon, choose a different icon from your icons library.

Select the heading and on Title under Content, add ‘Quality Service’.

Select the column again and go to Style to give it a drop shadow; Style > Border > Box Shadow, give it a vertical shadow of 25, a Blur of 45 and a Spread of -20. 

Add a Border Radius of 35 pixels on all sides to make it more beautiful (02:21).

In the last column; select the icon widget and replace it with a new icon. 

Select the heading and edit its content to ‘Fast Delivery’. 

Select the inner section and go to Advanced, unlink the Margin values then add a bottom margin of 100 pixels. At the bottom, Save draft, update and preview.

To Read: How to Make a Glowing Gradient Border in Elementor [PRO]

Step 3: Add Curved Shape on Hover

Select the middle column, in Style, select the Hover option, under Background Type choose Image, then go to your media library to add an SVG image. After adding the image it now appears on hover (03:07). 

With the image selected go to Style > Image > Size, set it to cover. 

Select the column again and under Style go to Border Radius, unlink the values then set 0 pixels for the right, leave the rest on 35 pixels (03:30)

To make it even cleaner, remove the icon background color on normal. 

Select the icon, Style > Primary Color, make it transparent.

How to Generate SVG Backgrounds

I would like to share with you a little tip on how to generate SVG backgrounds without using CSS or illustrator.

There’s an app called haikei where you can generate SVG shapes and PNGs, and you can change the colors to your preference.

Take for example:

If I go to haikei app, click on the Dimensions option and select under the vertical options 3:4, adjust the Shape > Balance, then adjust the Complexity as well, using the knob I’m able to generate any curve or shape I want (04:38).

Under the color option, I’m able to change the colors to another. I’m also able to change the curve direction under the Direction option.

When done making changes to your preferences you can go to the bottom right and download the SVG. then you can upload it to your Elementor website.

Also Read: 5000+ Elementor Template Kits – Free and Premium

In conclusion

That’s how you can create a clean modern elementor info card section with a curved background hover. Hope this tutorial was useful to you.

For any comments or questions use the comments section below. Don’t forget to subscribe to my newsletter and Youtube channel for more tips and tutorials.