Joomla Homepage

Joomla Homepage Video Transcriptie

Now that we've created the categories to store our content we can go ahead and begin creating our articles. Select the Content menu and this time select Article Manager. As you can see we currently have no articles on this web site so to create our first one which is going to be our homepage click on the New icon. On this simple form we can create our content. If your editor doesn't look like this one you need to go back to the JCE video and install the JCE editor. The first thing we want to do is to give our article a title. I'm going to call this one Welcome to the Tea Shop. The second thing is to place the article in a category so that we can find it easily in the future. Here we can see all the categories I created and I'm going to place this in the About category. We're now ready to enter our WYSIWYG editor and type our content.

Once you've typed in some content we need to start to make it look a little bit nicer. Perhaps with some headings and some images. Throughout these videos I will be introducing new features of the JCE editor in each video. Rather than going through them all in one go. First thing I am going to do is to create some headings inside the article, some subheadings. Place the cursor at the beginning of the line and type your subheading. Now that we have our subheading we need to format it to make it look nice. The best way to do this is to first of all highlight the text and then go to this dropdown menu that currently says paragraph. This contains all the standard HTML formatting strings. You can see here that they are displayed as they will be displayed on your web site depending on the design you are using. I am going to select Heading 2 for my first heading and then for a subheading I am going to again select the text and this time select Heading 3. This is not only deciding what the text will look like but it's also telling search engines like Google and Bing which pieces of content are most important. Heading 2 is clearly more important than Heading 3 which is then more important than the paragraph. Now that I've got some text I'm going to add a simple image to the homepage. Again place your cursor at the position in the text where you want the image to appear. I'm going to place it right at the top by the heading.

Now we need to select the image. Here you will see on the toolbar an icon that looks like a painting If you click on it you are now in the image manager of JCE. Down here at the bottom we can navigate through various folders and see various images that are already on the web site. I've already prepared the image on my computer. so I'm going to upload it Over here on the right there is an icon with an up arrow. When you select that you get the image uploader. You have a choice of dragging and dropping the files on to here or just browsing to find them. I am going to browse. This is the image I want it's called frontpage. Once it is here I can click on upload to upload it to my web site. Once complete we can see a preview of the image here and the dimensions. Remember, on a web site you want to make sure that your images are not too big. I usually find a width of about 300 pixels is good for my web site. With the image selected click on the up arrow and then we can see the details have been entered up here. The first thing we can see is the url. Don't worry about that. That's just the geeky code to tell your web site where the image lives.

This next one is very important. It's called the Alternate Text or sometimes known as the ALT text. You may see this on some web sites when you hover over an image a yellow box appears with a text description. That's what this is. It is essential that you make sure that the words you write here are descriptive of the image itself. Because Google and other search engines will use this as will Screen Readers for people with visual impairments. So I am going to change this alternate text and write in the words box of tea. The next thing we need to do is to set the alignment. If we look at this preview box here which is showing our image but is only showing dummy text we can see that by default the text will begin at the end of the image. That's not what I want. I want the image to be on the right hand side. So if I go the alignment I shall select right and you can see exactly the effect that will be created. Now that's done I scroll right to the bottom again and click on insert. We can see the image has been inserted on the right hand side.

Now we have created our article we need to publish it and make it visible on the web site. Because this is going on our front page and Joomla already has a special menu type for the front page created we are just going to set this tag here Featured to yes. Once we've done that if we press Save & Close we can see the article listed here in our Article Manager and if we go to the front end of our web site we can see the content we created. There is a short cut to opening the web site in a new window. That's just by clicking up here on the name of your site. Here we can see the web site as it is now with just our first piece of content describing our tea shop with our nice headers and our image. We're now ready to move on to the next lesson and create some more content for our site.