Responsive Testimonials Pro

Display Testimonials

Version: 4.3

Display Testimonials

After collecting testimonials, showcasing them on your Joomla site can significantly enhance its credibility and trust. You can display testimonials using either the component view (attached to a menu item) or through a module (placed in various template positions).

Method 1: Using the Component View

The component view creates a dedicated page for displaying testimonials with optional pagination. Perfect for a "Testimonials" or "Reviews" page.

Step 1: Create a Menu Item

  1. Navigate to Menus > Your Menu (choose the menu where you want the testimonials page) and click New.

  2. In the Menu Item Type field, click "Select" and choose Responsive Testimonials Pro > Testimonials.

  3. Enter a Menu Title (e.g., "Testimonials", "Customer Reviews", "What Our Clients Say").

  4. Set the menu item status to "Published".

Step 2: Configure Display Settings

In the menu item configuration, you'll find several tabs with display options:

  • Display Tab:

    • Select Categories: Choose which categories of testimonials to display. You can select multiple categories.
    • Items Per Page: Set how many testimonials to show per page (pagination will be added automatically if you have more testimonials).
    • Sort Order: Choose how testimonials should be sorted (newest first, oldest first, by rating, by name, random, etc.).

  • Display Options Tab:

    • Show Author Photo: Toggle to show or hide author profile images.
    • Show Default Image: Toggle to show placeholder image when no author photo is uploaded.
    • Show Date: Toggle to show or hide testimonial creation date.
    • Show Star Rating: Toggle to show or hide star ratings.
    • Show Company Details: Toggle to show or hide company information.
    • Show Job Position: Toggle to show or hide job title/position.
    • Show Website Link: Toggle to show or hide company website links.
    • Website Link Opens In: Choose "New Tab/Window" or "Same Window" for website links.

  • Styling Tab:

    • Customize colors, fonts, spacing, and layout options similar to the module (see module styling section below).

Method 2: Using the Showcase Module

The module provides greater flexibility in placement and can be used in sidebars, footers, homepage, or any template position. Perfect for displaying testimonials throughout your site.

Step 1: Create the Module

  1. Navigate to Content > Site Modules (or Extensions > Modules in Joomla 4/5/6).

  2. Click New.

  3. In the module type selection, choose Responsive Testimonials Pro - Showcase.

Step 2: Module Basic Settings

  • Title: Enter a module title (e.g., "What Our Clients Say") or leave blank to hide the title.
  • Show Title: Toggle to show or hide the module title.
  • Position: Select where the module should appear (e.g., sidebar, footer, top, bottom).
  • Status: Set to "Published" to display the module.
  • Access: Choose who can see this module (Public, Registered, etc.).
  • Menu Assignment: Choose "On all pages" or select specific pages where testimonials should appear.

Step 3: General Settings Tab

  • Select Categories: Choose one or more categories to display. Hold Ctrl (Windows) or Cmd (Mac) to select multiple categories.

  • Sort Order: Choose how testimonials should be sorted:

    • Newest First (ID Descending)
    • Oldest First (ID Ascending)
    • Custom Order (Descending/Ascending)
    • Date Created (Oldest/Newest First)
    • Rating (Lowest to Highest/Highest to Lowest)
    • Author Name (A to Z/Z to A)
    • Random Order

  • Author Information Display:

    • Show Author Photo: Toggle to show or hide author profile images.
    • Show Default Image: Toggle to show placeholder image when no author photo is uploaded.
    • Show Date: Toggle to show or hide testimonial creation date.
    • Show Star Rating: Toggle to show or hide star ratings.

  • Company Information:

    • Show Company Details: Toggle to show or hide company information.
    • Show Job Position: Toggle to show or hide job title/position (only if company is shown).
    • Show Website Link: Toggle to show or hide company website links (only if company is shown).
    • Website Link Opens In: Choose "New Tab/Window" or "Same Window" for website links.

Step 4: Slider & Layout Settings Tab

  • Transition Effect: Choose how testimonials transition:

    • Fade In/Out: Smooth fade transition between testimonials.
    • Slide Horizontal: Slide testimonials horizontally.
    • Slide Vertical: Slide testimonials vertically.
    • No Animation (Static Grid): Display testimonials in a static grid without animation.

  • Testimonials Per Row: Choose how many testimonials to display side by side (1, 2, 3, or 4 columns). Only available for Fade, Horizontal, and Static Grid modes.

  • Auto-Play Speed: Set time each slide is displayed before moving to the next (in milliseconds, e.g., 4000 = 4 seconds).

  • Auto-Play Slideshow: Toggle to automatically advance to the next slide.

  • Navigation Controls: Choose how users can navigate:

    • No Controls: No navigation buttons or dots.
    • Arrow Buttons: Previous/Next arrow buttons.
    • Page Dots: Dot indicators showing current position.

  • Read More Feature:

    • Enable Read More: Toggle to show "Read More" link for long testimonials.
    • Read More Action: Choose what happens when users click "Read More":
      • Open in Popup Window: Display full testimonial in a popup overlay.
      • Link to URL: Redirect to a specific URL or testimonial's website.
    • Character Limit: Set maximum characters to show before "Read More" appears (e.g., 200).
    • Read More Button Text: Customize the "Read More" link text (default: "Read More").
    • Read More Link URL: If using URL redirect, enter the URL (leave empty to use testimonial's website URL).
    • Read More Link Opens In: Choose "New Tab/Window" or "Same Window".

  • Popup Window Settings (if Read More popup is enabled):

    • Popup Maximum Width: Set popup width (e.g., "800px" or "80%").
    • Popup Background Color: Set background color inside popup.
    • Popup Text Color: Set text color in popup.
    • Popup Font Size: Set font size (e.g., "16px", "1.2em").
    • Popup Font Weight: Choose from normal, bold, or numeric values (100-900).
    • Popup Line Height: Set spacing between lines (e.g., "1.8" or "150%").
    • Popup Inner Padding: Set space inside popup (e.g., "40px", "2em").
    • Popup Overlay Color: Set background color of dark overlay behind popup (supports RGBA).

Step 5: Appearance & Styling Tab

  • Layout & Position:

    • Testimonial Box Position: Choose where to position testimonial text box relative to author info:
      • Above Author
      • Below Author
      • Left of Author
      • Right of Author
    • Testimonial Box Style: Choose square corners or rounded corners.
    • Author Photo Shape: Choose from 10+ shapes:
      • Square
      • Circle
      • Rounded Square
      • Diamond
      • Hexagon
      • Octagon
      • Star
      • Large Rounded
      • Extra Large Rounded
      • Default
    • Author Info Alignment: Choose left, center, or right alignment.
    • Author Photo Width: Set width in pixels (e.g., 75).
    • Author Photo Height: Set height in pixels (e.g., 75).

  • Colors:

    • Author Section Background: Set background color for author information area.
    • Testimonial Box Background: Set background color of testimonial text box.
    • Testimonial Text Color: Set color of testimonial text content.
    • Author Name Color: Set text color for author's name.
    • Company Link Color: Set color of company website links.
    • Company Link Hover Color: Set color when hovering over company links.
    • Read More Link Color: Set color of "Read More" link.
    • Read More Link Hover Color: Set color when hovering over "Read More" link.

  • Typography:

    • Testimonial Text Size: Set font size (e.g., "13px", "1em").
    • Testimonial Text Style: Choose normal or italic.
    • Testimonial Text Weight: Choose from normal, bold, or numeric values (100-900).
    • Author Name Size: Set font size for author's name.
    • Author Name Weight: Choose from normal, bold, or numeric values (100-900).

  • Spacing & Sizing:

    • Module Margin: Add margin around entire module (e.g., "20px", "10px 20px").
    • Module Padding: Add padding inside module container.
    • Gap Between Items: Set space between testimonial items (e.g., "20px", "1rem").
    • Testimonial Box Padding: Set space inside testimonial text box (e.g., "15px", "1em").
    • Position/Company Separator: Set text between job position and company name (e.g., "of ", "at ", " - ").

  • Visual Elements:

    • Show Quote Marks: Toggle to display quotation marks around testimonial text.

Step 6: Advanced Settings Tab

  • Customization:

    • Module CSS Class Suffix: Add custom CSS class for additional styling (e.g., "my-custom-class").
    • Custom CSS Code: Add your own CSS code for complete design control. This CSS will be added to the page.

  • Asset Optimization:

    • Use Minified Assets: Toggle to load minified CSS/JS files for better performance (recommended for production sites).

  • Image Processing:

    • Image Format: Choose output format for processed images:
      • None: Keep original format
      • AVIF: Modern format with better compression (requires browser support)
      • WEBP: Modern format with better compression (requires browser support)

  • SEO & Integration:

    • Enable Google Rich Snippets: Toggle to add structured data (JSON-LD) for SEO. This helps search engines understand your testimonials and can display star ratings in search results.

Step 7: Save and Preview

  1. Click Save or Save & Close to save your module configuration.
  2. Visit your website's frontend to see the testimonials displayed.
  3. Make adjustments as needed to achieve your desired appearance.

Tips for Best Results

  • Start with default settings and customize gradually to see what works best for your site.
  • Enable Google Rich Snippets for better SEO and search visibility.
  • Use high-quality author photos for a more professional appearance.
  • Test your testimonials display on mobile devices to ensure responsiveness.
  • Consider using the slider mode for homepage testimonials and grid mode for dedicated testimonial pages.