Event Highlight

Creating Components

On this page:

Event Calendar example

Event highlight example

Event Link

What is an Event Highlight?

The Event Highlight component is a visually appealing event view that allows you to add events to any page. 

How to add an Event Highlight 

  1. Click the edit link at the top of the page 

    Example of selecting the edit button on a page
  2. Move your cursor where you want to place the component. (Add a section if needed). 

  3. Click the plus icon.

    Example of the plus icon with a red square around the icon

  4. Select Event Highlight from the menu

    Example of the Event Highlight menu selected

Content 

  1. Add a custom Title for your Event Highlight.
    Note: Title field text is limited to 70 characters.

    Article highlight title field

  2. Optional: Filter the event displayed in the view. In the Filter event by field, start by typing an article type, category, topic, or tag. Select the term.

    Example of the ending featured article field article highlight

  3. Optional: Filter the events displayed in the view. In the Filter event by field, start by typing an event type, category, topic, or tag. Select the term.

    Example of the ending featured article field article highlight
  4. Optional: Add a link to all events. To find a list of all the articles, event your website and add /events/search at the end of the path (e.g. medschool.ucla.edu/events/search). 

  5. Filter the events by categories and/ or topics.  

    Filter article results
  6. Copy and paste the filtered search URL into the URL field. 

  7. Add Link Text for the URL. 
    Note: Link text is limited to 45 characters.

    Example of the edit URL and link fields


     

Styles 

  1. Toggle to the Styles tab. 

    Example of the Styles option selected
  2. Select the amount of additional space you would like above the component. 

  3. Select the amount of additional space you would like below the component. 
    Note: By default, there is no space below a component.

    Example of the top and bottom margin drop-down section with a red box around it

Save

  1. Click Save.

  2. Scroll to the top of the page and click Save.

    An example of how to save both the component and the page. The save buttons for both are outlined in red to emphasize the action.

  3. Click the Done button beside the save button.
    Note: This will display the page in the closest representation of how site visitors will view it. All links and actions that are disabled in editing mode will be functional now.
     

    Example: of the Done button outlined

One-column style

 

One-Column Event Example

View All Events