Technical Issues: Please Contact (Teresa Saljanin)

Transcription

1 Objectives: Wire Frame Tasks What is a Page Builder? How to add a New Page. Creating Menus. Creating content. Linking Content to a page. Adding Image to Wire Frame Adding Flex Menu Adding to blue area. Content Block Tasks How to edit text How to create a link. How to add images. Content Editor User vs. Approver User. Versions of a page. Scheduler. Technical Issues: Please Contact (Teresa Saljanin) tsaljanin@lagcc.cuny.edu What is a Page Builder The Ektron page Builder allows users to create, deploy, and manage a website, this Content Management System or CMS, allows users, designers, and developers to work in parallel, creating a more efficient and updated website. This page building system allows us to make content updates directly on the site using a browser-based editor. Users are able to edit site wireframes, and ensure consistency within each page. Web site building and maintenance need to be present in every environment. The key is that each person focuses on the specific role that they play in meeting the business challenges of the organization. Ektron Page Builder can enhance the roles that each member of your Web team plays, maximizing the strengths of their positions. Training Link: Ektraining.laguardia.edu/departments/ismd/home LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team.

2 The Site Architecture has been setup in to 2 main parts CONTENT and PAGES Content: The content area allows the user to create data, such as documentation. Any data that the user would like to include on the page will be setup here first. Pages: After the content has been created or updated we are now able to take that data and incorporate it to our website page. By simply linking the content using our tools from the pull down section, we can easily populate our updates to the active page. Log In First you will need to log in to an account that has been already set up for you. 2 P a g e

3 Once you log in you should see the following view. Add a New Page Access the Folders section on the left pane and select the appropriate path where the page will be created and stored. 3 P a g e

4 Select Page Layout from the New drop down menu. TEMPLATES When creating a new page we will have the option to select different template styles for the created page site. Basically each template portrays the layout of the way the webpage will be setup and viewed online. Such as the location of menus, information, widgets and other features available when creating a website. Select the Tertiary Layout and click Next. 4 P a g e

5 Enter a Proper title for the page, and click Next to continue. Enter your title once more in the Metadata section. 5 P a g e

6 Scroll further down type Home User (#) in the Text: text box and click Add to have it displayed in the Included: field text box on the right. Scroll further down and include a Description for themetadata tab and click Finish. 6 P a g e

7 A Page Creation Successful prompt will appear allowing you to continue editing the page if need be. The page has been created successfully. Select OK to acknowledge. A New Blank page should look like this: 7 P a g e

8 Creating Menus Go back to the Work Area where we will create menus, on the right pane click New and select Menu from the bottom of the list. Give the menu a title and brief description (Note: This Process creates a menu and its associated links.) 8 P a g e

9 Select Add Menu to apply and save. The next step is to Create links in the newly created menu, click on Add Items First we will create an internal menu Link, upon selecting add items, select Content Item then click Next 9 P a g e

10 We will now navigate through the paths to find our previously created page, select MainSite Select Pages will take the user to the location of the created page in which the link will be associated with. Select the Departments folder 10 P a g e

11 Select ISMD folder Check the box that corresponds to your page and then select Add You have successfully added your page to your newly created menu. 11 P a g e

12 The second link we will create will be an external menu link, select Add Items once more. This time select External Hyperlink and click Next to continue. Enter a proper Title and Link that we will be redirected to upon selecting that menu item. Then select Save 12 P a g e

13 You should now see the second link, we need to edit it further, select the newly created external link. (Note: This will allow us to make changes to the way it responds to our actions.) Enter a brief Description and choose POPUP from the Target section. Once done select Save to apply. We have successfully created Two Links: One Internal and the other External. 13 P a g e

14 Creating Content To create content that will later be placed on the page; you need to navigate into the Content folder, Go to New and select HTML Content. Enter desired Title and relevant information in body of content area. Select the Save and Publish button located to the far top left of the page. 14 P a g e

15 Once published content will look like this Linking Content to Created page Navigateback to the wire frame (web page where data will be added as content block etc.) 15 P a g e

16 From the Pull down Menu and drag the Content Block and bring down to center content / edit section, and release. 16 P a g e

17 Once released the page will look like this, Select the Content Block Edit button. Choose the path where the content is located, Select Desired content and click Save. (Note: Need to make sure the selection is highlighted blue; otherwise it will be considered as a non-selected item and will not be added.) 17 P a g e

18 Content is now linked to wireframe page. File and Publish 18 P a g e

19 Final Look 19 P a g e

20 Adding Image to Wire Frame To continue working on Wire Frame and Content, after publishing you need to pull down the Filemenu (Note: If File Menu is not visible got to the upper left and then pin the menus to the top of the page.) and select Edit to bring up the edit options on wireframe page. From the Pull down menu, drag and drop the ContentBlock to the top right portion of the page. Select the Edit button and navigate to thepath where the images are stored,selected the name and populate to page by pressingsave. 20 P a g e

21 The image has been set.pull down the File menu once more and Publish. Will look as below 21 P a g e

22 Adding flex menus Select Edit from the File menu, bring down the pull menu and scroll to the right until Flex Menu option is visible. Drag the Flex Menu down to the bottom third box on the center left of the wire frame site location and release. Select the Edit button. 22 P a g e

23 From the Drop DownArrow menu select ex: User (#) Menu or desired option from available list, and select Save to apply. 23 P a g e

24 Select Publish from the File Menu once again to see the presence of the flex menu. Adding items to the blue area Select Edit from the File menu, in the Pull Down area drag and drop Content Block into the left most section on the bottom of the page. 24 P a g e

25 Select the Edit button within the Content Block Select thepath once again this time selecting the designated Blue Area Folder/ Location,select desired item and Save. 25 P a g e

26 Once done select File and Publish to view page look. 26 P a g e

27 How to edit text 27 P a g e

28 Now let s see our web page and decide on what we are going to edit. We then hover over the dot and select Edit You should be taken to the work space where you can edit the content. 28 P a g e

29 Simply change the desired text and click on the publish icon. Now you should see the changes have been made. 29 P a g e

30 How to create a link Let s assume that we want to create a link on the following page. First we hover over the dot where the content we want to change is located. Then click Edit Highlight the area you want to become a link. Once you click on the hyperlink icon, a window should appear. 30 P a g e

31 Enter the URL, Target and Tooltip. Then select Ok. How to add images Assume we want to insert an image on the following section where the arrow points out. 31 P a g e

32 Click the Library Icon. Select the image option and Click on the Add Library Icon. 32 P a g e

33 Insert the Title, Browse for the image and Insert the Description. Now click once more on Library Icon, to embed the image to the web page. 33 P a g e

34 You should see the following result. To publish the page, click on the publish Icon. 34 P a g e

35 Finally your page should look like the following image. Content Editor User vs. Approver User Content EditorUsers can edit the page only to be approved and published from the Approver Users. How does it work? An is sent to the Approver Users, notifying that a changes been made on the content from Content Editor Users. The changes than are verified from the Approver Users. Finally the content is published once reviewed from the Approver Users. 35 P a g e

36 Note to Approvers: Go directly into the CMS via the "work area" link. This will bring you to your smart desktop screen. Follow these steps: 1. Click on the "content awaiting approval" link to view the pages you need to approve. 2. Select a page and click on the link - this will open the work area for this page. 3. Mouse over the icons located at the top of the page for additional options such as: view difference, view publish, edit, decline, or publish. Publish - approves the content and releases it to the live site. Versions of the page Version is the ability to restore content.let us see this example in action on the following page. Hover over on the dot. 36 P a g e

37 Below are the versions of the previous page. Version number on the left, a green circle next to version indicates a version that was published. Versions without a green circle indicate content that was checked-in but not published. date and time when a version was checked in or published title of content last user who edited content comments entered by user to describe nature of changes made To view any version, click its title. When you do, the Content History window appears for that content. 37 P a g e

38 Scheduling Scheduling lets you control when a version of content becomes visible on the Web site. Similarly, you can remove content on a predetermined date and time. When used together, a start and end date can relieve you of much work by managing how long a version of content is viewable on your Web site.let us see an example. First we hover over the dot and click Edit. On the Ektron workspace click Schedule. Select the Start date and the End date. 38 P a g e

39 What Happens After I Set a Start Date? After saving the content, it appears on the Content Pending Start Date report, which helps you keep track of content with a future start date. After you set a go-live date and the content completes the approval chain, two scenarios may occur: The Content is new. The content already exists, and you arepublishing a new version Each scenario is now explained. Setting the Go-Live Date on New Content When you set a go-live date on new content, it becomes viewable on the specified date and time as long as it completes the approval chain. If a site visitor accesses the page that contains the content before then, he sees only the template. If a logged-in CMS user browses your Web site, he sees a grey border around the content until the date specified. If he clicks within the grey border, he can use the Preview option to see the new content. What Happens After I Set an End Date? You have three choices for what to do with content when it reaches its end date. If your choice means the content will not appear on the Web site, Ektron recommends having another content item ready to replace it. If not, and a site visitor visits the page containing the content, he sees the template without the content. Appearance on Content Reports After content reaches its end date, it appears on the Expired Content report, which helps you track expired content. Setting the Go-live Date on Existing Content When you set a go-live date for changes to existing content, and it completes the approval chain, a logged-in CMS user sees a grey border around the content until the date specified. When you view content on the Web site, you see the previously published version. When the golive date occurs, the new content replaces the previous version, and its status changes to Active. 39 P a g e