Do you want to create a one-page or multi-page WordPress website but do not have Elementor Pro?
In this tutorial, you will learn how to use the free Elementor Hello theme to create a fully responsive with different sections and features including a sticky transparent header, a menu, a contact page and more.
To achieve this, all you’re going to do is install and activate the free Elementor plugin and the Hello theme, Templately and Essential Addons for Elementor.
Let’s get to work!
Getting started: to create a one page website
Step 1: Install the Elementor Hello theme
To kick this off, log into the backend of your WordPress website and go to your dashboard.
Navigate to Appearance > Themes then click on the Add New option.
Typically, you should find the Hello Elementor theme listed among the Popular themes, but if it is not, just search for it.
Go ahead and Install then Activate your Hello Elementor theme.
When you open or refresh your homepage, the Hello theme should be active.
Step 2: Edit your website settings
Back to your WordPress dashboard, navigate to Settings > General and under Site Title add the name of your website, and if you have a slogan add it under Tagline.
Leave the WordPress and Site addresses as they are, and you can go ahead and change your administrator email if you want to.
You can go ahead and make any other preferred changes for example to the Language and Time zone, and when you are done, Save Changes.
In the Reading Settings, under Your Homepage Displays section, you can choose whether to display Posts on your home page or just the Homepage, we’ll set this up in a few…
Down under Search Engine Visibility, you can choose to let search engines index your website while you’re designing it.
I recommend disabling that feature until later when you are done designing and are going to launch the website.
Remember to Save Changes after every stage.
Step 3: Create a new page
When you are done setting up your reading settings, go to Pages > Add New to create a new page.
Give your page a Title (for example, “Home“), then hit the Publish button.
Add another new page, name it Contact and publish that as well.
Back to your Reading Settings, select Static under Your homepage displays, then under Homepage select the “Home” page you just created, and save your changes.
Go to Appearance > Menus back in your dashboard.
Under Menu Structure, set Menu Name to Main Menu then Check the Header option for the menu to be positioned in the header section of your page, click the Create Menu button.
After creating your menu, you need to add items to it, so under the Add menu items section select the Home and Contact items and Add to menu.
Under Custom links, add ‘#about’ under the URL option and ‘About’ under the Link text, then click the Add to menu button.
Go ahead and do the same for Portfolio (URL: #portfolio, Link text: Portfolio) and Stories (URL: #stories, Link text: Stories).
You can reposition the items by dragging them; for example, drag the Contact age to below Stories.
Back under Custom links, you now need to add a Button.
You can add the custom link to the page where you want users to be redirected when they click the button.
Maybe your newsletter, a download or any other item you prefer, add the Item name then Add to menu.
Tip: To ensure that your user doesn’t leave your website, set up the button redirection to Open in a new tab.
To do this;
Open Screen Options on the upper right, check the Link target option, then back on the Button menu item, and enable the Open in a new tab option.
Click the Save menu button when you’re done.
Refresh your website to see how your menu looks.
Step 5: Customize your header
Back on your WordPress dashboard, navigate to Appearance > Theme Settings.
Here you’ll find a couple of settings that you can customize to your preference.
In this case, toggle on the Disable Page title option; this way the page titles won’t show up on your pages.
Leave the rest of the Settings on default (enabled) and click the Save settings button.
Back under Appearance, click on Customize to open up the Hello theme customizer then go to the Header & Footer section.
Note that to create the Header and Footer you need to have the Elementor page builder plugin installed.
So go ahead and click the Install Elementor button to install and activate the plugin.
Back to Appearance > Customize > Header & Footer, click the Start designing button to open up Elementor site settings.
Go over to the Hello theme header section and toggle off the Tagline option, set the Layout to Default and the Width to Boxed.
Under Background Type > Color, select a color and then add it as a Global color.
Under Site Logo, select the Logo option under Type, then hit the Update button at the bottom.
Now go to Site Identity and upload a Logo for your website, make sure to give your logo the appropriate Alt text.
You can also add a site favicon (the small image that appears beside your site name in the tab on a browser).
When you’re done click the Update button.
Back under Header > Site logo, set the logo Width to 65.
Next to the site logo is the Menu section; select the Main menu that you created earlier in step 4.
Set the Menu layout to Horizontal and the Breakpoint to Tablet.
Set the font Color to white, and under Typography, select a font and set a suitable Size and Weight for it.
Hit Update when done then preview your changes.
Step 6: Create content for your homepage
Back to your WordPress dashboard, navigate to Pages > Home and click the Edit with Elementor button.
Your page will open up in the Elementor editor and you can start adding content.
Tip: To be able to add content to your pages in Elementor you need to know how to use containers. Check out this tutorial for more on containers: https://www.youtube.com/watch?v=cAwACHJ-TPE&t=0s, https://www.youtube.com/watch?v=3XC9pwlVu9Y&t=0s
Here, we’ll be using templates from Templately; an Elementor template resource that you can use for free or on a subscription basis.
This site has an abundance of free and premium templates that you can use on your Elementor website, and you can use their free plugin to install them, or even save them on the cloud.
First, you need to create a Templately account then you can go ahead and choose a free plan (you can choose the Starter free plan and upgrade later if you want to).
After creating your Templately account, go back to your WordPress dashboard and under Plugins > Add new, search for Templately then install and activate it, then sign in with your Templately account credentials.
You can go ahead and search and find a template that suits your needs then click the Insert button.
Note: Templately will need to install Essential Addons for Elementor for your template to be imported, so go ahead and accept.
This is because Templately templates and the widgets therein are created by Essential Addons for Elementor.
Select Import to library, then you can preview your imported template.
Back to your homepage in the Elementor editor, you should see the new Templately icon, click on it then go to Templates Library > Templates.
Select the newly downloaded template to insert it into your homepage.
Note: Some of the templates in Templately are not using containers yet, they are still in the column-section model, therefore you may need to convert them to containers for a smoother experience.
You can click on the section on the right then click Convert on the left side, delete the section and name the new container(s).
But note that converting sections to containers like this may not work well for all the sections.
You can go ahead and edit the Typography to your preference under the Style section on the left-hand panel.
For example, you can set your Headings to the same Global font size and weight.
Now, remember the menu with the items you created in step 3?
Those menu items need to be linked to these sections or containers so that for example if someone goes to the menu and clicks on Portfolio, the page scrolls down to the Portfolio section.
To achieve that:
Start with the About item by selecting the About container;
Go to Advanced > CSS ID and add the URL you added to this particular item under Appearance > Menus > About > URL, but without the hashtag (#), so that should be ‘about’.
Repeat this for the Portfolio and Stories containers.
When you are done, click the Update button and then go ahead and preview your page.
Check for any discrepancies in the font sizes or paddings and you can go back and iron them out via the Elementor editor.
Set background color
To add a background color to the different sections go back to your Elementor editor, select the section About then go to Style > Background > Color and choose your previously set global color (in step 4).
Repeat for the rest of the sections, then hit the Update button and preview.
Link the Contact page to sections
Now, if everything has gone according to plan, you’ll see that when you go to the menu and click on the different items (About, Portfolio or Stories), they should take you straight to the respective sections.
When you click on the Contact item it should also open up the Contact page you created previously in Step 3.
However, once you go to the contact page, you’ll notice you won’t be able to go back to the previous section even when you click on them.
To fix that;
Click on the Home menu item to go back to the home page, copy the URL of the home page, and then go to Appearance > Menus.
Go to the About menu item and under Custom Link > URL, paste the URL just before ‘#about’ so that it is something like this: https://quaint-quesnel-gqh.zipwp.link/#about
Repeat this process for the Portfolio and stories items as well:
-Portfolio: https://quaint-quesnel-gqh.zipwp.link/#portfolio
-Stories: https://quaint-quesnel-gqh.zipwp.link/#stories
When you’re done, click the Save Menu button then refresh and preview your page.
After these changes, even when you go to the Contact page, you will be able to go right back to any section by simply clicking on it (About, Stories or Portfolio).
Step 7: Create a sticky transparent header
To make sure your header sticks at the top even when you scroll to the different sections, and to give it some transparency, here’s how.
Tip: The hello theme does not come with the sticky transparent header functionality so we’ll use Custom CSS to make this happen.
Follow these steps:
Back to your WordPress dashboard, navigate to Appearance > Customize > Additional CSS then paste this code.
/* Make the header sticky */
.site-header {
position: sticky;
top: 8%; /* Adjust this value as needed */
transform: translateY(-50%);
background-color: #141BCFE3; /* Set your desired background color */
z-index: 1000; /* Ensure it's above other elements */
}
/* Responsive header for tablets and mobiles */
@media screen and (max-width: 1024px) {
.site-header {
position: sticky;
top: 0%;
transform: translateY(-10%);
}
}
/* Customize hamburger icon */
.site-navigation-toggle-holder .site-navigation-toggle {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
padding: 0.25em;
cursor: pointer;
border: 0 solid;
border-radius: 3px;
background-color: rgb(255 255 255);
color: #141bcfe3;
}
/* Download Button (menu item 31) */
.download {
background-color: #ff006c; /* Replace with your preferred color code */
transition: background-color 0.3s ease; /* Add a smooth transition effect */
border-radius: 5px; /* Adjust the radius value as needed */
}
/* Style the link within the menu item */
.download a {
color: #ffffff; /* Replace with your preferred text color */
text-decoration: none; /* Remove underline from the link */
padding: 7px 20px; /* Adjust padding as needed */
display: block; /* Ensure the link takes up the full width of the menu item */
}
/* Add background color on hover */
.download:hover {
background-color: #1a8deb; /* Replace with your preferred hover color code */
}This code has all the elements that will make your header sticky, transparent as well as responsive on tablet and mobile devices.
Additionally, this CSS code will make the download button stand out so copy the class then go to Appearance > Menus and under the Download button, you need to paste that class.
But first, go to Screen Options at the top right and check the CSS classes option to enable it, then you can go back down and paste it.
Save the menu then go back to the customizer and hit the Publish button, and reload and preview the page.
Step 9: Edit the Contact page
Back to your dashboard, navigate to Pages > Contact > Edit > Edit with Elementor.
Click on the Templately icon then go to the Templates section and insert the kit you downloaded, delete all the other sections and only leave the Contact section.
Tip: to delete the sections simply right-click on the section and click the Delete option.
Select the column and under Content > Title, rename it to Contact Us, then under Style > Typography add your Heading style.
You need to add a Form on the contact page and to achieve this you need to have the Contact Form 7 plugging installed.
So briefly go back to your WordPress dashboard and under Plugins > Add new, search for Contact form 7 and install and activate it.
After activating it go to its Settings and copy the Shortcode, then back in your Elementor editor go to widgets, search for Contact for 7, drag it to your page and select the form you added.
This will give you the default contact form 7 and you can style it to your preference (Typography, Color, Submit button, etc).
Check this tutorial for more on how to create a contact form: https://www.youtube.com/watch?v=6dmz_JccaM8&t=0s
Remember to change the contact page background to match the background color in the other sections.
When you’re done, Update and preview the page.
To set up your footer, go back to the Elementor editor and under Site Settings > Hello theme footer, first toggle off the Site logo and Menu options.
Just leave enabled the Tagline and Copyright options. And then you can go to each of these two sections and style them to your preference.
Congratulations! You have succeeded in creating a website with a sticky transparent header, a footer, home page sections, a button and all those lovely things we’ve done!
Final checks
Now, before you take your website live, perform these few checks and adjust accordingly;
- Go back to your WordPress dashboard and navigate to Settings > Permalinks, make sure you have the Post name option selected under Permalink Structure, then Save changes.
This will ensure that your pages are linking, even if you move your website to a new host. - Check your website to make sure it is responsive on both mobile and tablet devices as well.
If all these are good to go then another congratulations to you!
If you want to take your Elementor skills to the next level, check out my Elementor Pro Bootcamp and learn how to build fully dynamic Elementor websites.
Happy website building!
