PB Panel Module

PB Panels is a Joomla Module that provides an easy way to add a Bootstrap 3 Panel component to your website.  A panel has three sections, the Panel Heading, the Panel Body or Content & the Panel Footer.  The Panel Module is used to provide information and a link to an existing menu item or an external URL.

module pb panel example

Edit a PB Panel Module

Step 1

Manage Modules

PB Panels is a Joomla Module that provides an easy way to add a Bootstrap 3 Panel component to your website.  A panel has three sections, the Panel title, Panel Content & Panel Footer.

extensions modules

Step 2

Search Tools

To help find the module you want to edit, use the Search Tools feature.

module search tool

Step 3

Search Tools

Use one or a combination of several select options to narrow down the results. In the image to the right, we have used the 'Select Type' box to select all the PB Panel modules.

module pb panel search select type

Step 4

Edit the Module

Click on the title of the PB Module you want to edit. On the screen that appears, ensure the Module Tab is active.

module pb panel edit

Step 5

Edit the Panel Heading / Image Alt

Depending upon whether you have a heading Image selected and whether the Panel Theme is set to 'Use Heading Image as a Background' or not this field is used to either Display the Heading Text or the 'Alt' text for the Heading Image.

module pb panel edit heading

Step 6

Edit the Panel Heading Image

This is where you can specify the Heading Image or the Heading Background Image (depending upon whether you have 'Use Heading Image as a Background' set in the Panel Theme below. Depending upon your layout, panel heading can either be landscape or portrait however it is advised you use one or the other, especially is equal heights is being used. The source image should be resized to 414px wide either before or duringthe upload process.  Eithe select an existing image or upload a new one from your computer.

module pb panel edit heading image

Step 7

Edit the Panel Theme

The panel theme is used to define the colour options of the Panel (not to be confused with the background options of the module which can be styled using the Advance Options module Class Suffix field in conjunction with the PB Painter & Decorator module. You can select, none (default options will be used), Use Image as Heading Background, choose from a selection of predifined themes or a custom theme. If you choose Background image or Custom theme three new fields will appear, Color (Text Colour), Heading background colour and Border Colour.

module pb panel edit panel theme

Step 8

Edit the Panel Body / Content

Use the WYSIWYG editor to add information the the Panel Body (the main content of the Panel).

module pb panel edit panel content

Step 9

Edit the Panel Body Colour Scheme

Use the Body Background Colour, Body Text Colour and the Body Hyperlink Colour fields to customise how the body appears.

module pb panel edit panel content colour

Step 10

Edit the Panel Footer Text

Footer Text: enter the Text to be shown in the Footer. Typically 'Click Here', 'Find Out More', 'Buy Tickets' etc.

Footer Text Colour: Use the Colour Picker to choose a different text font colour.

Footer Text Alignment: Options are: Center, Left, Right (alignment of text with a variable button width based on lenght of text) or Full Width with text that is centered.

module pb panel edit footer text

Step 11

Edit the Panel Footer Text Theme

Select either a default Theme or Choose Custom to select a custom Button Colour

module pb panel edit footer text

Step 12

Edit the Panel Footer Hyperlink

Use the drop down field to select an existing menu item an external link (in which case another field will appear to enter the external URL) or none.

module pb panel edit footer url

Step 13

Save & Close

When Done, scroll back to the top of the screen and click 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