Virginia Tech® home

Event Pages

Event pages are utilized for promoting events that are put on by the Office of Research and Innovation and its units. Event pages are created under the main Research and Innovation events directory.  Each event can be tagged for its host/office so that it can be fed to unit pages in its respective event feed. 

Event pages are created to give greater visibility to events sponsored and administered by the Research and Innovation office. This includes special events, training, and seminars.

Base Structure

Structure

  1. Introductory Paragraph
  2. Event Date and Signup Details Box
  3. Speaker Information
  4. About the event series (if applicable)

Introductory Paragraph

The introductory paragraph should give a brief overview of the event. This should include topic of discussion, name of any prominent guest speakers, and the date of the event. This will be formatted with a Paragraph <p> tag.

A screenshot of an event page showing the page title (title of the event) and the event description paragraphs.

Event Date and Signup Details Box

  • Event name  (Formatted with Paragraph tag <p>, in Bold font)
  • Shorthand date | time of event (Formatted with Paragraph tag <p>)
  • For in-person meetings, provide the meeting location with its address.
    • Example:
    • Fralin Hall Auditorium, Fralin Life Sciences Institute
    • 360 W Campus Drive
    • Blacksburg, Virginia 24061-0477
  • Call to Action link button
    • Filled, Dark, Uppercase, Center Alignment
    • URL goes to Registration Page
    • Text corresponds to what the registration is for.  Examples:
      • Register for Zoom
      • Register for In-Person

*Note - if there is an in-person and zoom registration, you will need to use a multicolumn component to put the call-to-action link buttons in.

A screenshot showing the outlined box of event information highlighted on an event page.

Event Host

This layout will be dependent if you have 1 or 2 hosts.   

If One Host:

  • Host heading (Heading 3 <h3> tag)
  • Host name (Heading 3 <h3> tag)
  • Host contact information (Paragraph tag <p>)

If Two Hosts:

This will be in the following order:

  • Host Heading
  • Columns featuring Hosts
    • Image
    • Host Name (Heading 3 <h3) format, linked to their bio page or department page)
    • Host Job Title (Paragraph <p> format)

To create the column cards that feature the hosts:

  1. Drag over a container component and then drag over multi-column component inside the container.  Set the container CSS Class property to “colwrap”
  2. Drag over container component to each column
  3. Drag over an image component and text component to each column.  Text within text component will be styled as:
    1. Host heading
    2. Host name
    3. Host contact information

Speaker Information

For a single speaker, the layout would showcase a heading, image, and bio paragraph of the speaker in a multi-column format.

Column 1

  • Image
  • Name (Heading 3 format)
  • Job Title (paragraph format)

 

Column 2

  • Bio (paragraph format)

HTML formatting would be:

  1. Speaker name (Heading 3 <h3> tag)
  2. Speaker job title (Paragraph <p> tag)
  3. Bio information (Paragraph <p> tag

Repeat for each speaker as needed. 

A screenshot showcasing a the speaker section of an event. The image, name, and job title are in the left column. The speaker's bio is in the right column.

If there are multiple speakers, bios for each speaker is optional.  In many cases if there are more than 2 speakers, no bio is provided and each speaker is presented in a multi column format. 

If less than 3 speakers, you would repeat the steps above for providing a speaker. 

Multiple Speakers with Bios

Multiple speakers will make use of the multi-column component.  4 columns is the maximum number of columns going across.  If there is bio information, it is recommended to NOT use a multi-column component and to simply use a container and stack the speakers in a single column.    

Structure would include for each speaker: 

  1. Drag over a Container component
  2. Drag over a Multi-Column Component into the Container component.
    1. Left Column
      1. Image component for the speaker's photo
      2. Text component: speaker's name (first and last linked to bio page or website) in Heading 3 <h3> format. The job title and office/company would follow in Paragraph <p> format.  
    2. Right Column
      • Text component featuring their bio information

Repeat for each speaker.

A screenshot showcasing a the speaker section of an event. The image, name, and job title are in the left column. The speaker's bio is in the right column. There is a border at the top of the two columns which will separate it from the other speaker information.
Example above: the layout of content for multiple speakers presentation. For each speaker after the first presented speaker, a border would be applied to the top of each additional speaker container. This would be applied by Bobby before publish.

Multiple Speakers Without Bios

For more than 3 speakers this will be created by:

  1. Drag over a Multi Columns component. 
  2. Left click on the component and left click the wrench icon for the component properties. 
  3. Set the column number in the "Number of Columns" dropdown to the amount of speakers you have (3, 4).  If you have more than 4 speakers, select 4 and then add another Multi Columns component for the next row of speakers. 
  4. After selecting the column number, add to the "CSS Class" field: colwrap.
  5. Click the "check" icon in the upper right to accept changes. 
  6. In each column add a container, image and text component. 
  7. Choose an image from assets if it exists for speaker, or Bobby can source an image and format and add to assets and add to the page. 
  8. For the text component you will use an Heading 3 <h3> tag for their name and a Paragraph <p> tag for their job title and department or company. 

About the Event Series (if applicable)

This will be a standard heading and paragraph. 

  • The Heading will be a Heading 2 <h2> tag.
  • The text below the heading will be a standard paragraph <p> tag.