Create Responsive Elementor Cards with an INNER Section Inside an INNER Section

If you have ever wondered how to create responsive elementor cards or add an inner section inside another inner section in Elementor, this tutorial is going to provide you with a quick solution for that!

I’m going to show you how to create eye-catching Elementor cards with content, images, and buttons, that will be fully responsive on tablet and mobile devices.  

PS: For purposes of this tutorial, you should be having a pre-made section (main section) to work with.

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: Responsive Elementor Cards Tutorial

Add an Inner Section inside an Inner Section in Elementor

Start by going to your Elementor editor, in your widgets area, drag an Inner Section widget to your main section (00:25). Make it a 3 column section.

lOx0jyIYEDDkaU26yOwKexHlXUMdmAb kynIPpOFluCRQhNwMvAs vyB84NrUcrglu 6Ji9GwMZ OOsmTCTsLG5Sa r QHGXb2d0YTl0n8n2IAXVUXdizlOlIvdcwEWaUccl8Pz

For the first column, under Layout set its Column Width to 38%, the second column to 38% as well, and the last column will take the remaining width (24%).

Now, we want to add an inner section inside the first column. However, if you go to the Widgets area and try to drag an inner section to this column, it does not work. So how do you add an inner section into another inner section?

To add an inner section inside an inner section, go to your main section, right-click on the column holding the first inner section and copy it, then go to the inner section’ column and paste it (01:05).

zaZAqJL11gxJy74vKEctYXqG7NBSBfh9OnhseWgwr0Mz88WLYXnxOyKiWcAMwwQBRGo9v Skf53sBE83DUVGib bz12zk aE7 d m0M2wgWDATLbTf0sJJLuM0klZfD8PHADmP Y

Delete the extra columns and inner sections that you don’t need.

Select the column, under Style give it a Background Type of image, choose and insert an image from your media library.

In your Widgets area, drag a Spacer widget to your column. Select the spacer widget and in the Content area, give it 254 pixels under the Space option.

Select the column again and go to Style, set Position to custom, set X Position to -15 pixels and Y Position to -76 pixels, then set the Size to cover (01:48)

MEJBNGVlcvnWtUdEABb7m4sP5UM b3NDirIOIj6aLTzpTyHl0W7IfgY1z8Hp3q68yLx74UD88mWkz7whem084Lj8iXUb3itwlwrwW5It83vfpiAz XClrEZenOTC9KSnSuZmRWaF

Select the inner section which is inside the column you just styled, to this section add a heading widget, a text editor widget, an icon list widget, and a button widget.

Select the inner section, under Style, add a Background color of yellow but a bit transparent.

Select the column and go to Advanced, remove all the paddings. 

Then select the inner section column and go to Advanced, add a Padding of 20 pixels on all sides.

Select the main column again and under Column Width give it 38%.

Now select the main heading widget and go to Content, under Title type in “Spicy Curry”. Then go to the Style option, give it Text-color white, under Typography give Poppins.

Select the text editor widget and under Style change the text color to white, then for Typography give it a content text font of your choice.

Select the list item; delete the 2 list items and remain with one, add content under Text; that’s 12:00 – 17:00. 

Go to the Icon option and browse your icons library, choose an icon and insert it. 

Go to Style, select Icon, and set its color to white. Then select Text and also give it white, then go to Typography and change it to your content text font.

Go to the Advanced option next, under Positioning set it to Inline auto.

Now select your button widget, under Content set the button text to “Order Now”, set the size to medium. 

On the Link option, you need to add a link where your visitors will be redirected when they click on the button.

On the Icon option, go to the Icons library and select a forward arrow (→), insert it, and on the Icon Position option, set it to be After.

Go to Style, under Typography choose a font for your button. For text color, choose yellow, then make the background color white. Set the Border Radius to 35 pixels on all sides

Since the button is inside the card, let’s reduce its font size. Select it, on the Typography option under Style, set the size to 15 pixels.

Still with the button selected, go to Advanced, on Positioning, set the Width to Inline auto; to align the button with the time (04:49)

oWtjyAjh1 LbViflB45zcXHm880A7z7ynYhvfL5FoBqUaV19 MZNGl1pO2sPkL

Select the inner section, go to Layout, and under Vertical Align select middle.

Select the time, under Advanced, go to Padding, and give it 20 pixels on the right.

To add a rounded border to the column top, select it and go to Style, unlink the Border Radius then give it 35 pixels on the right (05:28)

Responsive Elementor Cards with inner section inside inner section

To add a hover transition on the image, select the column and under Style go to Background Overlay, go to Hover and give it the black heading color, set the Opacity to 0.2 and the Transition Duration to 0.5.

To Read: How to Create an Elementor Vertical Scroll Section with Premium Addons

Add the Second Custom Elementor Card

Right-click on the column and duplicate it (06:07). Delete the extra column, then under Layout set the Content Width of both columns to 38%.

Y678IZdsyopghIGEIRgBBSIqJlS0KzRyzfWSl7Zj3G4jb0rDLLPUz9yO oN3XIiXnFbBXWBT85dMc4M9z1dBT03szibLn3 AI9V4CedYSN jdBt8sIgfEVv4NhB1gajsESMJIUq
a3rRcLyjfigdmu nL4tii4ZdoCHPJ3tty6FimiO8I8geAVjMIR14ck7sdY4lHMAd KP 7HtQaDvoKXimKmBXXbdJ2fhCHuXmPCulRcTzBFMYauyAjfmoNkEaM5Hes9gt71YS0vDa

Select the first column and go to Advanced; under Margin, unlink the values then set 15 pixels on the right. 

Select the second column next and under Margin in Advanced, give it 15 pixels on the right too. This will give them the extra white space in between (06:40).

vEOVMkMtV7HldXN6XM67KaFWwksAPbNigrwvMkKViCWtxKwgRvWQL9 b3JbiJVl0kYhfGjMlZelsEuFVCFhT1RcUl t9SCJezjfkV9gJlx6mhB69LPejC1dN4f CrFCV67s36iUe

Now it’s time to edit the content of the second column.

Select the column and go to Style, choose a different image for the Background and insert it. 

Go to the Heading and type in your heading, then add in the other text of your choice, like the time, etc.

To Read: Create an Elementor vCard with Download Link and Contact Modal Popup

Add the Last Elementor Card Column

With this done, select the last column, go to Style, and for Background, choose an image and insert it. Select the image and on the Size, option set it to cover (07:03).

PTaFscCiGpIDFGZ9hFS2LWum1mJgm5eYgPhYlFC0 jeSQOmnYhKXgyoad4DgFB9s5MGrUAo4UKV vne6HmiY0VpQ0YM3jd5IP5h2qE06PA4yqvoeWPROe5C1a0Yn70NbH7ekQ72t

Next, we’re going to add content to the column. 

In your Widgets area drag a text editor widget and an icon widget to your column (07:08).

gW0rXGgkaRi9oN82zozqkFq9f8eFzOtC8YgM4kf15H ke6rjWb7TASWMO8gwlf K iuUmGYvEzU 6iRsqxwIijZkpkystYUUR1aNUF7IB96Bv1srq13z2kz3eM9X3GqR 6Ic1r1H

Select the column and under Layout, set Vertical Align to the middle.

Select the icon widget, under Content browse to the icons library, and insert an arrow. Select the arrow and under Style change its color to white, and on the Hover option set the arrow color to yellow.

Select the text editor widget next, under Content type in “See More”. 

Under Style, set the Text Color to white, and for Typography set it to your content text style. Set the Alignment option to center. Click the Update button at the bottom and then preview (08:08).

XXaXIWAnE QfktcDpb7Eh7Z h7SgayxGLHWMXr3A76z0u On4h8upv2Wi377BDIjC9IOTvFSwfNnZx Vsrs ts oNfXCrPrG32F7c4KQmw0ypj20SAQlk791LWqJ nkCGUwZfdOm

Let’s give the column a rounded border at the top, and make it clickable as well. 

Select your column back in the editor and go to Style, under the Border option, unlink the values of the Border Radius then set it to 35 pixels on the right. 

Still with your column selected, go to Layout, under Column Link you can add a link so that your visitors can click anywhere on your column and they can be redirected to any page of your choice (08:43)

Note: To have the custom link option, you should have installed and activated the make column clickable elementor plugin.

BUIcyFUpzXx 2UAQ8czjmcmfh8giJ1c99Cs90twQ SeJ6WmBGLnnmHh5r4TBg8zyde8QEy2XICYBoJiE98KclcqVOYwXPf79gpukjtpvzcvS1RdBsNsCKNVO zeOPthszimTZM0h

For the buttons, select the ‘order now’ button, go to Hover (under the Style option), set Text Color to white, and Background Color to yellow. Do the same for the button in the next column. Click the save as draft option, then update and preview (09:11)


To Read: How PX, EM, REM, %, VW, VH Work In Elementor

Custom Elementor Cards Responsive Settings

In the Responsive Mode (09:22), you can select the tablet and mobile devices and go through the settings to make sure everything is responsive.

9 aNzst3chroQUGsdED3JbLUOKrO28POkj 2P55NvYXob BJc4SCrSRqa QiQme7K72ROZIdTWYj9FUPfc rc2jZmbHzSYX5m7D

On the Tablet;

Select the icon widgets in the first and second cards, and under Advanced > Padding, unlink the values then add 10 pixels at the bottom (09:55)

Jm gYFsuJ0Bot4LDLwhKYoEmxg2vTEp2O5k0111G6uQb0wdqUbrKgjsVCOOhlE7zjtopIeK6kU tDyZJGxfhwcxOs9Hl2u6 RN5I4XnQneyg slN

On the Mobile;

You can add some padding in between the cards

Select the first column and go to Advanced > Margin, unlink the values and add 15 pixels at the bottom (10:20)

scAIKkAqiOwzshT pbzPrAgnbO3jEhEotgPUGGjwXsXsLLs820BdXeFS2tp8f1KxBDABYIYl

After making sure everything looks fine and is responsive on desktop, tablet, and mobile devices, click the update button and preview.

Also Read: Create an Elementor Posts Loop with Custom Column Link

In Closing

That’s how you can create responsive elementor cards with an inner section inside an inner section.

If you have any comments, suggestions, or questions, let me know in the comments section below. For more tips and tutorials, subscribe to my newsletter and YouTube channel.

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