UQ Drupal 7 site builder training - Panels and Components

This component automatically lists the latest 3 Articles and/or Blog Posts.

Example

Step 1

Click Customize this page to add the horizontal content list view component to a panel page.

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Step 3

The available components display. Click on the UQ Content Types category and then select the view: horizontal content list: latest t to open the configuration form.

Step 4

The configure new view: horizontal content list: latest  displays.  

1. Overide title - NOT APPLICABLE 
2. Num items - retain 3 as the number of items to display 
3. Offset - retain 0 to skip no items or enter the number of recent items to skip.

4. Type - Select the content type to display. Usually it is Article
5. Sort by -  Select one of the options.
   Post date - date the content type is saved
   Publication date - date selected on the publication date field on the article content type
   Title - alphabetical ordering by article title.
6. Order - sort by field can ordered in an ascending or descending order.
7. Click Finish after completing the configure new view form

Step 5

The system returns to the panel page In-Place Editor.  

1. Add Pane Styling to edit the display of the component on the panel  page.  Refer to the instructions, Add Pane Style.

2. Click Save to complete the process of adding the component.

Component panes added to Panel pages by default use a pane style called 'No Title'. The Section pane style is a wrapper for each pane that adds additional fields and theming options. They allow content to broken up into 'strips' down the page to aid legibility and design.

Sections constrain the width of the component pane they wrap to the central content column. This is primarily used on full-width page layouts.

Some component panes such as the Hero Banner and Default page header are designed to display full-width and should not be wrapped in a Section pane style.

Only the Site Builder can change and edit the pane style.

Section pane style adds the following fields and theme options; all of which are optional or configurable.

• Section title (heading)
• Summary content
• Footer content
• Top and bottom spacing
  • Top and bottom can be configured separately
  • Default, large, extra large or no padding options.
• Pre-defined background colour and textures
• Background image
  • Optional parallax background image style. Suitable for images that show depth such as aerial or landscapes.
• Section text colour (dark or light) - to provide contrast against the background options.
• Section alignment layouts

 

Example

Step 1

Click Customize this page to start editing the page.

Step 2

Click the paint brush button on the component to open the pane style form.

Step 3

The "Pane style" form displays. 

1. Selection Section
2. Click Next

Step 4

It is optional to enter content in the Style settings fields. The contents in the fields will display in the pane as shown in the image below.

1. Section Title
2. Title element - Select the heading style from the range h2 to h4. The default is h2.
3. Summary content
4. Footer content

5. ​Background image (Optional)
   Images should support the content. Avoid busy images that make the component content difficult to read. Aim to use textures or photos with a single point of focus.
   • ​Click Choose file and select an image from your computer.
   • Click Upload

6. Top spacing
7. Bottom spacing
8. Theme - If a background image was used, a dark or light tint can be applied to improve contrast for the Section and component pane content.

9. Text colour - The text colour selection only applies to the Section Title, Summary Content and Footer Content fields.  Select either light or dark text.
   Components generally provide their own theme options to manage text colour.

Note: To change the colour of the content inside the section to light you will have to apply the css class light-palette to the component through the edit panel interface.

10. Layout
    There are three (3) options for layout.

    Single column, centred

    

    Single column, left-aligned

    

    Two column, left-aligned

    

11. Utility

    1. Allow overflow - Used when a Section pane style wraps a component containing a drop down list that extends below the height of the Section, so that the drop down is not cut off. This has some design implications for tints used on the Sections so double check the display if using this option.

12.  Click Save to accept the pane style settings.

Step 5

The system returns to the panel page In-Place Editor. Click Save to complete process of styling the component.

The completed component displays.

Use this component when it’s necessary to highlight content that requires the user to navigate to a sub-page for further detail. Images should have a similar tone and treatment to visually unify the panel.

Cards can be added as either custom cards where all fields are manually set, or as node references where the content of the card comes from the node page being referenced.

Step 1

Click Customize this page to add the card grid component to a panel page.

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Step 3

The available components display. Click on the UQ category and then select the Card Grid component to open the configuration form.

Step 4

The configuration form for the Card Grid displays.  

1. Title - insert a title for the component.  This assists in identifying the component on the Panel Content page.
    
2. View mode - For the view mode consider:
   a. the type of card - default, compact or overlay
   b. the column layout for displaying the cards -  select  2, 3, 4 column or horizontal card
    
3. Paragrah type - there are two types.  For custom card the title, summary and link can be inserted.  If node reference is selected, node (e.g. basic page) title, teaser image and URL  are used for the card.
   a. Select custom card to insert a title, summary and link and proceed OR
   b. Select node reference to select a node to display as a card.

4. Click Add new Paragraph to start completing the first custom card.

5. Title - Limit the title length, so that it does not exceed 3 lines on the card.

6. Image - recommended width is 640px X 640px. Ensure the image is relevant to the topic of the card.
    
7. Content - (optional) brief summary of up to 20 words.

8. Primary Link - used to create  the hyperlinked card title.
   A. Click Search
   B. Type in a minimum of 3 letters of a word in the Search for content field.
   C. Select the Content from the list of suggested content
   D. Click Insert Link.

9. Action Links - secondary links on the card. Can be used for further information or calls to action.  If linking to content on the website, follow the Step 8 above to insert a relative reference. 
   
   Note
   A. If the relative reference is used, the title field will display the title of the content that is linked to.
   B. If an absolute reference is used, for content that does not exist on your site, type in an appropriate title and enter the absolute URL in the URL field.

10. Click Add another Paragraph to add cards 2 and 3.  Follow the guidance outlined in  numbers 3-9 of Step 4 to complete the required fields for each card.

11. Click Finish to save the configured card grid (column card) and return to the panel page.

Step 5

The system returns to the panel page In-Place Editor.  

1. Add Pane Styling to edit the display of the component on the panel  page.  Refer to the instructions, Add Pane Style.

2. Click Save to complete the process of adding the component.

Step 1

Click Customize this page to start editing the page.

Step 2

Click the paint brush button on the component to open the pane style form.

Step 3

The "Pane style" form displays. 

1. Selection Section
2. Click Next

Step 4

It is optional to enter content in the Style settings fields. The contents in the fields will display in the pane as shown in the image below.

1. Section Title
2. Title element - Select the heading style from the range h2 to h4. The default is h2.
3. Summary content
4. Footer content

5. ​Background image (Optional)
   Images should support the content. Avoid busy images that make the component content difficult to read. Aim to use textures or photos with a single point of focus.
   • ​Click Choose file and select an image from your computer.
   • Click Upload

6. Top spacing
7. Bottom spacing
8. Theme - If a background image was used, a dark or light tint can be applied to improve contrast for the Section and component pane content.

9. Text colour - The text colour selection only applies to the Section Title, Summary Content and Footer Content fields.  Select either light or dark text.
   Components generally provide their own theme options to manage text colour.

Note: To change the colour of the content inside the section to light you will have to apply the css class light-palette to the component through the edit panel interface.

10. Layout
    There are three (3) options for layout.

    Single column, centred

    

    Single column, left-aligned

    

    Two column, left-aligned

    

11. Utility

    1. Allow overflow - Used when a Section pane style wraps a component containing a drop down list that extends below the height of the Section, so that the drop down is not cut off. This has some design implications for tints used on the Sections so double check the display if using this option.

12.  Click Save to accept the pane style settings.

Step 5

The system returns to the panel page In-Place Editor. Click Save to complete process of styling the component.

The completed component displays.

Vertical content list views are used to automatically display a number of node pages in a vertical list, based on configurable filters.

 

There are number of different views which display the listed nodes using different view modes.

Step 1

Click Customize this page to add the View: Vertical content list: Card Compact component to a panel page.

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Step 3

The available components display. Click on the View panes category and then select the View: Vertical content list: Card Compact to open the configuration form.

Step 4

The configure new view: horizontal content list: latest  displays.  

1. Overide title - NOT APPLICABLE 
2. Content: Has Taxonomy term ID (with depth) - insert the ID related to the term by which the view is filtered. Find the Taxonomy term ID
3. Use pager -  if more than 9 items will display, allow additional content to display on subsequent pages.
4. Num items - retain 3 as the number of items to display 

5. Offset - retain 0 to skip no items or enter the number of recent items to skip.
6. Type - Select the content type to display. 
7. Sort by -  Select one of the options.
   Post date - date the content type is saved
   Publication date - date selected on the publication date field on the article content type
   Title - alphabetical ordering by title.
8. Order - sort by field can ordered in an ascending or descending order.

Click Finish after completing the configure new view form

Step 5

The system returns to the panel page In-Place Editor.  

1. Add Pane Styling to edit the display of the component on the panel  page.  Refer to the instructions, Add Pane Style.

2. Click Save to complete the process of adding the component.

Each taxonomy term has an ID number. Some Views such as the Vertical Content List can be filtered by terms, and to configure this you need to know the ID of the term.

Step 1

Navigate to the vocabulary list of terms

Step 2

1. hover over the edit hyperlink
2. review the URL path which includes the taxonomy term ID of the term component, which in this example is 307.

 

Step 1

Click Customize this page to start editing the page.

Step 2

Click the paint brush button on the component to open the pane style form.

Step 3

The "Pane style" form displays. 

1. Selection Section
2. Click Next

Step 4

It is optional to enter content in the Style settings fields. The contents in the fields will display in the pane as shown in the image below.

1. Section Title
2. Title element - Select the heading style from the range h2 to h4. The default is h2.
3. Summary content
4. Footer content

5. ​Background image (Optional)
   Images should support the content. Avoid busy images that make the component content difficult to read. Aim to use textures or photos with a single point of focus.
   • ​Click Choose file and select an image from your computer.
   • Click Upload

6. Top spacing
7. Bottom spacing
8. Theme - If a background image was used, a dark or light tint can be applied to improve contrast for the Section and component pane content.

9. Text colour - The text colour selection only applies to the Section Title, Summary Content and Footer Content fields.  Select either light or dark text.
   Components generally provide their own theme options to manage text colour.

Note: To change the colour of the content inside the section to light you will have to apply the css class light-palette to the component through the edit panel interface.

10. Layout
    There are three (3) options for layout.

    Single column, centred

    

    Single column, left-aligned

    

    Two column, left-aligned

    

11. Utility

    1. Allow overflow - Used when a Section pane style wraps a component containing a drop down list that extends below the height of the Section, so that the drop down is not cut off. This has some design implications for tints used on the Sections so double check the display if using this option.

12.  Click Save to accept the pane style settings.

Step 5

The system returns to the panel page In-Place Editor. Click Save to complete process of styling the component.

The completed component displays.

Use this component to group informative / dense content under one title and summary.

Display features

• 1-2 line title, 10 words maximum
• 25 - 30 word summary
• short link text, 1 to 3 words

The grid of links component is inserted by the site builder.

Step 1

Click Customize this page to add the grid of links component to a panel page.

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Step 3

The available components display. Click on the UQ category and then select the Grid of Links component to open the configuration form.

Step 4

The configuration form for the Grid of Links displays.  

1. Title - insert a title for the component.  This assists in identifying the component on the Panel Content page.
2. View mode - For the grid of links select  2, 3 or 4 column. 
3. Links - insert the title (128 character limit) and URL
   Relative reference - use for links to internal website content (e.g. learn/uq-standard)
   Absolute reference - use for links to external website content (e.g. www.google.com)

4. Click Add another item to add additional links.
   Tip: ensure the links are evenly spread across the columns where possible.
5. Click Finish after all the links have been added.

Step 5

The system returns to the panel page In-Place Editor.  

1. Add Pane Styling to edit the display of the component on the panel  page.  Refer to the instructions, Add Pane Style.

2. Click Save to complete the process of adding the component.

Step 1

Click Customize this page to start editing the page.

Step 2

Click the paint brush button on the component to open the pane style form.

Step 3

The "Pane style" form displays. 

1. Selection Section
2. Click Next

Step 4

It is optional to enter content in the Style settings fields. The contents in the fields will display in the pane as shown in the image below.

1. Section Title
2. Title element - Select the heading style from the range h2 to h4. The default is h2.
3. Summary content
4. Footer content

5. ​Background image (Optional)
   Images should support the content. Avoid busy images that make the component content difficult to read. Aim to use textures or photos with a single point of focus.
   • ​Click Choose file and select an image from your computer.
   • Click Upload

6. Top spacing
7. Bottom spacing
8. Theme - If a background image was used, a dark or light tint can be applied to improve contrast for the Section and component pane content.

9. Text colour - The text colour selection only applies to the Section Title, Summary Content and Footer Content fields.  Select either light or dark text.
   Components generally provide their own theme options to manage text colour.

Note: To change the colour of the content inside the section to light you will have to apply the css class light-palette to the component through the edit panel interface.

10. Layout
    There are three (3) options for layout.

    Single column, centred

    

    Single column, left-aligned

    

    Two column, left-aligned

    

11. Utility

    1. Allow overflow - Used when a Section pane style wraps a component containing a drop down list that extends below the height of the Section, so that the drop down is not cut off. This has some design implications for tints used on the Sections so double check the display if using this option.

12.  Click Save to accept the pane style settings.

Step 5

The system returns to the panel page In-Place Editor. Click Save to complete process of styling the component.

The completed component displays.

Use this component when it’s necessary to provide contextual information and imagery leading into a news story, event, or informational content. Images should have a similar tone and treatment to visually unify the panel.

Display Features

• 3 column layout display - left, middle and right
• optional background image

Step 1

Click Customize this page to add the content column block component to a panel page.

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Step 3

The available components display. Click on the UQ category and then select the Content column block component to open the configuration form.

Step 4

The configuration form for the Content column block displays.  

1. Title - insert a title for the component.  This assists in identifying the component on the Panel Content page.
2. Click Add new paragraph to display the fields to complete.

3. Title - enter the paragraph title
4. Content - enter the content to display in the paragraph
5. Click Add new paragraph to add an additional paragraph in the column .

Complete numbers 3 to 5 for the new paragraph then proceed to number 6 to add a new paragraph to the middle column.

6. In the middle column, click Add new Paragraph to add links. Complete numbers 3 to 5 for the new paragraph then proceed to number 7 to add a new paragraph to the right column.

7. In the right column, click Add new Paragraph. Complete numbers 3 to 5 for the new paragraph.

Tip: ensure the links are evenly spread across the columns where possible.

8. Click Finish after all the links have been added.

Step 5

To add the required CSS, hover the mouse over the plus (+) button and the cog will appear. Click the cog and then click Edit Panel.

Step 6

Click the right-hand edit cog on the Content column block component. Click CSS properties.

Step 7

Enter content-column-block in the CSS class field and click Save.

Step 8 

Click Update and Save

The system returns to the saved panel page.

Step 9

Add Pane Styling to edit the display of the component on the panel  page.  Refer to the instructions, Add Pane Style.

Step 1

Click Customize this page to start editing the page.

Step 2

Click the paint brush button on the component to open the pane style form.

Step 3

The "Pane style" form displays. 

1. Selection Section
2. Click Next

Step 4

It is optional to enter content in the Style settings fields. The contents in the fields will display in the pane as shown in the image below.

1. Section Title
2. Title element - Select the heading style from the range h2 to h4. The default is h2.
3. Summary content
4. Footer content

5. ​Background image (Optional)
   Images should support the content. Avoid busy images that make the component content difficult to read. Aim to use textures or photos with a single point of focus.
   • ​Click Choose file and select an image from your computer.
   • Click Upload

6. Top spacing
7. Bottom spacing
8. Theme - If a background image was used, a dark or light tint can be applied to improve contrast for the Section and component pane content.

9. Text colour - The text colour selection only applies to the Section Title, Summary Content and Footer Content fields.  Select either light or dark text.
   Components generally provide their own theme options to manage text colour.

Note: To change the colour of the content inside the section to light you will have to apply the css class light-palette to the component through the edit panel interface.

10. Layout
    There are three (3) options for layout.

    Single column, centred

    

    Single column, left-aligned

    

    Two column, left-aligned

    

11. Utility

    1. Allow overflow - Used when a Section pane style wraps a component containing a drop down list that extends below the height of the Section, so that the drop down is not cut off. This has some design implications for tints used on the Sections so double check the display if using this option.

12.  Click Save to accept the pane style settings.

Step 5

The system returns to the panel page In-Place Editor. Click Save to complete process of styling the component.

The completed component displays.

Mini panels are nested panels layouts inside a Panels page. They allow another grid layout to be used within the layout of the the parent page. For instance a 2 column mini panel can be placed in a single column page layout.

Step 1

In the administration menu, go to Structure > Mini panels > Add.

Step 2

Complete the numbered items and click continue to move to Context.

1. Administrative title - Identifying label for the mini panel.
   Tip: Use a naming convention to easily tell them apart. e.g. MP: Home: Social media
2. Administrative description - Optional. If the title is not obvious, provide further detail of the purpose of this mini panel.
3. Category - The group your custom components and mini panels will list
   Tip: Use your Org Unit abbreviation (e.g. ITS) to group all your reusable components and mini panels.

Click Continue to move to context.

Step 3

99% of the time contexts are not required. Click Continue to move to layout

Step 4

Select a UQ layout type from Category drop-down. Mini panels most commonly use UQ Components.

Step 5

Choose the desired layout and click Continue to move to Content

Step 6

It is recommended to click Finish to save the mini panel before adding content to the regions to ensure you don't lose any progress.

Step 1

Click the edit drop-down to edit the mini panel.

Step 2

The Settings screen opens. Click Content to add or edit components.

Step 3

1. Click the edit cog within each layout region to add components to that region.
2. Select Add content to open the list of available components grouped by category.

Step 4

Choose a category (most UQ components are grouped under UQ or View panes) and then select the component to add.

Step 5

Complete the applicable configuration for each component and then click Finish to save the configured component. 

Step 6

Add components to the remaining columns and click Save to save the mini panel.

A mini panel is inserted in a panel page in the same way as other components.

Step 1

Click Customize this page to start adding components to a panel page.

Step 2

The available regions where components can be added are displayed as blue shaded fields. Click the plus (+) button to open the list of available components grouped by category. 

Step 3

The available components display. Click on the category where the mini panel has been saved and select the mini panel.

Step 4

The configuration form for the mini panel displays.  Click Finish.

Step 5

Return to the Panel page.

Depending on the page layout used, it might be necessary to add a Section pane style to the mini panel.

There are two (2) ways to access the mini panel to edit it.

1. via the administration menu
2. via the Panel edit screen

---

Via Structure menu

Step 1

In the administration menu, go to Structure > Mini panels

Step 2

Click the edit drop-down to add or edit the components for the mini panel.

Step 3

The configuration page for the mini panel opens on Settings.  Click Content to add or edit components.

Top

---

Via Panel edit screen

While editing the Panel page:

1. Click on the edit cog to display the menu
2. Select Edit mini panel to display the mini panel content.  The back-end of the mini panel opens in a new browser tab.

Step 3

The backend of the mini panel displays. Edit as per Adding components to the mini panel

Top

Step 1

Click Customize this page to start editing the page.

Step 2

Click the paint brush button on the component to open the pane style form.

Step 3

The "Pane style" form displays. 

1. Selection Section
2. Click Next

Step 4

It is optional to enter content in the Style settings fields. The contents in the fields will display in the pane as shown in the image below.

1. Section Title
2. Title element - Select the heading style from the range h2 to h4. The default is h2.
3. Summary content
4. Footer content

5. ​Background image (Optional)
   Images should support the content. Avoid busy images that make the component content difficult to read. Aim to use textures or photos with a single point of focus.
   • ​Click Choose file and select an image from your computer.
   • Click Upload

6. Top spacing
7. Bottom spacing
8. Theme - If a background image was used, a dark or light tint can be applied to improve contrast for the Section and component pane content.

9. Text colour - The text colour selection only applies to the Section Title, Summary Content and Footer Content fields.  Select either light or dark text.
   Components generally provide their own theme options to manage text colour.

Note: To change the colour of the content inside the section to light you will have to apply the css class light-palette to the component through the edit panel interface.

10. Layout
    There are three (3) options for layout.

    Single column, centred

    

    Single column, left-aligned

    

    Two column, left-aligned

    

11. Utility

    1. Allow overflow - Used when a Section pane style wraps a component containing a drop down list that extends below the height of the Section, so that the drop down is not cut off. This has some design implications for tints used on the Sections so double check the display if using this option.

12.  Click Save to accept the pane style settings.

Step 5

The system returns to the panel page In-Place Editor. Click Save to complete process of styling the component.

The completed component displays.