Transcript
Page 1: Step 2: Adding/Editing Content AEM Components

Step 2: Adding/Editing Content AEM Components

Colorado Virtual Job Fair

Page 2: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 1 of 54

Table of Contents Accessing VJF ............................................................................................................................................................................. 2

Home Page Section.................................................................................................................................................................. 9

Employer Chat Section .......................................................................................................................................................... 31

Job Openings Section ........................................................................................................................................................... 45

Veterans Section ..................................................................................................................................................................... 51

Resources Section ................................................................................................................................................................... 53

Page 3: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 2 of 54

Accessing VJF

Page 4: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 3 of 54

Login Page: http://10.33.31.96:4502/

Navigate to your Work Force Center Content Folder

Navigate to Sites via the left side menu.

Three tiles:

1. Single Employer Blueprint 2. Multiple Employer Blueprint 3. virtualJobFairSites Folder

Page 5: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 4 of 54

Navigate to the Folder – virtualJobFairSites

Page 6: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 5 of 54

Navigate into your folder.

Now Hover over the site you want to edit.

4 icons will appear.

Click on the Pencil Icon to open that site in a new window.

Page 7: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 6 of 54

2nd Icon, Top Left. Click

Go down to Open in Classic UI, Click.

Page 8: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 7 of 54

Click on the blue hyperlinks (2 times total) to get to the homepage.

Page 9: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 8 of 54

TIP: To get rid of the left side menu, take “cf#/” out of the URL and hit enter

http://10.33.31.96:4502/cf#/content/virtualJobFairSites/arapahoe/grandjunction2015/en/home.html

http://10.33.31.96:4502/content/virtualJobFairSites/arapahoe/grandjunction2015/en/home.html

Page 10: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 9 of 54

Home Page Section

Page 11: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 10 of 54

Here is the VJF site.

Hovering over the top puts a green border around the Header Component.

Right click to edit the Header Component.

Page 12: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 11 of 54

Click on edit.

Page 13: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 12 of 54

You will see 3 tabs.

1st tab is to add the logo. Logo template is provided by Terry. This is a template you will edit for the appropriate logo of the VJF site. It will be saved on the desktop you are using. Click on Gray Icon to upload the logo.

Page 14: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 13 of 54

The 2nd Tab is for the Properties of the Logo.

Title and Alt Text are required for all Images! This is meet compliance.

Page 15: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 14 of 54

3rd tab is for selecting the background image. These images cannot be changed as they have been approved already.

When finish will all three tabs, Click OK.

Page 16: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 15 of 54

Text Component

Again, right click and click on Edit to edit the content of this component. The green box around the area means that component is currently being selected.

Page 17: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 16 of 54

Edit the text in the field.

Down below are advance options for HTML/CSS customization. Text size, color, etc.…

Click OK when finished.

Page 18: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 17 of 54

You now see your changes reflected on the site.

Page 19: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 18 of 54

Image Button Component

This component uses a blank image for the button with an editable text overlay to give the user a description of what the button does. Right click and click on Edit.

Page 20: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 19 of 54

The first 2 tabs are the same as the Header Component.

1st tab is to upload/change the picture.

2nd tab is for the Title and Alt Text (Required)

3rd tab is for the Text Overlay, and additional color option. Default is black when left blank.

Page 21: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 20 of 54

Navigating back to the 2nd tab to choose where this link takes the user.

Click on the Magnifying Glass that’s in line with the “Link to” text.

Navigate your folder, then to this site, then to the page desired. Click OK

Note: An external site can be manually typed in this box, but it requires “http://” or else it will break the link.

Click OK when finished.

Page 22: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 21 of 54

Changes reflected.

Page 23: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 22 of 54

Down below are 3 Image Components

The 1st tab is to select an image and upload it.

To clear an image that already exists hit the clear button.

Page 24: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 23 of 54

Click on the Gray Image then select the image from your file system.

Page 25: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 24 of 54

Click on the 2nd Tab

Page 26: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 25 of 54

Page 27: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 26 of 54

The 2nd tab should seem familiar at this point.

Title and Alt Text are required.

Link to: “http://” is required on ALL external links.

Use the Magnifying Glass to find an internal page to the site you’re on.

Page 28: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 27 of 54

Delete Component Example:

Right click. Delete. Click.

Page 29: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 28 of 54

Copy Component Example:

Right Click.

Page 30: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 29 of 54

Copy. Click.

Page 31: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 30 of 54

Right click on the box you want the new component to be. Paste. Click.

Page 32: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 31 of 54

Employer Chat Section

Page 33: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 32 of 54

Multiple Employer Chat Page

Note: this blueprint will already have some examples on it by the time you’re using AEM.

Click, hold, and dragging a 4 Column Component into the dotted line box.

Page 34: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 33 of 54

The purple dotted box means it’s good to unclick the mouse button.

Page 35: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 34 of 54

4 Columns.

Page 36: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 35 of 54

Dragging an Employer Chat Component do the 1st column.

Page 37: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 36 of 54

Page 38: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 37 of 54

Hover over new component, right click. Edit. Click.

1st tab is the Employer Name then the link to their Adobe Connect Chat Session

2nd and 3rd tab should be familiar to you. It’s for the Employer Logo.

Page 39: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 38 of 54

The last 7 tabs are for the employers daily chat schedule.

As you can see below it allows for 2 blocks of time during each day. To enable that day schedule, make sure the Enable Day checkbox is selected or else the chat link will not activate during that day.

Page 40: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 39 of 54

Active Chat Example.

Page 41: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 40 of 54

Inactive chat example.

Note: ignore “Wed” it will not be there, it was for development/testing purposes.

Available Time link becomes active. Show pop up of available Days and Times. See next screenshot.

Page 42: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 41 of 54

Page 43: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 42 of 54

Single Employer Chat Page

This chat component is similar to the one above when editing minus the employer logo and name option.

Right click to edit.

Page 44: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 43 of 54

Provide the Adobe Chat link.

Page 45: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 44 of 54

Setup the daily schedule. Make sure Enable Day is checked for that day.

Note:

When the chat is not active, the page will display a list of days and time the employer will be available just below the orange bar, very top of the main white bodied background. This hasn’t been captured yet when this document was written.

Page 46: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 45 of 54

Job Openings Section

Page 47: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 46 of 54

Job Openings Page

No components can be added on this page. It is made up of one custom component.

Right click. Edit. Click.

Page 48: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 47 of 54

Jobs are categorized.

To add a job listing, click on Add Item.

Then fill in the Name and the URL.

Format:

EMPLOYER; JOBTITLE

Page 49: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 48 of 54

Click OK when finished.

Page 50: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 49 of 54

Change Reflected

Page 51: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 50 of 54

Repeated steps above to add another job under a different category.

Page 52: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 51 of 54

Veterans Section

Page 53: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 52 of 54

Veterans Pages:

Any veteran’s resources from your workforce center or employer go here.

Simple text and image components make up this page.

Page 54: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 53 of 54

Resources Section

Page 55: Step 2: Adding/Editing Content AEM Components

[STEP 2: ADDING/EDITING CONTENT AEM COMPONENTS]

Page 54 of 54

Resource Page:

Blank slate for all your workforce center and employer(s) resources to be listed.


Recommended