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 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:
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 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 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 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 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 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 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 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 this clip to watch us create the footer
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.