Blog Categorie Pagina

Blog Categorie Pagina Video Transcriptie

In this lesson we're going to create our products page. We're going to use a feature called the Category Blog to place teaser text from each of our product pages all onto a single page so that a site visitor can click on one menu link and get a quick overview of all our products. But they can also click further to read more about the products in depth.

We're going to start by creating our content So go to the Content menu and select the Article Manager. Remember here we can see the two articles we've already created and we're going to go ahead and create another four for our products. So click on the New button to begin. I'm going to enter the title for my product and place it in the category Products and then I'm going to enter the text description of the product. Once I've entered the text and formatted it how I like I'm ready for the next stage. We're going to use a special feature of Joomla. The ability to split content into an introduction and a full article. This way we can have a single page with just the introduction and automatically have a link to the article. To do that place your cursor where you want the break to be between the introduction and the main and we should place this ideally at the end of a paragraph. So place your cursor at the end of a paragraph and click on this icon here which is showing a line and a line will be drawn in the editor. So that all the text above this line will be shown as our introduction and then when we click onthe readmore link we will see the entire text. Both the introduction and the rest.

Now I am going to add an image to this article. I want this image to appear nicely both in the introduction and in the full view. On the blog page that we are creating where we see each of our products all at once this page will be in 2 columns so we have less space for the image. So instead of placing my image inside the article I'm going to scroll down and use this extra feature down here called Images and links. Here you can see we have two different fields for an intro image and a full article image. This allows me to use a smaller image on the blog page and a larger image on the full article page. I've already prepared my images. In my case I am using images that are 350px wide for the intro and 700px wide for the full. So let's go ahead and select those images. Click on the Select button and now we need to upload the images from our computer to our web site. If we scroll down on this page we can see an upload button. So lets choose the intro image we want to use Open it and click Start Upload. Once the uploads completed you can see a thumbnail of the image here and we can click on it to select. We know it's been selected because it's been entered here and then we press insert. We can see it's been filled in here and if we hover over this eye we get a thumbnail. Enter the ALT text remember this is very important for people with visual impairment or for search engines. And you can optionally place a caption on the image but we're not going to do that.

We then need to repeat the process for the full article image. This time we're going to upload the bigger image. So scroll down Choose the file Open Upload Make sure you select the correct one remember I've named them large, small so I don't make a mistake and Insert. And place in our Alt text. Now that we've done that we can save this one and create our second product. So just click on Save & New We need to repeat this for our remaining products and I am going to do this for four individual products. So lets do the next one which is Mint Tea Put in our description Move my cursor to the end of the paragraph where I want the break to appear and click on the readmore link. And that's put the line in. Then scroll down and select our first intro image Remember go down and choose the file. This is my small mint tea Open Upload Select Insert Put in the Alt tag and repeat that for the large image. Select the full article image Upload Make sure you select the correct one the new one, the large one Insert Put in your Alt text. and Save & New until you've completed all your products when you click Save & Close. As you can see I've now created four products. Breakfast Tea, Lemon Tea Milk Tea and Mint Tea.

I'm now going to create the menu link to these products. So select Menus and Main Menu Here we can see the 2 menu links that we created earlier we;re now going to create out third one. Select New and select the Type of menu item So we're linking to Articles and this a special one called Category Blog Which as the description says displays article introductions in single or multi-column layout. So let's select that We're now asked to select which Category. So we want to use Products. And give the menu a title. That's the words that will be linkable on the menu itself. I'm going to choose Our Tea When we've done press Save not Save & Close just press Save That's going to save that menu item but we're keeping it open because we might need to adjust it.

So let's go to our web site by clicking on our site name in the top left hand corner. Selecting our new menu link called Our Tea. Now we can see here that we have one article full width across the page and then we have two in in two columns and on our final one is just left on its own in one column. We're going to change this so that all the articles are in two columns. So return to our administrator menu and select the Advanced Options. If we scroll down we can find the Blog Layout Options As you can see these fields are currently blank and Joomla is using the Global Settings. So we're going to change those.

Currently we have one article going full width that's called a Leading Article We don't want that so we're just going to set that to zero. And then it's asking us how many articles we want to show the introduction for. So we're going to say 4 If you have more than 4 then Joomla will automatically create pagination. Or you can just increase this number to keep all your productson the same page. It's then asking us how many columns we want and we want 2 columns. And the final one, the number of links This is text links to additional products if you have more than 4. You will still get the pagination I don't really like that so I'm going to set that to zero. Again press Save and return to the web site and refresh the page.

We can see now we have one, two three, four articles in two columns We can see the small image here, our introduction text, a special link called readmore that's been automatically generated and when we click on that we get the full article with the bigger image. Now we have one single menu link that shows our site visitors all our products on one single page. If they want to know more any single product they just click on readmore to see the entire article.