Add a new web page using Joomla!
Monday, 03 September 2007

This video tutorial shows how to add a new page to a website using Joomla! 1.0.x, with easy step-by-step instructions covering the following core steps:

1. Create a new content item (article) for the page.
2. Load images to be used for a slideshow, using the Media Manager.
3. Create a menu to display the content, using the Menu Manager.
3. Configure the Site Modules to display a slideshow on the new page. 
 

The video shows how to create a new page on a website that is accessed when the user clicks on a 'new' menu under the 'Projects' main menu.

The page that is created has some text and an image slideshow that is only displayed on the new page. The slideshow is implemented using the mod_rokslideshow module.

Detailed instructions are given below the video. 

 

Step-by-step guide.

1. login to the admin console (backend) of the website.

2.  Create a new content item. Click on the 'Add new Content' icon on the Admin home page.

3. Give the new content item a title, and pick a Section and Category. Here we are createing the content in 'About' section, 'Projects' category.

4. Type the body of the page into the Intro and Main Body text boxes, then SAVE the content using the toolbar icons at the top of the screen.

5. Next, load the images that will be used for the slideshow into the Media Manager. Click on the 'Home' menu at the top-left of the screen, then click on the 'Media Manager' icon.

6. Navigate to a folder where you want to keep all the slideshow folders in (here we are using /stories/slideshow/projects/ ).

7. Create a new folder by typing the few folder name into the 'Create Directory' textbox then click the 'Create' toolbar icon.

8. Now, click on the new folder to 'go into it', and upload all the images that you want to have in the slideshow, by clicking on 'Browse' to select the image from your PC, then click the 'Upload' toolbar icon to move them into the Media Manager.

NOTE that the images can have any filename that you like, but remember that the images must be resized to fit the webpage before you upload them into the Media Manager.

9. Now we are going to create the Menu that users will click on to view the new page. We want this menu to appear as a 'sub-menu' under the 'Projects' main menu on the website.

10. click on the 'Menu Manager' from the Admin homepage, then click on the Menu Items iconfor the 'mainmenu'.

11. Click on the 'New' toolbar icon to create a new Menu Item.

12. The next screen allows you to select the type of menu item to be added. This controls what happens when a user clicks on the menu.

13. We want the content item that we created earlier to be displayed when the user clicks the menu, so select 'Link - Content Item' and then click the 'Next' toolbar icon.

14. Give the menu a Name - this is the text that will appear on the frontend of the website for the user - then select the content item to be displayed (i.e. the content that we have just created).

15. To get the menu to appear 'under' the 'Projects' menu, set the Parent Item to 'Projects'.

16 Click 'Save' toolbar icon.

17. The final step is to setup a slideshow module that is displayed when the user clicks on the new menu.

18. From the Admin homepage, click on the MODULES -> SITE MODULES menu.

19. create a copy of an existing slideshow module by selecting its tickbox, then click on the 'Copy' toolbar icon.

20. Click on the name of the new (copied) slideshow module to change its configuration.

21. Change the module name to something more memorable.

22. Change its 'Published' status to YES

23. set the menu items that you want this module displayed on. In this example its 'mainmenu - new'. You can select more than one option using shift-click (Windows) or Apple-Click (Mac).

24. Scroll down the page and edit the 'Images Directory' to be the folder that we loaded the slideshow images into earlier (using the Media Manager).

25. Save the module configuration by clicking the 'Save' toolbar icon.

26. That's it! check the website to make sure everyything looks right.

 

{moscomment}