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