How to Use Joomla Core Page Break Plugin

How to Use Joomla Core Page Break Plugin

If you have a super long page of content, it’s nice to be able to break it up into visually appealing pieces so it can be consumed more easily. Sure, there are lots of third-party extensions that do this but why use them when you can use Joomla core.

Joomla core’s Page Break Plugin breaks up long pages of content with accordions, tabs, or “pages.”

For simple applications, you don’t have to add a third-party extension. Learn how to use Page Break and its limitations.

The Page Break plugin is a Content plugin. This means that it works inside the com_content section of the site. Page Break only works in Articles. Page Break does not work in Category descriptions. To start, let’s take a look at the options for the plugin.

  • Go to Extensions -> Plugins

extensions plugins

  • Type Page Break into the Search field
  • Press enter on your keyboard

content pagebreak

  • Click the Plugin Name Content – Page Break

The Plugin tab shows the different settings you have available out of the box. I normally leave them all as they are at first.

pagebreak plugin teab

The Description tab explains how to insert page breaks whether with your WYSIWYG editor or via HTML.

pagebreak description tab

Back in the Plugin tab, the Presentation Style is the field that gives us a ton of flexibility. There are three options of Presentation Style:

  1. Pages
  2. Sliders
  3. Tabs

In order to see how each of these displays, let’s set up a page.

  • Close out of the Page Break Plugin by clicking the Close button in the Top Toolbar
  • Click on Content -> Articles -> Add New Article

content articles new

  • Enter a Title and leave the Alias field blank.
  • Select a Category. (We will select the Blog Category.)
  • Enter some content. (I’m just going to use some Latin from lipsum.org and paste it into the article.)

I’ve added four paragraphs of Latin. Now we need to add the Page Breaks.

  • Press enter after the first paragraph of Latin.
  • Click the Page Break button in the editor.

Your button may look different from the button displayed. There is a Page Break button at the bottom of the Content area that accomplishes the same thing.

pagebreak buttonpagebreak button 2pagebreak button 3

A modal window will pop up when you click the Page Break button. There are two fields.

  1. Page Title
  2. Table of Contents Alias

I normally use the Page Title field and leave the Table of Contents Alias blank.

  • Enter a Page Title into the field. (I’ll enter Page Break 1)

enter pagebreak

  • Repeat those steps to add a page break between each of the remaining paragraphs.

Your article should look similar to the screen capture below:

article pagebreaks

  • Click Save in the Top Toolbar

Pages Presentation Style

  • Check the article on the frontend (you may need to create a new menu item for your article).

pages style pagebreaks

You can see that the Pages Presentation Style shows the content above the first Page Break insert in the main content area with a Page 1 of 4 at the top of it. On the right-hand side of the screen, there’s:

  1. a title of Article Index
  2. the Title of the Article
  3. the Title of each Page Break below it
  4. a link to All Pages.
  5. a “next” button at the bottom of that portion of content

By clicking on the Page Break titles, you will see the content under each of the Page Break titles. Before the content it will say Page 2 of 4, etc. Below the content there will be a prev and/or next button.

This is my least favourite Presentation Style of the Page Break plugin. Let’s try another one.

  • Click Save & Close in the Test Article you were just working in

Slider Presentation Style

  • Go to Extensions -> Plugins.

You’ll likely see your previous search for Page Break. If not, search for Page Break and click on the Content – Page Break Plugin.

  • Change Pages to Sliders in the Presentation Style field

sliders pagebreak presentation style

  • Click Save & Close
  • Refresh the test article on the frontend

sliders pagebreak style frontend

Now you have an accordion like presentation of your content. The first Page Break always displays the text underneath. The second and third you would click on the title to reveal the text underneath.

This is a handy way to show FAQs or perhaps testimonials.

Tabs Presentation Style

What does the Tabs Presentation Style look like? Let’s check.

  • Click on Extensions -> Plugins and open the Content – Page Break Plugin on the backend of Joomla
  • Change the Presentation Style to Tabs
  • Click Save & Close
  • Refresh your test article on the frontend

This shows each of your Page Break Titles and the content beneath them in Tabs.

  • Click the title of each and the content will display below each tab title

tabs presentation style pagebreak

I like the Tab Presentation Style for this article, so we’ll leave it like that.


Limitations of the Page Break Plugin

1. You cannot have text below the final page break. If I wanted to have text below the tab area, it isn’t possible. Anything below the third page break would display inside the Page Break 3 tab.

2. In the Slider Presentation Style, you cannot have the first page break content collapsed and not show the text until the title is clicked.

3. You cannot use multiple Presentation Styles on the site. You must choose one Presentation Style and use that site wide. You cannot use Sliders on one page and Tabs on another.

To get around these limitations, you would need to use third-party extensions.

For basic needs, the Page Break Plugin is a great way to divide up content into manageable and consumable pieces without the need of a third-party extension.

Author

  • Jennifer Gress

    Jenn has worked with Joomla since 2006 and for clients since 2010. She co-organised the JUG Bay Area for many years and volunteers for the Joomla! Project regularly. Originally from Santa Cruz, CA, she now lives near Austin, TX.

0 0 votes
Article Rating
Subscribe
Notify of
1 Comment
Oldest
Newest
Inline Feedbacks
View all comments
daniel-lemaire
6 months ago

On point 1 text below could you try <section> ….</section>? It works for me

1
0
Would love your thoughts, please comment.x
()
x