Create a Clean Modern Elementor Info Card with Curved Shape on Hover

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)

U FNKwx6MeyKc3ax4K2 n06nitf RUPGZcsY59Iv9R8380kbgAD9 qOLMfuHOKYX7SMPO8m6 CLgEaaVTEqHE6o4P76YOgj1SuhYcgcre K1JIuQ1Yrn9Ue89MmvDBbIPmPPYp68

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).

Modern Elementor Info Card

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.

CwtAKW5jEIN8Lt1p6sHrgpT1Ctwv3Yb FwV72B43I9TYdQ79l4ZJhb81kJ2D02eGnCPChRC4F5s0pUspHtgnI8Z7Fbq2SuOJc HzTZreYbbf0GE2sfjcc6yig7oJ rzk8O31BODB

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). 

8OXlaEAq6U JomRclOesvNIYNikugNKnZoF6dl54DQqRUuSSqSrjLIZVMTPVQJjFfzE8zM0uRecmL UuB9wl0YtjyyY VEfH40DwIc muRl TDbvj8oedy6ghPzDsu6cTrvYnc6v

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)

2u2IC3TvG84MLbNmqSluzV1Qngho7wDeqk2Z49SvBmedgl xoBUiziU7V1pm17xDHG 9PZpE2v9RJQfbrTZ2 uyyiMuvR7YeaGUy9cPFWBJskMvTWMWbeZS 8npUc0PPmqi tPB

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).

UnuJ hRvggHDuUL xoIs7NJJO8WmgNqb1zEN9W8P WugatuYVERNCdbcfQZsn

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.

6iLeOtthBLXtzJ1lyQ2qJ9rMENSFvm XxfeTS3kTzL hBgDFZDTwedSRZQ6iyAK1sexGq2NEoFZqQ4t1 1ElKQo5jOZDURKj

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *


Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users