Skip to main content
Attention customers within hurricane impacted areas:
Due to widespread impacts resulting from hurricanes, CivicPlus is committed to enhancing our resources to manage the anticipated increase in traffic and mitigate any potential disruptions. We will prioritize all assistance requests from affected areas to ensure we provide the highest level of support possible. Please be assured that we are here to assist you in any way we can during this challenging time. Your safety and satisfaction are our top priorities.

Search

Insert an Image Widget into the Mega Menu

  • Updated:

Who can use this feature?

system admin Slash Owner Slash Publisher

 

This article will show you how to add an Image to your site's Mega Menu in the old and new User Interfaces (UIs).    

 

New UI Instructions

 

Instructions

  1. Click Try New UI
    try new UI button
  2. Hover over your desired Mega Menu
    hover over mega menu
  3. Click the Pin icon
    mega menu, pin icon
  4. Click Content
    content module
  5. Search for your desired image or scroll through the available content
    content search box
  6. Drag and drop the image into the Mega Menu
    drag-and-drop image asset
  7. Configure the Image options in the Content menu
    content menu, image options
    • Content
      • Widget Items: View items currently within the widget
        • Actions: Modify, Preview, Delete or Remove items
    • Widget Format: Select a format
      • Calendar: Monthly calendar with events
      • Event: Show as events
      • Link List: Present links, no images
      • Single Image: A single image
      • Slideshow: Display images as a slideshow
      • Stacked: Stack assets on top of each other
    • Content Appearance: Customize the inclusion and appearance of content fields, columns, etc.
      • Widget Skin: Select a widget design skin
      • Remove Background Styles: Mark the box to remove existing background styles
      • Hide Loading Placeholders: Mark the box so that placeholder items do not display while the widget is loading.
    • Options
      • Header: Create a header
      • Link: Assign a URL to the image
      • Open in New Window: Forces the link to open in a new window when clicked
      • Alt Text: The text that will appear on the page if the image fails to load
  8. Click Save (blue disk) at the top of the page
    save icon

Old UI Instructions

 

Instructions

  1. Ensure that Live Edit is On
    live edit is on
  2. Hover over your desired Mega Menu
    hover over mega menu
  3. Click the Pin button
    mega menu pin icon
    • Note: This will allow you to make edits without having to hover directly over the Mega Menu.
  4. Locate your desired Image Asset in the Content tab
    content tab image asset
  5. Drag and drop the image into the Mega Menu
    drag-and-drop the image asset
  6. View the image within the menu
    view the image asset
  7. Configure Image options within the Content tab on the left-hand side
    content tab, image options
    • Widget Format: Select a format
      • Link List: Present links, no images
      • Stacked: Stack assets on top of each other
      • Event: Show as events
      • Slideshow: Display images as a slideshow
      • Single Image: Follow the below instructions
    • Widget Items: View items currently within the widget
      • Actions: Modify, Preview, or Remove items
    • Single Image Options:
      • Header: Add a header that will display
      • Link: Add a link to make the image a link
        • Open in New Window: Open the link in a new window
      • Alt Text: Add alt text for your image
      • Background Styles: Click to remove border styles
      • Advanced Options - Breakpoint: Width at which the image will switch from a narrow to a wide view

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.