The procedure of customizing websites requires an understanding of different technological topics such as HTML, PHP, and CSS. Unfortunately, most people do not have these technical skills and thank goodness, there are other simpler ways of creating and customizing websites that do not require programming. You can create and customize sites with relative ease using content management systems such as WordPress and the Elementor plugin.
WordPress is a flexible content management system that powers about one-third of websites on the internet. Elementor is a page builder that provides an intuitive interface to create content within a WordPress site with an easy drag-and-drop interface. The combination of these two programs can help you create stunning websites in a jiffy.
This tutorial provides a step-by-step guide on how to create websites with WordPress and Elementor. Get ready to design your dream website today using these leading-edge technologies without any need to code, just an easy drag-and-drop site making.
#1 Get a Hosting Account and Install WordPress
First things first, you need a domain name and a web hosting account to create your website. Your domain name is like a real-world business name which you register with a government agency. The web hosting account is comparable to renting an office from where you can do business. While the website design aspect is like putting all the furnishing in place to make your office look professional.
You can register your domain name and get a WordPress hosting easily by using the DreamHost WordPress hosting package. Click on the “Get Started” link on the and follow the instructions to create your account. Dreamhost gives you an option to register a new domain name or transfer an existing one to build your website.
Now you can log in to access your hosting dashboard after creating your DreamHost account. The hosting dashboard contains a variety of tools that you can use to manage your hosting account.
We recommend using the tool called One-Click WordPress Installer to do the initial WordPress installation. You can find this program in the lower part of the dashboard when you scroll down. Open the One-Click Installer menu, click on WordPress, select your domain name and install WordPress on your domain.
One click and you have WordPress!
#2 Add Elementor to the New WordPress Site
By this time, you must have completed the WordPress installation and also have your password to the Admin section. Log in to your WordPress Admin backend and let’s install Elementor – hover your mouse on the Plugin section within the menu by the left and click on “Add New” within the flyout menu.
On the new page that opens, type “Elementor” in the text box and press the enter key to search for the plugin. The result will show “Elementor Page Builder” among other results.
Ignore all the other result entries and click on the install tab beside the “Elementor Page Builder.” After installation is complete, the tab menu changes to activate, click on it to activate the plugin.
Now you have Elementor installed!
#3 Use Elementor to Create your First Page
Once the Elementor Page Builder has been activated, it is time to create your first web page. Navigate to the Pages section on the admin menu and click on “Add New” link.
The first page you shall create will serve as the Home Page. Type “Home” in the Title section and click on the “Save Draft” button to save your work.
It is a good habit to save the incremental changes you made on your site. It helps you retain the changes you made if the browser crashes, or the system malfunctions when you are working.
Now, you have your new page created. Locate the “Edit with Elementor” button just below the Title bar to launch the Elementor Page Builder plugin.
#4 How to use the Elementor Templates to Create Your Homepage in WordPress
One of the easiest ways to get up and running with Elementor site builder is to use templates. It gives you access to many functions of the program rather than trying to figure them out on your own.
Click on the “Add Template” button which is a right part on the screen to open the Elementor Template Library.
The template library gives you access to numerous templates. Many of the templates are free while others are only available when you purchase the premium version of the Elementor Plugin. Browse for the layout of your choice and click on the “Insert” button.
#5 How to Change Your Elementor Template to Full-Width
Hover your mouse on the template and locate the sky-blue control panel above the template. You will notice some icons within the panel, these icons allow you to customize the template. When you click on the first icon, it changes the left panel view to enable you to customize the template.
The first option on the left panel is for toggling the width of the template layout between boxed design and full-width. Simply click on the switch button to toggle between the two options.
#6 How to Change the Text on the Home Page and Any Other Page
Now that you have set the width style of your home page, you can proceed to customize the content of the home page. Elementor gives you access to user-friendly tools to edit the content of the template.
To edit any element on the page, click on it and the left panel will present you with various options to customize the content.
You will be able to change the font type, size, color, and the way the heading elements appear on the page.
#7 Change the Background Images
One of the core elements of a webpage is the background. Elementor allows you to change the background images to another one that aligns with the theme of your website. To change the background, navigate back to the template edit section and click on the “Style” tab.
All you need to do is to delete the current background image and choose another one to replace it.
Now, you newly create WordPress site have a new image, all thanks to the power of Elementor site builder.
Elementor provides you with many options for changing the background of the web page. You can use images, gradients, and videos from YouTube as your website background.
#8 How to change colors and fonts in Elementor site
The font and color elements allow you to align your web page with your brand features. You can customize these features by clicking on the element you want to change and selecting the “Style” tab from the left panel.
You can make changes by choosing another font type from the wide array of fonts in Elementor. You can either use the color picker to make adjustment to the font color or specify the color code if you know it.
An excellent design style is to maintain a consistent font appearance and color on your web page. Multiple color palettes can be distracting and serve as an annoying factor which can make your website visitor leave almost immediately. Choose site’s color wisely.
Click on the “Save” button to apply the changes to your site when you have finished.
Click on the hamburger menu icon at the top left after Elementor has saved the changes you made.
After that, click on “Page Settings” from the list of menu that appears.
In the menu that will open, in the “Status” section, click on the select options and choose “Published.” This option will make the web page available for other people to see on your website.
After that, click on the “X” icon at the bottom left of the page to close the options. You are now reedy to view your first web page.
#9 Make the Page You Just Created the Home Page of Your Website
The home page of your website is the page that opens up when someone types your website address. We shall now set the page you just created as the home page for your website.
Navigate to the WordPress Admin menu, hover your mouse on “Settings,” and click on “Reading” from the flyout menu.
Scroll to the “Front page display” option and check the radio button beside the “A static page” option. This setting tells WordPress to display a specific page on the website rather than the latest blog posts.
After the last step, a drop-down select menu with a list of pages appears just below the option. You can now select the “Home” page you just created.
The next step is to scroll down to the bottom of the settings page and click on the “Save Changes” button to apply the settings to your website.
After you have saved the settings, your website home page will change to the page you just created with Elementor.
10#Let’s Keep Creating the Rest of the Website
Of course, you would like to have other pages on your website besides the homepage. Some regular pages on most websites are the “About us” that tells the user what your site is all about, and the “Contact” page as well.
Hover the mouse on “Pages,” and click on “Add New,” then follow the steps outlined previously to create the new pages.
Other aspects of designing your WordPress website involves working with widgets. The Widgets settings are accessible from the Appearance > Widget menu option. The interface is intuitive; simply drag your preferred widgets to the appropriate positions and adjust the settings.
Most WordPress themes also come with “Theme Options” which you can fine-tune to align with your website needs. However, it is important to ensure that your choice of colors in the theme options aligns with the one you choose in Elementor. This will help create visual balance for your website.
Start Creating Websites Without Coding with Elementor
You can start creating website without writing a single code by combining the power of WordPress with the Elementor Page Builder plugin.
The program gives you a visual interface to bring your imagination to life and writes the codes for you behind the scene. These two powerful tools can help you create stunning websites and high-converting landing pages without learning HTML, PHP, or CSS.
So, start with a reliable hosting, install WordPress on it and use Elementor for easy drag-and-drop site building experience.
Do it. And for any questions during the process, don’t hesitate to leave us your comments. We will help you with creation your WordPress site with a breeze.