In the next chapter, you'll learn how to create an inviting home page and alluring overview pages; give visitors an irresistible preview of what your site has to offer... Welcoming Your
Trang 1Chapter 6
[ 157 ]
Pop quiz – test your site article expertise
1 The article editor screen in Joomla! allows you to do which of these three things?
a Formatting article text
b Inserting 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 files, and
MP3 files)
b It allows you to upload images and insert them into an article
c It allows you to insert images that come with the default
Joomla! installation
3 You open an existing article in the Joomla article editor and see a red dotted line What does that mean?
a Text below the line will not be displayed
b The article text has exceeded the maximum number of characters allowed
c If needed, Joomla! can separately display the intro text and the full
article text
4 How can you break a long article into a series of short ones?
a By manually creating several individual articles
b By entering page breaks in an article
c By entering Read more links in an article.
5 What's the function of archiving articles?
a Archived articles cannot be edited any more
b Archived articles aren't displayed in the frontend
c Archived articles are displayed in a special Archive part of the frontend
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 2Creating Killer Content: Adding and Editing Articles
[ 158 ]
Summary
In this chapter, you've mastered creating article content This is what we covered:
To create new articles or to edit existing ones, the Article Manager is your starting point From there, click on New or select an article and click on Edit.
The article editing screen allows you to style your contents and add images If you want more text editing control, you can set the text editor to show an extra ("Extended") set of buttons
The Media Manager allows you to create new image folders This way, you can keep
the image files on the web server organized
There are several ways to display article content It can be one continuous text page, but you can also split the article into an introductory text and the actual article body text
To break a long article into several interlinked subpages, you add page breaks to the article text In the backend you've still got one article, 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 beautiful site content that may be accumulating in your sections and categories
is useless if your site visitors fail to notice it's there So, it's time to focus on your site's "shop windows": the home page and other pages that draw your visitors' attention to the content
In the next chapter, you'll learn how to create an inviting home page and alluring overview pages; give visitors an irresistible preview of what your site has to offer
Trang 3Welcoming 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 (sections and categories), then, you created actual
content (articles) You've got a bunch of neatly organized, attractive articles
ready to be explored by a worldwide web surfing audience But how can you
entice 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 section and category contents—direct people to the articles they could be interested in.
In this chapter we will:
Customize the home page settings
Create a different kind of home page
Create and tweak section and category overview pages
Create different layouts for different types of overview pages
So, let's start tweaking the SRUP home page!
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 4Welcoming Your Visitors: Creating Attractive Home Pages and Overview Pages
[ 160 ]
Up to now, you've set up the home page and and overview pages using the default options But you might have noticed that Joomla! offers dozens of parameters for these page types Changing these parameters (settings) can completely alter the way content is presented In fact, different settings can create very different looking pages
Let's effectively welcome your visitors and entice 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 left-hand side is the example home page in the default Joomla! installation, on the right-hand side is
an overview page showing contents of the News category:
Trang 5Chapter 7
[ 161 ]
Why do you need overview pages, anyway?
Typically, Joomla! will lead your site visitor to a section or category content in three steps
Between the Main Menu and the actual content, there's a secondary page to show section
or category contents:
1 A visitor clicks on a
menu link
2 They are taken to
an overview page
with article previews
and links
3 They click to read the
full article
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 6Welcoming Your Visitors: Creating Attractive 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 enticing 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 section start pages, category pages, department pages, or
landing pages Whatever you like to call it, it's the same thing: a navigational
page that provides an overview of site categories In this book we'll call them
section 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 article text over the full width of the mainbody
Four intro texts divided into two columns
A list of links to other articles
You can see this in action 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 combination of intro texts and links in the home page mainbody Joomla!'s Front Page Component offers 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 staff members find the home page layout too distracting They don't like the newspaper look that displays the content columns in different widths Would you be so kind as to tone things down a little? If you could quickly show them an alternative layout, that would be fine You hang up and dive into the Front Page settings
Trang 7Chapter 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 articles 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 settings of the home page
2. In the Parameters (Basic) section, the default view settings 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
Trang 8Welcoming Your Visitors: Creating Attractive 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 articles have been assigned to the home page, beneath the two intro texts just one article link is displayed When you'll assign more articles to the home page, this list will grow to a maximum of four hyperlinks
The previous two screenshots show the home page before and after The updated home page on the right-hand side features the same four articles presented differently 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 influence the looks of the hyperlink's
destination page In this case, you've tweaked the Home Menu Item settings to change the contents of the home page mainbody The magic numbers of the Parameters (Basic)
are really powerful as different values can completely change the way content is displayed
Trang 9Chapter 7
[ 165 ]
Have a go hero – tweak the home page settings to your liking
Joomla! offers you a long list of other settings 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 Pagination to Hide That way, you'll hide the pagination links (< Start Prev Next Last >) that Joomla! displays when there are more articles 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 multi-page home pages
Unwanted Pagination Links can be set to Hide in the menu link's Parameters
(Advanced) section.
Have a look at the Parameters (Component) to further customize the home page output These parameters allow you to hide article details, such as Author Name, Created Date and
Time, and Modified 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 information
In this image, the Parameters (Component)
are set to show article details, such as the
author name and creation date
Hiding unnecessary article details reduces "article clutter": 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 function 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
Trang 10Welcoming Your Visitors: Creating Attractive Home Pages and Overview Pages
[ 166 ]
Without pagination and article details, the home page looks similar to the following
screenshot It's a clean looking page, focusing on just two article intro texts without any distracting irrelevant information, links, or buttons 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 Articles … hyperlink list of your home page, just one hyperlink is shown That's
because only three articles are set to display on the Front Page To add some more, navigate
to Content | Article Manager Add any article by clicking on the red cross in the Front Page
column to the right-hand side of the article title 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: