CREATE AN EKTRON MICRO-SITE

CREATE AN EKTRON

MICRO-SITE

A self-guided tutorial, Ektron 9.02

Elements of an Ektron micro-site

Whether you are creating an online issue of a newsletter consisting of 5 pages, or a much

larger campaign-based website the steps outlined in this guide will help you set up a micro-

site from scratch.

This tutorial will first explain a bit about page structure and then show you how to:

1. Log in and navigate to where your folders will be created

2. Create new folders

3. Add new documents and images to the site asset store

4. Create content blocks

5. Build pages using content blocks

6. Add images, documents and other media to your site

7. Publish your site

2 | M i c r o - s i t e t u t o r i a l : E k t r o n 9 . 0 2 , 2 0 1 4

Contents Elements of an Ektron micro-site ............................................................................... 1

Understanding page structure .................................................................................... 3

1. Log in and navigate the Workarea.......................................................................... 4

2. Create new folders ................................................................................................. 5

3. The Document Management Store ........................................................................ 6

Add a downloadable document to the DMS ............................................................ 6

Adding more than one item to the DMS .................................................................. 7

Updating items in the DMS ..................................................................................... 7

Add images to the DMS .......................................................................................... 8

Guidelines for image sizes ...................................................................................... 8

Adding more than one item to the DMS .................................................................. 8

Updating items in the DMS ..................................................................................... 8

4. Create a new content block .................................................................................... 9

Link to a third-party website .................................................................................. 11

Link to a page on the Brookes central website ..................................................... 11

Link to an email..................................................................................................... 12

Link to a document ............................................................................................... 12

Insert an image ..................................................................................................... 13

Edit an existing content block from the Workarea ................................................. 14

Edit a content block in design mode ..................................................................... 14

4. Create a new page ............................................................................................... 16

5. Add content modules to a page ............................................................................ 19

Reposition content blocks on a page ....................................................................... 25

6. Publish your pages ............................................................................................... 26

7. Creating links ....................................................................................................... 27

Creating links to the Brookes central website ....................................................... 27

Creating links to documents ................................................................................. 28

8. Add a file to site assets ........................................................................................ 30


Understanding page structure

Webpages in Ektron are built up by adding content modules to a page in Ektron’s Design

mode using widgets .

Widgets are essentially placeholders for content. 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.

3. Image widget

1. & 2. Content block widgets

4. HTML widget Content modules are created and stored in the Ektron Workarea – a database and

administration area for all content – and can be re-used multiple times. So, for example, a

Contact us box can be updated once in the Workarea and automatically update across

multiple pages wherever it has been placed. Pages created in this way are known as

Pagebuilder pages and are stored in the Pagebuilder folder within the Workarea. You can

also navigate through them in design mode, using the menu’s, as you would on the live site.


1. Log in and navigate the W orkarea

1. Go to: https://cms-staging.brookes.ac.uk/cmslogin.aspx/ and log in using your

Brookes email login credentials.

2. Then select the ‘Launch Ektron Workarea’ option from the menu.

3. This will launch a new tab/window displaying the Ektron Workarea. The Workarea

defaults to the Desktop tab (this is a ‘housekeeping’ area for checking when content

is about to expire/come up for review). Select the Content tab in the Workarea.

4. To navigate through the folders in the left-hand pane, select the ‘+’ sign next to a

folder. This will open up the folder (the contents will display in the right-hand pane.)

Start off by navigating through to: > Folders > Main site

Full location path:…………………………………………………………………………


2. Create new folders

Within the Workarea:

1. Navigate to where you want the folder to sit (in the example below:

> Content modules > Simple text blocks > Page-specific > Business and employers >

Knowledge Transfer Partnership > Brookes Connect

2. Hover over New in the right-hand pane.

3. From the drop-down menu, select Folder .

4. A short ‘new folder’ form will display.

5. Give the folder a Name.

6. Description – leave blank.

7. Style Sheet – leave blank.

8. Two check boxes will automatically be ticked: Content Searchable ; and Display

Settings (circled). Leave these items checked .

9. Use the Add folder button (top-left) to save and exit.


3. The Document Management Store

Add a downloadable document to the DMS

From the Workarea:

1. In the left-hand folders pane, navigate to Site assets , then Documents , then

your project folder. Write your folder path here for future reference: Location

path:…………………………………………………………………………

2. In the right-hand pane, hover over New, select >DMS Document (circled).

3. A blank form will open (below). Enter a Title

4. Select Choose file (circled). The standard Windows Explorer pane will open allowing

you to navigate to where the document is stored on your PC.

5. Click on the file name to select it

6. Select Open .


Your screen will now look similar to the one below:

7. Select Publish to save the item and make it available on the live site. Note: you

need to add a link to the document before users can view it (see p. 12).

Adding more than one item to the DMS

When you finish creating a download, click on the folder name (in the left-hand pane) before

repeating the above steps. This will ensure your item is stored correctly.

Updating items in the DMS

To update an existing item, click on the title to select. Select Edit (circled below) and

repeat steps 4-6 above. Links across the site will then update automatically, you do not need

to go back in and edit each instance.

Please note, when naming your download, using the same title as your PDF file

(minus the .pdf) will help you find your content more easily. Other guidelines to

bear in mind when naming files:

• Omit punctuation from titles.

• Spaces are replaced with hyphens on the CMS – sticking to this rule and

using hyphens to separate words in the names of your files ensures your

PDF will be downloadable across browsers and platforms, and is also good

in terms of search engines.

• Choose a title which makes the content of your PDF clear – you could use

an abbreviation of your course or department, followed by an identifying

description.


Add images to the DMS

There is a central image library in the Workarea, found in Site Assets, in a folder called

Images. To add an image to the system from the Workarea:

1. In the left-hand folders pane, navigate to > Site assets (towards the bottom of the

listing) > Images , then navigate to your folder.

Path:…………………………………………………………………………

2. In the right-hand pane, hover over New, select >DMS Document.

3. A blank form will open (see below). Enter a Title , then select Choose file (circled).

4. The standard Windows Explorer pane will open allowing you to navigate to where the

document is stored on your PC. Click on the file name to select it, then, click Open .

5. Select Publish to save the item and make it available for inserting into your content.

Guidelines for image sizes

Pixel measurement:

• Central column - full-span images used in the central column content area - 555 x

340 pixels.

• Thumbnails/link images - 78 x 54.

• Banners – landing page/top banners 757 x 246 pixels and smaller banners are 757

by 170.

Adding more than one item to the DMS

When you finish adding an image, click on the folder name (in the left-hand pane) before

repeating the above steps. This will ensure your item is stored correctly.

Updating items in the DMS

To update an existing item, click on the title to select and select Edit (circled below).


4. Create a new content block

For each page within your issue/micro-site, you will need at least one content block. We

recommend that you create these blocks before creating your actual pages. Typically a

Simple Text Block will contain the bulk of your copy for a page. To create a new content

block:

1. Go to the folder Main site > Content modules.

2. Select the content type (eg > Simple Text Block and > Page specific) and select the

appropriate sub-folder in which to store your item – in the example below > Business

and employers > KTP > Brookes Connnect > Issue 1. Note, if a folder doesn’t exist

already you may need to create one (see p.4)

3. Make a note of your most frequently used path

here…………………………………………………………………………

4. From the menu in the right-hand pane, select New (circled below).

5. Then, HTML Content.


6. A new, blank simple text block will be created. Enter a title .

7. The ‘Content’ tab will open first, and as you bring your mouse below the blue tab, a

yellow/blue (dependent on browser) outline will appear. Click within the area to

enter text. (A toolbar will appear – you can reposition this toolbar using ‘drag and

drop’. See Getting started with the Aloha text editor for a full tutorial on how to use

the text editor.)

8. When you are finished with your text changes, choose Publish (circled). This will

save, check-in and publish the item (the item needs to be published so that you can

drop it on to your pages – it will not go live on the website until the full page is

published.


Link to a third-party website

1. Highlight the text you wish to use for the link.

2. Select the hyperlink icon from the text editor toolbar.

3. Enter the URL , then the Return/Enter key.

Link to a page on the Brookes central website

1. Highlight the text you are using as the link.

2. Choose the Insert tab on the text editor tool bar.

3. Select the library icon (circled).

4. A new window will open. Navigate to the folder, in the left-hand pane, then select

Quicklinks from the drop-down. A list of downloads will appear in the right-hand

pane.

5. Click on the title of the document, it will highlight in yellow. Select Insert .


6. Save (button top-left). The window will close.

7. Publish .

Link to an email


2. From the toolbar, select the link icon

3. In the entry field that displays, replace the http:// with:

mailto:[email protected]

Link to a document


2. Select the Insert tab from the toolbar.

4. Select the library icon (circled).

5. This will open up a window showing all the folders in the main site.

6. Use the left-hand folder pane to navigate to > Site assets > Documents (then to the

relevant sub-folder for your area).

7. Change the drop-down from Images (the default) to Quicklinks .

8. Locate and select the document from the list in the right-hand pane.

9. Select Insert .

Important : After creating a link, add ‘(PDF)’ to signal to users that the link opens a

downloadable asset, so that they may choose in advance whether they want to download a

document.


Insert an image

From within the content item:

1. Position cursor where image is to appear.

2. Open the Insert tab.

3. Select Library , using the book icon.

4. A windows navigation pane will open.

5. Navigate to > Site assets > Images and to the relevant sub-folder.

6. Scroll through to find your image. Note, when looking through the index of images, if

there are a number of images, it may be that you need to click through the pages

using the buttons at the bottom of the pane.

7. Click on the title of the image to select it.

8. Use the Insert image icon (circled) to insert the image into your content.

9. Publish your content.


Edit an existing content block from the Workarea

From the Workarea:

1. Click on the title of the item you want to edit.

2. Select Edit.

Edit a content block in design mode

Within design mode:

1. The tool bar defaults to preview mode. Switch to edit mode .

2. Select content .

3. Hover over the block you wish to edit . A content block menu (three parallel lines)

will appear top-right of the block. Click on the menu icon to open the edit menu for

that individual content block.


4. Select > Edit from content block menu.


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. Navigate to the folder you created in the earlier steps. Make a note of the path, for

future reference, here…………………………………………………………………………

3. Hover over New – select > Page layout.


4. 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.

5. Select Next .

6. 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).

7. Place a check mark against Content searchable . Manual aliasing should not have a

check mark against it (uncheck if checked).

8. Select > Next.


9. Add a Metadata title (note – this will form the page title at the top of your page).

The Metadata title 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.

10. Select Finish then OK – to begin editing the page.


5. Add content modules to a page

1. Open up the page you want to work on (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 (by clicking on it).

3. Select design to open the Page Builder master editing menu.

4. Select > Edit .


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.


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 [email protected]

7. Select > Content block .


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 to drop the block in.

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.

11. 3 icons will appear: Move, Edit, Delete – choose Edit (the pencil icon).


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.

14. If you are finished, choose Publish from the main menu.


15. Alternatively, to create a new content item, choose > New.


Reposition content blocks on a page

1. From the PageBuilder master menu, select > Edit.

2. Minimise the menu (by clicking on the arrow to close up the Page Action sub-menu) then hover over the content block you wish to move.

3. 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:


6. Publish your pages

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.


7. Creating links Creating links to external websites:

1. Select the text in your document to use as the link.


3. From the Insert tab, select the link icon (circled).

4. Type in the full URL and then use [Return/Enter] on your keyboard to set the link.

If you want to add any additional information, for example ‘alt text’, you will need to do this

via the source code. See ‘Editing source html’.

Creating links to the Brookes central website

8. Highlight the text you are using as the link.

9. Choose the Insert tab on the text editor tool bar.

10. Select the library icon (circled). A new window will open.

11. Navigate to the Pagebuilder folder, in the left-hand pane.


12. Select Quicklinks from the drop-down. A list of downloads will appear in the right-

hand pane.

13. Click on the title of the document, it will highlight in yellow.

14. Choose Insert .

15. ‘Save’ (button top-left). The window will close. Then ‘Publish’.

Creating links to documents

Creating links to documents is a two-step process, you will first need to add your document

to Site Assets (see 8. Add a file to Site Assets). You can add links to documents (found in >

Site Assets >Documents) from within the body of a content block.




12. From the Insert tab, select the library icon (circled).

13. This will open up a window showing all the folders in the main site.

14. Use the left-hand folder pane to navigate to > Site assets > Documents (then to the

relevant sub-folder for your area).

15. Change the drop-down from Images (the default) to Quicklinks .

16. Locate and select the document from the list in the right-hand pane.

17. Select Insert .

Important : After creating a link, add the text: (PDF) to signal to users that the link opens

a downloadable asset, so that they may choose in advance whether they want to

download a document.


8. Add a file to site assets

To upload a document or an image to site assets:

1. Go to the Workarea

2. In the left-hand folders pane, navigate to Site assets , then Documents or Images .

3. Navigate to the relevant folder.

4. In the right-hand pane, hover over the New menu, select >DMS Document.

5. Give the item a name.

6. Select the Choose file button. Browse to where the file is stored and save.

7. Select Publish .

CREATE AN EKTRON MICRO-SITE

Documents

Transcript of CREATE AN EKTRON MICRO-SITE