Loading...
Saturday 13 July 2013

Learn to Create a Homepage of Your Website in Easy Steps

Wordpress is growing fast because it is easy to handle, having thousands of free themes and plugins. The procedure for starting website is described in the article "Create Your Wordpress Website Step-by-Step." You can change the password settings and installation of wordpress theme after reading the article " Installation of wordpress theme, adding and Editing website pages".  Now in this article we will edit the homepage so that it explains your content in its place of the theme’s demo content. Let’s modify the picture first.

We’re moving to be substitute the demo picture with our own, so we require our photo to vigorous. The finest and easiest way to construct it well is to upload it to the Media Library and resize it via Wordpress. As it is fact that on the computer, everything is measured in pixels. The picture on your homepage is 360 pixels broad by 280 pixels high (i.e., 360px by 280px). The sequence is width comes before height.

To place a picture on our homepage it should be the perfect size for the gap, first we require a picture. Obtained a superior one? In the following image you can observe there's picture of car we will replace it with our required picture. Let’s move to upload it to the homepage of your website.




1. In the admin menu, click Media.
2. Click the Add New option.
3. Click the Select Files button.
 

4. Choose and select the picture on your computer .
5. Click the Open or Ok button.
Important! You need to just uploaded a picture from your computer to your website! Now let’s make changes the picture so that it fits and looks vigorously. 

Note That!
You only required to upload pictures in this manner for your website homepage.  To insert a picture on any other page you would just need to upload it exactly to the page.

6. Select Media.
7. Click on the name of picture you desire to edit/ simply click on edit.

8. Click Edit Image .


9. You can observe that the image dimensions(width & height) are bigger (if you select a big photo). Now our purpose is to make this picture smaller so that it will be fit to our page.
10. Now Click the Scale Image button.
11. Select the height 280 in the second box.
12. Click the Scale button.
Notice that your image is smaller than previous! This will fix the height of image, now let’s make changes in the width by cropping off the sides of the picture.

13.  Click On the picture and drag a selection with the help of your mouse.
14. Now adjust the width and height box up to 360 : 280 ( Try to get as close to 360 : 280 as possible if you are unable to reach exactly at these dimensions). 
15. Select the Crop button.


16. Click the Save button.

This was all about we have saved a smaller picture that fits completely with the homepage ( in our theme it fits with the image of car). Now we move to update it on the homepage.

17. Again Click the Media button.
18. Select the picture you have just edited.

19. In the Save Section,  Where you find File URL, highlight it, then copy the entire file location.

Now in order to paste the image into the homepage we will follow these steps.

20. In the left side of Dashboard Menu click on Appearance.
21. Select the Theme Options.
22. Now in theme options click on Home Page Top Settings.
23. In the Top Feature Image paste the File URL in the given area (the one that you copied in Step 19).
24. Click  the Save All Changes button. 

After all above job when you visit to your website you should see your updated picture on the front of the page. This image replaced the image of car as give blow.

Let’s create a page link with this image.
25. Again move back to the Theme Options >>  Home Page Top Settings. Now in the section: Top Feature Image Link, type about. We will link the image to the about page, so that when visitors click the photo it will send them to the about page.This is optional you can link with any other page.
                                                                                                
26. In the same section: Top Feature Heading is where your headline of your pretty website goes.
27.  Top Feature Description: Type in your description text for your website. It will show to the right of the image.  
Note That:
Do you observe the weird looking <br> tag that I added in description? That tag asks the computer to create line spaces (or line breaks). Use them wherever you want to create line breaks!
28. Top Feature Button Text: What will your button show for visitors? We wrote here: Learn More.
29. Top Feature Link: What page will your button link to? To link it to the about page, we write about.
30. Click on Save All Changes.


When you visit your website, it should now appear something like this:

Note: you can see that the read more button is replaced by learn more button.

Next let’s make changes for the lower sections of the homepage.



31. Again click Appearance.
32. Select Theme Options.                               
33. Now click on Homepage Feature Area.

                                        

In the following screenshot, we can see the text area that relates with the location we’ll be editing on the homepage.


34. Write in the information, similarly as we did in the image, with the First Feature Heading as your title of the lower section of homepage, your First Feature Description as the text just below your title, and the First feature Link as the page you want it to link to when visitors visits and click it. Then type in the information for the Second Feature Heading and Second Feature Description and so forth.


35. Click the Save All Changes button.


 Next we are moving to add a youtube video for the Right Feature Section as it is shown in homepage.
                                                    
36.  For the above target visit the Youtube.
37.  Now make a search for a video for example we write here create a website.
38.  Click on the video you would like to add in your homepage.


39.  Just below the video, click on Embed.
40. In the Video size section: choose Custom size and put a number 300 in the first box. The second box will change automatically.
41. Select the code and copy it.

42.   Paste this code into the Right Feature Section.
43.   Click the Save All Changes button.                             



After following above steps your home page should look like this:



In the next article we will explain how to change footer settings of your homepage and how to add your website logo, and how can you remove sample page. If you found it is informative article please share it and continue reading...

1 comments:

CraZY Good SeO said...

Great step by step instruction Sheeraz...I followed your advice and ended up with a beautiful homepage!

Thanks so much!

Steve Hall

 
TOP