- We're looking at the Other Locations and Neighborhoods page, which is in the About Us section of the website. This is a fairly long article, it goes on and on and on without a lot of formatting here, And it's great content. It's talking about all of the different Landon locations in San Francisco, in Paris, Vienna, and London and so forth. But the way that it's currently formatted, it's very hard to read, it's hard to skim over, and perhaps you're not interested in San Francisco at all, but your'e really interested in learning more about Tokyo.
You can click on those names, and expose a bit of text that would explain those particular items in a bit more detail. This is totally possible to set up with Joomla!, and I'd like to go ahead and show you how to do that. So here on the backend of Joomla!, we're gonna go back to our content, to our article manager, and we're going to find our Other Locations article. And so here that is, and you see here, there's the big box of text that we have going on here.
Down at the bottom of the editing window, you'll notice that we have this item here called Page Break. So we're gonna make heavy use of the Page Break button here. First of all, what we'll do is we'll put these page breaks pretty much right before the text that we're going to wanna split up. So I'm putting my cursor here before the "S" in San Francisco, and I'll hit the Page Break button. And I'm gonna call this one San Francisco. San Francisco. Just type the same thing twice, and say "Insert Page Break".
And you'll see this gray dotted line that appears here on the page. Then you can click right before the words "P" in Paris, and you can click Page Break, and we can say "Paris", same thing twice, and you'll see that we get a second, gray dotted line. The gray dotted lines aren't actually here, of course. This is just a marker here within the Joomla! interface that indicates where these page breaks are occurring. I'm gonna continue to go through here and enter the rest of these page breaks.
Basically it's done the same way every time. Click right before the city name, and then I'll enter the city name in the Page Break dialog box. OK, so there's all the page breaks here. And, now I'm just gonna go ahead and save this. And when I come back to the front end of the website and I hit refresh, what I get is the following. I get a list of neighborhoods over here on the side, and I get this bit of text here in the middle with this page one of ten. So it's sorta my introductory text, and I can hit the Next button, and I'm sorta skipping through here.
So there's San Francisco, here's Paris, and so on and so forth. OK, so this is what Joomla! gives you out of the box as the formatting for something that comes out of the page breaks. However, there are other options. So let me show you what those are. Go ahead and hit Save and Close on this article. And then we're going to go to Extensions, Plugin Manager. And the plugin that we're gonna look for is the page break plugin, which is just maybe a few more than 10 down the page here.
It's Content-Pagebreak. Go ahead and click that. And this is a little bit of a configuration screen for how we can configure the page breaks. Whether we're going to show the Site Title, Article Headings, and so forth. The one I really want to concentrate on is the Presentation Style. So right now we have it set up to be Pages. Let's go ahead and set this up to be Tabs, just to see what that does. And if you go ahead and say Save, come back and refresh the front-end of your website, you'll see now that we have our cities configures as tabs.
Unfortunately, we have so many cities here, that the tabs wrap onto two lines. So that would look really awesome if we had a few less cities, but maybe for this particular situation this doesn't work very well. So another option that we have here, is the Sliders. And Slider's basically accordion panel kind of things. Go ahead and say Save again, refresh your webpage, and now you've got a list of cities like this, where you can click on the name of the city, and the information will get pulled up here right within your article.
So that's a little bit interactive, and it's a little bit more interesting to look at. You can certainly go ahead and explore these other various settings that are here. If some of them are not relevant, for example this Table of Contents, was that long column of cities that you saw when we took a first look at this Page Break page. And you can show that or hide that. Some of these settings don't necessarily apply to Sliders, but feel free to try out these various settings and see their impact here on your webpage.
Note: For installation and setup instructions, see the course Installing and Running Joomla! 3: Local and Web-Hosted Sites.
- Touring the Joomla! interface
- Creating and editing categories
- Adding links and images to articles
- Creating basic menus
- Adding version control and keywords
- Configuring category lists
- Creating a dropdown menu
- Changing display settings
Skill Level Beginner
Q: This course was updated on 05/30/2018. What changed?
A: We added a chapter on the new features in Joomla 3.8.6.