background image

PopIT Content Panels

PopIT content panelsWeb pages full of text can be hard to follow and read, so it helps if you can break up your text into blocks, and even better if you can add your blocks of text into panels like this.

It helps to attract attention to your important information, making it easier to read (and more likely to be read).

Using the PopIT Content Panels feature, it is now very simple to create coloured panels like this, and of any size. You can insert any content into these panels, including graphics and images, and arrange them anywhere on your page.

The basic PopIT Content Panel code looks like this...

[[C234]]

... where 234 is your Section ID that contains the content.

ie: you would replace 234 with the Section ID of your own panel section as described opposite.

easy to useYou can create content panels of any size, and place them within table cells, or align them left or right of your page content.

The colours of your panels are unlimited, so you can use any HEX colour to make your panels as colourful as you like. The default colour is a neutral grey like this, but we can make the default colour to suit your specific website theme. You can always overide the default colour and use any shade you like.

Adding a content panel is as simple as...

Step 1: Add a hidden WYSIWYG section  to your page via the Manage Sections link in the page editor.

Step 2: Enter the content of your panel into that section and note the Section ID.

Step 3: Enter the PopIT Content Panel code in your page like this [[C??]] where you want the panel to appear (just replace ?? with your Section ID).

... and you can even add panels inside panels like this.

Panels without Shadows

The above two panels are shown as the default style with a slight shadow effect. However, if you want to use a panel without a shadow, then simply use the parameter shadow=no like this...

[[C234:shadow=no]]

Panel Alignment

You can align a panel left or right, and any content outside of that panel (including other panels) will flow around it.

Just use the parameter align=right like this...

[[C234:width=300:align=right]]

You can also place panels into table cells if you wish to use very specific positioning.

Panels of Specific Width & Colour

If you want a panel that is, for example, 400 pixels wide, then simply enter the parameter width=400 like this...

[[C234:width=400]]

The height of the panel auto-expands to fit the content.

The colour of the panel is defined by the parameter bkg=#FFFFCClike this...

[[C234:bkg=#FFFFCC]]

The #FFFFCC is the HEX colour for cream (you can find HEX colours in any image editor)

Put them both together and you get this...

[[C234:bkg=#FFFFCC:width=400]]

 

photo with rounded corners

Photos with Rounded Corners

You can insert any content, including photos, into your panel sections, and even apply rounded corners to your photos like this.

To apply a rounded corner to any photo (even if they are not inside a panel)...

1: Right click on the photo in the page editor and select Image Properties
2: Press Advanced tab and enter round_corners_img into the field 'Stylesheet Classes'

 

Your photo will then have rounded corners like this example.
Note: if you use the stylesheet class round_corners_shadow_img then your image will also have a shadow effect as well as the round corners.