{"id":4042,"date":"2019-03-11T11:30:50","date_gmt":"2019-03-11T11:30:50","guid":{"rendered":"https:\/\/www.icdsoft.com\/blog\/?p=4042"},"modified":"2023-01-26T14:46:06","modified_gmt":"2023-01-26T14:46:06","slug":"how-to-build-a-wordpress-website-in-10-steps","status":"publish","type":"post","link":"https:\/\/www.icdsoft.com\/blog\/how-to-build-a-wordpress-website-in-10-steps\/","title":{"rendered":"How to Build a WordPress Website in 10 Steps"},"content":{"rendered":"\n<p>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. <\/p>\n\n\n\n<p>There are many CMS applications nowadays, but there is one that is undeniably the easiest and most popular one - <strong>WordPress<\/strong>. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow advgb-dyn-81ea5f49\">\n<p><strong>WordPress <\/strong>is a free and open-source content management system based on PHP &amp; 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.<\/p>\n<cite>From <a href=\"https:\/\/en.wikipedia.org\/wiki\/WordPress\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Wikipedia (opens in a new tab)\">Wikipedia<\/a><\/cite><\/blockquote>\n\n\n\n<p>What started out as a platform for personal blogging back in 2003, has grown into a solution serving millions of unique websites online. <u><em>WordPress now powers over 28% of the Internet<\/em><\/u>, 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.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow advgb-dyn-ff12c527\">\n<p>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.<\/p>\n<cite>From <a href=\"https:\/\/en.wikipedia.org\/wiki\/Content_management_system\" target=\"_blank\" rel=\"noopener\">Wikipedia<\/a><\/cite><\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-91addba9-e7a5-40d2-8aa5-098474dfa0ef\">1. Install WordPress (With Our Automated WordPress Installer)<\/h2>\n\n\n\n<p>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 <a href=\"https:\/\/tickets.suresupport.com\/faq\/article-1356\/en\/installing_wordpress_version_5_x_x\" target=\"_blank\" rel=\"noopener\">the instructions we have<\/a> if you are wondering how to install WordPress manually. On all <strong><a rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\" href=\"https:\/\/www.icdsoft.com\" target=\"_blank\">ICDSoft <\/a><\/strong>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. <\/p>\n\n\n\n<p>Just go to your <strong>Control Panel<\/strong>, access the <strong>WordPress Manager<\/strong>, click on the <strong>Install<\/strong> tab, and fill out the form.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-installer.png\"><img decoding=\"async\" width=\"766\" height=\"660\" data-src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-installer.png\" alt=\"wordpress hosting\" class=\"wp-image-3434 lazyload\" data-srcset=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-installer.png 766w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-installer-300x258.png 300w\" data-sizes=\"(max-width: 766px) 100vw, 766px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 766px; --smush-placeholder-aspect-ratio: 766\/660;\" \/><\/a><\/figure>\n\n\n\n<p>Press the <strong>Install <\/strong>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. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-bd8d5f3d-0055-4a0d-b24a-74d0ac788d25\">2. Meet the WordPress Dashboard<\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright is-resized advgb-dyn-14583839\"><a href=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-welcome-1.png\"><img decoding=\"async\" data-src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-welcome-1-1024x487.png\" alt=\"WordPress dashboard interface showing options for customization, posts, media, pages, comments, and quick draft.\" class=\"wp-image-3457 lazyload\" width=\"936\" height=\"445\" data-srcset=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-welcome-1-1024x487.png 1024w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-welcome-1-300x143.png 300w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-welcome-1-768x365.png 768w\" data-sizes=\"(max-width: 936px) 100vw, 936px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 936px; --smush-placeholder-aspect-ratio: 936\/445;\" \/><\/a><figcaption class=\"wp-element-caption\">The Welcome screen of the WordPress dashboard<\/figcaption><\/figure>\n<\/div>\n\n\n<p>All CMS applications have one thing in common - an administrative panel that allows you to configure and manage the software - the dashboard.<\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>On a new installation, you can access the dashboard by appending \"<strong>\/wp-admin<\/strong>\" (without the quotes) to the URL where you have installed it - e.g. <strong>http:\/\/example.com\/wp-admin<\/strong>.  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. <\/p>\n\n\n\n<p class=\"has-text-align-left advgb-dyn-e6da816e\">You can see the WordPress menus on the left side. The ones you will use often are <strong>Posts<\/strong>, <strong>Pages<\/strong>, <strong>Appearance<\/strong>, <strong>Plugins<\/strong>, and <strong>Settings<\/strong>. <\/p>\n\n\n\n<p>If you are asking yourself what's the difference between <strong>Posts<\/strong> and <strong>Pages, <\/strong>you are not alone. Perhaps the easiest way to differentiate between the two is that <u><em>posts have a published\/updated date<\/em><\/u>, while <u><em>pages are static entities designed to contain sort of \"timeless\" type of content<\/em><\/u>. In other words, <u><strong><em>Pages <\/em><\/strong><em>are useful for creating the \"About Us\", \"Contact\" and even the \"Home\" page, while <\/em><strong><em>Posts <\/em><\/strong><em>are useful for blog or magazine style content.<\/em><\/u> <strong>Pages <\/strong>do not have categories, but <strong>Posts <\/strong>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. <\/p>\n\n\n\n<figure class=\"wp-block-image advgb-dyn-e5621391\"><a href=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-settings-2.png\"><img decoding=\"async\" width=\"1024\" height=\"494\" data-src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-settings-2-1024x494.png\" alt=\"wordpress hosting\" class=\"wp-image-3459 lazyload\" data-srcset=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-settings-2-1024x494.png 1024w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-settings-2-300x145.png 300w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-settings-2-768x371.png 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/494;\" \/><\/a><figcaption class=\"wp-element-caption\">Define the Site Title and Tagline using strong keywords that introduce visitors to your website's content<\/figcaption><\/figure>\n\n\n\n<p>You can navigate to the <strong>Posts <\/strong>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. <\/p>\n\n\n\n<p>Now, you can go to the <strong>Settings <\/strong>menu (on the left side), and select <strong>General<\/strong>. Pay special attention to that, because this is where you define the URL of your website, its <strong>Title <\/strong>and <strong>Tagline<\/strong>. The Site <strong>Title <\/strong>and <strong>Tagline <\/strong>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-64a5c4cb-1e13-4b60-b1c3-0cc1f8cb9bbb\">3. Install a WordPress Theme<\/h2>\n\n\n\n<p>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 <a href=\"https:\/\/wordpress.org\/themes\/\" target=\"_blank\" rel=\"noopener\">wordpress.org\/themes<\/a>. For commercial themes, we would suggest checking some of the popular theme marketplaces. <\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"alignright is-resized advgb-dyn-8ed8e003\"><a href=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-themes.png\"><img decoding=\"async\" data-src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-themes-1024x314.png\" alt=\"WordPress dashboard with theme options: Twenty Nineteen active, alongside previews of Twenty Seventeen and Twenty Sixteen.\" class=\"wp-image-3462 lazyload\" width=\"627\" height=\"191\" data-srcset=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-themes-1024x314.png 1024w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-themes-300x92.png 300w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-themes-768x235.png 768w\" data-sizes=\"(max-width: 627px) 100vw, 627px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 627px; --smush-placeholder-aspect-ratio: 627\/191;\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>In order to install a new theme, navigate to the <strong>Appearance<\/strong> menu and select <strong>Themes<\/strong>. Press the <strong>Add New <\/strong>button, and you will be able to browse through all the WordPress themes that are available for free. Switch to the \"<strong>Popular<\/strong>\" 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. <\/p>\n\n\n\n<p>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 <strong>Install<\/strong> button and then once installed, click <strong>Activate<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image advgb-dyn-0a4c8168\"><a href=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-install.png\"><img decoding=\"async\" width=\"1024\" height=\"345\" data-src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-install-1024x345.png\" alt=\"WordPress theme selection screen with OceanWP theme highlighted, showing installation and preview options.\" class=\"wp-image-3466 lazyload\" data-srcset=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-install-1024x345.png 1024w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-install-300x101.png 300w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-install-768x259.png 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/345;\" \/><\/a><figcaption class=\"wp-element-caption\">Installing the free OceanWP theme from the WordPress dashboard<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-8b379473-d519-4ec0-a442-07357243a625\">4. Install Elementor<\/h2>\n\n\n\n<p>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 \"<strong>Begin installing plugins<\/strong>\" link. <\/p>\n\n\n\n<figure class=\"wp-block-image advgb-dyn-6eff17e3\"><a href=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-plugins.png\"><img decoding=\"async\" width=\"1024\" height=\"93\" data-src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-plugins-1024x93.png\" alt=\"wordpress hosting\" class=\"wp-image-3468 lazyload\" data-srcset=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-plugins-1024x93.png 1024w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-plugins-300x27.png 300w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-plugins-768x70.png 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/93;\" \/><\/a><figcaption class=\"wp-element-caption\">The OceanWP theme recommends installing three additional plugins.<\/figcaption><\/figure>\n\n\n\n<p>On the next screen, select the Elementor and Ocean Extra plugins, from the <strong><em>Bulk Actions<\/em><\/strong> drop-down menu select <strong><em>Install<\/em><\/strong>, and press the <strong><em>Apply<\/em><\/strong> button. You can also install plugins manually from the Plugins menu on the left side. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-required-plugins.png\"><img decoding=\"async\" width=\"1024\" height=\"256\" data-src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-required-plugins-1024x256.png\" alt=\"WordPress admin screen listing plugins: Elementor, Ocean Extra, and WPForms, with checkboxes to install or apply options.\" class=\"wp-image-3473 lazyload\" data-srcset=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-required-plugins-1024x256.png 1024w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-required-plugins-300x75.png 300w, https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/wordpress-oceanwp-required-plugins-768x192.png 768w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/256;\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-5938599f-daad-402f-b8fd-68441de29bf6\">5. Add Your Website Pages<\/h2>\n\n\n\n<p>Let's start by deleting the default \"Sample Page\". Navigate to the <strong>Pages<\/strong> menu, in order to delete the \"Sample Page\". <\/p>\n\n\n\n<p>Since we will be creating a basic company website, the pages that we are going to create are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Home (Index)<\/li>\n\n\n\n<li>Services<\/li>\n\n\n\n<li>About<\/li>\n\n\n\n<li>Contact<\/li>\n<\/ul>\n\n\n\n<p>To set up those pages, go to the <strong>Pages <\/strong>menu on the left side, select <strong>Add New<\/strong>, and enter the title. You can leave the page blank for now, and just click on <strong>Publish<\/strong>. A short video detailing the process is available below. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/Add-New-Page.webm\"><\/video><\/figure>\n\n\n\n<p>Create the <em>Services<\/em>, <em>Contact<\/em>, and <em>About <\/em>pages in the same way. You can later add new pages as you like. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-de2c3014-41ae-496b-aba3-3a04226c5fac\">6. Set Up Your Website Menu<\/h2>\n\n\n\n<p>You can check the video below for an overview of the process. <\/p>\n\n\n\n<p>The next step would be to create the menu of our website. Go to the <strong>Appearance<\/strong> menu on the left side, select <strong>Customize<\/strong>. There, click on <strong>Top Bar<\/strong> -&gt; <strong>General<\/strong>, and uncheck the option \"<strong><em>Enable Top Bar<\/em><\/strong>\". <\/p>\n\n\n\n<p>Now, you are ready to add all the items to your website menu. Go back to the start of the <strong>Customize<\/strong> menu, select <strong>Menus<\/strong>, and press the <strong>Create New<\/strong> <strong>Menu<\/strong> button. Then you can name your menu, let's say \"<strong>Main Menu<\/strong>\", set the Menu Locations to \"<strong>Main<\/strong>\", press Next. Now, press the \"Add Items\" button, and click on the \"+\" (plus) sign next to <strong>Home<\/strong>, <strong>About<\/strong>, <strong>Services<\/strong>, and <strong>Contact<\/strong>. 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. <\/p>\n\n\n\n<p>Once you've finished, press the <strong>Publish <\/strong>button.  When you press the <strong>Publish <\/strong>button, the page will refresh, and you should see the menu you just created on the top right of your website.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/Create-New-Menu.webm\"><\/video><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"advgb-toc-c43a648a-2685-4016-8f7d-48daf26c0a45\">Menu Tweaks<\/h4>\n\n\n\n<p>We will make a few small tweaks that are going to make our menu look better. <\/p>\n\n\n\n<p>The upper left part of the menu where it says \"<em>ICDSoft WP Project<\/em>\" is taken automatically from the WordPress Site Title (<strong>Settings <\/strong>-&gt; <strong>General <\/strong>-&gt; <strong>Site Title<\/strong>). 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 <strong>Customize <\/strong>menu -&gt; <strong>Typography <\/strong>-&gt; <strong>Logo<\/strong>. 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\". <em><strong>You can go to <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">fonts.google.com<\/a> to see all 900 licensed Google fonts.<\/strong><\/em> <\/p>\n\n\n\n<p>We will also make the menu uppercase, so that it stands out more. From the <strong>Customizing <\/strong>menu -&gt; <strong>Typography <\/strong>-&gt; <strong>Main Menu<\/strong> -&gt; <strong>Text Transform<\/strong>  select <strong>Uppercase<\/strong>. <\/p>\n\n\n\n<p>Another neat tweak we will make is to add an <u>underline<\/u> effect to our menu items. Go back to <strong>Customizing <\/strong>-&gt; <strong>Header <\/strong>-&gt; <strong>Menu <\/strong>-&gt; <strong>Links Effect<\/strong> and select <strong>Underline <\/strong>From Left. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"advgb-toc-bb48de79-f5fb-4eba-8eb1-108427b7192f\">Remove Search<\/h4>\n\n\n\n<p>Under that same section, scroll down and find the <strong>Search Icon Style<\/strong> drop-down menu, and set it to <strong>Disabled<\/strong>. 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. <\/p>\n\n\n\n<p>Make sure to press the <strong>Publish<\/strong> button to save all these changes you've applied to the main menu.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-ee525834-5dd1-4403-9a2e-964ec11a05ae\">7. The Home Page<\/h2>\n\n\n\n<p>The website menu is ready, and the next step is the <strong>Home <\/strong>page. <\/p>\n\n\n\n<p>You can close the Customizing area by pressing the X button at the upper left corner. Then go to <strong>Pages <\/strong>-&gt; <strong>All Pages<\/strong> -&gt; <strong>Home<\/strong>. The first thing you should do is change the Content Layout to \"100% Full Width\".  From the <strong>Title <\/strong>menu on the left side, Disable the \"Display Page Title\". Press the <strong>Update<\/strong> button to save those changes. <\/p>\n\n\n\n<p>Now, you are ready to use Elementor for the very first time. Go ahead and press the <strong>Edit with Elementor<\/strong> button on top. <\/p>\n\n\n\n<p>Right now, you should have the <strong>Home <\/strong>page opened in Edit mode using Elementor. The great thing about Elementor is that you can <strong>Insert<\/strong> all types of different <strong>Blocks<\/strong> 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 <strong>Template<\/strong>, and just change its text. <u>It's a full-blown website builder, so you don't have to start with a blank page and wonder what to do.<\/u> <\/p>\n\n\n\n<p>We will take full advantage of the power of Elementor and use a template for our Home page, so press the <strong>Add Template<\/strong> button and use the Search bar to find and <strong>Insert<\/strong> a template called \"<em>tourism 1<\/em>\", as seen on the video. <\/p>\n\n\n\n<figure class=\"wp-block-video advgb-dyn-68570279\"><video controls src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/home-page-elementor.webm\"><\/video><figcaption class=\"wp-element-caption\">Inserting an Elementor Template for the Home page<\/figcaption><\/figure>\n\n\n\n<p>The default page looks quite good and all that's left for us to is to change the contents to make it our own. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"advgb-toc-8e134a18-fe59-4b98-8aab-20b9957aff2b\">HERO Video<\/h4>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>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 <a href=\"https:\/\/www.youtube.com\/watch?v=FjU_x1106pg\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">here<\/a>. 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. <\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>Finally, we will add a new Elementor block at the bottom of the page, and that's done by pressing the <strong>Add Template<\/strong> button, switching to the <strong>Blocks<\/strong> tab, and inserting a ready-made block that suits your need. In our case that's the very first one. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/index-elementor.mp4\"><\/video><\/figure>\n\n\n\n<p>Once you are ready designing your page in Elementor, you should press the <strong>Update<\/strong> 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 <strong>Exit To Dashboard<\/strong> button at the bottom. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"advgb-toc-7bca5062-e091-4dc0-bfe3-31ab2a455052\">Set the Home Page<\/h4>\n\n\n\n<p>The last thing you need to do is to make this page the home page for your website. Navigate to the <strong>Appearance <\/strong>-&gt; <strong>Customize menu<\/strong> -&gt; <strong>Homepage <\/strong>Settings. There, switch the \"Your homepage displays\" to \"A static page\" and for the Homepage drop-down menu select \"Home\". Press the <strong>Publish<\/strong> button, and you are finally ready to check out your index page at your website URL (e.g. http:\/\/www.example.com). <br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-e465cdbc-fc0d-4029-9ebc-489a58d4e499\">8. The About Page<\/h2>\n\n\n\n<p>Go to the <strong>Pages <\/strong>menu and click on the <strong>About <\/strong>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 <strong>Edit with Elementor<\/strong> button, and you are ready to work on the About page.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p> Press the <strong>Add Template<\/strong> 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 <strong>Add Template<\/strong> 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. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/about-elementor.mp4\"><\/video><\/figure>\n\n\n\n<p>Once you are ready with the page, press the <strong>Update<\/strong> button, and go back to the WordPress dashboard.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-4daa7a34-7d96-4ceb-a008-169d624ef87e\">9. The Services Page<\/h2>\n\n\n\n<p>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 <strong>Edit with Elementor<\/strong> button. There, use the Add Template button, search for \"services\" and Insert one of the blocks that you like. Then, press the <strong>Add Template<\/strong> button again, search for \"faq\" and Insert one of the blocks. You can refer to the video to see how the page would look. <\/p>\n\n\n\n<figure class=\"wp-block-video advgb-dyn-e3dca699\"><video controls src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/services-elementor.mp4\"><\/video><figcaption class=\"wp-element-caption\">Building the Services Page<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-4c3e3aba-fdf8-44e2-8dbe-f30548ad9045\">10. The Contact Page<\/h2>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>We will install a new plugin that sets up a contact form for you. Go to the <strong>Plugins<\/strong> menu on the left pane, select <strong>Add New<\/strong>, and search for \"contact form 7\". Go ahead, <strong>Install<\/strong> and <strong>Activate<\/strong> it, and then go to the <strong>Settings<\/strong> 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 <strong>Edit<\/strong> 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. <\/p>\n\n\n\n<p>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 <strong>Edit with Elementor<\/strong> button. <\/p>\n\n\n\n<p>After Elementor has loaded, switch the category to Contact and <strong>Insert<\/strong> 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. <\/p>\n\n\n\n<figure class=\"wp-block-video advgb-dyn-3d6cfc7b\"><video controls src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/02\/contact-page.mp4\"><\/video><figcaption class=\"wp-element-caption\">Setting up the Contact page<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"advgb-toc-cb45f882-c718-4329-bf90-6db92ccf3092\">Check Your New Website<\/h2>\n\n\n\n<p>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. <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/03\/website-complete.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will show you how to build a complete website with WordPress in just 10 steps.<\/p>\n","protected":false},"author":1,"featured_media":4184,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[3,11],"tags":[],"class_list":{"0":"post-4042","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-how-to","8":"category-wordpress"},"author_meta":{"display_name":"ICDSoft","author_link":"https:\/\/www.icdsoft.com\/blog\/author\/icdsoft\/"},"featured_img":"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-973439_1920-300x168.jpg","featured_image_src":"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-973439_1920.jpg","featured_image_src_square":"https:\/\/www.icdsoft.com\/blog\/wp-content\/uploads\/2019\/03\/wordpress-973439_1920.jpg","author_info":{"display_name":"ICDSoft","author_link":"https:\/\/www.icdsoft.com\/blog\/author\/icdsoft\/"},"coauthors":[],"tax_additional":{"categories":{"linked":["<a href=\"https:\/\/www.icdsoft.com\/blog\/category\/how-to\/\" class=\"advgb-post-tax-term\">How To<\/a>","<a href=\"https:\/\/www.icdsoft.com\/blog\/category\/wordpress\/\" class=\"advgb-post-tax-term\">WordPress<\/a>"],"unlinked":["<span class=\"advgb-post-tax-term\">How To<\/span>","<span class=\"advgb-post-tax-term\">WordPress<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 8 years ago","modified":"Updated 4 years ago"},"absolute_dates":{"created":"Posted on March 11, 2019","modified":"Updated on January 26, 2023"},"absolute_dates_time":{"created":"Posted on March 11, 2019 11:30 am","modified":"Updated on January 26, 2023 2:46 pm"},"featured_img_caption":"","series_order":"","_links":{"self":[{"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/posts\/4042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=4042"}],"version-history":[{"count":57,"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/posts\/4042\/revisions"}],"predecessor-version":[{"id":11599,"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/posts\/4042\/revisions\/11599"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/media\/4184"}],"wp:attachment":[{"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=4042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/categories?post=4042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.icdsoft.com\/blog\/wp-json\/wp\/v2\/tags?post=4042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}