Panel Blog Layout

The Panel Blog is a custom layout that presents the articles in a specified category in a blog layout using the bootstrap 3 Panel format.  The intro Image is displayed in the Panel Title, the Article Title and Intro Copy are displayed in the Panel content and the 'Read More' is displayed in the Panel Footer.  This layout has many applications such as News, Events, Tutorials etc.

article blog panel image

Step 1

Create an New Article

From the Administrator Control Panel click on Content -> Article to display a list of all the articles that have previously been created.  Click The '+ New' Button


article blog panel new article

Step 1a


To ensure that your new article is displayed on the correct blog page, ensure to choose the correct category for it to be displayed under.

tut blog category

Step 2


Create a Title for the new article, it should be short but descriptive.  Think about how your front end blog layout is configured ( one/2/43 column, how the title will look on a desktop and on a smartphone/tablet) especially if you want the title to remain on one line.

article new title

Step 3


The article Alias is a UNIQUE name for the article and is used amongst other things to create human readable URLs which in turn helps the SEO of your website. Under normal circumstances you can leave the article Alias as 'Auto-generate from title' which will remove any special characters, convert all to lower case and replace spaces with hyphens. For example, a title 'Panel Blog & How To Create One' would have an auto-generated alias of 'panel-blog-how-to-create-one'. 

There may be circumstances where you want to manually enter an article alias.  In particular if you have a series of article titles that are all the same.  Lets say you have a series of weekly walks with a title of 'Weekly Walk'  by defauly Joomla will create an initial alias of 'weekly-walk'  for the next article it will create an alias 'weekly-walk-2' and 'weekly-walk-3' and so on.  Not very descriptive, especially when you are looking for a specific article to edit in the Article Manager.  Instead, you can create your own alias that includes the date for example 'weekly-walk-27-10-2017', 'weekly-walk-04-10-2017' and so on. REMEMBER if you create your own alias it must be lower case letters, numbers and hyphens.  Special characters, punctuation and spaces are not allowed.

REMEMBER if you edit an article title after the article has been saved the auto generated alias will not be updated.  To update the auto generated Alias, either manually change it or delete the existing auto-generated alias,  hit Save and Joomla will generate a new alias.  WARNING!  Doing this will change the URL of the article. This may not be important if the site is under development, or if you've only just created the article but bear in mind, if Google has already indexed the URL and you change the alias, anyone who searches google and clicks on the link that Google has cached will get a 404 Page Not Found error. 

article new alias

Step 4

Article Content

The editor is where you add the content of your article.  There are two parts a Joomla article: The Intro Text and the Full Text seperated my a 'Read More' line.  The intro Text is any content above the Read More line and the Full Text is anything below the Read More line.   It is this line that tells Joomla to add a 'Read More' link to the footer of each Blog Panel, without it, Joomla assumes that there is nothing else to read!  So whether you want some intro text to display in the Blog panel or not, you must have a Read More line.

It is unwise to add a hyperlink in the intro text as you goal is to get the visitor to click the Read More link, not a hyperlink you've added to the intro text.  You can however add inline hyperlinks in the Full Text of the article.  Make the hyperlink descriptive and avoid using 'Click HERE'.  Google use the hyperlink text to index your site, knowing this, it should become clear as to which of the following is Search Engine Friendly.

Click HERE for more information on how to build reciprocal links

Lear more on How to Build Reciprocal Links 

If you'd like to add a Link button to the article, see step 13 below.

At this point it would be worth while reminding you to click the Save button and do so every now and then whilst creating the new article just in case your computer crashes/power failure/internet access failure.

article new content intro text

Step 5

Inserting a Read More Line

To insert a Read More line, first position the cursor wherever you want the split between intro text and full text to be (this may be at the very start of the text if you don't want any intro text to appear) and click the Insert Read More button in the editor controls panel.  To remove a Read More line simply click on it and press delete/back space.

article new content insert read more

Step 6

Images and Links

Next we need to add images to the blog Panel Header (Intro Image) and the detail page (Full Article page) so go ahead and click on the Images and Links tab.

article new images links

Step 7

Intro Image

To add an Intro Image which is used on the Blog Layout Page click the Intro Image Select Button

article new intro image select

Step 8

Choose Image

Select an existing image to use for the Intro from the list or click the Upload button to upload a new image.  Images should be sized according to your overall theme.  For example the images used on this tutorial have all been resized to 450px wide by 270px high. Click insert to finish adding the image.

article new intro image insert

Step 9

OR Uploading a New Image

Before uploading a new image, first resize it according to your overall theme.  For example the images used on this tutorial have all been resized to 450px wide by 270px high.  Next click to Upload Button.

article new intro image upload

Step 10

Select File to Upload
Either use the drag and drop feature (easy if you have two monitors or your deskto arranges so as you can see explorer/finder as well as the Upload webpage) or the Browse button to select the image to upload, click the Upload button when done.
article new intro image upload drag drop

Step 11

Insert Uploaded File

After the images has uploaded you will be returned to the image select screen where you need to click on the image name that you just uploaded before clicking the insert button.

article new intro image insert

Step 12

Repeat steps 8-11 for the Full Text Image

You can either use the same image as you have used for the intro or you can use/upload a different image.

article new full image select

Step 13


enter the URL for Link A.  NOTE: If you are linking to an external website it is important that the link starts with http:// (or https:// if it is a secure website) otherwise joomla will assume that it is an internal URL that you are linking to. Add the Text for the button and finally how you want the URL to open (default is to open the URL in a new window).

article new link a

Step 14


Depending upon the design of your website, it may be necessary to change the layout of the article.  To change the Layout, click on the Options tab then click on the Layout dropdown.

article new options layout select

Step 15

Layout Select

In the dropdown list that apears, select the alternate layout, for example, 'two-column' formats the article so as the Full Article Image is in the left column and the Full Article Text is in the right column.

article new options layout select two column

Step 16


Joomla has a really useful feature whereby you can set the date for when an article gets published (default is the date and time you create the article) and a Finish Publishing date (default is blank so as it never gets automatically unpublished).  The Start Publishing is useful if, lets say you write 3 or 4 blog articles all at once but want them published one week at a time.  The Finished Publishing is useful for, lets say you create articles for events whereby you can automatically unpublish the article the day after the event takes place. Click on the Publishing Tab and either enter the date manually YYYY-mm-dd hh:mm:ss format or use the calendar icon to select the date.

article new publishing finish date

Step 17

Save & Close

When Done, you're finished! Now click the Save & Close button and go to the front end of your website to see how it looks.

article new save close

Go On, Take the First Step.

  • Contact Form
  • This email address is being protected from spambots. You need JavaScript enabled to view it.
  • +4407800820018

Like What You See? Spread The Word.

By using this website, you agree to the use of cookies as described in our Cookie Policy