Getting started with Pagebuilder

Transcription

1 Getting started with Pagebuilder A self-guided tutorial, Ektron 9.02 Getting started with Ektron Pagebuilder If you re responsible for maintaining content on the core Oxford Brookes website, and have already received Ektron 8.0 CMS training, this tutorial will get you up to speed on the latest release of Ektron: The two key modifications to be aware of in this release are: A new set of Pagebuilder menu s, and A new text editor (see the Getting started with Aloha text editor tutorial) This tutorial focuses on the new Pagebuilder functionality and will walk you through: The basic concepts of how pages are structured How to add and position content an existing page How to create a new page Before proceeding with the tutorial, log on to Ektron and begin familiarising yourself with Ektron design mode. You can do this by opening a page from the Workarea in the usual way and then selecting Edit page layout. As before the design mode of Ektron 9.02 looks very much like the live website with the addition of a tool bar at the top of the screen. From this tool bar you can choose to: preview a page edit the layout of a page edit the individual content modules that make up a page. The tool bar defaults to preview mode. To switch to edit mode move the tool bar slider to edit.

2 1. Understanding page structure Our webpages are built up by adding content modules (stored in the Workarea database) to a page one at a time. The content modules themselves are held within widgets. Think of a widget like a placeholder you first add a placeholder to a page, then tell the system what content module you want to appear in that placeholder. On the page below, for example, you can see four placeholders (outlined in grey). Which, in this example hold three different types of content. Content block widgets Image widget HTML widget 2 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

3 2. Add a content module to a page 1. Open up the page you want to work on in the usual way (either by going to the landing page for your area in the CMS or by opening up a Pagebuilder page via the Workarea and then choosing Edit page layout.) When you first open up design mode within Ektron, the tool bar defaults to preview mode. 2. To switch to edit mode move the tool bar slider to edit. 3. Select design to open the Page Builder master editing menu 4. Select > Edit 3 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

4 5. A new item Widgets will appear at the bottom of the menu. Tip: You can reduce the size of this menu by clicking on the category titles. You can also reposition the menu on the page (by hovering over the menu, left-click, hold and drag). 6. Select > Widget. The widget picker will open. 4 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

5 In this menu you will see all the widget options. Each widget type can handle a specific type of content ranging from content modules to QR codes. The one that you will most commonly use is a Content block (this holds content modules). If you are interested in utilising other types of widgets please do get in touch with the Web Team for a bit of coaching before starting out webdev@brookes.ac.uk 7. Select > Content block. 5 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

6 8. When you choose a widget you will see Place here prompts indicating where you can drop content. Click on one of these to select the position. 9. Once the widget is on the page, you then need to select what content to put in it. 10. Hover over the column containing the Content block widget icons will appear: Move, Edit, Delete choose Edit (the pencil icon). 6 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

7 12. Navigate to > Main site > Content modules and then to the specific sub-folder where your content is homed. 13. Click on the title of the content module, then > Save 7 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

8 14. Alternatively, to create a new content item, choose > New. 8 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

9 3. Reposition content blocks on a page 1. From the PageBuilder master menu, select > Edit 2. Minimise the menu (by closing up the Page Action) then hover over the content block you wish to move. You ll see three icons: four arrows - move; pencil - edit; and rubbish bin - delete. Select > Move. The options of where you can place the block will be indicated by a blue outline and a Place here button. Select the relevant place, then click the button: 9 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

10 4. Create a new page Pages are created within the Workarea. To create a new page: 1. From the Content tab in the Workarea, navigate to > Folders > Main site > Pagebuilder pages. 2. Hover over New select > Page layout. 10 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

11 3. The template menu automatically defaults to a standard page - with a central content column and a right-hand side panel are called: Templates/Pages/GeneralContentPB.aspx. Only click on another template if you want to switch templates. 4. Select Next. 5. Add a Title (this is the Pagebuilder title and will form your URL omit punctuation as it can cause problems if used as a part of a URL). 6. Place a check mark against Content searchable. Manual aliasing should not have a check mark against it. Select > Next. 11 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

12 7. Add a Metadata title. Note: this will form the page title at the top of your page it should match the Pagebuilder title as closely as possible. However, there is room to add a slightly longer title if desired. And you can use a limited range of punctuation marks in this field including: colons question marks, and hyphens. 8. Select Finish then OK to begin editing the page. 12 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

13 4. Multi-screen preview The latest version of Ektron incorporates a multi-screen preview tool. As more and more people use smart phones and tablets to access our web pages it is becoming even more important we check how our content appears to readers. Of course our website is designed to be responsive (that is, the content that makes up the pages will automatically adapt and reflow to fit the page). The real value in this tool is that it acts as a strong visual reminder to keep web copy tightly worded and nicely chunked up so that readers don t hit an impenetrable wall of text! To preview pages as our audiences will see them in a variety of screen sizes and devices: 1. From design mode (either View or Edit mode) hover over the device icon (circled) to open the Switch Mobile Device menu. From here you have the option to preview your page in a range of devices. 2. Select a device by clicking on the image. In this example we will use the Apple iphone. 13 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

14 3. A screen similar to the one below will display. Use this button to toggle between portrait and landscape view. 14 P a g e b u i l d e r t u t o r i a l : E k t r o n ,

15 6. Publish your pages As in version 8.0 of Ektron, once you ve finished editing your page, you ll need to either check the page back in to the system using Check-in (so that colleagues can preview your work), or, you ll need to Publish your page to update the live website. To do this, go to the Pagebuilder master menu and choose the relevant action. Pages on the live site are updated hourly from the CMS staging server. 15 P a g e b u i l d e r t u t o r i a l : E k t r o n ,