Components assist with making the layout of repetitive elements well formatted, such as member profiles or newsletters, or help create advanced layouts with special functionality—like accordions and galleries—without having to know HTML, CSS or JavaScript.

They can also be used to place content on multiple pages while allowing you to edit them in one place. Once saved, they will automatically update wherever the component has been embedded.

Currently there are seven components available to use:

  • Normal Content: The normal content component uses only the normal rich text editor, and is most commonly used when you want to place specific content on multiple pages.
  • Accordions: The accordion component is used to create accordion, or show/hide, elements on a page that toggle the display of content on the page. They consist of a series of pane headers and pane content. The pane content is hidden until the pane header is clicked. Once clicked, the pane content will slide down to reveal the content inside.
  • Gallery Slideshow: The gallery slideshow component creates a Flickr-style photo gallery, containing multiple images but only displaying one at a time. Clicking the next or previous arrows will cycle through all the photos in the gallery.
  • Gallery Grid: The gallery grid components creates a photo gallery that displays thumbnails in a grid layout, and clicking on the thumbnail displays the full-size image.
  • Member Profiles: The member profiles component allows you to create a well formatted list of individuals featuring the individuals image, name and other information. It’s commonly used to display a list of alumni profiles or student members. It is not intended to take the place of the faculty and staff directory feed advanced element.
  • Newsletters: The newsletters component allows you to create a well formatted list of publications featuring an image, commonly the cover of the publication, byline and a description.
  • Columns: The columns component allows you to create columns within the content body. It is meant to take the place of using tables in order to achieve a column layout on your page.

 

Creating a Component

  • Hover over the Components admin menu item
    Image showing the location of the components admin menu item
  • Click on Add New Component
    Image showing the location of the add new component menu item
  • Give your Component a name in the field labeled Enter Title Here. (Note: The name is for reference only. It does not display anywhere on the page that the visitor will see.)
    Image showing the component title field
  • Select the type of Component you intend to add from the Component Types metabox.
    Image showing the component types metabox
  • Modify the Component content and settings as detailed in the individual Component instructions.
  • Click the blue Publish button in the Publish metabox to publish the component.
    Image showing the component publish button

Editing a Component

Note: Components are not edited on the page where they’re embedded. If you edit a page and see the component shortcode (component id=”XXX” name=”XXXXXXX”), this is an indication the content is stored in a Component and you must access the content through the Components admin page.

  • Hover over the Components admin menu item
    Image showing the location of the components admin menu item
  • Click on All Components
    Image showing the location of the all components menu item
  • Hover over the Component you intend to edit to display the Component edit options.
    Image showing the component hover options
  • Click on the Edit link.
    Image showing the location of the component edit link
  • You’ll then be taken to the Component edit screen where you can modify the content and settings of the Component.
  • When you’re done editing the component, click on the blue Update button in the Publish metabox to save your changes.
    Image showing the location of the component update button

Adding a Component to a Page

  • Place the cursor on an empty line in the editor content body where you intend to place the Component.
    Image showing the empty line required to embed a component
  • While editing a page, locate and click on the Add Component button above the rich text editor to display the Component embed tool.
    Image showing the location of the add component button
  • Click the dropdown field to display a list of Components for your site. (Note: If your component is not listed in the dropdown, it might be necessary to refresh the page. Make sure to save any changes you’ve made before refreshing the page edit screen.)
    Image showing the component selection tool
  • Select the Component you intend to embed in the page and click the green Add Component button.
    Image showing the add component button
  • You’ll now see the Component shortcode where you placed the cursor.
    Image showing the component shortcode in the editor content body

    • You may move the shortcode to another spot in the page, but it’s important you do not edit the shortcode. Editing the contents of the shortcode may cause it to not display for the visitor.