Now make sure the section is selected, and click on the Style button. Select Background Type, Classic.

Click on the color map, and paste in the color code.

Next, we can drop in our first element on the home page, which is the Site Title. Click in the middle of the left-side box, and drag-and-drop the Site Title element over the box.

Let’s not worry about the layout yet, but add the menu on the right side.

Click on the elements icon on the right after the Elementor logo to access the elements library, and type in Menu to find the nav menu element.

Go ahead and drop that on the box on the right.

Now, elementor will notify us that the site has no menus yet, so click on the Menus screen while holding down the control key on your keyboard to open it in a new window. Let’s open that tab on your browser, and type in main for our first menu.

At this point, we only have the default sample page on our site, so let’s create two pages by selecting them on the drop-down menu on the top, again while holding down control button, and only one post page.

Let’s open the first new page tab, and edit that with Elementor to give it a title.

Actually, the Elementor title will not affect the name on the menu, so let’s go back and simply change the title to Service. Or however you want to name your page.

Then, click on the Publish twice, to make the new page live.

Let’s jump on the next new page and give it another title. In my case, I will name it Work with me. Hit publish twice again, and let’s also create a page for our first blog post.

For demonstration, I will name it conveniently like First Blog Post, and hit publish twice again.

We can safely close these tabs, because we only needed to create and name them.

Now we are back to the Menu screen, and to see the changes, let’s reload the page.

As you can see, our new pages appeared under the Pages list, and you can simply select them and click Add to Menu.

Let’s open the Posts list, and here you should see the default Hello World post, and the first blog post we just created.

 There are also the options to create custom links and have categories on the menu, to add any menu element you want.

Here, we want to create a page for our blog posts, so let’s add a custom link, and type in slash blog slash, give it a title Blog, and click add to Menu. Now we have three elements on the menu, and we can click on the Save Menu button.

If you want, you can change the order of the menu items by simply dragging them around, and click save again, once you are happy.

Let’s go back to our home page where we added the menu on the header, and reload the page to see our changes. But before we hit reload, make sure you click the Publish button first to save the changes we’ve made.

Because we are now editing just the header, Elementor will ask us, on which pages we want to show this element. Just click Add condition, and by default, the header will be shown on every page of the website. Click Save and Close.

Now we can reload the page

and see that the menu appeared on the header.

As you might have noticed, we were working on the desktop layout, so let’s click on the Responsive Mode again and change the screen to mobile, to see how the menu looks like on a phone screen.

By default, mobile menu is shown as a hamburger menu. Don’t worry, this has nothing to do with food, the name just means the menu icon of three horizontal lines that resemble a hamburger.

Next we can start adjusting how our elements look like. Select the Site title, and go over to Style, where you have the options to change the Typography and text color. Under typography, let’s adjust the size, and as you see the small mobile icon after the word Size, that means, these changes only affect the mobile layout.

I usually keep the size unit in em, which is more responsive option than pixels, so choose that.

If you remember, we created two columns for the header, but on this smaller layout, they are automatically shown as two rows which doesn’t look too cool.

To change that, let’s select the first column by clicking on the top-left corner of the box, to open the Layout view.

Here we can adjust the column width, and if we drop them both to 50%, now we get the same layout again as on the desktop.

However, if you open the mobile menu now, it’s width is also only 50%, so let’s first align the menu icon on the right, and select Full Width from the layout to override the 50% setting for the menu icon.

Now it looks better!

And I hope it keeps working for your website, because as you will see, later on I ran onto some trouble.

Anyway, we can actually make the menu side smaller, because the icon does not take up that much space, so let’s drop the width to 30%, and increase the site title side to 70%.

Now the Site title fits on one row, which looks better, and we can go to the Style tab to increase the font size slightly.

It also a good idea to save your changes every so often.

As you can see, the theme assigned a blue color for the Site title by default, so let’s go to Site Settings and change the Global colors.

By changing these colors, now our website will assign these colors by default on any new elements we are creating on our website.

Let’s change the primary color to match the color from the mock-up, and you will instantly see, that the Site title color follows this rule.

While here, I’ll also change the accent color from the bright green to the text color in the mockup, and save the changes.

Let’s go back, and on the Global fonts screen I’m going to change the Primary font to the same typeface I was using to create the mockup.

To choose your font, it’s a good idea to go to Google Fonts and browse their collection to find what you like. All these fonts are available in Elementor.

Next, I’ll change the secondary font just like I did with the primary one, and finally, get the name of the text typeface from Photoshop, and match that in Elementor for default font for all text elements.

And while here, let’s do the same with the Accent.

Save the changes, and hit the X to exit the Site settings.

Now we can select the site title, and make sure it’s also using the same font, and increase the font size.

Looks good, and we are done editing the header for now.

Exit the editor by hitting the hamburger menu, and choosing exit to dashboard.

Let’s open the Pages screen and select the Home Page. In this case, it’s still named Elementor #7, so let’s change the title to Home Page, and Publish the site to save changes.

Next, click on Edit with Elementor, so we get to build our next element on our home page.

First of all, let’s change the view to mobile view from the responsive menu.

Now we can create the first section by selecting the plus sign, and adding two columns.

First, go to the elements library, and locate Image element. Go ahead and drop that on the first box, and click on the grey choose image to access your Media Library.

As you can see, the Media Library is still empty, but in the future, every image you add to your website, will be shown in this library.

Let’s click Select Files and browse the file system to find the hero picture. In this example I’m using pictures cropped from Instagram, and the first thing is to rename the images we are going to use. 

This is a good practice for you as a webmaster, and it’s also good for SEO to have filenames that actually describe the images. SEO means search engine optimization, which means making things easy for Google to digest.

Best practice is to write a name that you know which picture it is without seeing it.

Now, I’m going to select all these pictures to upload them to the Media Library.

And on this screen, we can give the images Alt text title. Alt text means the description of the image, if the image is not displayed for a reason or another. This naming is very important for you to find you pictures when you have dozens of them in your media library, and it’s very important for SEO, so do it for your own good, every time you add pictures.

Now finally, let’s add the image on the element. Cropping is best done in Photoshop, or Photopea.com if you don’t have the Adobe software, because then it’s easier to manage how the image behaves on your layout. 

In this case I’m cropping from the top more to make it fit better on the home page.

Now this image fits better, but as you can see, it has some padding on the borders, so let’s first add zeroes to the margin and padding of the image, and then zeroes to the margin and padding of the section.

To clarify this, Elementor works in three layers; The section, column and element, and you can adjust the settings for each of them.

Next, let’s select the Column and change the layout width to 70, and zoom in to get a better view.

We can add the Title and the subtitle next to the image, by first opening the elements library, and dropping in a Text Editor to the second column.

From the sample text we can see that the default color is light grey that is too light for my taste. Let’s go in Style tab and change the color by selecting the globe icon to choose from the global color palette.

Open the elements library again, and this time, drop the Heading element on top of the text editor element. You can add as many elements in one column as you want.

Let’s also change the default color for the Title from the style tab. We can also add some weight for the title to make it thicker.

Now, let’s select the Column by clicking on the grey button that appears on the left corner. Open the Style tab and select Classic for the Background type. Choose the primary color from the global color palette.

To move it up next to the hero image, let’s open the advanced tab for the column, and decrease the margin percentage, say, by 100. Make sure you unselect the link icon, or otherwise the margins for top, right, bottom and left have the same values.

This always takes some trying and testing before you find the best values, so keep adjusting the margins until you are happy with the result.

If we change the layout width, you can see how the text element behaves, even if we go to push the left margin by 30 %. Now, when we change the width back to 100, you can see that the text box is finally moving into the right place. 

Relative design consideration

One thing with responsive design and margins that are set by percentage, is that the sizes are relative to the size of the screen. This can be easily demonstrated by changing the pixel width of the screen by dragging it wider with the cursor.

If you are creating a similar layout with overlapping items, you can go to the Advanced tab of the column and change the Z-index to move the element up or down in relation to other elements.

Now the title is little bit distracting, so I’ll exit the editor to remove the title. There’s a better way to do this, and we’ll get to it later.

Let’s continue by changing the view back to mobile layout.

Another thing is that if you try to hide the text element under the header by changing the z-index, it doesn’t work, because they are part of different structures. Here you can see that the text element stays on top.

It’s better to place the text element in a way that it’s not overlapping the header.

Now we can change the title, and adjust the top margin to leave some gap on the top.

We can also make the box smaller by increasing the bottom margin.

At this stage is good to see different screen sizes how the element is placed.

Next, we can adjust the size of the text under the Style tab and Typography.

The text under the title should describe the purpose of the website as clearly and strongly as possible. 

In my example copy I am describing the purpose through her story.

In the last part there’s a promise what this service will provide.

Good copywriting is critically important on your website, so come back after this tutorial to fine-tune the text.

If you want to reduce the gap between the title and subtitle, you can decrease the top margin of the text.

And to reduce or increase the padding around the text, select the column and adjust the padding on the advanced page.

Lead text

It’s time to move on to the next element, so let’s click on the plus sign and drop another Text element inside the column. This part is our lead text. It is the second most important part of the text on the website, so make sure it talks clearly and directly to your target audience.

Let’s create another title by dropping a Heading element on top of the text, and write down something that is the result or benefit of your service.

At this point I’m also changing the text color from Site settings to the dark blue, because I don’t like grey fonts. I’m just going to copy and paste the accent color to the text color.

And while here I’m also changing the Secondary color to the red color, I used to build the mock-up.

By the way, you can change all the colors at once, instead of this random workflow in my example.

Let’s save the changes and go back to edit the page.

The second title looks too narrow and thin, so I’ll increase the weight from the Style tab.

Now, I have the lead text ready in Photoshop, and I will copy and paste it here.

If you see that the line-height does this, you can edit the text easily in the text editor by clicking open the Text tab.

Sometimes the text on the screen does not update correctly as you can see here, where the text is supposed clumped together. However, if you click on the text editor again, the layout is updated.

Now, if the default text size is too big, we can go to Site settings to adjust the typography of the body text.

This will set the default size, and affect all the body text elements on the website. We can save the settings and go back to adjust the individual text elements.

Small adjustments like this take time, but it’s worth it to make the layout look finished and professional.

If you want to add a small animation to the elements, you can go to the advanced tab, and under Motion effects, you can change the Entrance animation. I’ll be using Fade in animation here, and apply it to all the text elements.

Next, if we select the column and change the vertical and horizontal align from the layout, you can notice that nothing happens, even if we change the width of the element.

That’s why I prefer to use the margin and padding to align the elements from the Advanced tab.

Once you are happy with the layout of the text, let’s move on.

Bullet Points

The next part is the bullet points for the benefits, so I’ll start by clicking on the red circle and selecting two columns on one row. As this is the mobile view, they are automatically laid in two rows. To change this, I simply go to the layout settings of the first column, and set it to 30, and set the second column at 70.

Instead of numbers that I had in the mock-up, let’s use icons here by dragging and dropping the Icon element on the first column.

When you click on the icon on the left, you can open the icon library and start browsing for something that matches your first bullet point.

Click insert, and open the Style tab to change the color of the Icon.

Now let’s drop a Heading element and Text editor element in the second column. If your styling settings are not working, go to Site Settings, and open Typography. Here you can set your default fonts and adjust the size and weight. Once you are done, hit Update and Exit.

Next, we can write the description for the first bullet point in the Text Editor, and adjust the margins and padding under the Advanced tab.

One feature I love about Elementor is the ability to copy whole sections.

Right-click on the light blue ribbon on top of the section to open a drop-down menu and select Duplicate.

This way it’s really easy to build lists or any elements that follow the same layout. Doing it like this saves time, as you can simply change the content and keep duplicating the sections.

Now this section starts to look good, so let’s fine-tune the layout of the first text element and continue.

Next section is a Testimonial, and we can start by creating a section with one column, and after that another section with two columns.

Let’s select the first column, and set a background color from the Style tab. 

And then repeat the process for the next section.

On the top, we need a title, so let’s drop a Heading element there, and give it a proper content.

For now, I want to change the font to make the section stand out.

Let’s adjust the weight, size and padding to make it look nicer.

Then we can add the photo by dropping in the Image element on the second column.

Again, to change the default mobile layout, we can adjust the column layout width to have both columns on the same row. 

Now, I’ll add the caption for the image by using the Text editor element. If you have more columns that you need, you can simply click the x on the light blue ribbon to remove columns.

In this case, I’ll use a made-up Instagram handle for the testimonial.

Now, there’s another way to reduce the space between elements within the same column, if you don’t want to play with the margins all the time.

Click on the grey button on the corner of the section to open the layout settings, and on the Widget Space, set the number to zero.

Next, we can add the testimonial text on the right column, so let’s add a Text Editor element to it, and leave it to Lorem Ipsum for now.

Click on the image on the left to open the media library, and open the upload files tab. Browse your files to find a testimonial image.

If you don’t have one, ask for it. Having a testimonial on a business website is incredibly important, so make sure to have this section on yours.

And always remember to add the Alt text on all images, or Google will punish you with low ranking.

In my example, I’ll copy the text from my mock-up.

When you paste in text to Elementor, sometimes the formatting makes it look weird. Go again to the text tab on the text editor, and replace the text by pasting in the copied text again. This way elementor removes all the unneeded formatting and uses only the text. 

Now that was simple, wasn’t it! Let’s move on to create a bio.

Biography

Similar to the section above, let’s create a section with two columns, and adjust the width to get them on the same row.

Then, just like before, we can add the Image element on the left, Heading on the right, and under it one text editor element.

Next, select the whole section, and under the advanced tab, add some 5 to 10 percent on the top margin to give some whitespace between the two sections.

Now we can browse into the media library and select the image on the bio. If you didn’t upload it yet, find a good image of yourself to add to your biography, and use that.

When you add an image, you’ll always notice the default padding around it. To remove all padding and margins, set them to zero on the image, and then on the column.

Now we can write the title, and then adjust the padding to make it look smooth with the image.

Again, you’ll find the best result just by trying different percentages.

In my case, I’ll copy the text from my mock-up. For this part I used a simple description what the short bio should talk about. And actually, stories make you more interesting and relatable, so the bio can be a bit longer, as long as you keep it relevant for the target audience.

I’ll add a second text editor element under the first section, and adjust the top margin to bring it closer.

In this example I am using a Lorem Ipsum generator to add filler text in the paragraph, but try to write something about yourself on your website.

When writing things on your home page, have a line-break after every two sentences to improve the legibility. (Like here).

For the next element, we are creating the actual offer and call to action, which is, in this case, an online course for the target audience.

Call To Action

To build this section, I’ll first add an image about the course, and then drop in a text editor element. In this case the list is not formatted correctly, so I’ll just add line-breaks manually, and add bolding to the first few words of the paragraph to make it look more interesting.

Scrolling up, we can see that the sub-header is too close to the image, so let’s adjust the top margin to give it more space.

One thing I forgot to add in the last element is the actual action button, so let’s browse to the element library and drop a button on the next section.

Here we can align it to the middle, change the background color to white, change the text color to our default, and create a solid border around the button to make it look cooler.

The width changes how thick the border line is, and the radius changes the roundness of the corners.

Now, click on the Content to change the text on the button.

It’s good time to save and see where we currently are.

Scrolling up, I notice that the bullets and testimonial sections have only a little whitespace between them, so I’ll increase the top margin of the heading to give it more air.

As everything is looking pretty good for now, we can go on to create a footer for our website.

Footer

Click on the Hamburger menu and select Theme Builder. Select Footer, and Add New.

Close the library, and create a one column section. First, we can change the background color, and type in social in the elements library, to locate the social icons element. 

Drop this in the footer, and change the shape if you like the rounded logos more.

You can add more social media profiles, and change the order by dragging them around.

When you click on the Icon, you can browse the icon library, and select any social media you want to add.

And you probably noticed we are again in the desktop view, so let’s change that to mobile to get a better idea how it looks like on a phone screen.

On the style tab we can adjust the size of the logos.

Next, let’s add a text editor element, and then a Heading element for the brand.

Here it’s a good idea to repeat the name of the site, or the brand you’re building.

And if you want to add a copyright character on your footer, click on the Toolbar toggle in your text editor to get more functions, and then click on the special character icon.

Here you’ll find the copyright sign to add to your text. I’ll cut it from the text with Control + X on the keyboard, and paste it in the heading with Control + V.

After the sign I’ll write the brand name, with obvious typo, but let’s forget that for now, and adjust the size of the text.

For the text part, I’ll just add the current year, and Privacy policy and Cookies, and align the text to center.

To make the fit tighter let’s select the section, and set widget space to 8.

Then we can do final adjustment to the order of the social buttons, and publish the footer.

Elementor will ask on which pages will the footer will be shown, and we can add the default condition, on the Entire Site. Finally, click Save & Close.

Now you can also add the real links to your social media profiles by simply opening the tabs and pasting in your link.

WordPress generates automatically a template for Privacy Policy, so let’s jump over to the pages screen on the dashboard and by clicking the Quick Edit button, copy the slug, as we can use it as a link.

Now, let’s select the text Privacy Policy and Cookies and use the keyboard shortcut Control + K.

Elementor now shows us a prompt for a link, so let’s paste in the slug and add a slash before and after it.

WordPress can now use this short link to point it to the Privacy page.

Let’s save the settings, Exit to Dashboard, and see where we have arrived.

If we now open the website, something is wrong because we end up on the Archives page. 

Set the right Home Page

This is easy to fix, however, so let’s go back to the WordPress back-office and open the Settings, and on the Reading screen, let’s change the setting from Latest post to static page, and select the Elementor page we are building. It still has no proper title but we’ll fix that soon.

Now, when we open the website, our new page works as the home page.

We can now go back to edit the page, and change the view once again to mobile. But in my case, I encountered a problem, because my menu stopped working. I hope this didn’t happen to you, and later on this video I create a workaround to make it work.

Now, however, it’s time to give the homepage a proper title, so let’s go again to the Pages screen, and change the title by clicking on the Quick Edit button, writing the new title, and hitting publish.

When you open the homepage again, you can see the title appearing on top of our image, but there’s an easy way to hide this.

Move the cursor to the bottom left corner and click on the cog wheel to open page settings. Here you can find the option to Hide Title. Looks better, right?

Yes, I know we didn’t do anything yet for the desktop layout, we’ll get to that later, so let’s open the responsive menu and select the mobile view again.

Now we are going to add two more elements to the home page to finish building the layout.

First of them is a section for Consultation, that goes under the Biography section.

Consultation

We’ll start by creating a one-column section, and in the background crop a new image in Photoshop to work as the background.

To add an image to the background of a section, go to the style tab, select classic, and click on the grey image field to open the media library.

Browse your computer for the image to add it to the Media Library, and write the Alt Text.

Bad things will happen if you don’t.

Next, let’s add a Text Editor element on the section.

Here I’m just filling in the text with Latin, but the final text will be about the details of the consultation service.

Let’s also a button from the element library to the section, and now we have a small problem.

We have no control over how the image is displayed on the background. To fix this, let’s first delete it, and insert it again.

This time we should see more option under the image, like Repeat and Size. With these options we can set the image to always cover the size of the section without repeating.

Next, let’s adjust the padding of the section. If we adjust the margin, the whitespace increases, but if we increase the padding, now the background image will appear larger.

Yes, I know we cannot see the text yet, we’ll fix that in a second.

From the Position menu we can select custom to move the image how we want. And then, to make the text more visible, let’s open the Background overlay, select the classic brush icon, and pick a color. I’ll choose the yellow from the palette. Here, you can use the opacity slider to find a good balance.

Next, let’s drop in a Heading element to name this section. And now I realized I was editing the section in Desktop mode, so let’s jump back into mobile layout.

If you see a similar mess on your screen, you realize that I added the background image on the text element by mistake. We can fix this quickly by selecting the text element, going to the Advanced tab, and under the background title, remove the image by clicking again on the brush icon.

Now it’s also a good time to rename the subheading to something more meaningful.

For some reason I deleted the button we already created, so I’ll drop in a new one.

From the Style settings, I’ll change the Background Type to red from the palette, and change the text on the button from the Content tab, and save the changes.

Blog

The next element is a section for blog posts. So let’s create a new section under the consultation with one column.

Now, open the Elements Library and type in post.

In my example we’ll use the Portfolio element to display thumbnails of the blog posts.

As you can see, we have this new grey element with two sections. If you remember from earlier, we created a one blog post, and WordPress has one Hello World blog post by default, so these two are showing here.

Now we can save the changes, and head over to the Posts screen to create two example blog posts.

First we can delete the Hello World post by clicking Trash, and then open the First Blog Post, by clicking on the title.

Now select the Edit with Elementor, create one new section, and type in F in the Elements library.

Drop in the Featured Image element, save, and exit to Dashboard.

Under the Featured image tab on the right, click on the placeholder, and browse your computer to upload the images for your blog.

Write the alt texts for the images, and add one for the featured image.

Click update, and go back to Edit with Elementor.

Now when the page opens, your featured image is displayed. This also works as the thumbnail for the portfolio on the home page.

Next, we can create a title for the post, and a text element. For this tutorial I’m simply adding filler text to create an example.

One nice way to improve the readability is to add quotation lines in middle of paragraphs.

You can add more images and text elements just like we did before, but for this example, we are finished.

If you want to hide the title for the post, you can do it from the page settings.

Finally, let’s click update and create a second blog post, just like we did the first one. Give it a title, select a featured image. Publish, and Edit with Elementor.

Like we did before, we can copy sections, and here we can use it to duplicate the blog layout on the second blog example.

Select copy from the section menu, right-click on the new section, and select paste. Now, the image first appears to be the same as in the first blog post, but don’t worry about that.

Once we Update and reload the page, we’ll see the correct image.

To make things even easier, let’s also copy the text section and paste it on our second blog post. For this example, it’s enough we simply change the title to something else.

Ok, you might have noticed that the default link color is also red, which looks awful on the header menu. To change that, let’s access the Site Setting once again, choose Typography, and under the Link title, change the color to something else. That looks much better.

This also reminded me, that we need to change how WordPress names the URL for the posts by default. Let’s jump back into the dashboard, open Settings, and under Permalinks, change the Common Settings from Plain, to Post name. This makes Google happy.

Remember to save changes.

In this part I was getting frustrated of the mobile menu that wasn’t working, so I went to the menus page, created a new menu and left the blog out of it. Check the menu with your phone, and if yours is working, you don’t have to change anything. We’ll come back to it later.

Anyway, Let’s create a new page, where visitors can browse all the blog posts.

Name the new page Blog, click publish twice, and then Edit with Elementor.

In the Elements library, type in posts, and drop the Posts element in the section.

For better formatting, let’s hide the title from the Page Settings, and Insert a Heading element on top of the Posts. This is all we need to do here!

On the Menus screen, reload the page, and you should see Blog on the list, and you can add to your menu and rearrange the order. Save the Menu, and let’s reload the Blog page to see how the menu looks like.

Finally, let’s add enough whitespace for the post thumbnails by increasing the top margin for the section.

And as we are focusing first on the mobile layout, let’s change the view for mobile to see how it looks.

Ok, the blog looks good, but now I got tired of the mobile menu, because it was not working for me. The problem was that it was either not opening the drop-down menu or it was showing it twice.

If your menu has these issues, open your website with your phone to see the how it actually works. Sometimes the menu still works on the phone, even if it’s not working on the screen.

In my case I deleted the hamburger menu, duplicated the menu title, and replaced the element with a text editor, writing the names of the menu items.

This is not the optimal solution, but if you run into problems with your website, just figure out what works for now and come back to it later.

This works as a menu as well, because now I can simply make them links by pressing Control + K and typing in the short url for these pages.

Now the next part is just to play with the margins to make the header look good and balanced.

This was unneeded work in the end, because later when I added the normal menu again, it worked fine on mobile.

But I’ll keep this here to demonstrate that elementor mobile view does not look the same as the actual mobile page on your phone. Keep checking the real time results on your phone while you are building the mobile layout, and even better if you test on two different phones.

Ok, going back to the home page, I’m doing some minor tweaking on the layout, by changing the size of the screen and the size of the heading and text elements.

This tweaking takes maybe half of web designer’s time.

And next, I’ll do some more tweaking to fit the menu with the title on the header.

Next, the background image seems to be impossible to set in the mobile layout. While I am adjusting the X and Y position here manually, I find that setting the position to middle from the position menu works the best. Check the result on your phone to be sure.

With background images, it’s also very important to make the text as clear as possible, so I’ll increase the weight for the title.

To make the Blog section clearer, let’s add a Heading element on top of the portfolio, and name it Blog.

Now we have spent enough time on the mobile layout, so in the next part we’ll adjust the desktop layout and finally, give the finishing touches for the mobile.

Desktop layout

Ok, let’s turn off the responsive mode to get the default desktop mode.

Now, adjust the size of the Heading and the subheading.

Then we can add some padding for both elements.

Next, we can select the section and start fiddling with the margins to make the box smaller and move it left to overlap with the image.

To make the image bigger, you can simply grab the border with mouse and drag it right.

This takes a little time, but keep at it until you get a good result.

Moving on, let’s make the lead in text and title larger.

Without too much fine-tuning, I’ll go through the elements.

Next, let’s move the bullets points to the center. Here you can also simply move them left and right by dragging the borders.

Now, align the icons on the right.

Let’s jump forward and increase the text size for the testimonial, and then we can align the caption for the image by adding some left margin from the advanced tab.

Now I’ll move the bullets more on the left to make it look more balanced.

As you can see, the workflow is not very linear with design. The pieces just come together slowly when you move them around.

In the biography section we have a good example of a text that doesn’t seem to change when you change the font size.

If this happens, open the text editor, and open the text tab. If there is any formatting in the text, remove them, and the normal controls will work as they should.

Don’t be afraid to use big font sizes on the website. People don’t read much nowadays, so big short titles are good way to convey the general idea of the sections.

Perhaps we could use here a bigger button. The size can be directly changed from the Content tab.

One important thing about web design is to have a balanced use of white space and making sure that the elements are not clumped together too tightly, especially on the desktop.

That’s why we can add some top margin for the last section to give some air to the blog section.

Finally, let’s increase the font size on the last paragraph.

And for the button it’s look better to have it in the middle.

Remember that most of these changes will affect only the desktop mode, so our layout for the mobile should look more or less the same when we finalize the design.

Going back up to the header, I’ll increase the size of the Site Title, and adjust the margins to have them centered vertically.

To take an overview of our adjustments here, you can hide the sidebar to get a realistic view.

Here we can still some issues with alignment of the text, the margins and white space between sections, so let’s finish the desktop layout by fixing them.

And you’ve probably noticed, every time you want to edit the header or footer, you need to click on the yellow ribbon to change the mode.

Let’s start by changing the alignment of the brand name on the footer.

For a Heading element we can do that from the content tab.

Now it look better, so let’s scroll back to the top to get back to add some white space after the last section.

The editor can look deceiving, because it always shows the next empty section. Let’s add 3% bottom margin under the button and hide the sidebar to see the result.

Now it looks much better.

Scrolling back up, the lead text and the bullet points look very unbalanced on the desktop. Let’s fix that by aligning the lead text in the middle, and why not do the same with the heading.

In this version of the desktop layout, I don’t have the background image, so I can reduce the padding from top and bottom.

Now a final check, and next we need to see how it looks on the mobile!

Load the page on your phone, and more often than not, some things have changed size or location.

If you logged out, let’s log back in, and open Elementor.

Assuming that everything still looks the same on the desktop, let’s open the mobile layout and see how it looks here.

So even if you first make a layout for one screen size and then for another, it’s a good idea to check and come back to fix anything that has changed.

Here I will adjust the title size, and the size of the text to match the size of the image.

By default, in Elementor the mobile screen width is 360 pixels which is quite small. Many phones still have this resolution, but 414 pixels is soon going to be the standard, so you can use a little wider view when editing the mobile layout.

Next, I’m adjusting the bullet points, and after some thought, I realized that the yellow color I was using for the titles and icons was not visible enough. Therefore, I’ll use a deeper tone of the same color to make them pop out better.

For the testimonial, finally I prefer to use the same font for the heading, and bring down the font size of the testimonial text.

I’ll use the deeper shade also for the Biography title, and decrease the text size, and match the second paragraph.

Consultation looks good, and the Blog title also get a darker color.

Now the mobile layout looks better.

The portfolio section for the blog posts is ok, but I don’t like the blue color overlay when I move the cursor on top of the post. 

To make the overlay color more transparent, I will go to the Style tab and open the color map. Under the color you’ll see the opacity fader. By bringing that down to the middle, now the hover effect is not so strong and the featured image is still visible.

Now, to be very specific, in the beginning of 2022, 360 pixels is still the most common screen size, but for futureproofing, it’s safe to use 414 pixels to get the best look for the mobile site.

I’ll go ahead and type in 414 for the width value. We don’t need to change the height, because it has much less effect on the layout than the width. And even more so, because Elementor does not allow currently to increase the height over 776 pixels.

After all these changes, I will finally try to add the hamburger menu again.

The workaround is ok, but for a more polished look, let’s add the nav menu element again under the menu items. Make sure you have the right menu selected, and align the menu on the right for desktop and mobile layouts. Next, make sure the menu is shown at Full width.

I’ll change the width of the section to 20 percent, and the title section to 80.

Now we can delete the workaround menu by selecting it and hitting Delete on the keyboard.

Don’t mind if the mobile drop-down menu is not working on the editor.

You’ll find out the truth when you load the page on your mobile, so let’s do that now.

This is recorded on my Xiaomi phone, and as you can see, the menu is working fine, and we can open the blog.

Scrolling down the home page, there is one more issue: The consultation section shows only a part of the background image. As mentioned before, the best fix for this is to select the Center center position on the background settings and forget the custom positioning. 

It’s time for congratulations! 

Because you managed to follow the instructions, and now you have a working home page optimized for phone screen, a blog page, and two more pages ready to use and develop as you see fit.

Learning to use Elementor in one sitting is a great achievement and you are ready for the last part of this tutorial to share your website with the world!

Before doing that, make sure that the sections have actual texts and the menu is not leading people to empty pages. In this example, I built the sample website for my friend and she can finish it up by writing the final texts and building the other pages with the same tools and methods we learned here.

For more resources to build your website, check out other pages on scriiv.com.

Once you are ready with your texts, let’s move on to the last part, to finish this tutorial. See you soon!