Home
Pages
A Page is a single page, evidence-based website, used to present stories about your activities, learning, personal profile, or any other number of topics. A Page can contain a range of elements, including images and videos. It can also contain links to other Assets within your Store or to external items on the Internet.
Adding content to your Page
From Get Creative on the Home Page or the Burger menu, select Page. The canvas will open ready for you to begin building and editing the Page. Click in the banner to add a title text to your Page. If you wish to remove the banner, click on the X to the top right.
To start building the content of your Page, click the Add Content button at the top to display the block content menu.
.
Portfolio Buider - Add content button
Click the block type you would like to add and it will automatically appear below the block you were last working on. You can also drag and drop blocks into place. Blocks can be reordered using the arrows at the left of the block frame, or deleted using the cross at the top right of the block frame.
Once you have blocks on the page you can start adding content.
To resize blocks, click within the block to make it active and hover your cursor over the dots at the bottom right. Click and drag.
To reorder blocks, you can use the arrows at the left of each block. Alternatively, you can click and hold within the block and then drag to where you want to position it. It is possible to place two blocks side by side.
Block Types
| Block type | Description |
| Banner | Adds a banner. You can place banners in the middle or at the bottom of a page, in addition to the top. |
| Text | Type text directly into the text box. Highlight text to format or add links. |
| Image | On the image block click the Open Asset Store button to insert an image from your Store or to upload one. |
| Video | On the video block, click the Open Asset Store button to insert a video from your Store or to upload one. The video will play directly on the page. |
| Audio | On the audio block click the Open Asset Store button to insert an audio clip from your Store or to upload one. The audio will play directly on the page. |
| Embed | The embed block allows you to paste an embed code from a supported service, which will then display the content in the block. |
| Quote | A quote block provides a means of highlighting text on the page and provide attribution (if a quote) |
| Badge | If you have linked a badge store (such as Mozilla Backpack or Credly) to your PebblePad account, this block will allow you to display badges on your Page. |
Properties
The Properties panel provides setting options for both the particular block you are working on and the Page as a whole. If the Properties panel isn't visible, you can open it using the Properties button in the top right corner.
.
Builder properties button
When clicked, the Properties Panel slides open from the right hand side of the page. In the Page Builder the panel contains two tabs - BLOCK and PAGE.
PAGE
The page tab allows you to manage the following properties:
Layout - choose from 'Full width' or 'Page style'. The latter allows you to add a background image.
Background colour
BLOCK
The BLOCK tab displays the properties for each block in a Page, with the options changing as different block types are selected. These are described below:
Common Block Properties
The following settings apply to the majority of the asset element types. Exceptions are listed for each setting.
| Block Property | Description |
| Background colour | Applies a background colour to the section, which is the full width of the page. |
| Width | Offers a choice of Reading width or Maximum width. NOT AVAILABLE FOR: Banner block |
| Title | The option to add a title to your block. NOT AVAILABLE FOR: Banner, Quote or Badge blocks |
| Duplicate block | Clicking Duplicate will make a copy of the selected block, including all content. The copy will appear immediately below the original. |
Block Specific Properties
The following settings apply to only a small number of Block types. These are listed for each setting.
| Block Type | Specific block properties |
| Banner | Banner height - select the height of your banner from Auto, Large, Medium or Small. The Auto option keeps the aspect ratio of the image across different screen sizes.
Layout - allows you to add heading text to the banner and choose the location of the text.
Separating line - add a line under your banner text. Not available if you choose No Text for the Layout option.
Subtitle - add a line of smaller text below the banner heading. Not available if you choose No Text for the Layout option. |
| Text | Text columns - Allows you to choose between a single column of text or to create a newspaper-style design with two columns. |
| Image | Caption - add text below your image
On clicking image - provides options for actions that can occur if a view clicks on the image - open the image in a new tab, or open link to an asset or website. |
| Video | Caption - see above.
Video controls - allows you set options for the video to autoplay once the page loads, and to loop the video. |
| Audio | Caption - see above.
Audio controls - allows you set options for the audio to autoplay once the page loads, and to loop the audio. |
| Quote | Add citation |
Save and Preview
The Save and Preview buttons are located at the top left of the screen. When you save your Page for the first time you will be asked to provide a title for your Page.
Clicking the Preview button will allow you to view your Page as it will look to anyone you share with. Clicking Preview will automatically trigger a save.
