In this article, we will show you how to build a complete website in 10 steps. With the latest CMS (content management system) tools available this is so easy that even non-tech professionals can do it in a few spare hours of their time.
There are many CMS applications nowadays, but there is one that is undeniably the easiest and most popular one - WordPress.
WordPress is a free and open-source content management system based on PHP & MySQL. Features include a plugin architecture and a template system. It is most associated with blogging but supports other types of web content including more traditional mailing lists and forums, media galleries, and online stores.
From Wikipedia
What started out as a platform for personal blogging back in 2003, has grown into a solution serving millions of unique websites online. WordPress now powers over 28% of the Internet, and it just keeps growing. There is no limit to the types of websites that can be created with it. Regardless of the website you are looking to have, you can build it with WordPress. From company pages to online stores, and even systems for online reservations.
Based on market share statistics, the most popular content management system is WordPress, used by over 28% of all websites on the internet, and by 59% of all websites using a known content management system, followed by Joomla and Drupal.
From Wikipedia
1. Install WordPress (With Our Automated WordPress Installer)
Like most CMS applications, WordPress is composed of files and a database. The usual way to install WordPress is to download the latest WordPress archive, upload it to your hosting account (via FTP or some other way), extract the files, set up a MySQL database and a MySQL user. Finally, you have to run the installation wizard and complete the steps there. In fact, you can check the instructions we have if you are wondering how to install WordPress manually. On all ICDSoft accounts you don't need to go through that - you can just use the one-click WordPress installer in the online Control Panel for your account.
Just go to your Control Panel, access the WordPress Manager, click on the Install tab, and fill out the form.
Press the Install button and you will see a message with a link to your new WordPress website and the dashboard, where you can log in to manage it. Now that you have WordPress installed, we can continue with the actual making of your website.
2. Meet the WordPress Dashboard
All CMS applications have one thing in common - an administrative panel that allows you to configure and manage the software - the dashboard.
This is where you log in to add or modify the content on your website, change the way it looks, and basically do everything that's related to building and maintaining your website.
On a new installation, you can access the dashboard by appending "/wp-admin" (without the quotes) to the URL where you have installed it - e.g. http://example.com/wp-admin. The login credentials are the ones you entered during the installation process. In case you've forgotten them, you can use the "Lost your password" link on the dashboard page to reset them.
You can see the WordPress menus on the left side. The ones you will use often are Posts, Pages, Appearance, Plugins, and Settings.
If you are asking yourself what's the difference between Posts and Pages, you are not alone. Perhaps the easiest way to differentiate between the two is that posts have a published/updated date, while pages are static entities designed to contain sort of "timeless" type of content. In other words, Pages are useful for creating the "About Us", "Contact" and even the "Home" page, while Posts are useful for blog or magazine style content. Pages do not have categories, but Posts do. This allows you to set up WordPress to show all posts that are part of a certain category sorted by the date of publishing.
You can navigate to the Posts menu to see the default "Hello World!" post. If you click it, the dashboard will load it in Edit mode allowing to edit the contents of the post. Actually, we don't really need this post, so you can press the "Move to trash" button.
Now, you can go to the Settings menu (on the left side), and select General. Pay special attention to that, because this is where you define the URL of your website, its Title and Tagline. The Site Title and Tagline introduce your website to your audience and most WordPress themes are set to show them on every post. They are also two of the first things bots will find, so it's essential to use strong keywords from a purely SEO standpoint.
3. Install a WordPress Theme
WordPress themes allow you to change the look of your website in just a few clicks. A great number of free WordPress Themes are available at wordpress.org/themes. For commercial themes, we would suggest checking some of the popular theme marketplaces.
The great thing about WordPress themes, both free and paid, is that they can save you loads of time. A lot of themes also come with demo content that you can import, so you can get a replica of the demo website you were looking at and just change the text.
In order to install a new theme, navigate to the Appearance menu and select Themes. Press the Add New button, and you will be able to browse through all the WordPress themes that are available for free. Switch to the "Popular" tab, and you should see the OceanWP theme among the first results. Or, you could just type in "oceanwp" (without the quotes) in the search field.
This tutorial is based on the OceanWP theme, so we recommend that you go with it, in order to easily follow all the steps listed here. Hover over the OceanWP theme and click on the Install button and then once installed, click Activate.
4. Install Elementor
Upon activating OceanWP, WordPress will show you a message that the theme recommends adding three plugins - Elementor, Ocean Extra, and WPForms. Plugins add extra features to your website, so press the "Begin installing plugins" link.
On the next screen, select the Elementor and Ocean Extra plugins, from the Bulk Actions drop-down menu select Install, and press the Apply button. You can also install plugins manually from the Plugins menu on the left side.
5. Add Your Website Pages
Let's start by deleting the default "Sample Page". Navigate to the Pages menu, in order to delete the "Sample Page".
Since we will be creating a basic company website, the pages that we are going to create are:
- Home (Index)
- Services
- About
- Contact
To set up those pages, go to the Pages menu on the left side, select Add New, and enter the title. You can leave the page blank for now, and just click on Publish. A short video detailing the process is available below.
Create the Services, Contact, and About pages in the same way. You can later add new pages as you like.
6. Set Up Your Website Menu
You can check the video below for an overview of the process.
The next step would be to create the menu of our website. Go to the Appearance menu on the left side, select Customize. There, click on Top Bar -> General, and uncheck the option "Enable Top Bar".
Now, you are ready to add all the items to your website menu. Go back to the start of the Customize menu, select Menus, and press the Create New Menu button. Then you can name your menu, let's say "Main Menu", set the Menu Locations to "Main", press Next. Now, press the "Add Items" button, and click on the "+" (plus) sign next to Home, About, Services, and Contact. This will add these pages to your website menu. The Home menu item is a custom link to your website URL, so make sure that the link is correct.
Once you've finished, press the Publish button. When you press the Publish button, the page will refresh, and you should see the menu you just created on the top right of your website.
Menu Tweaks
We will make a few small tweaks that are going to make our menu look better.
The upper left part of the menu where it says "ICDSoft WP Project" is taken automatically from the WordPress Site Title (Settings -> General -> Site Title). You could place an actual logo image, but we will stick to the basics here and have it as regular text. We will change the font of that text though. This is done from the Customize menu -> Typography -> Logo. There, change the Font Family to something of your liking. You can choose from the Standard Fonts, or you can choose from one of the many Google fonts available. We will go with the second on the list called "Abel". You can go to fonts.google.com to see all 900 licensed Google fonts.
We will also make the menu uppercase, so that it stands out more. From the Customizing menu -> Typography -> Main Menu -> Text Transform select Uppercase.
Another neat tweak we will make is to add an underline effect to our menu items. Go back to Customizing -> Header -> Menu -> Links Effect and select Underline From Left.
Remove Search
Under that same section, scroll down and find the Search Icon Style drop-down menu, and set it to Disabled. This will get rid of the search function that's added by default on the main menu. This function isn't really useful for a company website with just four pages.
Make sure to press the Publish button to save all these changes you've applied to the main menu.
7. The Home Page
The website menu is ready, and the next step is the Home page.
You can close the Customizing area by pressing the X button at the upper left corner. Then go to Pages -> All Pages -> Home. The first thing you should do is change the Content Layout to "100% Full Width". From the Title menu on the left side, Disable the "Display Page Title". Press the Update button to save those changes.
Now, you are ready to use Elementor for the very first time. Go ahead and press the Edit with Elementor button on top.
Right now, you should have the Home page opened in Edit mode using Elementor. The great thing about Elementor is that you can Insert all types of different Blocks to your page and position and modify them the way you want, or you can even add a ready-made page in the form of a Template, and just change its text. It's a full-blown website builder, so you don't have to start with a blank page and wonder what to do.
We will take full advantage of the power of Elementor and use a template for our Home page, so press the Add Template button and use the Search bar to find and Insert a template called "tourism 1", as seen on the video.
The default page looks quite good and all that's left for us to is to change the contents to make it our own.
HERO Video
This template has a video playing in the background giving it a modern look. The theme allows you to insert a YouTube link, but you can also upload a video file to your account with us.
We will change the default video, and since it's a company website, we will go with a 4k video of Manhattan, New York, which you can check out here. Highlight the entire top section, switch to the Style tab and paste the link to the YouTube video of your choice. You can also set the start time and we will set it to the 50 second mark. Then you can change the text that's over the video by double-clicking on it and just start typing in.
You can also click on the green button labeled "Join The Next Tour" and change it to "Our Services", and on the left side you can enter the URL of the page that the button should link to. In our case that would be http://www.example.com/services.
We will remove certain elements that don't really fit our needs, and that's done by clicking on them and pressing the Delete key. If it's an entire section, you can hover over it and press the X button.
Finally, we will add a new Elementor block at the bottom of the page, and that's done by pressing the Add Template button, switching to the Blocks tab, and inserting a ready-made block that suits your need. In our case that's the very first one.
Once you are ready designing your page in Elementor, you should press the Update button at the bottom left corner. Then, in order to close Elementor, click on the hamburger menu on the upper left corner and click on the Exit To Dashboard button at the bottom.
Set the Home Page
The last thing you need to do is to make this page the home page for your website. Navigate to the Appearance -> Customize menu -> Homepage Settings. There, switch the "Your homepage displays" to "A static page" and for the Homepage drop-down menu select "Home". Press the Publish button, and you are finally ready to check out your index page at your website URL (e.g. http://www.example.com).
8. The About Page
Go to the Pages menu and click on the About page. As with the Home page, switch the Content Layout to "100% Full Width" and Disable the "Display Page Title" from the Title menu on the left side. Press the Edit with Elementor button, and you are ready to work on the About page.
We will add three Template Blocks to our page, and you will just have to change their text and images. You can use different blocks depending on your needs.
Press the Add Template button, select the Blocks tab, search for "about" and we will Insert the first Block on the third row. For the second one, press the Add Template button, search for "team" and pick one of the free blocks that suit your preferences. For the last block, search for "testimonials" and Insert one of the free testimonial type of Blocks. You can refer to our short video on the process below.
Once you are ready with the page, press the Update button, and go back to the WordPress dashboard.
9. The Services Page
You should be under the Pages menu of the WordPress dashboard, so click on the Services page, and set the Content Layout to "100% Full Width" and also Disable the "Display Page Title". Press the Edit with Elementor button. There, use the Add Template button, search for "services" and Insert one of the blocks that you like. Then, press the Add Template button again, search for "faq" and Insert one of the blocks. You can refer to the video to see how the page would look.
10. The Contact Page
The last page we need to do is the contact page. We will have a page that shows a Google Map of your company's location, the work hours, address, and contact details. And of course, we will add a contact form, so that visitors can easily get in touch with you.
We will install a new plugin that sets up a contact form for you. Go to the Plugins menu on the left pane, select Add New, and search for "contact form 7". Go ahead, Install and Activate it, and then go to the Settings screen for that particular plugin. The plugin comes with a ready-made form and usually all its default settings are OK for most users, so you don't have to do too much. Click on Edit under the "Contact form 1" title (that's the ready-made form that comes with the plugin). The most important bit is to make sure you have a valid "To" (recipient) email address under the Mail tab. That's where the contact form submissions would be sent, so you can enter your email there. The other crucial part is that you need to Copy the shortcode that's displayed on top. Keep it in your clipboard as you will need it later when building the actual Contact page.
Now you are ready to build the Contact page with Elementor, so navigate to the Pages menu and click it. Set it to "100% Full Width" and Disable the "Display Page Title". Press the Edit with Elementor button.
After Elementor has loaded, switch the category to Contact and Insert one of the blocks that you like. You should edit the Map location to match your address, and also replace the other contact details with your own. The last step is to insert the Contact Form that you configured. This is done by dragging-and-dropping one of the Basic Elementor blocks from the left side. In our case, we will use a block called Shortcode, which should be near the bottom of the list. You should paste the shortcode obtained from the Contact Form 7 plugin into the Shortcode block's field labeled "Enter your shortcode". We've prepared a step-by-step video that you can check out below.
Check Your New Website
The one thing that's left is to check your work and browse through the pages to make sure everything's OK. To do that, log out of the WordPress dashboard, in order to view your website as an actual visitor.