Elementor Landing Page – A Step by Step Guide

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!

Elementor landing page tutorial

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.

tpiqzaM 4M58Ouw9S4AUEGRIsQelQ613GRgaa1JU9OL48SouRGc 1FmUzh4 b82EZkR6HI6RnIDoa8NyuKRXli lPIh47BafJNfVoZsSqF9IF3cIC67LhTKTy7i oX MPvc2aUJF

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

p 85HsZgBx91zGkV0vUlTBulqEffaHpcN8J4udElVhVPtV1OFazQVq WC7QN1W9eXbVGkOBGZcF8pJdrxLVrUEi4SNADMyi7TdbIlRflwfebFsYDUEx1XLqhbuOdYBw3igHt9 oe
pa73VsKf3ZLwC5Tu3Y4mtXQl NSbIB5Fp gyWNkJovv9BoSdF6hFEUJMezKBmi 639pljtAKVYQj D4bLMeYyw jGoUg6zeBbras27SHc5aV05zwis37ZaTF9qWOyJvgBTmIMRr

After saving, go to your canvas and click the CbaWgIORLNY ZG97vMd en7XblkPYzgpDjKXn41PpcjRRpnQ3YjiGzd QGJlzHpJG8p4kbwkNq1V8D83whLwhZ8k5iFHzhVvk12M3ZMx5TXvTe1x18C02SoGI1 LsbzQYZD1HryR icon to create a new section, with one column.

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)

P1s2 J jgr09ukS KWekgHGZqfEabvEupg fpZn6XDF cLPI9SrtieCtQB3hiiT3bRiQ7sm 5Xdnfptv49yYMfKPaVRH5crHPF es4S7w9LEqfTgubUVqssF6GHf8NgTVcJUsa45

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)

Dct9bFYzvcTB77ABs0N80R

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)

qlbJackEYMsGyDlmLagdTvtbbsN

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.

BEMhKxiehjwYHBOzs pNMDb6KZzFBU3 hKUURiMJ3sEpxC K9dStnC1qtzxtQCfn cu8aGZg3j9729ND0q GNAP3Wl2XT0GQNjDMA3MWQ461KEYRVTEzbagykR677d7swKljZYN9
Create New Global Color

Go to Typography and click to create a new global font, name it and click the create button (05:20)

vN6qLR7TIFpd6ODzdr165UN0guCmgcJvLExVS9slw7aI99sikolelkxL11VlMx Bxkuhh4VJA1pDWZm4umu
Create New Global Font

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 CbaWgIORLNY ZG97vMd en7XblkPYzgpDjKXn41PpcjRRpnQ3YjiGzd QGJlzHpJG8p4kbwkNq1V8D83whLwhZ8k5iFHzhVvk12M3ZMx5TXvTe1x18C02SoGI1 LsbzQYZD1HryR icon to create a new section, give it 2 columns (05:39)

7SwzNj5W 6qlEEwmoYlN2JyYA tO GEwbClLP7yF7PSlGUneIFZctaqH85AaV

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)

hLMPmuuu9rtNpZIAdN0t9krRMkBpJWhGV7FoUl4trHlI4GtYdfWif5WRnuzYIDnDPuIla E8n3gUR7tU3UpDfPEZTgn4aVymSi0RvJ rh7KAsVHP iqZwDHB8Sf9I 4V1h2CMirI

Go to Type > Angle and set it to 270 (06:17)

79m6Xw2aYCQsLPHSydm8YNrM6748I9VgawAHmjBHJFXrg21f9dw75kS oh5Vssxy7gPedXo5b yqp25XGikHF QKDeYzgltLXH4Es8 amGEKARlS 7mpgvA 04f4MOUe5k5WPRgw

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.

7dwUjmSSymRLZLFqVjwnPWB

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)

KwwpWblBoJkB n8qrn7fEnvvuwZKx29GqP0RbJNwo2tzV37ERzOOfzqRx2heUuSWwWo eTYscOlB2 r45qYVbUC13v8sF vLwuA pQpkbGYpuTTRyyyoLDpJDAbcUDgwho1LnzAZ

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)

QZp3vbqs9yvbPh9JsuESTmY50xPWqPfPJEMsSCch0RtJE4mo8xr uGDpW5 w3R3UzBbq 0hDhfkXefy5gVp9CY6znp9rZOW1ZmLj5frLcvQa8uw Iw55tbssZr4dAVb5EntewmGl

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)

T5E6hnZ8jYK8wmpCNcJZU2g9nrZrlmUAppc0xpZTJHVbcoyCZS YgeiBAlmeRdT6 zcMgtHZPBKjb9Gqs knJtZOjcQPB9Sv8n7Eox0F03ZKAh9NQ FlaDudD6EDOWH4Jk3hThQC

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)

pZXc7gOZUEd8DO8c0xDUjzhHk2KvVDed9IHWJquhRR XkqWRCab8jwk06 xtRihttn04WS6BYaFZQDmmZvewxzT2qBNquNaOyiAWWt

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)

mTink5Yak75Ety8PCOhtub pC58slD 4Jvgy1ttCSd25FocoCwyyf1brK5dvraaulL yqK5Kdw FJ3HJ4c029mh3mvQVoVK3cTGV25XbJkhmj7iPn eZVZzg HEYMQyQyFclHrd5

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.

taa5NZBAT6wGv5X3CvZiz6BOo9escWWcB L fCyyxQvYrYpNUBU v2O P7oAW 8D7RnKTDdMfzotfh5v1DuPl xbuHM
FaE0jJhdOBOgHKQdElaNG ysxGUEkymVPWpc2YX1MBfgHy q b6w74VqVOwTMTA74wfgdZKH3YXKXNHK eqr2X77J wUkGC3aKu3VkZicF72h4iDNngFMFH0uNerayJidaYXK5F

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)

w3 bOfLoijzMw4Cn kz7APcQ5zfHqo

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.

k6UO38golWPr19 TnheSO 2sJ4TOo4o9wtto4XZrc5TJMkwQ5BvGkIlrKNqWRUtnhADriI70SOwkXwjzLV3J5kRB8sbemMH6XYnQwBNfE jZkPGFqFUkQeVJleWKFNztLveQD8QV

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)

pFVEjgqZFBZD Qh7fggXwMxVNKQq5uHVKHVVGHdF8wudAPkoDOGgBtaNKidhFggz2puzWe8NIpsKrwdqmPrk

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)

lqNnpVrR4nvywP1K62smXpKon8wZtQEHYFu14hdCKX6IexSji9R9QKoPsyTKuE23CUchlcGnEtVETDA FjhsUbTaRcnOQXAsQfO92mp4faZcN N5tJiTWcEAlRppt le0Ktftdq7

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. 

efxZXWEWXJk1EEsbJY9YUSbO3sVpxTAg vM18Mm2Y4zCsUIN0gNUJOp6ScqKluyuqurz3zkpM

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)

utRWh9BRKPHsnFnfDWXJkw7WT28K3fsJq1St 6Yt1OlUCFW4gWQWbCfyGl8JqEfxcSGmS oDd3gD4dEwW141Gg7VUlDAG1AUGS1FGZfPYhkvsI8RwWdJ1nzDwWYoupV 0ZEO7fpS

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)

AmGsam5P8 kVJegEw paokLc6FNdJCK72LWoICpgWWhqL5fay8wbWieqttQp4ZgBUMCaD TXISCco3zQz9XIe8vFHfsNz3

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

A9PGF1 Uy2C4PeNqmWFAnjWahXjuKQzxyqCKzgzkoPA KR2TpPLEEkJ ps0bIG1HTnZ8YEkLx c8j LHaro6JsAPqTiT9fzIG0utlsG8TaJYzeYpjVj6dMJI5w3D3ZuPpeiC5aIi
SMTzHQk1vV4d3kCmdAtrjK6SyOqE0WDhqNiHEv5JzXoSNLv49s1C9augLHUvmnsVK4X3p7b0UysAi22OtiMNcgF2QOuVrByoIbaySc2bLyJyVoSvQFsk2Vee6Lm82OQYEXVE GYV

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.

HBnAB4EhUs1SaXhKgFa1qPTs79wP1JCek2SlKiArU6V KySg1uDp9hT9VIXQxH 6T4Y D1xF33LfYS8xtb z9W1h8

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

1alX QLl0BnLE04lsHcUGbz36tYC5IX5TaxbV3VlegzTWEkkCeaHrygE398Fi4KW0SdL3BpmbwgBwFCw1EjZ1qYZIEiMuCyn3tCZ iuZuiVEiV3yqKYgf5aZ8L43ny H yMCuF

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

W1Va2to tfudsvhqafQ02EXTgbl8IAv ATXt7dJQuykKjbqaLcXBpZgqROdItm XI6OtEAbgrAoKCXhgZxXdEq7hMEaX ctXtEY6RQJHNBAf OiCYz IOqm2h IBB5riH1fNcmFs

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.

make column clickable elementor on elementor landing page

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)

nNAtaDkmvIUNUnw2EFFCJl2H1U9Bl3XeyjJixb wraU81sMbbG2Ch6WsjS crlyPqSbKDmX4iBq5R5k7Bz6gtuw

To Read: WordFence Security Plugin Tutorial: Secure, Block and Stop Malicious Attacks to WordPress websites for FREE

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

RCyT4WwzYHN2CDODB3 LilR9TnMJQsFCiOSLwF1zHzBJ8VE Q67ho0ndPgJh csiaV dikIbDZWYvMqH5duivXlE0BcilSmaZb6PBvhUqZPwOK1ZDdVUrY1MOt0IMphJfEV5DHv4

Now go to the upper inner section, right-click and duplicate it (23:48), then drag the duplicated section downwards.

getji3Jby1xjYM7XR8QN3gwYfqPC FcXa HCkZfFbvrerwHTF8Q5ER1Yty lMY6DukWzBHhEVTp9Jr2 vvSKlpNmjnj0XsiQizT8ZyG1MML0sj2xAyU9
h8Ro3Kk sRKHpe9j4YgogWCO51X6jBDQUSW5ELQBSARoF1Ren1QjYkYLrBXmHHLs1rJapXlJtFZulDMGhJgdf GSpaelIAezt

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)

2pCOebpfRleJK8v4TTgTt3s6ouScbHSpCT2qiC3NzPhWQQjXp8sGt 1UEnIYLwl Sht2Kd6Q7lN8kTAbs7kXyUTHyqnY23prPdDbri4oJD75VWqrSQY0pZJ3C2uwKCi3bAYYbkg2

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

8xG4 huCWzAf5rOdu6rLSU2L9sGYWPHzfPMbjIYOf0Fgw4660

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.

IZds7A hl4VT7A 0vRO6x4u8G qNMZtRpcdJCm9heqORitnTPsE0i8W zZ1Pfb9f2c neD7S Nnbf2Y4acXagQpmjkyXG555tPM 7MLRTN0QlRYdfyrFPtKZNmm duLLdPtM56Fa

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)

KjWmAcd0N eG3Afkf 5UiJwkHOyixctTz5acUqkh8rQUStukQckPTROfS8zp8BYC5XB0P8wWMqchyfh20UcaIBS 1NRgjJvYwZRqix1gjXnBntY14UjVpnCzBik4ZI6YycKL eEu

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)

XvsH5CO10u3hdTbKouGKmkCLgoFLeX1dKen3zAVj8oQjrYA0wbf Jd5cqPQVvod bMl221QkgejzOKQbQ04BaSPnUem16wxvhphke0iNm2p8 z1xebhz6GUwHT Pe4D5Q1NhNSF

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

klyzW0k8MUGT8MF8IsVLuPojzW2mN0q8wERX9fRf3 OZU45CRrcmi2G7t 3AM0ggya0rcXVKo6qMWVSG95y14RPMxdp9o8jnolfhfHSK3bk90J0H9WPtcwm4CaNKm5rWB54VUq f

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)

1whVD2zJS Bx11AzXurDoL2k nBM phQ2wc

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.

k06oig98kgLM45bUY4IOfHtVuHhSkjjphv61W1Z9GT0iMj3b5fyKSZ08 KblafUjEDrwie9R1wAIb FmEA7D3bSm0zI7OGpeGmNR2RwuyOme tOyci K5pzYmsOJHQ4wByF6JHIQ

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)

iNPk5xhpOHnPDGg5NB4dAqA3 U3Ya3U2IDX7w2o3uhSkq6kh6tWVvELPNg gGo tIGeFoquPhOH3TyJ7QIm5g0xkoyio0mlIMKqFfc QQZJYA5m5ZT2njJa7Nt0m vRY1lZGW67j

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)

J3bj3zHqANUcInVLE8UOQSDdH6KDzQeWQBcjl4MgOa5K8W57UJxWNTGdMr LCcVmWc9E6q5HzI2aZm229PjzwjobghYhBH0Vpqqn0HefTmSk1Azi7MQCeFF 2BC7EFGVrO6hEfAe

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) 

78OTUr0WB0gXvZ2ynmaLc2qCz0c5NpujKx K8JZWYgGdCsXb1

Create a menu In WordPress:

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.

J2qjUMN5BtmVi2QiyaJuJWpvQr6lxO55dzPGWgrOCUc6z2HFIHHp p 3A

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

ebycAZfYd3wXJnUJAzHtuLcYtcwg5KLxkKYHeaq58oupM3uUO6IBNIz9

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)

c4FPggMw10RPLi4 0352wQXoNNa5i9vtJfv5vN yLVAposZ5zZXPwjtMqVlcSC1c6ZEFDxMulFx1amysiM1tgbs5PmkU4SkLsZ Fm4gfzwtgXe 3j7YkN7naSyJZ64cYhsRMV PT

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.

link WordPress menu items to elementor sections

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

LJ0S5xa XUnVpWU9l9N895uZKXUYqKPgqQELPF9EdLt6zqa5fmcB87uga0Gf4TZLRxkjjeKqwZ3nqJwui JBwRo85dGHAH 7KwN 7R18FkF1q02PjQTiLp Q115ip8Ubg5dWffJn
Z3oJ03Bz1MiALU0MDsxBCPh5A5D4t7B2sZO3WM0uR1EvYacFjHjI f1X9iDl4yD5xvZpytOHo8uIt l6fHwo1gKcx2xdTXXtPulTDKI71 r8g42fUGB wNt40w37p6RjV dMhpZX

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)

DtYQAEKFrlyNWDkQjA69MM5Hk3fo8JvTutqC4 EDrtvzKxZv5WaBIHOJKMmLzZINIke1A1 BIbSDHvhgszADbdNgzDFEVGCDiDmmMD3Cvqn4lsMaj1Wem6DfbkdP3L3DD2hmNRfw

Also Read: How to reCreate Websites with Elementor based AI Builder – 10Web

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.

Ww75zjA6Ia34KiTpXQ8DYrDWHg7Y VOxyj72no8rMu7avTNSg7M hpt8GMk9lLg KiX4mMu5cHDrM6p9wvlfKKe8PlPwDDW8rfYsRSAp9Jz HFWzsN2fWBBdyCo3UAFV9nneXTce

To give this landing page a unique URL, go back to your dashboard, under Settings go to the Permalinks option (44:28). 

cljbAQAkVUPE7Sq WiVNDzcu4DrvrIbe004E8hd xSN1MnM3sXG5dXYEdSBnlXYGILxJ3OUL7CXqZmiWjyrP6AVVcUhQobEkFd8A LlAL0ixHWx

Under Permalinks, check the Post Name option to be the permalink. Save the changes (44:38)

T88NYK3lApPkL6l0o9r sXE3mcD3fPqHHsByVoDKh v bdOnf2 6JQNi2ZcxH

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.

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)
Picture of Hamza
Hamza
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 *