Adobe Portfolio (Pf) - Tutorial 2

Creating a website with embedded resources using Adobe Portfolio

 

Difficulty: Medium

What you will learn: How to create a multi-page website with emebds such as Google Forms and PDF's, using Adobe Portfolio

Example Website: https://louisandersonb238.myportfolio.com

Step 1 - Setting up a webpage

  1. Adobe portfolio is a web-based website tool that can be found @ www.portfolio.adobe.com. Use your MQ username and password to sign in.
  2. Click ‘New site’ and choose a theme (I chose Ludwig).
  3. Click the blue button ‘Use this Theme’.
  4. Click the blue plus and add a Welcome Page.
  5. Title it ‘Home' and tick the 'make this my homepage' box. On the left select a layout. The example is using the '50/50 left'.
  6. Select the ‘Pages’ tab on the left and click on the blue plus, to add more pages. Add three more, naming them The Proposal, Documentation and Survey respectively. With each page, select it's destination as 'Navigation'.
  7. Click back onto the 'Pages' menu.
  8. Select the settings drop down menu for the Contact page and 'delete page'.This menu provides useful page options. No more are required for this step.
  9. Return to the pages tab and click and drag the pages into position using the three lines. Position the pages so that Home is first, The Proposal is second, Documentation third and Survey is last.
  10. Toggle the ‘Work’ page by clicking the slider. This turns the page off.
  11. Your pages tab should look like this:         
  12. Click the 'back' arrow to close this tab.

Step 2 - Customising each page

  1. The left menu displays options listed under 'Essentials', 'Site-Wide', 'This Page' and 'All Pages'.
  2. Click on 'pages' and click your 'The Proposal' page.
  3. Background, colours & font will allow you to set a site-wide background image (or colour), colour scheme and font. Any image can be uploaded and used as a background (by clicking the ‘upload’ button), however we will set a colour. Scroll down to the bottom of the menu and click the colour code, allowing you to select a custom background colour. Word font can be changed by clicking on the 'Fonts' drop down menu and selecting a font.
  4. Return to the main menu using the 'back' button. Click on 'Media content styles'. This drops down a menu which allows the changing of settings for all text, media and embeds in your website. Clicking on 'media content styles' again will close this drop down menu.
  5. Clicking on 'Logo' gives the options between a text or image based logo. I have chosen an image and used the Randwick council logo in the example. Save your logo to your computer and upload it here. Make sure the 'Link To' option is selected as 'Home'.
  6. Back in the menu, click on 'navigation' and make sure that all sliders are turned off, apart from 'page titles'.
  7. Whichever slider is turned on, the corresponding navigation option will appear in the navigation bar. As we only need a Logo and Page titles, all other options have been turned off. Go to navigation container > Style to edit navigation colour, height and alignment. Navigation container > Width allows you to adjust the position of the page titles and logo within the navigation bar. The examples' is set to this:
  8. Go to your websites home page (Pages > Home) and click the blue 'add module' button. To find this button, hover your cursor over a seam between other modules.
  9. Additionally, on new empty pages, a menu 'Start building your page' will be available, which also allows you to add modules.
  10. Select the 'Text' option. A text box will appear that will allow you to type what you wish. Highlighting your text brings up the text editing options.
  11. Click the blue 'add module' button and select the 'Button' option. A button will appear. Move the cursor over the button and click the blue 'button' drop down menu. Select 'edit button'. On the menu on the left change the text of the button (the example uses The Proposal). Then click 'link to' and select your page 'The Proposal' from the drop-down menu. You have now created a button on your Home page that links to you Proposal page.
  12. You shoul now be able to use the modules to customize each page. Play around with the fonts, themes, colours and content of your webstie before you move onto Step 3.

Step 3 - Embedding a PDF

  1. Make sure to export your desired document as a PDF.
  2. Head to your MQU Google drive and click + New > File Upload. Select your saved PDF and click 'Open'.
  3. On the left menu click 'Recent' and doulbe click your PDF.
  4. Click 'three dots' at the top right and select 'Open in a new window'.
  5. Again, click the three dots  and select 'Share'. Click the 'Get Link' section of the pop up and change 'Restricted' to 'Anyone with the link'. This makes your PDF visible to anyone visiting your website. Click Done.
  6. Click the three dots again and select the 'Embed item...'  option. Copy the code.
  7. Go to your ‘documentation’ page on Adobe Portfolio. Click the ‘module plus’ symbol and select ‘embed’. Paste the embed code into the text box on the left and click ‘save embed’.
  8. Your consultation document will now be embedded into your webpage.

Step 4 - Creating and Embedding a Google Form

  1. Log into google using your student account and click the ‘Google Apps’ dots at the top right of the webpage, opening a drop-down menu. Select the purple ‘Forms’ application.
  2. Click on the ‘blank form’ button. Add a title (and description, if you wish)
  3. Click on the first question and change its title. It would be wise to have your questions and the layout of each prewritten.
  4. Select the drop-down menu on the right and choose the style for that question 
  5. Styles include, multichoice, short and long answer and scale.
  6. Options to add answers can be found below the question title
  7. To add another question, click on the ‘plus’ symbol
  8. If you want to make a question mandatory, select the ‘Required’ slider
  9. Clicking on the ‘theme’ button offers options to customise the survey’s theme.
  10. Click the ‘settings’ button and in general, make sure that both boxes under ‘Requires sign in’ are unchecked. Click ‘save’. The settings should look like this:
  11. Once the form has been created, click on the ‘send' button  and then click the ‘embed’ button. Change the width to 1000. This will give you an embed link that you can then copy and paste into Adobe portfolio:
  12. Go to the desired page on Adobe Portfolio. Click the ‘module plus’  symbol and select ‘embed’.  Paste the embed code into the text box on the left and click ‘save embed’.
  13. Your google form should now be embedded within your webpage.
  14. Disclaimer: To view responses, log back into Google Forms, enter your survey and click the ‘responses’ tab at the top

Step 5 - Embedding a Video

  1. If you have created a video on Adobe Premier Rush/Pro, make sure you have exported it as an MP4.
  2. Create a new page for your video and click on the 'Video' module. Select your video you have saved to your computer. Click 'open'.
  3. Depending on the size of the video, it may take a long time to upload and process within your webpage.
  4. Once the bar has loaded all the way, you can leave the video to process on its own.
  5. ALTERNATIVELY, you can upload your video to YouTube , watch the video, click 'Share' and get then click 'embed' and copy the code .
  6. Then paste the embed code within an embed module in your website.

Step 6 - Go Wild

This guide has given you a basic understanding of the features required for your Consultation website. Adobe Portfolio has much more to offer. It would be wise to explore its other features and create a customised and personalised website that supports your consultation topic.