education landing page templates This is a topic that many people are looking for. khurak.net is a channel providing useful information about learning, life, digital marketing and online courses …. it will help you have an overview and solid multi-faceted knowledge . Today, khurak.net would like to introduce to you Build a Landing Page with Elementor: Step-by-Step . Following along are instructions in the video below:
“Everyone welcome to our guide. This is sar from element or in this guide. I i m going to show you how to build and design a landing page in 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 21.
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. 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 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. 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. 15. Or when let s go for 16.
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. 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 21.
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. 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 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. 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. 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 we d love to hear from you so please leave any question or comments. Here. And don t forget to subscribe to our youtube channel for more videos like this and more ” ..
.
Thank you for watching all the articles on the topic Build a Landing Page with Elementor: Step-by-Step . All shares of khurak.net are very good. We hope you are satisfied with the article. For any questions, please leave a comment below. Hopefully you guys support our website even more.
description:
“In this tutorial, we ll be building a stylish landing page with Elementor.nnMade 100% in Elementor, in this A to Z tutorial you ll learn:nn* Creating a pagen* Building a WordPress menun* Using sections and columnsn* Adding widgetsn* Build a complete landing page!nn Subscribe: https://goo.gl/rTEfkvnnGet Elementor: https://elementor.comnJoin Pro: https://elementor.com/pro/”,
tags:
landing page, web design, widgets, page builder, wordpress, elementor
