Chapter 6 [ 157 ] Pop quiz – test your site article expertise 1. The arcle editor screen in Joomla! allows you to do which of these three things? a. Formang arcle text. b. Inserng images. c. Controlling the start and end date of publishing. 2. What's the use of the Joomla! Media Manager? a. It allows you to manage all sorts of media (images, movie les, and MP3 les). b. It allows you to upload images and insert them into an arcle. c. It allows you to insert images that come with the default Joomla! installaon. 3. You open an exisng arcle in the Joomla arcle editor and see a red doed line. What does that mean? a. Text below the line will not be displayed. b. The arcle text has exceeded the maximum number of characters allowed. c. If needed, Joomla! can separately display the intro text and the full arcle text. 4. How can you break a long arcle into a series of short ones? a. By manually creang several individual arcles. b. By entering page breaks in an arcle. c. By entering Read more links in an arcle. 5. What's the funcon of archiving arcles? a. Archived arcles cannot be edited any more. b. Archived arcles aren't displayed in the frontend. c. Archived arcles are displayed in a special Archive part of the frontend. Download at Wow! eBook WWW.WOWEBOOK.COM Creang Killer Content: Adding and Eding Arcles [ 158 ] Summary In this chapter, you've mastered creang arcle content. This is what we covered: To create new arcles or to edit exisng ones, the Arcle Manager is your starng point. From there, click on New or select an arcle and click on Edit. The arcle eding screen allows you to style your contents and add images. If you want more text eding control, you can set the text editor to show an extra ("Extended") set of buons. The Media Manager allows you to create new image folders. This way, you can keep the image les on the web server organized. There are several ways to display arcle content. It can be one connuous text page, but you can also split the arcle into an introductory text and the actual arcle body text. To break a long arcle into several interlinked subpages, you add p age breaks to the arcle text. In the backend you've sll got one arcle, in the frontend it will display as a series of pages. You've now mastered the recipe that enables you to create as much killer content as you like. But all of the beauful site content that may be accumulang in your secons and categories is useless if your site visitors fail to noce it's there. So, it's me to focus on your site's "shop windows": the home page and other pages that draw your visitors' aenon to the content. In the next chapter, you'll learn how to create an inving home page and alluring overview pages; give visitors an irresisble preview of what your site has to oer. Download at Wow! eBook WWW.WOWEBOOK.COM 7 Welcoming Your Visitors: Creating Attractive Home Pages and Overview Pages In the previous chapters, you've laid the ground work for your site. First, you created content containers (secons and categories), then, you created actual content (arcles). You've got a bunch of neatly organized, aracve arcles ready to be explored by a worldwide web surng audience. But how can you ence those casual web surfers to actually read all that valuable content? Why would they bother to drill down the content of your site? That's where the home page and overview pages come in. The home page lures your visitors in; Joomla!'s overview pages—"second level home pages" that provide a quick overview of secon and category contents—direct people to the arcles they could be interested in. In this chapter we will: Customize the home page sengs Create a dierent kind of home page Create and tweak secon and category overview pages Create dierent layouts for dierent types of overview pages So, let's start tweaking the SRUP home page! Download at Wow! eBook WWW.WOWEBOOK.COM Welcoming Your Visitors: Creang Aracve Home Pages and Overview Pages [ 160 ] Up to now, you've set up the home page and and overview pages using the default opons. But you might have noced that Joomla! oers dozens of parameters for these page types. Changing these parameters (sengs) can completely alter the way content is presented. In fact, dierent sengs can create very dierent looking pages. Let's eecvely welcome your visitors and ence them to read all of your valuable content—enter the magic world of home page and overview pages. In the following screenshots, you'll see what page types we're talking about. On the le-hand side is the example home page in the default Joomla! installaon, on the right-hand side is an overview page showing contents of the News category: Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 7 [ 161 ] Why do you need overview pages, anyway? Typically, Joomla! will lead your site visitor to a secon or category content in three steps. Between the Main Menu and the actual content, there's a secondary page to show secon or category contents: 1. A visitor clicks on a menu link. 2. They are taken to an overview page with arcle previews and links. 3. They click to read the full arcle. Download at Wow! eBook WWW.WOWEBOOK.COM Welcoming Your Visitors: Creang Aracve Home Pages and Overview Pages [ 162 ] As you can see, what's on the home page and the overview pages (and how it's presented) is vitally important to your site. It's the teaser texts, images, and hyperlinks on these pages that lead your visitor to the actual content. Of course, people don't always arrive at your site via the home page. Search engine results might take them directly to any page—including overview pages. One more reason to make those pages as encing as you can! Overview page, landing page, secondary home page? Joomla! doesn't have a name for overview pages. Among web builders they're also known as secon start pages, category pages, department pages, or landing pages. Whatever you like to call it, it's the same thing: a navigaonal page that provides an overview of site categories. In this book we'll call them secon or category overview pages. Creating the perfect home: Mastering home page layout The main content area in any Joomla! home page is driven by the Front Page Component—it's the thing that tells Joomla! what to display in the main content area (the mainbody) of the home page. When you've installed Joomla! with the sample data, the home page mainbody will show: One introductory arcle text over the full width of the mainbody Four intro texts divided into two columns A list of links to other arcles You can see this in acon in the screenshot at the beginning of this chapter. This default setup is suited for many types of content rich sites. But you're certainly not limited to using this one combinaon of intro texts and links in the home page mainbody. Joomla!'s Front Page Component oers you a vast amount of choices on how to display content in it, and what to display. Changing the way your home page is arranged It's your client on the phone, telling you that—happy as they are with their new site—some SRUP sta members nd the home page layout too distracng. They don't like the newspaper look that displays the content columns in dierent widths. Would you be so kind as to tone things down a lile? If you could quickly show them an alternave layout, that would be ne. You hang up and dive into the Front Page sengs. Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 7 [ 163 ] Time for action – rearrange the layout of articles on the home page You decide to rearrange the items on the Front Page. Let's say you want a maximum of two intro texts, both in just one column. Apart from this, you would like to show a few hyperlinks to other arcles that could be of interest to visitors browsing the home page. 1. Navigate to Menus | Main Menu. In the Menu Item Manager, click on Home to edit the sengs of the home page. 2. In the Parameters (Basic) secon, the default view sengs are shown. There's 1 leading (full width) intro text, 4 intro texts are shown in 2 columns, and there are 4 hyperlinks. If we want a single column on the front page, we'll set the number of intros and columns to zero. Change the values as follows: set # Leading to 2, # Intro to 0, Columns to 0, and # Links to 4. Download at Wow! eBook WWW.WOWEBOOK.COM Welcoming Your Visitors: Creang Aracve Home Pages and Overview Pages [ 164 ] 3. Click on Preview to see the changes on the frontend. There are now two full-width intro texts. Because up to now only three arcles have been assigned to the home page, beneath the two intro texts just one arcle link is displayed. When you'll assign more arcles to the home page, this list will grow to a maximum of four hyperlinks. The previous two screenshots show the home page before and aer. The updated home page on the right-hand side features the same four arcles presented dierently in just one column. Instead of four intro texts, the new page shows two intro texts and two hyperlinks. What just happened? The Parameters of any menu item allows you to inuence the looks of the hyperlink's desnaon page. In this case, you've tweaked the Home Menu Item sengs to change the contents of the home page mainbody. The magic numbers of the Parameters (Basic) are really powerful as dierent values can completely change the way content is displayed. Download at Wow! eBook WWW.WOWEBOOK.COM Chapter 7 [ 165 ] Have a go hero – tweak the home page settings to your liking Joomla! oers you a long list of other sengs you can use to adjust the home page layout. Navigate to Menus | Main Menu | Home and have a look at Parameters (Advanced). First, you will probably want to set Paginaon to Hide. That way, you'll hide the paginaon links (< Start Prev Next Last >) that Joomla! displays when there are more arcles available than can be shown on the home page as intro texts. Showing these links on a home page seems suited for web log home pages, where visitors expect to be able to browse through possibly long lists of blog entries. On other types of sites, web users aren't likely to expect mul-page home pages. Unwanted Paginaon Links can be set to Hide in the menu link's Parameters (Advanced) secon. Have a look at the Parameters (Component) to further customize the home page output. These parameters allow you to hide arcle details, such as Author Name, Created Date and Time, and Modied Date and Time. On a website that's maintained by just one or a few authors, or a website that isn't updated regularly, you might want to hide that informaon. In this image, the Parameters (Component) are set to show arcle details, such as the author name and creaon date. Hiding unnecessary arcle details reduces "arcle cluer": images and details that may distract the reader. There's more room for actual content in the same space. On a home page you'll probably also want to hide all of the special funcon icons (set Icons, PDF Icon, Print Icon, and E-mail Icon to Hide). It's unlikely that visitors want to print or e-mail parts of your home page content—let alone create a PDF document of part of the home page. Download at Wow! eBook WWW.WOWEBOOK.COM Welcoming Your Visitors: Creang Aracve Home Pages and Overview Pages [ 166 ] Without paginaon and arcle details, the home page looks similar to the following screenshot. It's a clean looking page, focusing on just two arcle intro texts without any distracng irrelevant informaon, links, or buons. Less is more: the result is a simple but appealing home page without too many intro texts or details. Adding items to the Front Page In the More Arcles … hyperlink list of your home page, just one hyperlink is shown. That's because only three arcles are set to display on the Front Page. To add some more, navigate to Content | Arcle Manager. Add any arcle by clicking on the red cross in the Front Page column to the right-hand side of the arcle tle. The cross changes to a green check mark. In the following example, we've selected a News item (SRUP Magazine Looking for Authors) to be featured on the Front Page: Download at Wow! eBook WWW.WOWEBOOK.COM . (set Icons, PDF Icon, Print Icon, and E-mail Icon to Hide). It's unlikely that visitors want to print or e-mail parts of your home page content—let alone create a PDF document of part of the home. arcle. c. It allows you to insert images that come with the default Joomla! installaon. 3. You open an exisng arcle in the Joomla arcle editor and see a red doed line. What does that mean? a Home Pages and Overview Pages [ 160 ] Up to now, you've set up the home page and and overview pages using the default opons. But you might have noced that Joomla! oers dozens of parameters