UI Elements

Add rich, interactive components to your pages beyond basic text formatting. UI Elements include image carousels, slideshows, cards, figures, and more.

Create and Insert a UI Element

  1. Go to UI Elements > Create New UI Element
  2. Choose an element type (see types below)
  3. Configure the element:
    • Add images, text, or other content
    • Set styling options
    • Configure behavior (auto-play, transitions, etc.)
  4. Save the element - you'll see an insertion code like [[slideshow|5]]
  5. Copy this code into any page's text editor
  6. The element will appear when the page is viewed

UI Element Types

Figures: Images with captions and automatic sizing
Usage: [[figure|12]]

Slideshow: Rotating image gallery with navigation
Usage: [[slideshow|5]]

Carousel: Bootstrap-style image carousel with indicators
Usage: [[carousel|8]]

Cards: Content boxes with images, titles, and text
Usage: [[card|3]]

Image Cards: Cards optimized for image galleries
Usage: [[image_card|7]]

Banner: Full-width header image with title overlay
Usage: [[banner|15]]

Jumbotron: Large showcase section with heading and call-to-action
Usage: [[jumbotron|2]]

Managing Images

Upload and organize images used in UI Elements:

  1. Go to Images
  2. Click Upload New Image
  3. Add image description and alt text for accessibility
  4. Select the image when creating UI Elements

Tip: After creating a UI Element, the system shows you the exact code to insert. You can also view insertion codes by editing existing elements.
Custom Settings in Pages

You can also insert custom settings values into pages using: [[setting|setting_name]]
Example: [[setting|contact_email]]

Note: UI Element codes only work in Template pages and other page types that support rich text content. They don't work in search configurations or result templates.