You have successfully registered a domain and hosting for your website.<\/figcaption><\/figure>\nClick the CREATE ACCOUNT button and proceed to the next step, which is to create a password for your hosting account.<\/p>\n
Type your recommended password in the \u2018Create Password\u2019 and \u2018Retype Password\u2019 fields and click the CREATE ACCOUNT button.<\/p>\nCreate a strong password for your hosting account.<\/figcaption><\/figure>\nYou should create a strong password that includes:<\/p>\n
\nA capital letter<\/li>\n More than 8 characters<\/li>\n A number<\/li>\n A special character like ! $ %<\/li>\n<\/ul>\nMake sure that you keep your password safe and don\u2019t share it with other people. Anyone with the password can gain access to your website.<\/div>\n
If everything was ok, you\u2019ll get the message that your account is ready. Click the GO TO LOGIN button.<\/p>\nYour hosting account is read. Click the go to login button.<\/figcaption><\/figure>\nStep 6: Log in to your hosting account<\/h4>\n You\u2019re now ready to log in to your hosting account, install WordPress, and start customizing your website.<\/p>\n
Enter your domain name and password (selected in step 5) and click Login.<\/p>\nEnter the username and password to login to your hosting account.<\/figcaption><\/figure>\n3. Install WordPress<\/h3>\n Once you have registered your domain name and signed up for hosting, the next step is to choose the software to use to build your website. The website software is also referred to as a CMS (Content Management System).<\/p>\n
In this tutorial, we\u2019ll be using WordPress which is the most popular CMS. WordPress is free, very easy to use, and flexible when it comes to web design. It\u2019s also SEO friendly which means that your website can potentially rank high in search engines.<\/div>\n
You can use WordPress for any type of website including a personal website, blog, business website, or an online shop.<\/p>\n
To set up your website to use WordPress all you have to do is follow the simple instructions below.<\/p>\n
You\u2019ll be presented with a 3-step wizard. The first step is to answer a couple of questions about the purpose of your website. Don\u2019t spend any time on this, this is just informational. Select the options as shown below and click CONTINUE.<\/p>\nSelect the options as shown above and click continue.<\/figcaption><\/figure>\nGo through the questions in STEP 2 and click CONTINUE TO THEME SELECTION.<\/p>\n
4. Add a website theme<\/h3>\n The next step is to select a theme for your website. A theme defines the layout, colors, and look N feel of your site.<\/p>\n
You can choose any theme you want but I strongly recommend following the instructions in this guide to create a website like the one demonstrated at the beginning of this tutorial.<\/div>\n
Don\u2019t worry, changing a website theme is very easy, so if you change your mind, you can change it later.<\/p>\n
For now, click the ASTRA theme and finalize the process.<\/p>\nSelect the ASTRA theme and click continue.<\/figcaption><\/figure>\nThat\u2019s it, in a few minutes your new WordPress website will be ready. Continue with the next steps to see how to customize and view your new website.<\/p>\nWell Done! You’ve just installed WordPress on your website.<\/figcaption><\/figure>\n5. Customize your website design and layout<\/h3>\n Once the above process is completed, you\u2019ll be presented with a screen like the one shown below.<\/p>\nClick My Sites to view and configure your website.<\/figcaption><\/figure>\nThis is the home page of your hosting account. As you can see, there are different options like Marketplace, Email & Office, Domains, and Advanced. You don\u2019t have to do anything with them now but feel free to familiarize yourself with each option.<\/p>\n
To customize your website, we need to log in to WordPress. Click MY SITES from the left menu.<\/p>\n
Move the mouse over the website thumbnail and click LOGIN TO WORDPRESS.<\/p>\nMove the mouse over the website thumbnail and login to WordPress<\/figcaption><\/figure>\nWhat you see now is the WordPress backend. This is the software you\u2019ll use to customize your website, add new pages, create content, and everything else that has to do with website management.<\/p>\n
You\u2019ll notice at the top a button with a label \u2018Coming Soon Active\u2019. This is to warn you that your website is not yet available to the Internet but it\u2019s shown only to you. So, the first step is to make it public.<\/p>\n
Wait for about 5 minutes and then click the COMING SOON ACTIVE button. This is needed so that the connection between your domain name and hosting provider is completed successfully.<\/p>\nClick the Launch your site button to get your website live.<\/figcaption><\/figure>\nDon\u2019t worry about the technicalities, spend a few minutes familiarizing yourself with the other options, and when ready click the \u2018Coming Soon Active\u2019 button and then the LAUNCH YOUR SITE button.<\/p>\n
In a couple of seconds, your website will be published on the Internet and the message below will appear. Click on the VIEW SITE button.<\/p>\nYour website is live! Click the View Site button.<\/figcaption><\/figure>\nA new browser tab will open and your website will look similar to this:<\/p>\n
At this stage, you can also check your website by opening a new browser window and typing your domain name in the search bar.<\/div>\n
This is how your website should look now.<\/figcaption><\/figure>\nThis is how the default WordPress website looks for our selected theme.<\/p>\n
Let\u2019s see how easy is to customize this \u2018ugly\u2019 website to look like the example above.<\/p>\n
Go back to the previous tab (WordPress backend) and select THEMES from the APPEARANCE menu.<\/p>\n
This is the place you can change your theme. As you can see there are many free themes available, you can move the mouse over a theme to preview it and install it.<\/p>\nWordPress has a number of free website themes to choose from.<\/figcaption><\/figure>\nSince we already selected a theme, we\u2019ll go directly to the theme options to customize our website. Select ASTRA OPTIONS from the left menu.<\/p>\nSelect ASTRA options from the left menu.<\/figcaption><\/figure>\nThis is the place to change the colors of your website, add your own logo, change the layout of the different pages, and perform a number of other functions.<\/p>\n
Instead of trying to build a website from scratch, you\u2019ll use the \u2018Importer Plugin\u2019 to import the layout and content of a pre-built website.<\/p>\n
This is easier than starting a website from zero.<\/p>\n
Click on the INSTALL IMPORTER PLUGIN.<\/p>\nClick the Install Importer Plugin Option<\/figcaption><\/figure>\nOnce the plugin is installed, you’ll be asked to select a Page Builder.<\/p>\n
A page builder is a piece of software that is installed on WordPress and makes website building a very easy process, especially for beginners.<\/div>\n
For this example, we\u2019ll use GUTENBERG which is the page builder that comes for free with WordPress (it was created by the WordPress team).<\/p>\n
Select GUTENBERG as the page builder.<\/p>\nSelect Gutenberg<\/figcaption><\/figure>\nYou\u2019ll be presented with a number of layouts. You can choose anyone you like depending on the type of website you want to create.<\/p>\n
To complete this tutorial, select the PET CARE website.<\/p>\nSelect your preferred website layout.<\/figcaption><\/figure>\nClick the IMPORT COMPLETE SITE.<\/p>\nClick the Import Complete Site button<\/figcaption><\/figure>\nYou\u2019ll be shown a popup with some options. Make sure that you select the options as shown below and click the IMPORT button.<\/p>\nClick the Import button.<\/figcaption><\/figure>\nIn a few minutes, the process will be completed. Click the VIEW SITE.<\/p>\nClick the View Site button.<\/figcaption><\/figure>\nYou\u2019ll notice that your website shows the right colors but the homepage does not look the way it is supposed to look. No worries, we\u2019ll fix this in a minute.<\/p>\n
Go back to the WordPress admin and select SETTINGS > READING from the left menu.<\/p>\n
Configure the HOMEPAGE and POSTS PAGE dropdowns as shown below and then click the SAVE CHANGES button.<\/p>\nSet your homepage and blog page and click save changes.<\/figcaption><\/figure>\nViola! Your new website is ready and it looks beautiful! Well Done!<\/p>\n
Now, open a new tab and type in your domain name. Your website should look like this:<\/p>\nYour website should look like this!<\/figcaption><\/figure>\nClick the menu options (About me, Blog, Contact) to see how the pages look.<\/p>\n
When you\u2019re ready, continue with the rest steps to see how easy is to change your homepage and the content of the pages.<\/p>\n
6. Customize your homepage<\/h3>\n To change the content, colors, or images of your homepage, follow the instructions below.<\/p>\n
While viewing your homepage in a browser, click the EDIT PAGE button from the top bar menu. This will open the homepage in EDIT mode.<\/p>\nClick the Edit Page button to edit your homepage.<\/figcaption><\/figure>\nNote: <\/strong>If the top bar menu is not available, then it means you\u2019re not logged in to WordPress. In this case, you have to login first by going to my.bluehost.com and login with your credentials as we did in step 2 above.<\/div>\nAs you can see, the page is separated into a number of sections. Click with the mouse to select and edit a section.<\/p>\n
Let\u2019s see how to change the homepage slogan to \u201cWelcome to my awesome website\u201d.<\/p>\n
Click anywhere in the surrounding box, delete the existing sentence, and add your preferred wording.<\/p>\nChange the homepage text and click Update.<\/figcaption><\/figure>\nTo SAVE your changes, click the UPDATE button. That\u2019s it, it\u2019s that simple!<\/p>\nClick the Update button to save your changes.<\/figcaption><\/figure>\nYou can follow the same steps to change anything that you see on the homepage.<\/p>\n
You can even remove a section by selecting it, clicking on the three dots menu, and then choosing REMOVE BLOCK from the menu.<\/p>\nHow to delete a website block.<\/figcaption><\/figure>\nNote:<\/strong> If after working on your homepage you changed your mind and you want to switch to a different layout or theme, you can select APPEARANCE > THEMES from the left menu and repeat the process from STEP 5.<\/div>\n7. Add a contact form<\/h3>\n The CONTACT us option is available in the main menu but not yet activated. To create a contact page we first need to create a contact form. To do this we will use a WordPress plugin.<\/p>\n
A plugin is a piece of software that adds extra functionality to WordPress. There are hundreds of free and paid plugins you can use. You can find these by clicking the PLUGINS option from the left menu.<\/p><\/blockquote>\n
Here are the steps to follow:<\/p>\n
\nClick WP FORMS from the left menu.<\/li>\n Click ALL FORMS<\/li>\n Click ADD NEW<\/li>\n<\/ul>\nClick Add New to create a new contact form.<\/figcaption><\/figure>\nEnter a name for your form and select the SIMPLE CONTACT FORM option.<\/p>\nCreate a new contact form.<\/figcaption><\/figure>\nA nice form is created for you and now it needs to be added to a page.<\/p>\n
Click the EMBED button (top right corner) and copy the form shortcode as shown below.<\/p>\nCopy the contact form shortcode.<\/figcaption><\/figure>\nSo far, we have created a new form, now we need to create a contact page, add our shortcode, and configure the main menu to show the page.<\/p>\n
Click the X button (top right corner) to close the form builder and select PAGES > ALL PAGES from the left menu.<\/p>\n
Click the ADD NEW button to create a new page.<\/p>\nClick the Add New button to create a new page.<\/figcaption><\/figure>\nAdd a title for the page and paste the shortcode copied from the previous step.<\/p>\n
Your page should look like this in edit mode:<\/p>\nAdd the form shortcode and click Publish.<\/figcaption><\/figure>\nClick the PUBLISH button (top right corner).<\/p>\n
You can also click VIEW PAGE to see how your contact page looks.<\/p>\n
The last step is to add the contact page to the menu.<\/p>\n
\nClick the WORDPRESS ICON (top left corner) to go back to the WordPress admin.<\/li>\n Click the CUSTOMIZE button from the Topbar menu.<\/li>\n Select HEADER > PRIMARY MENU.<\/li>\n<\/ul>\nIn the \u2018Button Link\u2019 type ‘\/contact’ (which is the name of our contact page) and click PUBLISH.<\/p>\nConfigure your menu to show the contact page.<\/figcaption><\/figure>\nThat\u2019s it, you\u2019ve just added a contact form to your brand new website! Go ahead and test it by clicking CONTACT from the main menu.<\/p>\n
8. Add content for essential pages<\/h3>\n Besides a great homepage, a good website needs to have some other important pages. In particular:<\/p>\n
\nAbout page<\/li>\n Privacy policy page<\/li>\n Blog main page<\/li>\n<\/ul>\nLet\u2019s see step-by-step how to add these pages to your website.<\/p>\n
About Page<\/h4>\n As you can see our website already has an About page. You can find it by clicking the ABOUT ME option from the main menu.<\/p>\n
Editing the contents of this page is the same as before. Click the EDIT button from the top bar menu, make the necessary changes using the block editor and UPDATE the page.<\/p>\n
Make sure that the About page tells your story. Explain who you are, what you do, and how your website can help<\/em> your visitors.<\/p>\nPrivacy Policy Page<\/h4>\n All websites need to have a privacy policy page. Our theme has a privacy policy page but it\u2019s not published. Let\u2019s see how to change the contents of the page and publish it.<\/p>\n
\nClick PAGES > ALL PAGES from the left menu.<\/li>\n Locate the \u2018Privacy Policy – Draft \u2018 and click EDIT.<\/li>\n Change the contents of the page and click PUBLISH.<\/li>\n<\/ul>\nThe process of editing a page is the same for all pages.<\/p>\n
Blog Main Page<\/h4>\n A blog page shows a list of your latest blog posts. All WordPress themes have a blog main page by default.<\/p>\n
You can click BLOG from the main menu and see how your blog page looks. When you publish a new blog post, it will automatically appear there.<\/p>\n
9. Add your logo<\/h3>\n To complete your website setup, you need to upload your own logo. Your logo should be something unique and representative of your brand.<\/p>\n
Changing your logo is easy, follow the steps below:<\/p>\n
Click the CUSTOMIZE button from the top bar menu.<\/p>\nClick the Customize button.<\/figcaption><\/figure>\nFrom the left menu select HEADER and then SITE IDENTITY.<\/p>\n
Click the CHANGE LOGO button.<\/p>\nClick change logo to upload your own logo.<\/figcaption><\/figure>\nYou\u2019ll be prompted to select an image from your computer.<\/p>\n
For the best results, make sure that your logo is according to the suggested image dimensions.<\/p>\nUpload a new logo with the correct dimensions.<\/figcaption><\/figure>\nTo SAVE your changes click the blue PUBLISH button located on top.<\/p>\n
10. What to do after launch<\/h3>\n You should proud of yourself, you just learned how to create a website from scratch that looks beautiful and professional!<\/p>\n
Let\u2019s recap the steps we\u2019ve followed:<\/p>\n