Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Create a Custom Page in WordPress | Elementor WordPress Tutorial

How To Create a Custom Page in WordPress?

In this Elementor WordPress tutorial, you will learn how to create a custom page in WordPress by first going through how to design a landing page from the well-known PR management company ‘Muck Rack’.

By walking you through the process of designing this home page, I hope to teach you all the skills needed so you know how to design a website on WordPress for yourself or future clients you may have. You will not need any coding knowledge to follow along. All you will need for this tutorial is a website builder called Elementor Pro and website hosting.

To get started, either watch the full video tutorial below. Or you can follow along by reading each summary of the steps we took to design this website followed by a corresponding video clip.

Play Video

Play this video to watch the full video tutorial

How to Get Website Hosting

To start designing our custom WordPress page, the first and most important thing we will need is website hosting. If you already have your WordPress website hosting or do not plan on changing any time soon, then feel free to move onto the next step.

However if you are planning to purchase hosting, I use Siteground to host my website and would highly recommend them. Out of the many hosting companies I have tested they are one of the fastest, most secure and have great 24 hour support!

Siteground currently has a special pricing on all their packages for your first payment. You can view their packages through my referral link here:

Siteground Hosting

Play Video

Play this clip to learn about Siteground hosting

How to Get Elementor Pro

This WordPress landing page tutorial shows you how to create a custom page in WordPress page using Elementor Pro. Elementor has a free version that we can use to design our WordPress landing page free of cost, however during certain steps of this tutorial we will be using features only available with Elementor Pro, like adding animated titles and using Elementors Pro’s templates.

However, as a long time user of Elementor Pro, it is one of the most advanced, powerful website builders available and it’s really worth it! You will have the ability to create global headers and footers that you can use across all pages of your websites – all you have to do is design them once and apply them to all your pages! You can easily create custom contact forms to capture people’s emails. You can also create modern looking popups too, just to name a few great features.

The investment of $50 is definitely worth the ability to create a custom page in WordPress with full functionality for yourself or future clients, also it is incredibly easy to learn! All you need to do is drag and drop elements onto your page.

If you would like, you can use my referral link to purchase Elementor Pro.

This helps us create more free content for our readers: Elementor Pro

Choose a Package

This will take you to a new tab on Elementor’s home page where you can scroll to the bottom and press “Join Pro“. Then you will have a choice between 3 packages. “Personal” is the starter package that only allows you to install Elementor Pro on 1 website. “Plus” allows for 3 websites and “Expert” allows for 1,000 websites!

So the only real difference between the packages are the amount of websites you can download the pro plugin on. If you are planning to design a website just for yourself, the “Personal” package may be the best option for you. If you are planning to design websites for clients as a business you may want to purchase the “Expert” package – the choice is yours.

How To Install Elementor

After purchasing Elementor Pro, we will need to go to the WordPress dashboard to install the default Elementor plugin first. So go to “Plugins”, “Add New” then Type “Elementor”, press “Install” and then click the “Activate” button.

Installing The Elementor Pro Plugin

Now that we have the default Elementor plugin, we can login into Elementor then download the pro plugin “.Zip” file. Once the download has completed, we can go to WordPress, click on “Plugins”, “Add New” then instead of searching press “Upload Plugin”. Press “Choose File” and select the “.Zip” file we just downloaded, then finally press “Activate Plugin”.

Verifying Elementor Pro

Now we need to confirm that we have purchased Elementor Pro by providing our licence key. Go to all of your plugins and find “Elementor Pro”, click on the green “Activate Licence” text. Then click “Activate Manually” and paste the licence key that you were given when you completed your purchase. If you are unable to locate your licence key, login into your Elementor account and go to the “My Account” tab. Here you will be able to find your licence key.

Lets Begin This WordPress Landing Page Tutorial!

Play Video

Play this clip to watch us purchase and set up Elementor Pro

Creating The Header For Our Custom Page

Clearing The Theme’s Defualt Elements

Before we get started designing our Elementor landing page we need to clear the themes defualt header and footer. Depending on what theme you are using, most likely when you create a new page you will see your themes default elements such as header, footer, page title etc. We don’t want any of this!

Luckily, Elementor has a super handy feature that allows you to clear everything to leave you with a blank canvas. To activate this feature, click on the “Settings” icon at the bottom-left of the page. Where it says “Page Layout”, click on the drop-down menu and choose “Elementor Canvas”. Can you guess why they called it that?

Designing The Bottom Section

So with a clean slate, let’s start designing the header. To save ourself unnecessary work, we will use one of the header templates Elementor provides that looks similar to the one we are trying to copy. Once imported, we will start by changing the colours which can be done very easily in the style area. Next let’s make sure the bottom section of the header only has one column so we can easily centre the white text.

Designing The Top Section

Now for the top part, we will need to make sure there are two columns. The left side should have roughly 30% of the width and the right should be 70%. The proportions can easily be adjusted by hovering over the line between the two columns and then dragging. Continue by adding an “Image” element to the right column then add the logo in the content area. Next let’s add a “Nav Menu”; it will ask what menu we would like to choose but we need to create one first.

Creating a Menu

To create a menu, visit the dashboard area of WordPress and hover over appearance. Click on “Menu” then click on “Create New Menu”. Give your menu a name, then add the menu elements to it. Come back to the page and refresh the page. After refreshing you should see the menu you have just created, choose it and we are done!

Creating a Transparent Button

Muck Rack seems to have an extra blue option at the end of their menu so what we can do is right click on the right column. Press duplicate and now we should see three columns, cool right? So with this extra column, we can delete everything that is inside and add a “Button” Element. Go to style, make the background colour the same blue as the header, change the text colour to the cyan blue and we are finished.

Play Video

Play this clip to watch us design the header of our website

Creating The Main “Hero” Header

Thinking About The Layout First

Before starting to create the main header of our custom WordPress page. Let’s take a moment to plan beforehand, so we have a much easier time designing. By taking a look at the website header, we can see there seems to be a 50-50 split. On one side there is content, like the header text and buttons. On the other side there is nothing, so let’s keep this in mind moving forward.

Creating The Section Structure

In Elementor, the main container is called a “Section”. Within that section we can specify how many columns we would like. Since we established earlier that the header is split in two, the best option to choose would be the two columns layout. We can add this by clicking the pink plus icon and then clicking on the three column structure.

Adding The Background

Once the section has been created, we can add a background image to it. Start by right clicking on the section, press “Edit Section”. Go to “Style” on the left-side of the page and open up the background tab. Make sure you are on normal mode as well as classic mode. This will allow you to access the image box, which you can click on to choose your media (Image).

We’re not done yet! The header is still really small so to increase the height, go to the “Layout” tab – the one next to “Style”. Click on the height dropdown menu and select “min height”. Here you can increase or decrease this slider to change the height of the section. However, we encounter another problem – the image is repeating. No worries, we can easily fix this by going back to the style tab. Click on the “Repeat” dropdown menu and select “No-repeat”, then click on the “Size” menu and click “Cover”

Adding In Elements

Within the left column, we will add the “Heading” element and after that the “Animated Heading” elements to achieve the really cool typing animation this website has. This element is only available for pro users, so just another reason why going pro is so worth it. Continue by adding a “Text Editor” Element to add some basic text. Lastly the buttons…

Structuring Our Buttons

As we can see, the reference website has 2 buttons side by side, so let’s try and copy that. Start by dragging a “Button” element in the left column. Now try to drag another – but this will just stack on top of each other? How can we add a 2 column layout within a column?

We can achieve this by using the “Inner Section” Element. This allows you to create multiple columns within an actual column. So this will now allow us to place the buttons side by side.

Play Video

Play this clip to watch us create the main hero header

Creating The Company Logo Section

Adding The Title

Just above the logo, there is a blue title which we can make by creating a section and adding in a “Heading” element. Add all the styling and padding and we are done.

Adding The Logo

With the logos, we can use one of Elementors templates that looks very similar to what we are trying to recreate. The only problem is there is a header on top by default. However, we can remove this by right-clicking on the pencil icon of the heading. Then clicking the delete button near the bottom of the menu.

Next, let’s make sure there are as many rows as there are logos that we want to add. You can also adjust the images “Width” and “Max Width” independently to change the size of each logo. You may need to do this as some logos are smaller than others.

Adding a Border

To add a border to the bottom of the section, make sure you are currently editing the section. By either clicking on the six dots near the middle/top of the section. Or right click anywhere on it and press “Edit Section”. Now go to “Style” > “Border”. Click on “Border Type”, set it to “Solid”, add a width of “1px” and finally add the colour.

Play Video

Play this clip to watch us create the company logo section

Designing The Services Section

Adding The Title

Just like before, to add a title, first create a section by clicking the plus button and setting the columns to one by clicking on the icon that only has one column. Once created, we can then simply drag and drop the “Heading” inside.

Creating The Services Template

All the three services use very similar designs, so we can create one template and duplicate it. To add the two column style, as before we will be needing the “Inner Section” element. Drag that beneath the title and add the new title and text in the left column of the inner section we just added. On the right column, add the image. To make the columns less of a 50-50 and more of a 70-30 split, we can hover over the divide between the two columns and if we click and move our mouse, the width of the columns will dynamically change.

Duplicating Our Template

To duplicate the template we just made, right click on the inner section and click “Duplicate”. Do this two times so we have three inner sections on top of each other. However, on the website we are copying the second services row is flipped, so the image is on the left instead of being on the right?

To solve this quickly, we can click on the right column’s icon and drag it to the other side. Just like that, we moved the right column to the left with a simple drag and drop. All that is left to do is change the content and images.

Adding a Button

The final step of the services section is to add a button. The button used here uses the same colours and styles as the button used on the header. This means that we can simply right click on that button and click “Duplicate”. Now we can click on the pencil, which will appear when we hover over the duplicated button we just created. Once you click on the pencil icon, you can drag it below all the services at the very bottom and let go.

A great tip when moving elements!

If you are using a mouse, after clicking on the pencil icon of an element to drag it, you can scroll down the page to very easily move the element to a new location.

If you are on a laptop, it is slightly harder however still possible. Click on the pencil icon and drag the element to the bottom of your page. The page should begin to scroll down, if it does not try wiggling your mouse a bit to find the right spot.

Adding Entrance Animations

When you scroll down Muck Rack’s page, the images fade in from the sides which we can add to our page too. Right click on the image element and press “Edit Image”. Then go to the “Advanced” tab to the right of the “Style” tab. Open up “Motion Effects” and underneath “Entrance Animation”. Set it to “Fade In Left” if your image is on the left. If your image is on the right, set the animation to “Fade In Right”.

Play Video

Play this clip to watch us create the services section

Designing The Testimonials

Creating The Background Section

If we look at the testimonials section on the example Muck Rack website, we will see that there is only one column and it is not split in half. This means that when creating our outer section, we can just choose the option for a one column layout.

After the section is created, go to the style tab whilst making sure you are editing the section. As we said before, to edit anything right click on the element and click edit. Under the style tab make sure you select “Classic” next to the “Background Type” in the “Background” area.

Click on the large rectangle under “Image” and choose your image from your media library. To change how stretched the image will be, click on the drop-down menu next to “Size” (which is the 4th setting under the image box). Choose “Custom” and set the percentage to whatever you like – I am using 30%.

My Section Is Really Short?

After adding your image, you will barely be able to see it due to the fact that we have not set a height for the section. Go to the layout tab, this time to the left of the style tab. Click on the drop-down menu next to “Height” and choose “Min Height”. Now we can move the slider or increase the height amount manually to give our section some more height!

Adding a Border To The Background Section

To add a border, go to the section, then go to the “Style” tab whist making sure you are editing the correct section. Then open up the “Border” tab by clicking on it, set the border type to “Solid”. Now we will see some “Width” options appear, here we can set the width of the border to 1 pixel (px).

There are five boxes underneath the “Width” area; “Top”, “Right”, “Bottom”, “Left” and an icon that looks like a chain. The first four allow you to adjust how much thickness each side of the section has. If the last box that has a chain icon is selected, that will mean that all sides will have the same thickness. So if we hover over the first “Top” box and try to increase it, all the sides increase too.

In our case, we only want to add a border to the top and bottom of our section. So click on the last box with a chain to unlink everything. Now if we increase the “Top” thickness, only the top changes. Great, so we can add 1 pixel to the top and 1 pixel to the bottom. Finish off by setting the colour of the border to this hex colour value #e7e7e7.

Creating The Testimonial Template

Using Elementor’s Template Library

Just like before, to save ourselves time designing, we will take advantage of Elementors amazing template library! Elementor has a great testimonial template, which we can add to our custom WordPress page by clicking on the folder icon. This icon can be found next to the plus icon you would click on to create a new section.

Inside the Elementor library, click on the “Blocks” tab on the top and scroll down until you see the testimonial templates. We will be using the one with the title “Check Out Our Testimonials” and the one that has the reviews side by side. Hover over that template and click “Insert”.

Making The Layout 1 Column

The template we just inserted is almost perfect! However, we only need 1 column, so we can simply right click on one of the columns and click “Delete”.

Dragging The Inner Section Into Our Main Section

The template we just inserted comes inside of its own “Section” which we will not be needing as we just created our own section. So we can drag the “Inner Section” that contains the testimonial into our main “Section” and delete the rest of what is left of the template we added by right clicking on the “Section” and clicking “Delete”. Now we should be left with an outer “Section” and an “Inner Section” with the testimonial template inside, great!

Changing The Testimonials Background Colour

After adding the testimonial “Inner Section” to our main “Section”, you will notice that the column containing the testimonial has a transparent background. To change this, right click on the column icon (It looks like two rectangles side by side) then click edit column.

Go to “Style”, open up the “Background” tab then make sure to click on the paintbrush icon next to “Background Type” to ensure you are in the classic mode. Now set the colour to pure white by either dragging your mouse to the top left of the colour palette, or by copying this hex colour code #ffffff.

Adding a Border To The Testimonial

If we have a look at the example website, the testimonials have a slight border. To add a border, make sure you are editing the column within the “Inner Section” – not the actually “Inner Section” itself. Go to the “Style” tab > “Border” and set the “Border Type” to solid. This time we don’t have to unlink the borders as each side will have the same thickness. So set all the sides to 1 pixel (px) and add set the colour to this hex colour code #e7e7e7.

Fixing The Shadows

Understanding How Shadows Work

First, let’s understand how shadows work in Elementor. There are two modes: “Normal” and “Hover”. When you change the setting within the “Normal” mode, this adjusts the look of the shadow when no one is hovering over the column. On the other hand, when you change the shadow setting inside of the “Hover” mode, this changes the look of the shadow when someone is hovering.

So if you make the shadow small in the “Normal” mode and make the shadow big on the “Hover” mode. The shadow will grow from small to large the second someone hovers. The same thing in reverse will happen when someone moves their mouse away from the column, so the shadow will shrink. Now we understand how shadows work, let’s move on.

Changing the “Normal” Shadow Settings

As we just mentioned, the “Normal” shadow settings controls how the shadow looks when no one is hovering. So make sure you are in the “Normal” mode by going to “Style”, open up the “Border” tab and just underneath the word “Border”, click on “Normal”. Click on the pencil icon next to “Box Shadow” and a popup with more settings will appear. Copy all of the amounts below.

– Colour: rgba(0,0,0,0.17)

– Horizontal: 0

– Vertical: 0

– Blur: 10

– Spread: 0

Removing The Shadow Change When Someone Hovers

By default, the testimonial column has some “Hover” settings. To make sure the shadow does not change when you hover over it, instead of clicking on “Normal” in the border tab, click on “Hover”. Now within the hover mode, let’s reset the “Box Shadow” by clicking on the loop arrow icon to the left of the pencil icon you would click to access the shadow settings.

Now when you hover over the column, the shadow does not change!

Duplicate The Testimonials

Depending on how many testimonials you need, you can duplicate the “Inner Section” that many times. To duplicate it, right click on the six dots that appear at the top when you hover over the “Inner Section” and press duplicate

Add a Title

We can use the same title that we added to the top of the services section. Begin by right clicking on that title element. Press duplicate and drag it down to the testimonial “Section”.

Adding a Fade Animation

The example website has added an animation to each testimonial, so that when you scroll each one fades up. We can achieve this really easily with Elementor. Start by editing the “Inner Section” > “Advanced” tab to the right of the “Style” tab and open up the “Motion Effects” tab. Click on the drop-down menu under “Entrance animation and set it to “Fade In Up”. Add this to each one and we are done.

Play Video

Play this clip to watch us create the testimonials

Designing The Call To Action

What Is a Call To Action?

A call to action is a section on your custom WordPress page that asks the visitor to take an action. That could be to enter an email, request a demo, etc.

Creating The Layout

As usual, let’s look at the layout of the call to action first before creating any sections. We can see it is split in half – on one side there is a title and on the other there is a button. So we would need to create a section with two columns. To do this, press the plus icon at the bottom of your page and choose the option with two columns.

Adding a Background Colour

Edit the “Section” by right clicking on it and press “Edit Section”. Go to the “Style” tab, open up “Background”, click on the paintbrush icon to enter the classic mode and set the colour to this hex value #1f3756.

Increasing The Height

Whilst still editing the “Section”, go to the “Layout” tab at the top and set the “Height” drop-down menu to “Min Height”. A slider will appear, which you can drag to the right to get a value of 220.

Adding a Title

Let’s add a title inside of the left column. We can duplicate the same title we used for the testimonials section and drag it in. Let’s also align the title to the right by going into the “Content” tab, underneath “Alignment” and click on “Right”

Change The Title Colour

Now, change the colour to white by going into the “Style” tab and set the “Text Colour” to this value #ffffff.

Change The Title Font Size

To change the font size, go to “Style”, click on the pencil icon next to “Typography” and a popup will appear with settings options inside of that. Change the “Size” to 36.

Adding a Button

We can save ourselves time and duplicate the blue button we created for the header. Right click on it, press duplicate and drag it inside of the right column. But how can we increase the width of the button?

Increasing The Width Of The Button

To make the button take up the full width of the column, we need to set the button alignment to “Justified”. To do this, make sure you are editing the button. Click on the “Content” tab at the top and underneath “Alignment” click on the last box. This will stretch the button to fit the entire width of the column it is inside of.

Adding Some padding

We do not want the button to be extremely wide, so let’s add some padding to the right-side. Make sure you are editing the right column, then go to the “advanced” tab at the top. Unlink the paddings by clicking on the chain icon and then set the right padding to 220.

Play Video

Play this clip to watch us create the call to action footer button

Creating The Footer

Importing an Elementor Footer Template

Click on the folder icon and make sure you are on the “Blocks” tab. Scroll down until you find the blue “Metro” footer that has four columns. Click on “Insert” to import it.

Changing The Background Colour

Right click on the outer “Section” > “Style” > “Background” and click on the paintbrush to make sure you are in classic mode. Then click on the box to right of “Colour” and paste this hex code #151515. Then do the same exact thing for the bottom section that contains the website credits and copyright text.

Removing The Border

By default, the bottom section has a border so let’s get rid of that by going to “Style” > “Border” and set the “Border Type” to “None”.

Fixing The Columns

There are currently four columns on the footer and three of them are the same, but the one on the left has a different style. We want all four to have the same look, so right click on the very left column and press “Delete”. Then right click on any of the three remaining columns and press duplicate. After doing this, we should have four identical looking columns.

Adjusting The Icon Lists

Depending on what pages you will have for your website, you can change the menu items. Right click on the icon list element and press “Edit Icon List”, then change each list item. Whilst we are editing the “Icon List”, go to the “Style” tab. Open up the “Text” menu and set the “Text Colour” to #828282 and the “Hover” to #ffffff. Now if we hover over each item in the icon list, the colour will change from a grey to a white – nice!

Adjusting The Section Padding

By default, the padding for the top section is set to 70 pixel for the top and 70 pixel for the bottom. Change these amounts to 40px to get a look more similar to Muck Rack.

Play Video

Play this clip to watch us create the footer

Congratulations!

If you have read this far and completed our Elementor WordPress tutorial, I hope you have enjoyed! Now hopefully you have a much better understanding of how to create a custom page in WordPress – you can even take this knowledge to design a website from scratch even! If you have any questions, feel free to leave them in the comments section below this blog.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on email
Email

Browse Our Other Posts

Leave your comment

<

two × five =

Elementor Banner
Web Hosting
WP Rocket - WordPress Caching Plugin
Visual Composer Website Builder
Use AliDropship plugin to create your own business

Stay
Updated

Join our newsletter to be notified whenever we post more exlusive content like this!

schedule a free call to discuss what you need