Blog

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.