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 eight 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 an ASU Footer. Each item to be displayed is a "card" and updating the homepage involves adding / deleting / moving cards in the the Card Arrangement Block.

The updating process involves:

  1. Gathering information
  2. Deciding on card location
  3. Editing the cards. i.e.., adding, moving, or deleting a card

Following are instructions and information about each of three parts of the process.

Getting started

What you need to update the homepage are pictures, a brief informative write-up, and a link address. This material comes from from a variety of sources depending on item. For example:

  • For ASURA events (upcoming and past) and Pre-Retirement Seminars
    • Use the picture from the announcement or past event. Either copy the picture or use the original located in Wild Apricot or Zenfolio. If you want to use the announcement picture ask for the picture's name and folder location.
    • Use the first sentence or two of the announcement or event story. If you feel this is not enough of a come-on, write something you this is better. 
    • Use the link to the Upcoming ASURA events or Pre-retirement seminars page.
  • For Prime Times
    • Crop (4 by 3 W by H) the top of the cover page and save it on your computer. If you think you have a better picture use it.
    • Use something like  "The color version of Fall/Spring/Summer Prime Times is now available".
    • Link to the PDF version of Prime Time save on the website. If you did not upload the PDF file ask for the file address.
  • New Board member election
    • Use an Image from the "Home Page Images" directory or add a new image to this directory.
    • Write something about voting for new Board members.
    • Contact the chair of the nomination committee (should be the Past President) and ask where to link the page.
  • Other items (you get the idea from the items above)
    • 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 repeat events, it is likely that there is an appropriate picture available in the website's "Home Page Images" directory that you can access during the editing process. The recommended picture size is 4x 3 (W x H).
    • 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 document the process is a bit more completed. 
      • If the requester has already uploaded the document to the website, ask for web address.
      •  If the requester has not or cannot upload the document to the website, ask for the PDF and upload the file (see uploading document). If you get a WORD document you will need to convert it to a PDF format before uploading. 

The homepage displays three columns of "cards". i.e., items. If there are more than three cards a second row of three is automatically created. I am not sure if there is a limit on the number of rows, but needing / wanting more than two rows is unusual.

Deciding on the card layout requires deciding on the card's priority.

  • High priority items appear in the first row.

     

  • When deciding on priority consider:
    • Event items have high priority
    • If there are more than three events, priority is set by event date, soonest to latest
    • Event items take precedence over Pre-retirement Seminars
    • During February the Board Ballot item must have the highest priority
    • International Travel events have low priority
    • Events that are more than a month away have lower priority
    • Prime Times should get priority over Event Stories and events more than a month off.

Editing cards

All new cards are added as the last card.

  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 the Add Card button; click on this button.
  5. Click on the Add media button which brings up a page for adding the desired picture.
  6. Click on Image and then on Browse to point your browser to the desired picture yo. Once you have selected your picture click on “Open” which brings up a page with the picture selected on the left and some text.
  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 card 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” except for a Ballot page which has a gold Style
  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.

As pointed out above new cards are the last card and this may not be the location you want (see moving cards below). If the desired new card location matches a location of an expiring card, it is easiest to just replace the expiring card with the new card. This eliminates the old card and locates the new card in the correct location.

  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. You will see two "Remove" buttons, one under the Card heading and one under the Media heading. Click on the second Remove button under the Media heading. 

  5. From this point on just follow the directions for adding a card (see previous accordion panel).

     

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 just below the Card heading. If asked to confirm say "Yes".
  5. (optional) If you have three or more cards displaying you are done and should go to item 6 and finish the task. However, If you have only two cards displaying and would like to have them fill the page, scroll down to the bottom of the page and in the Columns to Display box select two columns. If you do this don't forget to change it back to three when you get a new third card to display.
  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.

While apparently possible to move cards around using the "+" icon,  I have rarely had this work. As an alternative you can use a dummy page as a temporary card. There are a number of different scenarios but they are all similar to the follow example.

To switch the locations of cards A and B

  1. Add a blank card C
  2. Copy the details from Card A to Card C
  3. Replace Card A with the details from Card B
  4. Replace Card B with the details from Card C
  5. Delete Card C.

 

Updated March 18/19, 2025  by BW McNeill

Maps and Locations Jobs Directory Contact ASU My ASU
Repeatedly ranked #1 on 20+ lists in the last 3 years
Copyright and Trademark Accessibility Privacy Terms of Use Emergency