Build a Landing Page with Elementor: Step-by-Step

https://www.youtube.com/watch?v=XjS-vPXblpk&t=36s

Hi everyone welcome to our guide. This is SAR from element or in this guide I’m, going to show you how to build and design a landing page in WordPress using Elementor. Let’s start with a quick overview of the landing page.

We’ll, be building today. The first area takes most of our screen space. It’s, made out of a headline some text and a call-to-action button that will lead the user to our form. Just below the section.

We see a navigation menu that helps the site visitor to quickly navigate to any part of our landing page. Next, we have in About section that has some text just below it see the features area with a big image on the left.

I’ve, also designed the gallery with some images text socials and the video background. I’ll talk about it later in the video in the bottom of the page. We have a form for the site visitor to fill out and that’s.

It let’s start. This is the wordpress dashboard. Let’s, go to pages and click on add new page. We’ll. Give the page a name and click on edit with Elementor. This is how the default page looks like so.

First thing we’ll, do is go to settings page layout and choose element or canvas. This gives us a clean page without the header footer or the sidebar, that’s, a good option to go with when building a landing page.

Just a few things before we start let’s, change the default, fonts and colors of a website. We’ll click, this hamburger menu. Here we have a color palette default fonts and color picker settings. We’ll set the color like so primary is white secondary and text black fons, I’ve, set up my primary and secondary headline fonts to this Adobe font, but you can set your own font as you wish, with the color picker.

Will set up our colors, so we can access them quickly, while building our page. The first area we’ll add will be a section with one column we’ll, set its height with mean height of 90 VH, which means in 90 % of the screen height.

We’ll head over to the style tab. Let’s set the background color to blue background overlay gives us the option to set another layer. On top this time, we’ll, set an image overlay that’s at the image to the middle position; Center center, repeat no-repeat, so that the image will not repeat itself size contain and opacity.

Let’s. Move the slider to 1 blend modes is a new option in Elementor 2.1. What it does is mix the overlay with a background color. So let’s, choose multiply or darken and check out how this affects the image.

 

HEADLINE AND TEXT COLOUR:

Now let’s, add our headline and change the text alignment Center. We’ll head over to style typography and let’s, make our text stand out a bit. We’ll increase the size to 120 pixels and let’s. Add some text shadow, a really light shadow set the vertical to minus 10.

So the shadow will point towards the top and let’s. Add some blur cool. We’ll right-click, our headline duplicate and we have another title: let’s change the text. Next style typography will increase the text size a bunch to two hundred, maybe even two hundred and thirty pixels letter spacing let’s.

Try minus five now even minus eight nice, we’ll head back to the top headline advanced and let’s. Add a minus margin just to the bottom. Eighty pixels now add a text, editor widget style text, color white typography will increase the size to 20 pixels and let’s change the way to 500, now Advanced tab and this time with percentage we’ll.

Add margin 25 right three to the bottom and 25 to the left, one more thing head back to the style, tab and align the text to the center. Now we’ll, add a button to our page. Let’s change the text! Alignment center size medium and we’ll, add an icon icon position after and we’ll, add some space between the icon and the text.

BACKGROURD COLOUR AND IMAGES:

Let’s head to the style tab text color same as the background and background color white typography will make the text bigger 25. That’s too much 20 nice border radius set 250 to make the button round and box shadow same values as the titles soft shadow, vertical -10 and blur 50.

And now we’re done with the first area. The next area will add to our landing page will be the navigation area, let’s, have a section with one column: change its color under the style, tab background type and we can duplicate the column, right-click, duplicate or right click, add new column.

We get a section with three columns. The first column will add an image we’ll, make the image smaller in style change it to pixels, set it to 120 pixels, like in content, tab align to left. In the second column, we’ll, add a nav menu widget, because we don’t have a menu.

Yet we’ll need to edit, so click on go to menu screen and let’s, create our menu. So we’re back in the WordPress dashboard to create our menu. Let’s, give it a name and click create menu, because we want the menu to be internal within the page itself and not to direct to other pages of website.

TEXT ,HEADLINE,MENU:

We’ll, add a custom link, let’s, add a hash tag and now write about link text also about and click Add to menu. Let’s. Add another one features, link text, features and add to menu. Now, last one gallery and in the link text gallery and add to menu don’t forget to save your menu.

Now back in Elementor click on update and then refresh the page. We can see our menu now let’s edit. The menu style change, the text color to white typography, let’s, change the weight back to content, will disable animation and now let’s, make the first column smaller and back to the section to Center everything to the middle sub content Position middle now, let’s.

Add a contact button right, click, the top button and paste here. Let’s; change the text to contact alignment right and under style. We’ll change it a bit text, color white background color. Let’s. Lower the opacity border, one pixel, you can add some animations, let’s change the border color, so we’ll, get a subtle effect now to the about area.

We let a new section with one column: content with 500 pixels and min height 500 pixel. Let’s, add a headline widget right about and let’s go to the top headline. Right; click copy and right click, paste style.

So we ‘ Ve got the same value as the top headline head over to the alignment change it to left style, typography change to 90 pixels change. Also, this shadow at the 10 in horizontal and vertical also add 10 head over to advanced margin.

Button 30 pixels, let’s, add a text widget. We can add some more text here under the style. Tab will enlarge the text to 16 pixels and line height 1.5 or when let’s, go for 1.6 change. The text color to gray under the Advanced tab in percentage, let’s – add 10 % to the left margin.

Maybe even 12 cool now add an icon. On top of the headline change the color to yellow content view frame and let’s, search for an icon, we, like under style, will make the icon a bit smaller and under the Advanced tab.

Let’s, add margin-bottom of minus 50. Maybe minus 55 and left 170, so the icon will appear under the title under the About section. Let’s. Add a new section, drag in an image. Widget will choose this image.

Right click add new column and in the section settings will choose the option of 6633. Let’s, enlarge the image in style to 100 % and add a columns widget to the right column. We can erase one column right, click, delete and add an icon, widget change, the coloring style, content alignment left.

Add a headline: widget HTML tag, click, another style, change, the color to black. Add another text widget under the headline erase some of the text and copy the value from the text in the About section and paste style, cancel the margin from the left under advanced.

We can make the headline a little smaller, maybe 15 pixels, 13 pixels and change the font weight to 700 change. The icon style choose a different icon view, stacked style, size change to 20 and the advanced ID forty pixels to the bottom margin and 20 to the left.

So now we have a section that contains an icon, a title and text. We can duplicate it three times and let me give you a small tip here: if we have a section or any other element, we want to duplicate first, make it mobile ready and only then duplicate it.

I want to get into mobile editing in this video, as I want to keep it around 30 minutes so back to our editing, right click, the section duplicate and again and let’s change the icons. The next area we’ll, add, is the gallery, add new section one column and that’s.

How the headline change the text right gallery and again let’s copy the start from the first title and paste the style to our new title alignment right and under style, typography change it to 180 pixels under the title.

COLUMN AND WIDGETS:

Let’s. Add a columns, widget and add another column in the section settings change to no gap to avoid padding between the columns and mean height 350 pixels content position middle to the left column.

Let’s, add a spacer widget and let’s. Give it a background, color, white and add an image position. Center right. Size, contain repeat, no repeat to the second column, will give a color background. Another space, a widget as well to the right column, will add a call to action.

Widget change the skin to cover and choose an image. Other content here will erase the description and the button under the style. Tab set the mean high to 350 pixels and hover effect overlay color same color as the middle column, with a lower opacity in hover.

We’ll, give it the same color back to our headline advanced, add a minus margin of 70 and margin right: minus 150 pixels. We’ve added the effect where the title is off-screen add another columns, widget section and this time under style.

We’ll, set a background type of video search YouTube for a video in the new Elementor 2.1. You can set a start and end time for the video which is great for creating a background. Loop set a mean height of 350 pixel.

Add a new column to the right column will give a background, color and add a block wot widget [, Music ] back to edit section content position middle edit column, padding 40 pixels on every side under the style, tab change the text color to white text.

Other white, as well under the content, tab change the skin to quotation erase some of the text we don’t need that much let’s change the Twitter button, till icon only and back in style, lower the opacity under style, author, Lower the opacity to create the third area, let’s, duplicate the top area and drag it to the bottom change.

The columns order check this to the left and this to the right. Nice change the middle column color to yellow the right column, also changed to yellow and pick a different image in the middle column. Let’s, add a social icons widget and we can erase the spacer here.

STYLE AND CUSTOM COLOURS:

Let’s, play with the style, color custom secondary color black and make the icons a bit smaller in the call to action. Widget change the image and in the hover effect, would change to the yellow, color and also under hover, yellow and here’s.

What we have let’s, add CSS filter and let’s. Add some more blur only on hover now, to our contacts section, add a section with one column: content with 500 pixel and min Heights 800 pixel contact position middle head over to the style, tab back on tap change to this color and let’s.

ADD BACKGROUNDOVERLAY:

Add a background overlay image: let’s. Try this one position center center. Repeat, no repeat: size default, an opacity, let’s, lower it like so blend mount multiplier and the headline widget change the text and copy/paste from our top headline again paste style now, duplicate and change.

The text to I’m in. Let’s, make this a little bigger, 120 pixel, and now let’s, make them closer to each other. On the top title advanced margin of 45 and the second title advanced, we’ll play with the margin from the bottom 50 pixels and from the left, 20 20 pixels.

ADD ICON AND BUTTON:

We can also add an icon, let’s. Take the icon from about copy and let’s paste it here play with the settings alone and the -35 to the left cool now add a form widget switch off the label. Add item tell enlarge to medium and the bottom align to right.

Let’s, change the text and let’s. Add an icon. After that I can position after and let’s change the spacing here and make the button size medium. Now, in style let’s; increase the space between the fields, text, color, change to white background; color, lower the opacity add a border only to the bottom and border-radius zero pixels and let’s style.

The button change the color to yellow text same as the background, color border-radius make it round and let’s shift the form a bit under the Advanced tab, add 12 % to the left, and now let’s. Talk about the menu we will add anchors, so the user can navigate to any area on the page.

MAKE STICKY MENU:

First, let’s, make the menu section sticky, edit section under advanced scrolling effect, sticky top we can set on which devices will have it sticky and also the spacing from the top. Now let’s. Add anchors drag an anchor widget here.

Move it on top of the title, call it about copy and paste over the image and then drag it on top of the image change, the text to features paste again, drag it. On top of the title, let’s, change the text to gallery and add one to the forum and change the name to contact.

Let’s. Add a link to the button under link. Add the hash sign contact, let’s check if it works, click the button and look. It goes straight to the forum nice. One more element, we can add, let’s, go to the featured section setting under style, shape.

Divider button choose tilt change the color to a light gray, something like that. Let’s, flip the direction and bring to front so it covers the image in the next section: style, shape, divider and top.

This time add tilt with the same gray, color from before flip it and play with the height. Let’s. Add some more height to this section. We’ll, add a shape divider from the bottom as well tilt and give it the same color as the contact section that pink color and a little fix.

We have to do, choose the column and give it a white background. Color. This way we won’t, see the shape from the bottom, like so now a little trick regarding the navigation. As you can see, the navigation area is visible throughout the site, but what if I want to hide it a little? This is actually pretty simple: we’ll, choose the navigation section advanced and under the z-index, give it a one now under the gallery, section settings style, give it a white background and other the Advanced tab.

Z-Index set it to two. This means it should cover the menu section. Now let’s, see if it works. We’ll scroll down and check it out. The navigation is gone. That’s. It we’re done. Let’s view what we’ve created.

This Post Has 146 Comments

  1. Valuable info. Fortunate me I discovered your web site accidentally, and I’m stunned why this coincidence did not took place earlier!
    I bookmarked it.

  2. webpage

    If you are going for most excellent contents like myself, only
    pay a visit this web site daily because it gives
    quality contents, thanks
    вызывная панель домофона webpage электромагнитные замки

  3. Lbgtiest

    average age of viagra users viagra spam online cheapest viagra with mastercard [url=http://genqpviag.com/]how to get online viagra paypal payments[/url] ’

  4. cheap flights

    Howdy! I’m at work browsing your blog from my new iphone 3gs!
    Just wanted to say I love reading your blog and look forward to all your posts!
    Carry on the great work!

  5. cheap flights

    This is a good tip particularly to those fresh to the blogosphere.
    Short but very accurate info… Appreciate your sharing this one.
    A must read article!

  6. cheap flights

    I pay a quick visit daily a few web pages and information sites to read posts, but this blog offers feature based content.

  7. Jdbxtiest

    viagra with fast shipping viagra made in india buy viagra online australia fast delivery [url=http://llviabest.com/]how to talk to a doctor about viagra[/url] ’

  8. tinyurl.com

    whoah this weblog is excellent i love studying your posts.
    Stay up the good work! You understand, many individuals are hunting round for this information, you could aid them greatly.

  9. cheap flights

    When I initially commented I clicked the “Notify me when new comments are added” checkbox
    and now each time a comment is added I get
    three e-mails with the same comment. Is there any way you can remove me from
    that service? Cheers!

  10. tinyurl.com

    Terrific work! This is the type of info that are supposed to be shared around the internet.
    Shame on Google for now not positioning this publish upper!
    Come on over and talk over with my web site . Thank you =)

  11. tinyurl.com

    At this time it appears like WordPress is the
    best blogging platform out there right now.
    (from what I’ve read) Is that what you’re using on your blog?

  12. I have read so many articles concerning the blogger lovers
    but this piece of writing is really a fastidious article, keep it up.

  13. ivermectin ticks

    ivermectin cream 1 [url=https://ivermectin6mg.com]ivermectin coronavirus [/url] how much ivermectin to give a goat what does ivermectin do to birds

  14. albuterol and budesonide [url=https://topsalbutamol.com]buy ventolin australia [/url] ventolin side effects in adults what does albuterol do

  15. j.mp

    Hi there! Do you know if they make any plugins to protect against
    hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any
    recommendations? games ps4 185413490784 games ps4

  16. amoxicillin pot clavul [url=http://500amoxicillin.com/]amoxicillin 10 mg [/url] amoxicillin clavulanate potassium 875 mg what does an amoxicillin rash look like

  17. http://j.mp

    Hurrah! Finally I got a website from where I can really obtain helpful data concerning my study and knowledge.

    ps4 games 185413490784 ps4 games

  18. Ricardooptig

    can i buy diflucan over the counter in australia diflucan brand name
    erectile dysfunction pills

  19. lasix ototoxicity [url=https://furosemide100mg.com]furosemide 20mg uk [/url] nuclear medicine renal scan with lasix protocol how much lasix for bleeders

  20. azithromycin eye ointment [url=https://hqazithromycin.com]generic azithromycin cost [/url] can you get zithromax over the counter azithromycin stomach pain what to do

  21. ps4 games

    Fantastic site you have here but I was wanting to know if you knew of any community forums that cover the same topics discussed in this article?

    I’d really like to be a part of community where I can get comments from other knowledgeable people that share the same interest.
    If you have any recommendations, please let me know. Appreciate it!

  22. tinyurl.com

    Wow, this piece of writing is fastidious, my younger sister is analyzing these kinds of things, so I am going to let know her.

  23. doxycycline dog [url=http://100doxycycline.com/]doxycycline 100mg capsules buy [/url] can you take advil with doxycycline how to stop nausea from doxycycline

  24. web hosting

    After I originally left a comment I appear to have clicked the -Notify me when new comments are added- checkbox and
    from now on each time a comment is added I get four emails with the exact same comment.

    Is there a way you can remove me from that service?
    Thank you!

  25. enteric coated prednisolone [url=http://10prednisolone.com/]prednisolone tablets 25mg australia [/url] prednisolone transdermal gel for cats how long to wait after using prednisolone to use restasis

  26. clomid femara [url=http://clomiphene100.com/]clomid where to buy [/url] how many clomid cycles to get pregnant how long does it take for clomid to work in males

  27. tinyurl.com

    Hi there, after reading this amazing paragraph i am too happy
    to share my experience here with friends.

  28. priligy shop

    sildenafil & dapoxetine [url=http://dapoxetine30.com/]avana 56 [/url] comprar priligy en internet how long does dapoxetine make you last?

  29. web hosting

    I was recommended this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my trouble.

    You are amazing! Thanks!

  30. When someone writes an piece of writing he/she maintains the thought of a user in his/her
    mind that how a user can understand it. Therefore that’s
    why this piece of writing is perfect. Thanks!

  31. diflucan face rash [url=http://fluconazole50.com/]diflucan online nz [/url] how does diflucan work in the body who sells diflucan over the counter

  32. Trizern

    [url=http://vslevitrav.com/]viagra cialis levitra combo packs[/url]

  33. synthroid 50 mcg [url=https://levothyroxine50.com/]synthroid 1mg [/url] side effects of synthroid 75 mcg how to take phentermine with synthroid

  34. Kbdndexy

    [url=https://papersonlinebox.com/]write my paper co[/url] college paper help help paper best custom paper writing service

  35. Brfgdexy

    [url=https://ljcialishe.com/]effects of cialis[/url] [url=https://cialisvja.com/]cialis price per pill[/url] [url=https://viagraonlinejc.com/]how long does viagra stay in your system[/url] [url=https://viagratx.com/]viagra pictures[/url] [url=https://buycialisxz.com/]cialis high blood pressure[/url]

  36. GrvBrora

    [url=https://kloviagrli.com/]viagra daily[/url] [url=https://vigedon.com/]how long does it take for viagra to kick in[/url] [url=https://llecialisjaw.com/]is there a generic cialis available?[/url] [url=https://jwcialislrt.com/]cialis 30 day free trial[/url] [url=https://jecialisbn.com/]cialis pricing[/url]

  37. propecia news [url=https://finasteridehq.com/]finasteride 5mg no prescription [/url] what happens if i stop taking propecia doctors who prescribe suboxone propecia milwaukee

  38. Fbshtiest

    [url=https://thesisacloud.com/]thesis statement for research paper[/url] thesis support mba thesis choosing a thesis topic

  39. neurontin

    ndma metformin [url=http://metforminhq.com/]metformin 5000 mg [/url] metformin and high blood pressure how much metformin should i take

  40. cheap glucophage

    snorting neurontin [url=https://gabapentin100.com/]neurontin medication [/url] what is the drug neurontin used for how much is gabapentin worth

  41. paxil withdrawal length [url=https://paroxetine10.com/]paroxetine in mexico [/url] should i take paxil for anxiety how much does paxil cost

  42. AlfredFeemi

    best erectile dysfunction pills: levitra pills levitra pills

  43. plaquenil blurry vision [url=https://ushydroxychloroquine.com/]can you buy plaquenil in mexico [/url] where can i get plaquenil what does plaquenil do for autoimmune disorders

  44. Fbshtiest

    [url=https://thesisacloud.com/]thesisacloud.com[/url] help writing thesis statement thesisacloud.com writing with a thesis

  45. 0mniartist

    I really love your blog.. Pleasant colors & theme. Did you develop this amazing
    site yourself? Please reply back as I’m looking to create
    my very own blog and would like to learn where you got this from or what the theme is called.

    Thank you! asmr 0mniartist

Leave a Reply