In this tutorial I’m going to design the basic pages of the website with the Elementor plugin.
It all works the same as designing the header and footer with Elementor as I have showed you in the previous tutorial.
I will explain all the steps in detail again so that you can follow everything I do so you can do it yourself even if you have no experience at all. You can use the table of contents below to quickly jump to a specific part of this post.
Watch tutorial on YouTube
Create Homepage
To design the homepage I first go to Pages in the WordPress dashboard by clicking on it. Here you see the pages I have created in a previous tutorial about the WordPress pages and posts settings.
Hover over Home and click on Edit.
After the page had loaded you can click on the Edit with Elementor button.
Now you see a blank canvas with the header at the top and the footer at the bottom.
In this tutorial I want to show you how to design the homepage completely from scratch but you also have the option to import nice looking templates that I also quickly want to show you.
You can import a template by clicking on the folder icon.
On the Pages tab you will find all templates of complete pages. There are free templates and the ones with a Pro mark are only available for Elementor Pro users.
You see that there are a lot of templates available and there are also different templates for pages in the same style, so that you already have the complete basis for different pages.
If you are looking for separate sections you can also use the Blocks tab.
At Category you can also filter on specific building blocks.
I often use these for design inspiration. You see that there is a lot of choice and I’ll quickly show you a few categories to get a good impression.
At the Category Single Product you can add beautiful building blocks for product pages for a webshop.
You can also create a complete webshop if you have the Elementor Pro version.
That is also something I want to make a separate tutorial about later.
Other templates that I often use are the Single Post and Single Page.
So my advice would be to check out the templates that are availabe. You can also learn from templates by checking out how the widgets have been modified in the settings.
Section 1 – Homepage
For the header and footer I used templates that I customized afterwards, but now I want to show you how easy it is to make your own designs from scratch so I go back to the empty canvas again.
The first thing I do is click on the gear icon in the left corner at the bottom and here I set the Page Layout to Elementor Full Width.
Now click on the purple icon on the canvas with the + sign. This can be used to add an empty section and there are also a few options for the number of columns in the section. I select the 1 column option.
It works exactly the same as with the header and footer, so you can select a section, column or widget by clicking on it or by using the navigator.
The first thing i’m going to do is add a Heading widget.
To do this, click on the icon with the 9 dots and at the top you will already see the widget. Now drag it into the empty column.
The heading is now displayed with the default settings and we are now going to adjust that.
I also want to add a nice background image with a background overlay to the section.
Customize section and add background image
I’ll start with the background image, I want to add this at the section level so that’s why I select the section and go to the Style tab and click on the first icon Classic. Now you will see a box with a + sign, click on it to select an image.
Now you can add an image that you have already added to your WordPress Media Library or you can click on the Upload Files tab and then drag an image there.
I select an image and make sure that something relevant for SEO is entered in the fields, and by that I mean relevant keywords that your target group is searching for.
With keyword research you can get great insights on which keywords are the best to focus on. I explain everything about SEO and search engine optimization in another video, because for now I first want to start with the basics and that is making sure the website is completely ready.
After the fields have been filled in, click on Insert Media.
The image is not clearly visible because the Height of the section is not set correctly.
To do this go to the Layout tab of the section and select Minimum Height at the Height options.
Now you can set the Height with the slider or you can enter a value in the field.
I choose the Minimum Height option and set it to 550 PX.
Now go to the Style tab and set the Size to Cover, which is the option I always use for this.
And in the Positions option I choose Center Center, this places the image exactly in the middle.
The next thing I’m going to do is add a background overlay, you can see the option already in the Style tab. Expand the menu and select the left icon which is the Classic option. Pick a color you want there, and I’ll pick black.
I leave the Opacity at 0.5 but you can of course also adjust this if you want to do that.
Heading widget
Now I’m going to adjust the heading widget. The text color should be light because now it’s almost invisible. I click on the heading to select it and go to the Style tab and choose the color white.
Now that that’s done, I choose another font in the Typography option which is Playfair Display.
The text can also be displayed larger, so I set the Size to 70 PX.
Now I go to the options below and here I set the Weight to Bold.
Then I set the Letter Spacing to 2.3 so that it’s slightly wider and the same as the font in the logo.
Now I go back to the first tab Content and there I set the Alignment to Center.
I always set the H1 tag for the first heading at the top of the page. This is important for SEO as I also have mentioned in previous tutorials. Now I change the text to Luxury Watch Brands
It’s already starting to look like something!
Text editor widget
I also want to add a Text Widget below the heading. You can add a new widget to the column again by dragging it from the menu on the left.
First I adjust the color by going to the Style tab and at Text Color I choose a light gray color.
In the Alignment option above I also set it to Center.
Now go to the pencil icon at Typography to adjust the font and here I select the Rubik font.
I set the Size to 15 PX and the Weight to 600.
At the Transform option, I choose Uppercase so that the text is capitalized and after that I set the Line-Height to 1.2
In the option below Letter Spacing I set it to 8 so that the text becomes slightly wider.
Now I go back to the Content tab and adjust the text to Search.
Check out this tutorial to learn how to add a NoFollow attribute to a textlink in Elementor.
Search form widget
I also want to add a Search Form widget below the text. So I go to the overview with the widgets and here I search for Search Form and drag it onto the canvas below the text. This allows visitors to enter search terms so that information can be searched for on the site.
I will also customize this widget and on the Content tab I set the Skin option to Minimal and then I make the Size at the bottom of the menu smaller and set it to 35.
Then I go to the Advanced tab and at Margin I add 20 PX in all fields. Now I’m done with the customizations for this widget.
Responsive settings section 1
Let’s take a quick look at this section on tablet and mobile to see if we need to make any adjustments to make everything responsive.
I click on the icon with the two screens at the very bottom and then the gray bar with 3 icons appears.
As mentioned in the previous tutorial, it’s best to work from larger to smaller screens.
So I choose the middle option for the Tablet view.
The size of the heading is quite large so I want to make it smaller.
Just to be clear, all adjustments you do at the tablet level have no effect on the desktop settings. So you can customize the widgets for all devices separately.
I select the heading and go to the Style tab. Here I set the Size to 50 PX.
Now I select the text editor widget and go to the Advanced tab and there I set a Margin of 10 PX for all the fields so that there is a some more space between the heading and text editor.
I also have to do the same for desktop, so I switch back to the desktop view by clicking the icon to make sure the 10 PX is also added over there.
Now I go back to the Tablet view and the text is fine but I only want to make the Height of the section a bit smaller.
For that I select the section and on the first tab Layout and you can adjust the height at Minimum Height. I set this to 450 PX.
Also for tablets the section is now fully responsive!
Now I click on the Mobile icon at the top of the gray bar to switch to mobile view.
Here everything looks good, but I also want to adjust the height of the section. So I go over to the first tab Layout and there you have the option Minimum Height and I set it to 380 PX. Of course you can decide for yourself what you like.
And now we’re all done with the first section for the homepage. Even now I show and explain everything calmly, you see that it can go pretty quickly. After you are familiar with Elementor and you can find everything on auto-pilot, you can really quickly create beautiful designs much faster!
Section 2 – Homepage
Now I will add a new empty section again. You can do this again by clicking on the purple + sign at the bottom of the canvas.
Here I’m going to create an overview where the latest blog posts will be automatically displayed.
You only have to set this up once and every time you post a blog it’s automatically added to the latest post overview in this section.
I want this section to have 1 column again so I select this option.
Add solid color to background
The first thing I do is make the background of this section black. Select the section and adjust the color again in the Style tab over at the Background options. Click on the Classic icon and then select the color black.
On the Layout tab of the section I also adjust the Height to Min. Height and set it to 500 PX.
Heading widget
The next thing I want to do is add a Heading, for this I drag another heading widget into the empty column.
Now I go to the heading in the first section and I right click on it and select the Copy option.
Then I go back to the default heading and right click on it and then select Paste Style.
The text now has the same styling settings as the text in the first section.
I want to make the text size a bit smaller. To do this I select the widget and go to the Style tab and then to Typograpny. For desktop I set this to 50 PX and for tablet and mobile to 40 PX.
After that I adjust the text to Latest posts.
Text editor widget
Now I duplicate the text widget from the first section by using the right mouse button and then select the Duplicate option. I drag this below the heading in the second column and then I change the text to News & Reviews.
Posts widget
Now I’m going to add the next widget and that’s the Posts widget.
Go to the overview with the widgets and search for Posts and do not choose the option with the WordPress logo but the one below it.
Drag it below the text editor widget.
You can only use this widget with the Pro version of Elementor and this was also one of the reasons for me to quickly start using the premium version of Elementor when I first started out with making websites.
Before we start customizing the Post widget, I want to add some extra space at the top and bottom of the section. Select the Section and go to the Advanced tab. At Padding you need to click on the Link values together icon to disable it. Now enter 100 PX at the Top and Bottom.
Now that that’s done, let’s move on to the Posts widget by selecting it.
You can see that the posts I have created in the WordPress Pages and Posts settings tutorial are already displayed with the featured images.
In the menu you can select a layout at the Skin option, but I usually use classic.
You can indicate how many columns should be visible and how many posts should be shown in the overview.
I’m leaving this all as it is and now only 3 posts are showing because I haven’t created any more.
But suppose that after some time the website has, for example 20 posts, then only a maximum of 6 will be shown in this overview. You can also set it to any value you want to, but I think 6 is fine.
With the Image Size option below that, I adjust the option to Medium Large. This makes the images appear sharper.
The next thing I do is adjust the Image Ratio to 0.56 because this makes the image completely visible.
You can leave the following options as they are and with Meta Data you can indicate what should be placed below the title. I don’t use this for this example so I’m removing Comments and Date.
Now go down and expand the Query options. Here you can set which posts should be shown. For example, at Source you can also select Pages or make a manual selection.
I’m leaving this on Posts because I want all posts from all categories to be shown and the post with the most recent date at the top.
Now go to the Style tab and then to the Box options.
Here I set the Border Width to 2. At the bottom you see the option Border Color and I set the color white.
Now I go to the Padding options below and I set it to 20 for all the fields.
That’s already starting to look like it, but I still have to style the text.
To do this, go to the Content option below and expand the menu. We’ll start with the first option and that’s Title. Here I set it to the Rubik font with a Weight of 600. I adjust the Line-Height to 1.2 and set the Letter Spacing to 2.3
Now I go to the Spacing option below Typography and there I enter 20 in the field or you can use the slider.
Then I adjust the color to white and now the title is ready.
Now I move on to the Read More options at the bottom. I first adjust the color to gray and after that I change the font to Rubik and set the Size to 20 PX. Then I set the Weight to 600.
The next thing I want to do is add a button with a link to a page where all blog posts are displayed.
Go back to the overview with the widgets in the left menu and drag the Button widget below the Posts widget in the same column.
Now we need to style the button and I’m going to add some space at the top first. Make sure you have the button selected and then go over to the Advanced tab.
Click on the icon so that you can edit the fields individually and enter 60 at Top Margin.
Now go back to the Style tab and there I choose the Center option at the Alignment settings.
At link you can enter any link, for example this can be a link to a page or post on your site, another webiste or an affiliate link.
And if you want to change the text in the button, go to the text field at the top and enter something like View all posts.
Now go to the Style tab and at Typography adjust the font to Rubik and set the Size to 16 PX. After that I set the Weight to 600 and at Transform I select the option Uppercase. That already looks better.
Now in the left menu I go to the options for Text Color and here I choose the color black. Then I change the color of the button to white.
The next thing I’m going to do is add a hover effect so the button changes color when you hover over it. Click on the Hover tab and change the Text Color to white and the Button Color to the same color green as the button in the footer.
You can also add a cool hover effect to the button at the Hover Animation option. Here I choose the Grow option.
If you want, you can also set the size of the button at the Padding options at the bottom in the Style tab.
Click on the icon to unlink the values and enter 15 at the Top and Bottom Padding. Then I enter 45 at the Left and Right Padding.
That looks pretty stylish already if you ask me!
Add border to section
I’m also going to add a white border above the section. To do this you have to select the section and go to the Style tab. Then go to Border. and at the Border Type options you need to select Solid.
Disable the icon and enter 2 PX at Top Width. After that’s done I change the color to white.
Responsive settings section 2
The section is now ready and we only need to check if any adjustments are needed to make it fully responsive.
That is why I click on the icon again with the two screens at the very bottom to switch to responsive mode. Now choose the middle option for the tablet view.
I’m actually quite happy with this, I just want to add some extra space to the sides of the section. Therefore, I select the section and then go to the Advanced tab.
At Padding I fill in 20 PX for the Left and Right and at the Top and Bottom I fill in 100 PX.
If you want to you can of course make adjustments by adding or removing some extra space, but I like it as it is right now.
Now I click on the mobile icon in the left gray bar to switch over to the mobile view.
Here I want to add more space to the sides of the section. Again I select the section and go to the Advanced tab. Then I click on the Link values together icon to disable it.
At Top and Bottom I now fill 40 PX and at Right and Left 10 PX and after that’s done you have to click on the green Update button to save all settings.
Section 3 – Homepage
Switch back to the desktop view again.
Now I will create the next section and to save time you can duplicate the section we have just created.
Duplicate secion
You can do the same way I showed you earlier by right-clicking on a section and then selecting Duplicate.
Now I want to make a section with brands of well-known luxury watch brands where you can add affiliate links to.
In another video I showed how a similarly simple website makes tons of money from affiliate revenue and Google adsense.
If you want a good example on how to monetize your own website, you need to check out that tutorial.
Now I want to add a section with affiliate links on the homepage in a quick and easy way to give you an example on how to do this.
Customize section
First I adjust the text in the heading to Buy Online.
I adjust the text below to Find The Best Prices.
The section with the posts widget can be removed by right-clicking and then click on Delete.
I’m going to make the background color of the section white but before I do that I first make the text Buy online black by going to the Style tab and there I select the black color.
Now I select the section and go to the Style tab and at Color I select white.
Customize button and add icon
I want to make the border around the button black so I click on it and go to the Style tab and set the Border Type to Solid. The color is black by default and you can also change that, but I’ll leave it as is.
Then I go to the Hover tab and set the border color to black.
The next thing I’m going to do is add a shoppingcart icon to the button. To do this go to the Content tab and at the Icon option you will see three icons. The first is default and does not show an icon. The second is if you want to upload an icon yourself and the third is for the Icon Library.
Now I click on the third option to see an overview of many different icons that are available.
I search for shop in the search bar and click on the shopping cart icon and then I click on Insert. Now you see that the icon has been added to the button.
I will now adjust the text of the button in the text field at the top of the left menu and here I change the text to Shop Now.
Inner section widget
Now I want to display an overview of several brand logo’s and then place a button for each brand below it.
The question now is how do we get 3 logos next to each other in one column?
Because the widgets in the column are all placed below each other and not side by side
The solution is a useful widget and that is the Inner Section.
Go to the overview with all widgets and choose the Inner Section at the top and drag it into the column above the button.
The Inner Section now has two columns, but you can also create more by duplicating a column with the right mouse button and click on the the Duplicate option.
Now there are 3 empty columns inside one column as you can see on the image below.
Now I’m going to design the first column and I’ll start by dragging an Image widget into the first column of the inner section. After it has been added I go to the Content tab and click on the gray box. Then click on Upload Files and I will drag 6 logos of random luxury watch brands into the field at once.
For the first, I choose the Rolex logo and fill in the fields with the text Buy Rolex watch or something like that and also copy that into the empty fields and after that click on Insert Media to add the image.
On the image below you can see the Rolex logo has beed added to the canvas.
Now I drag the button below the logo in the first column of the Inner Section.
I want to remove the space at the top of the button so I select it and go to the Advanced tab and I remove the Top Margin by setting it to 0.
I also want to make the logo smaller, so I select it and go to the Style tab and set the Size to 245 PX.
To save time we can now duplicate this column, so I remove the two empty columns from the Inner Section and when that’s done I duplicate the remaining column twice again.
You can replace the images by clicking on the image and then selecting another one by going to the Content tab. Then click on Insert Media to insert the new image.
On the image below you can see two new images have been added to the canvas.
We can now also duplicate the entire inner section by right clicking on it and then select Duplicate.
Before replacing the images I want to add some more space above the second Inner Section. Select it and go to the Advanced tab and add 40 PX at Top Margin, that seems sufficient and it also looks better.
After that I replace the images in the same way as I have just showed.
On the image below you can see the logo’s that I have set for the second inner section.
The only thing you should do now is to paste your affiliate links from Amazon or another affiliate network in the Link field.
This is just a matter of clicking on a button and then go over to the Content tab and fill in the affiliate link in the Link field over there.
How you can easily achieve the chance of receiving more clicks is by also adding the affiliate links to the logos.
To do this, click on the image of a logo and then you can enter your affiliate link in the Content tab at the Link options after this is set to Custom URL. This wil make the logo clickable and this increases the chance that visitors will click on your affiliate links.
Now I don’t fill in affiliate links because this site is only made for the tutorial, but you at least have a good idea how to set this up.
Responsive settings section 3
Let’s take a look at this section on Tablet and Mobile as well. Again I click on the icon with the two screens at the bottom of the bar to activate the responsive mode and click on Tablet.
It already looks good and we don’t have to change anything here.
Now switch to the Mobile view with the left icon at the top of the gray bar.
That also looks good, only I want to set the Top Margin to 0 of the second inner section.
To do this you need to select it and go to the Advanced tab. Then click on the icon behind Margin to restore the values. Now there is the same amount of space between all buttons and logos.
You could possibly add a little more space if you prefer that but for now I’m fine with how it looks right now.
Section 4 – Homepage
I go back to the Desktop view by clicking the right icon in the gray bar.
Now it’s time to create the last section for the homepage and that will be an About us section.
I Right-click on the section that I have just created and select Duplicate.
Now I remove both inner sections from the duplicated section.
I change the title to About us by clicking on it and entering a different text.
In the text editor below I also change the text to something like:
You know what time it is!
We keep you updated on the latest news and special offers and reviews for exclusive luxury watch brands for men and women.
Now I’m going to adjust the Typography of this widget so I select it and go to the Style tab and change the color to black.
Now I click on the pencil icon at Typography and I adjust the Weight to 300.
At Transform I set Uppercase to Default.
Then I set 1.2 for the Line Height and also for the Letter Spacing.
Button widget
The next thing I do is place a button below the text to link to the about us page that I will create later.
I duplicate a button from the section above it again with the right mouse button and then select Duplicate and drag it below the text.
I also want to change the button style, so I go over to the Content tab and remove the shoppingcart icon by selecting the option None. Now I adjust the text in the Text field to Read More.
At link, simply enter the link of the page you want the button to link to, for this example I set it to: https://tutorials4wp.com/about-us
Now that that’s done I move over to the Style tab and there I set the Text Color to white and the Background color to Black.
Customize section
Now I want to add an image to the background of the section.
To do this select the section and go to the Style tab. Here I click on the gray box next to Image and I select the image that I want to use.
Now the image has been added but the text is no longer clearly visible.
That’s why I’m going to add a background overlay to the Background Overlay options. Click on the icon for Classic and choose a color. I now set it to white and then I set the Opacity to 0.80
I also think it would be nice to display the image centered.
To do this go to the Background options and at Position select Center Center.
I also set the Cover option at Size by selecting it.
Now that looks clean!
It would also be nice to add a black border to the top of the section.
For this you need to go to the options at Border in the Style tab and there you can change the color from white to black.
For the last adjustment I go to the Layout tab of the section and I set the Minimum Height to 550 PX.
Everything is looking good on desktop now!
Responsive settings section 4
On tablet everything is looking fine too!
Now check the mobile view and everything is already set up correctly there.
Just to be sure, I also check the different tablet and mobile formats with the drag function and as you can see everything is properly responsive.
Save settings
Don’t forget to save all settings by clicking on the green Update button!
By the way, make sure you do this regularly while designing to avoid accidentally deleting anything because then all the work will have been for nothing and that will be a waste of your time.
Because I want to have the website completely in the same style, I will make a template of the homepage as a basis for the other pages.
Make a template of a page
To create the template of this entire page with all sections, columns and widgets you can click on the icon next to the Update button in the bottom left menu. Then click on the Save as Template option.
After that you have to enter a name such as Template Home. You will immediately see that the template has been added in the My Templates tab.
Now click on the cross to close the window.
Create About Us page
To create the next page I go back to the WordPress dashboard by clicking on the icon at the top left and then click on Exit To Dashboard.
Then click on the WordPress icon at the top left of the screen to go to the overview with all pages.
We’ll start with the About Us page by clicking on Edit.
After the page has loaded you can click on the blue Edit with Elementor button.
The first thing I’m going to do is change the Settings of the page by clicking on the icon at the bottom left of the left menu. Here I set the Page Layout to Elementor Full Width.
Import template
Now we are going to import the homepage template by clicking on the folder icon and then select the My Templates tab. Then go to the template as you have saved it and click on Insert. At the Import Document Settings pop up you can click on Yes.
Customize template
Now the template is loaded. I just want to make a simple about us page that consists of 1 section. That’s why I delete all sections except the last one.
The first thing I want to do is select the heading and change the H2 tag to an H1 tag by clicking on it.
I do this because for SEO it’s important to always have one H1 tag on the page as I have mentioned before.
Now I want to change the background of the section to a solid color. I select the section and go to the Style Tab. I delete the image by clicking on the trash can. After that I set the background color to white at the Color options.
Now I go to the Background overlay options and go to Color and click on the small arrow icon to clear the settings.
I will now remove the border at the top by going to the Border options. Here I adjust Solid back to None.
Now I want to add another column by duplicating it. So I go to the gray square in the top left corner of the column and right click on it and select the Duplicate option.
Then I remove all widgets from the new column so that it is completely empty again.
I want to add a new widget and that can be done again by going to the overview with the widgets and there I choose the Image widget. Then I click on the gray box in the Content tab to select an image from the Media Library.
Click on the image you want to insert and fill in the fields, in this case I would do something like Luxury watch brands – About us. Copy this text in all fields and click on Insert Media.
Now you can see that the image has been added.
I also want to show you how to add a shadow border to an image. You can do this by selecting it and then go to the Style tab and at the very bottom you can click on the icon at Box Shadow.
If you set Horizontal and Vertical to 10 and the Blur to 5 then you have a completely different effect so you can play around with it to see what you like.
Now we go to the button and I want to change to the text to Contact Us by clicking on it and then change the text in the text field.
On the Content tab, you can enter the link for the contact page at the Link options, which in this case is this URL: https://tutorials4wp.com/contact
Now the button is ready I’m going to to change the text in the Text Editor widget above it.
As an example I’ll use a dummy text and you can just paste it into the Text Editor field.
Responsive settings about us page
By clicking on the arrow on the left you can hide the menu and have a good look at the page. Now that looks good!
Now let’s see how it looks on tablet view.
I go to the icon at the bottom of the menu bar with the two screens and click on it. Now I go to the gray bar at the top of the screen and select the middle icon for the tablet view.
Everything also is looking good so now I select the mobile icon to switch to the mobile view. Here I just want to add a little more space above the image.
I select the image and go to the Advanced tab. Here I click on the icon at Margin. At the Top Margin I enter 20 PX.
Now click on the green Update button to save all changes.
Now we are done with the About Us page and we can go back to desktop view by clicking the right icon in the gray bar.
I also want to save this page as a template to use for the Contact page that I’m going to create now.
Click again on the arrow next to the green Update button and click on Save As Template. Enter a name for the template and then click on Save. You will see that the template has been added so now you can close the window by clicking on the cross.
Now go back to the WordPress dashboard by clicking the icon at the top left of the menu and then click on Exit To Dashboard.
Create Contact page
Now click on the WordPress icon and go to the Contact page and click on Edit.
Then I click the Edit With Elementor button.
After the page has loaded I click on the gear icon at the bottom left to adjust the setting. At Page Layout I select the Elementor Full Width option as I also have done for the other pages.
Import template
Now I’m going to import the template I have just made of the About Us page by clicking on the folder icon and then go to the My Templates tab. Click the Insert button for the template you want to insert which in this example is the about us page.
Customize template
The first thing I’m going to do is change the About us title to Contact by clicking on it and change the text. The button can be removed with the right mouse button and then click on Delete.
I will now also delete the image with the right mouse button and then I click on Delete, and I will leave the column there because I will place a form widget in it.
Form widget
Go back to the overview with all widgets and drag the Form widget into the empty column.
Now I’m going to show you how to customize this widget. I select the widget and the first thing I do is disable the Show option at the Label oprtions. This makes the form look better.
At the top of the Content tab, you will see the Form Field option. Here you can set which fields should be displayed in the form. By default Name, Email and Message are already added. You can also set for each field whether it should be a mandatory by enabeling the Yes option.
You can also remove fields by clicking the cross or add new fields by clicking Add Item. If you do that you will see at Type that Text is selected but you can also choose another option, as you can see there are a lot of options available.
At the options for Buttons you can adjust the text of the button, but I’ll leave it at Send.
Now go to the options for Email, here you can enter an email address in the field to, where the information from the form should be sent over to after someone has filled it in and clicked on the Send button.
In this example I add the e-mail info@tutorials4wp.com
In the Subject field you see the title of the Email as it will appears in your inbox.
By default, the information of all the fields that are added to the form will be send over in the e-mail and you can optionally add some text if you want to do that.
In the From Email field you can indicate from which e-mail address the form should be sent, you can also create a separate e-mail for this. In another video I will explain how to create an email within just 1 minute with SiteGround.
For now I’ll leave this all as it is and I move over to the Additional options, here you can optionally adjust all the messages that can be displayed. This is also useful to know if you would like to adjust that, but I leave everthing over here at the default settings.
Now we move on to the Style tab and here we are going to adjust the styling.
First I go to the options for Field and there I adjust the color to black. At Typograhpy I adjust the Font to Rubik and set the Weight to 300.
Then I go to the options for Buttons and at Typography I also set the font Rubik with a Size of 15. Then I set the Weight to 600 and at Transform I select the option Uppercase.
Now I change the color of the button at the Background Color option to black. After that I go to the Hover options and there I select the color green that I have also used for the other buttons for the website.
You can move the form down some more so that it aligns a little better with the text.
To do this go to the Advanced tab and click on the icon at Margin to fill in the fields separately and enter 50 PX at Top Margin.
Responsive settings contact page
Now I’m going to see if any adjustments need to be made on tablet and mobile to make this page fully responsive.
Open the responsive mode with the icon at the bottom and then select the tablet view.
Here we can remove the space at the top of the form by clicking on the Margin icon, which resets the values to 0. To display the form a little higher you can also use the Top Margin by setting it to -50.
Now go over to the mobile view and here I also set the values of Margin back to 0 with the Link values together icon.
Everything looks good now so I save the changes by clicking on the green Update button at the bottom of the page.
Now we are all done with designing the basic pages for the website.
I have showed you every single step in the entire process and I would recommend to check out the video tutorial if anything might be unclear to you at this point.
If you have responsive issues with designing in Elementor for mobile or tablet view you should check out this tutorial. There I will explain how you can fix this very easily.
Don’t forget to like and subscribe to the YouTube channel. I would appreciate that very much!
If you’re a beginner you should check out the WordPress pages and posts settings tutorial to learn the basics.
In this tutorial I have explained how you can hide the page title very easily with Elementor.
Check out this tutorial to learn the Elementor basics in 7 minutes.
In other tutorials I have explained how to design:
- Archive pages with Elementor
- Search results pages with Elementor
- Blog overview organized by category on one page with Elementor
- Header and footer with Elementor
- Posts with Elementor
- Error 404 page with Elementor
- Landing page (without header & footer) with Elementor
- Under construction/Coming soon page with Elementor