Creating and editing panel pages

Panel pages can be used to create unique layouts. Unlike content types, which have a fixed layout, components on panel pages can be dragged and dropped into different designs.

Editors and site coordinators have limited editing access to panel pages: they can only edit existing panel content. If you're a site builder, you can:

• create new pages
• add and delete components
• style components
• rearrange components.

While the final layout of panel pages can vary, UQ Standard also offers some pre-made panel pages.

Use panel pages for:

• site homepages
• top-level pages within your site structure
• campaign or promotional landing pages
• content that is too complex for a content type.

Panel pages shouldn't be used for:

• pages below the top level of your site structure
• content that is better suited to a content type
• content that you want to tag and display in lists.

Panel pages can be created by:

• site builders.

Creating panel pages is a two-step process: first you create a blank page, then you add panels to it. To create a blank panel page:

• Hover over the Drupal 'Structure' menu, then go to 'Pages' > 'Add custom page'.
• Complete the steps below.

Once you've finished these steps, go to the next section to add panels to your page.

Step 1: Basic settings

Generally, the only settings you will need to change are:

• Administrative title: Make your title brief and helpful. This won't appear on the page – editors will use it to find your page in the 'Structure' menu.
• Administrative description: Give the page a brief description. This can be useful if you have similar pages.
• Path: Enter your preferred URL for the page. This should be a relative path.

Click the 'Continue' button.

Step 2: Choose layout

1. Select 'UQ Pages' from the 'Category' drop-down list.
2. Choose your preferred page layout. The most common is 'Single column full width'.
3. Click the 'Continue' button.

Step 3: Panel settings

1. Make sure 'In-Place Editor' is selected under 'Renderer'. This will make editing easier later.
2. Don't make any other changes on this screen.
3. Click the 'Continue' button.

Step 4: Panel content

1. Click the 'Finish' button.
2. Click 'Update and save'.

You have successfully created your blank page! Now, go to the next section to add panels to it.

A panel page is live as soon as you create it, so make sure site building is completed quickly or not included in the menu until the content is ready. Alternately, you can restrict access until the page is ready. This will ensure your page can't be found by search engines.

Panels can be added, rearranged or deleted by:

• site builders.

Before you add panels to your page, make sure you have read advice on designing panel pages.

Use the in-place editor to add, rearrange or delete panels:

• Click 'Customize this page' in the black Drupal menu at the bottom of the page.
• Adding panels: Go to landing page panels and follow the relevant instructions for each component.
• Rearranging panels: Drag and drop the panel into a new position by clicking and holding the four-point axis icon.
• Deleting panels: Click the bin icon at the top of the panel, then click 'OK'.
• Click 'Save' in the black Drupal menu at the bottom of the page when you've finished making changes.

Content in panels can be edited or reordered by:

• editors
• site coordinators
• site builders

Editors and site coordinators can't reorder entire panels on the page itself – you can only reorder items within some panels. For example, you can reorder cards in a card grid or buttons on a hero banner.

The instructions below provide general information about editing content in panels. For more detailed instructions, go to the relevant component page on landing page panels.

Editing content in panels

There are three ways you can edit panels:

• in-place editor (site builder only)
• edit cogs
• backend editing interface.

Any changes will go live as soon as you save your work.

In-place editor (site builder only)

Only site builders can edit this way. To edit panel content using the in-place editor:

1. Click 'Customize this page' in the black Drupal menu at the bottom of the page.
2. Click the two cogs in the grey bar at the top of the panel.
3. Make edits to the panel content.
4. Click 'Finish' to view your edits on the page.
5. Click 'Save' in the black Drupal menu at the bottom of the page to publish the changes.

Edit cogs

To edit a panel using an edit cog:

1. Hover over the panel, then click the cog icon in the top right corner. Click 'Edit'.
2. Make edits to the panel content.
3. Click 'Save' to publish the changes.

The first panel on each panel page will show two edit cogs: the top cog is for editing the first panel and the other cog is for accessing the backend editing interface for the entire panel page.

Backend editing interface

To edit a panel using the backend editing interface:

1. Hover over the first panel on the page, then click the lower of the two cogs in the top right corner.
2. Click 'Edit Panel'. This will load the backend editing interface.
3. Find the panel you want to edit, click the cog icon in the grey title bar and select 'Edit'.
4. Make edits to the content.
5. Click 'Finish' and then click 'Update and save' to publish the changes.

Reordering content in panels

There are two ways to reorder content in a panel:

• dragging and dropping
• changing the 'row weight'.

Dragging and dropping

To reorder using dragging and dropping:

1. Click and hold the four-point axis icon in the shaded column to the left of the item.
2. Drag and drop the items in the order you want. You can also move items into different regions on the page.

Changing row weights

To reorder by changing row weights:

1. Click 'Show row weights' above the first item.
2. Adjust the numbers in the 'Order' column to reflect the order you want.

Panel pages can by styled by:

• site builders.

Site builders can edit a panel's styling by using either:

• section style
• CSS classes.

Section styling

Section styling should be applied to most panels, because it:

• contains content to the same central column width
• adjusts spacing and alignment around the panel
• provides additional styling options.

Learn how to apply a section to a panel

Adding CSS classes

When you create a panel, the instructions will tell you if you need to apply a CSS class.

Use the in-place editor to add CSS classes to a panel:

1. Click 'Customize this page' in the black Drupal menu at the bottom of the page.
2. Click the 'CSS' icon in the grey bar at the top of the panel you want to style.
3. Enter class names into the 'CSS class' field and click 'Save'.
4. Click 'Save' in the black Drupal menu at the bottom of the page to publish the changes.

Note: custom CSS is not permitted.

Panel pages can be deleted by:

• site builders.

Deleted pages are removed from Drupal and can't be recovered. To delete a panel page:

1. Hover over the Drupal 'Structure' menu, then click 'Pages'.
2. Locate the relevant panel page, then click 'Edit'.
3. Click 'Delete' in the top row of tabs at the top of the screen.
4. Click the 'Delete' button.

• Designing panel pages
• Pre-made pages
• Landing page panels
• Restrict access.