Update homepage

The homepage is updated to keep content current. For example, past events are removed and upcoming events are added.

The homepage is primarily used to direct viewers to various items of potential interest, e.g., upcoming events, color versions of “Prime Times”, past event stories, Board elections, an important article on the website. There may be as many as four or as few as one item(s) displayed. The job of updating is one of keeping the displayed items current.

The homepage is a basic web page (see Add a basic web page for information about a basic page and how to add content). The page is constructed from three Webspark Blocks: a Hero, a Card Arrangement, and a ASU Footer. Updating the homepage involves editing theCard Arrangement Block.

The updating process involves:

  1. Gathering information
  2. Deciding on edits
  3. Doing the edtis

Following are detailed, step by step instuctions on each of three parts of the process.

Getting started

To update the homepage you need three things: a picture, a brief write-up, and a link address. Generally, it is not your responsibility to solicit this material, although this is occasionally done. Rather you wait to hear from those who want to have something posted.

What do you do if the person requesting the update does not supply all the needed material? You have a couple of options:

  • Getting picture

    You can ask for a picture or try to locate one on the web. If the event has previously been displayed on the homepage, which is the case for the Pre-retirement Seminars, it is likely that there is an appropriate picture available on the website that you can access during the updating process. The recommended picture size is 588 x 200 (W x H) pixels.
  • Creating write-up

    You can ask for a write-up but generally you will create something enticing and interesting related to the item. If the item is an event you can look at the event write-up to help with the composition of your material.
  • Establishing link

    If the item is a current event or pre-retirement seminar the link will be to the Upcoming ASURA events or Pre-retirement seminars page. If the item is a document the updater should ask the submitter for the web address of the document.

The homepage can display from one to four cards. Updating requires deciding how many and which cards are displayed. Following are some general rules.

  • If there are fewer than four cards on the homepage, add a new card.
  • If there are four cards on the homepage, you will need to decide which card(s) should be replaced
    •  If there is an out of date card then replace the out of date card.
    • If there are no out of date cards then you will need to make a decision about which card(s) should be replaced. As an aid consider:
      • Event cards take preference over links to documents.
      • Pre-retirement Seminars and Event cards should be displayed
      • During February the Board Ballot card must be displayed
      • International Travel events have low priority
      • Events that are more than a month away have lower priority

Editing Instructions

  1. Open the homepage for editing (see Edit basic page, especially items 3 and 6) and then open the Card Arrangement block for editing. This brings up a page with a "Configure block" heading
  2. Click Cards – this opens the block and displays all the cards.
  3. Scroll down until you find the card you want to replace.
  4. Click on the Remove button located just above the card picture on the left
  5. Click on the Add media button which brings up a page for adding the desired picture.
  6. Click on Image and then on Choose File. This allows you to point your browser to the picture you want to use. Once you have selected your picture click on “Open”. This brings up a page with the picture selected on the left and some alternatives on the right.
  7. Click on the Decorative box and then select “Home Page Images” in the Directory box. Finally click on Save and insert. This opens up the card now with the new picture.
  8. In the Heading box add a short title for the card. Try to keep the length short enough that it displays on one line when displayed on the homepage. Note: The heading must satisfy the ASU web standards which limit capitalization to the first word and proper nouns.
  9. In the Body add your write-up for the card. The write up should be limited to around 50-60 words. To keep the card’s Heading short it is sometimes useful to have a sub-heading for the write up. If a sub-heading is used it should be level 4.
  10. The items under the CTA define the cards’s button properties.
    1. In the URL box enter the link address. If the link is to a page on the ASURA website, the link should have the https://asura.asu.edu removed, e.g.,

      "https://asura.asu.edu/upcoming-events" becomes "/upcoming-events".
    2. In the Link text box enter what happens when the button is clicked. The text should be short and an action, e.g., Register for seminar. Again, the web standards for capitalization apply to the text.
    3. Leave Select a target as “None”
    4. Set “Style” to “Maroon”
  11. Scroll down until you get to the last card and click on the Update button.
  12. Click on the Save layout button and review the results.
  13. Check to make sure the card's button works correctly and that there are no errors in the text. If there are changes, e.g., spelling errors, button link not correct, text too long, etc., open the Card Arrangement for editing and make the changes. When finished click on the Update button at the bottom of the page and then on the Save the layout button.

  1. Open the homepage for editing (see Edit basic page, specially items 3 and 6) and then open the Card Arrangement block for editing. This brings up a page with a "Configure block" heading
  2. In the Columns to Display box select the new number of columns, it will be one more than what is currently being displayed.
  3. Click Cards – this opens the block and displays all the cards.
  4. Scroll down to the bottom where you will find a blank card.
  5. Click on the Add media button which brings up a page for adding the desired picture.
  6. Click on Image and then on Choose File. This allows you to point your browser to the picture you want to use. Once you have selected your picture click on “Open”. This brings up a page with the picture selected on the left and some alternatives on the right.
  7. Click on the Decorative box and then select “Home Page Images” in the Directory box. Finally click on Save and insert. This opens up the card now with the new picture.
  8. In the Heading box add a short title for the card. Try to keep the length short enough that it displays on one line when displayed on the homepage. Note: The heading must satisfy the ASU web standards which limit capitalization to the first word and proper nouns.
  9. In the Body add your write-up for the card. The write up should be limited to around 50-60 words. To keep the card’s Heading short it is sometimes useful to have a sub-heading for the write up. If a sub-heading is used it should be level 4.
  10. The items under the CTA define the cards’s button properties.
    1. In the URL box enter the link address. If the link is to a page on the ASURA website, the link should have the https://asura.asu.edu removed, e.g.,

      "https://asura.asu.edu/upcoming-events" becomes "/upcoming-events".
    2. In the Link text box enter what happens when the button is clicked. The text should be short and an action, e.g., Register for seminar. Again, the web standards for capitalization apply to the text.
    3. Leave Select a target as “None”
    4. Set “Style” to “Maroon”
  11. Scroll down until you see the Update button. Click on the button
  12. Click on the Save layout button and review the results.
  13. Check to make sure the card's button works correctly and that there are no errors in the text. If there are changes, e.g., spelling errors, button link not correct, text too long, etc., open the Card Arrangement for editing and make the changes. When finished click on the Update button at the bottom of the page and then on the Save the layout button.

This update occurs when you notice that there is a card that is out of date but do not have a new card to replace it.

  1. Open the homepage for editing (see Edit basic page, specially items 3 and 6) and then open the Card Arrangement block for editing. This brings up a page with a "Configure block" heading
  2. Click Cards – this opens the block and displays all the cards.
  3. Scroll down until you find the card you want to delete.
  4. Click on the Remove button located above the card picture on the right. If asked to confirm say "Yes".
  5. Scroll down to the bottom of the page and in the Columns to Display box select the new number of columns; it will be one fewer that what is currently being displayed.
  6. Click on the Update button.
  7. Click on the Save layout button and review the results.
  8. Check to make sure you deleted the correct card. If you deleted the wrong card you will need to replace the card that should have been deleted with the mistakenly deleted card.

 


Updated January 12, 2023 by BW McNeill