In this guide, I’ll show how to create a responsive elementor landing page using Elementor Pro. From creating sections, navigation, clickable columns, custom elementor posts loop, info cards to styling your elementor landing page and making it fully responsive on all devices.
If you have never created a landing page in Elementor, or you’re simply looking for landing page design ideas, this is the tutorial for you.
For example, in this guide, our website below; when I click on a particular item I’m taken straight to that section on the same page. You’ll learn how to make that happen. I’ll show you step by step how to create and style all the sections on this site; headings, buttons, adding custom images, floating images, and all the nitty-gritty!
We’ll look at how to create custom elementor cards, a clickable column, an opt-in form, a blog archive section, off-canvas images, etc.
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: Elementor Landing Page Tutorial
What You’ll Need to Create an Elementor Landing Page
All you’ll need to achieve this is Elementor the free version, and Elementor Pro plugin (affiliate). If you use my affiliate link to get your elementor pro licence, you’re not charged any extra fee but I receive a small commission and that way, I’m able to create more of these tutorials.
Note: I have also created a video version of this tutorial and 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.
Creating a Style Guide in Elementor
First, go to your WordPress dashboard, go to Elementor > Templates > Landing Page (01:53).
This will take you to the area where you can create landing pages for your Elementor website. Click Add New Landing Page (02:01), close the popup with templates because you’ll not be using any of them.
On your new blank canvas, go to the settings icon at the bottom left and click on it (02:14). In the settings area that opens up go to Title and rename Responsive Restaurant Landing Page, then save it as a draft (the save draft option is at the bottom).
After saving, go to your canvas and click the 
In this new section, we’re going to create a Style Guide for our Landing Page. In this style guide we’ll include the typography styles for the headings, the subheadings, content, and the colors we’ll be using on our page
To do this:
In the Widgets area on the left, find a heading, text editor, and button widgets, and drag them to your section (02:49)
The next step is to style these widgets and save those particular stylings as global styles so that they can be used all over the website without having to restyle every item.
Select the Heading widget, in the Edit Heading area on the left, go to Style and set Text Color to black, then under Typography set font (family) to Poppins.
Under Size set it to 60 pixels, and then set the Weight to 600
Under the Transform option, set it to capitalized and Line Height to 75 pixels.
This style will work for all the main headings. But we’ll have another header and a subheader too.
To create these:
Select the heading widget, right-click and select Duplicate (03:39)
Select the new header and under Style in the Edit Heading area on the left, go to Typography and set Font to Poppins, change Size to 45 pixels.
For the Content, set under Typography, font to Poppins, size to 18 pixels, and Weight 400. The text color for the content should be set to grey.
Select the Button widget; in the Edit Button area on the left go to Typography > Family, set it to Poppins, Size; 18 pixels, and Weight; 400.
Go to Background Type and set Color to yellow, then set Text Color to white. Now we’re done setting up the heading, subheading, content, and button (04:24)
Now, to be able to use these settings you’ve made whenever you need them, you have to save them as global settings.
To do this, select the main heading and under the Text Color option save the black as a global color by clicking the Create New Global Color option (04:44), give it a name, and click the create button.
Go to Typography and click to create a new global font, name it and click the create button (05:20)
Select the content and button widgets too and repeat the above steps for each;
Select Color > create new global color > name and save
Select Typography > create new global font > name and save.
After creating a style guide for your landing page, the next step is to create your page sections.
Creating 1st Elementor Hero Section with Off-Canvas Images
Click the
Select the first column, in the Edit Section area on the left, go to Layout > Column Width > give it 80% to take up 80 percent of the section width.
Select the main section, under Layout go to Height and set it to Min (minimum) Height, then give it 80 VH.
Go to Style, under Background, set Background Type to gradient, under color choose yellow and Location 25, then on the second color set it to transparent and Location 23 (06:05)
Go to Type > Angle and set it to 270 (06:17)
Go to the Background Overlay option; under Background Type, select Image then select a background image from your media library.
Under Position, set it to Center center, set the Attachment to Fixed and the Opacity to 0.03 to make it a little lighter.
Back to your Widgets area; drag the Inner Section widget to your main section (06:45). The inner section should have only one column.
Drag 2 heading widgets, a text editor, and a button widget to the inner section.
Select the first heading widget and under Title, give it a name; Kampala’s Best Restaurant.
Go to Style > Text Color and give it the yellow global color you saved. Under Typography give it the global text saved earlier (content text).
Select the second heading widget and on Title under Content type; add We Serve Delicious Food.
Under Style, set the Text Color to the global heading color, black. Under Typography; font style should be the main heading style. We need to break the text We Serve Delicious Food and make the word ‘Delicious’ yellow. To do this you need some CSS code.
Here’s how it should look:
We Serve <br> <span styles=“color:#FF9D02;”>Delicious</span> Food
(08:05)
This code translates to: after the words We Serve there’s a break, then it includes the span tag with the yellow color code for the word Delicious, then the rest of the words maintain the intial color – black. (08:26)
Next, select your text editor widget;
First, in the Text Editor section on the right, you need to break the text by pressing shift+enter (08:38)
Go to Style and under Text Color choose the global color for the content. Under Typography, select content text.
Select your button widget; under Text, type “Order Now”.
Under the Link option, you can add a link (#) where you want your website visitors to be redirected. Under Size, select medium.
Go to Style and on the Typography option choose the global button style, set the Text Color to white.
Under Background Type set color to the global color yellow. Set Border Radius to 35 pixels for top, bottom, right and left. Under Box Shadow, add and small shadow and make it transparent.
Go to the Hover option, set Text Color to the global yellow then set the Background Color to white.
In the second column; drag 2 image widgets into it (09:51)
Select the first image widget and in the Edit Image area, insert an image from your media library. Under Image Size, set it to Full.
Go to the Advanced option; under Margins, add -500 pixels on the right and -400 pixels on the left (10:14)
Select the second image widget, add an image from your library, change Image Size to full.
Go to Advanced > Positioning, set Width to custom, and set the Custom Width to 66 VW. For Position, set it to absolute, then set Horizontal Orientation to right with -65 VW on the offset, and for Vertical Orientation set offset to 151 pixels (10:58).
Click the Update button at the bottom and then preview.
Also Read: 15 Fun Elementor Features You Don’t Know Exist
Creating 2nd Hero section with Info Cards
Get back to your Elementor editor, in the Navigation area on the right side, select the section and rename it to Hero 1, then right-click and duplicate it, and name the duplicate section Hero 2 (11:18)
Now select the Hero 2 section, go to Style, and under Background Type delete the background, then go to the section and delete the second column as well as the image widgets, this will leave you with a 1 column section. Delete all the widgets in this column too.
Now select the section and in the Edit Section area on the left, go to Layout, change Minimum Height to default and Column Gap to extended.
In your Widgets area, drag an inner section (12:10). Select the first column of your inner section and under Layout set Column Width to 40%, then drag a Heading widget to it.
Drag a Text Editor widget to the second column.
Select the heading widget;
Under Title type in ‘Our Services’. Select the title you just typed and under Style, set Text Color to the global heading color (black). Under Typography, give it the global heading font style.
Under the Content option, we’re going to style the word ‘Services’ in yellow. To do this you use the CSS code: Our <span style=“color:#FF9D02;”>Services</span>
(13:58)
Select the text widget;
Under Style, give it the global content color style for the Text Color.
Under Typography give it the global content font style.
Now select the inner section, under Layout, go to Vertical Align and align it in the middle (13:19)
Select the column with the “Our Services” heading, go to Style, give a Border Type of solid, on the Width option, give it 20 pixels on the left. Then give it a yellow color.
Go to Advanced, under Margin, give it 50 pixels for the bottom.
From your Widgets area, add another inner section with one column. To this section add a Heading widget. Select the heading and under Style; set the Text color to the global heading color (black), for Typography select Poppin 45 (the global heading font).
Go to Content and add “See Our Meal Plan” (use the CSS code we used earlier to make the word ‘Meal’ yellow).
Under Alignment, align it to the center.
Now select the column and go to Advanced, add padding of 40 pixels for the top, bottom, left, and right (14:34)
Add another Inner Section from your Widgets area, with 3 columns.
For the first column, under Layout set its Column Width to 38%, the second column 38% as well, and the last column will take the remaining width (24%).
To Read: 5000+ Elementor Template Kits – Free and Premium
Creating an Inner section Inside an Inner Section in Elementor
Inside the first column of the inner section we just created, we want to add another inner section.
However, if you go to the Widgets area and try to drag an inner section to this, it does not work. So how do we go about this?
To do this just go to the main section and copy that column, then select the column of the inner section and paste it (15:16).
That’s how you can have an inner section inside an inner section.
Delete all the other items you don’t need.
Creating Elementor Cards with Clickable Columns
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, 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 -76 pixels, then set the Size to cover (16:00)
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 that 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 45.
Select the text editor widget and under Style change the text color to white, then for Typography give it the global content text.
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 content text.
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 to where your visitors will be redirected when they click on the button.
On the Icon option, go to the Icons library again and select a forward arrow (→), insert it, and on the Icon Position option, set it to be After.
Go to Style, under Typography choose the button’s font. For text color, choose yellow and make the background color white. Set the Border Radius to 35 pixels on all sides
Let’s reduce the button font size since it’s inside the card. 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 (19:00)
Select the inner section, go to Layout and under Vertical Align choose 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, select it and go to Style, unlink the Border Radius then give it 35 pixels on the right (19:38)
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.
Right-click on the column and duplicate it (20:18). Delete the third 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.
After setting this up, you now need 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.
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.
Next is to add some content to the column.
In your Widgets area drag a text editor widget and icon widget to your column (21:20).
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 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 content text. Set the Alignment option to center. Click the Update button at the bottom and then preview (22:24).
Make Elementor Column Clickable
We’re now going to 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 (22:55)
Ps. To have the column link option, you should have the make elementor column clickable plugin installed and activated.
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 (23:24)
Creating Elementor Info Cards Section
Select your inner section and go to Advanced, under Margin, after unlinking the values add 100 pixels to the bottom (23:33).
Now go to the upper inner section, right-click and duplicate it (23:48), then drag the duplicated section downwards.
Select it, go to content and change it to:
Why Choose Our <span style=“color:#FF9D02;”>Food</span
Add another inner section below the ‘why choose our food’, make it a 3 column section.
Inside the first column, add an icon widget, a heading widget, and a text editor widget.
Select the icon widget and search for a hamburger icon from the icons library, insert it. Change View to stacked, and Shape to circle, then under Alignment choose left.
Under Style, make the Primary Color a bit transparent, and the Secondary Color yellow. Set Size to 60 pixels.
Select the heading widget, under Content add ‘Tasty Food’. Go to the Style option, set the Text Color to the heading color (black), then Typography to the heading font.
Go to Advanced and under Margin add a top margin of 45 pixels.
Select the text editor widget, under Style set the Text Color to the content color (grey), Typography set the content style.
Select the column and go to Advanced, on the Padding option add 40 pixels on all sides.
Now select the column and duplicate it, twice. Delete the other 2 blank columns. Then with the middle column selected, select the icon and choose a different icon from the icons library.
Select the heading widget and change the content to ‘Quality Service’.
Select the column again and go to Style to give it a drop shadow; go to Style and under Border, on the Box Shadow option, give it a vertical shadow of 25, a Blur of 45, and a Spread of -20. For the Border Radius, set it to 35 pixels on all sides.
Select the last column; select the icon widget and replace it with a new icon. Select the heading and edit its content to ‘Fast Delivery’. (26:19)
Select the inner section and go to Advanced, add a bottom margin of 100 pixels. Update and Preview.
Also Read: Create an Elementor vCard with Download Link and Contact Modal Popup
Create an Elementor Opt-In Form
Get back to your Widgets area in your editor, add another inner section with one column.
Select the inner section and go to Style, under Background Type give it a background color of a tint of the global yellow.
Then copy the ‘Why Choose Our Food’ heading widget and paste it into the new inner column. Edit the content to ‘Subscribe For Our <span style=“color:#FF9D02;”>Promos</span’.
After editing your content, go back to your Widgets area. Search for a form widget and drag it to your inner section. Under Content, delete the Name and Message fields and remain with the Email field only. Under the Input Size option, set it to large, then turn off the Label option. Select the Buttons option, change the Size to large, and Alignment to the center.
Under, the text should be ‘Subscribe’, and for the Icon option, choose the arrow from your icons library, then set Icon Position to after.
Go to Style, set Text Color under Field to yellow, for Typography choose the content font and white for the Background. Set the Border Radius to 35 pixels on all sides.
Select Buttons, under Typography, choose the button font. On the Normal option, set the Background Color to yellow, and the Text Color to white. Then Border Radius 35 pixels.
On the Hover option, set the background color to white and Text Color to yellow. Save the draft and preview (28:40).
Select the column containing the heading widget and opt-in form the go to Advanced, under Margin add Padding of 40 pixels on all sides.
Note: For the opt-in form, remember to make changes to your ‘actions after submit’.
To do this select the form, go to Content, under the Actions After Submit option, choose an action, that is; choose where the submission form will be going, for example to your Mailchimp, Active Campaign, etc.
Custom Elementor Posts Loop
For the last section:
Select the ‘Our Services’ section and copy it (29:17), paste it below the section you just finished stying.
Select the opt-in form and under Advanced, unlink the Margin and then add 100 pixels to the bottom.
Select the heading widget you just pasted, under Content edit the Title to “More of our <span style=“color:#FF9D02;”>Services</span” (29:45)
Back in your Widgets area, add an inner section with two columns. Under Layout, give the first column 72% Column Width and the second column 28%.
In your Widgets area again, look for the Elementor Posts Widget, drag it to your first column (30:03)
Select the posts widget, under Content, change Skin to cards. Under Columns enter 2, and Posts Per Page 2.
On the Show Image option choose Yes, under Meta Data remove all the items. Disable the Badge Taxonomy and Avatar options. Update and preview (30:43).
And now let’s add style to this.
Select the posts widget and go to Style, under Layout set the Column Gap to 15.
Under the Card option, set the Background to yellow. Enable the Box Shadow option, and leave the Hover Effect as a gradient.
Under the Content option, for the Title, change the Color to white, for Typography give it the heading font style.
Down on the Read More option, change the Color to white, Typography give it the content text.
For the Excerpt, change Color to white and Typography to content style. Change Excerpt Length to 15. Update and preview (31:48)
Go to the ‘See Our Meal Plan’ section and copy the last column (31:05), paste it into the Posts section. Delete any extra column, and make sure the first column is taking up 72% of the Column Width.
Select the newly pasted column, under Custom Link you can add a link for your visitors to be redirected to your Blog Archive page.
Go to Style, under Background Overlay, and under Background Type add a white color, decrease the Opacity to 0.74.
Select the icon in the column, set its Primary Color under Normal to yellow, and under Hover set it to a more transparent yellow. Save and preview (32:55)
To make the posts columns in alignment, select the posts widget and go to Advanced, under Padding unlink the value/remove the padding. Then select the last column and do the same.
Back to the first column, select it and go to Advanced, under Margin add 15 pixels on the right. Update and preview (33:18)
Creating an Elementor Header with Custom Menu Items
And now, we’re going to create a header and navigation for this landing page.
Back in your editor add a new 2 column section.
Select the first column and under Layout, give it Column Width of 20%.
In your widgets area, drag a heading widget to the first column, under Content, give it the Name of your website (Go Foods).
Under Style, set text color to yellow, for Typography give it the main heading font style.
Go back to your widgets area and find the Elementor Nav widget and drag it to the second column. In this widget, you have to choose a menu to display in the navigation.
In the Edit Nav Menu area, under Menu choose the Restaurant Landing menu (34:14)
Press CTRL/CMD+E, in the Finder type in Menus to go to the Menus section in your Dashboard (34:31). Give your menu a name and assign items to it.
When you’re done creating your menu you’re able to echo it in the Menus widget in Elementor.
On the Layout option use horizontal, under pointer choose none.
Under Align choose the left side.
Under Breakpoint, choose Mobile. Leave the rest of the settings on default.
Go to Style, for Typography use the content text style, for Color use the heading color (black), on the Weight option set it to 600. Set Horizontal Padding to 13, and the Space Between to 25.
Under Hover; set the Text Color to yellow. And on the Active option, set Text Color to yellow too.
Under Toggle Button, set the Color to yellow, then the Background white. Set the Border Radius to 35 pixels, to make the toggle button rounded.
When you go to the Responsive Mode and preview on the Mobile device (35:42), that’s the Toggle Button we’re making changes to.
Choose the first column (Go Foods), under Layout, give it Column Width of 80%, and the Toggle column 20%.
Now select the section and under Layout go to Vertical Align and set it to the middle.
Select the Go Foods heading and under Style, Typography, reduce its size to 37 pixels. Under Content, you can also go to the Link option and paste in your homepage link so that when someone clicks on the logo they’re redirected to your homepage (36:21).
Select the Tablet device next;
Select the Go Foods header and under Typography reduce its size to 38 pixels.
Select the whole section and go to your navigation (36:43), rename ‘Section’ to ‘Header’ then drag it to the top of Hero 1 and Hero 2.
Here, we want the header to sit on top of the first Hero section.
Select the first Hero section and go to Advanced, unlink the Margin values then on the Top give it -80 pixels.
Select the header widget; under Advanced, give it a Z-Index of 10; its Z-Index has to be higher than the Hero section to make sure no content is hidden behind the Hero section.
Select the logo and under Style, go to Typography and resize it to 45 pixels. (37:28)
How To Link WorPress Menu to Elementor Sections
To link this menu so that when someone clicks on the menu item they’re able to access that section on the page; first, we need to assign a CSS ID to the individual sections.
Select the ‘See Our Meal Plan section’, go to Advanced, under CSS ID give it ‘menu’.
Note: The CSS ID should be unique and not be used anywhere else on this page.
Select the ‘Why Choose Our Food’ header, under Advanced > CSS ID, assign it ‘reasons’.
On the ‘More Of Our Services’ section, assign it ‘Blog’.
When you’re done assigning CSS IDs, click the update button, then go to your Menus in your WordPress Dashboard and add these CSS IDs to their respective menu items.
On your Dashboard, under Menus, go to the menu item and under URL add #menu. Under reasons add #reasons. On Blog, add under URL; #blog.
Back to your Elementor website, preview, and now when someone clicks on any menu items they’re taken to that particular section on the page.
Elementor Landing Page Responsive Settings
Now we have to make sure all the sections are responsive on Tablet and Mobile devices.
With the responsive mode active,
Select the tablet device;
Starting with the header section, select the menu and go to Style, set Horizontal Padding to 4.
On to the next section, Hero 1, select the image, go to Advanced and first unlink the Margin values, then add -200 pixels to the right and -300 to the left.
Select the other image widget and under Advanced, go to Positioning and under Horizontal Orientation Offset to -34 VW, Vertical Orientation Offset to 300 VW. You can also reduce the image size to 57 VW.
Select the main header and go to Style, go to Typography and reduce the size to 53 pixels.
Select the text editor widget, go to Style > Typography and reduce the size to 17 pixels.
Select this Hero section, under Layout, go to Minimum Height and reduce it to 75 VH.
Select the Spicy Curry and Cheese Burger headings and under Typography resize them to 28 pixels. Do the same for the Why Choose Our Food section content and the blog content.
On the Mobile device;
Select Hero 1, under Advanced, unlink the margins then go to Responsive, enable the Reverse Columns (Mobile) option.
Select the first image and go to Advanced, under Margin, unlink the values, then give it -120 pixels on the right and -50 pixels on the left.
Select the text ‘Kampala’s Best Restaurant’ and hide it, via Advanced > Responsive.
Select the We Serve Delicious Food heading, and under Style reduce its size and its line-height.
Select the text widget and do the same.
In the next section, select it and go to Advanced, unlink the Padding values then give it 50 pixels on Top.
For the Posts sections, add a Top margin of 10 pixels on the ‘see more’ columns.
Here’s how the website looks on mobile and tablet devices (43:03).
When you’re done creating your Elementor landing page, publish it. If you don’t see the publish option, click on the setting icon at the bottom, and on the Status option make sure it is published (43:58)
Also Read: How to reCreate Websites with Elementor based AI Builder – 10Web
How To Create A Landing Page URL and Permalink Settings
After publishing your landing page, go to your WordPress dashboard and under Templates open up your landing pages option. In there you’ll see a list of all your landing pages (44:10), we have one here.
To give this landing page a unique URL, go back to your dashboard, under Settings go to the Permalinks option (44:28).
Under Permalinks, check the Post Name option to be the permalink. Save the changes (44:38)
Also Read: Case Study: What is Site Structure and How To Get SiteLinks
In closing
Congratulation on holding on this far. I hope this tutorial has been of help to you and that you’ve had a fruitful and fun time creating and styling your Elementor landing page.
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.
