/
Quotes & Testimonials

Quotes & Testimonials

Using the Quote block in combination with the List schema allows you to insert styled Testimonial Galleries to a page.

The following instructions provide information on how to create and insert styled Quotes, Testimonials, and Testimonial Galleries into your page via Beatrix CMS.

Please see Introduction to Beatrix CMS: Content Blocks for instructions on creating your content block.

Table of Contents

 

Creating Quote Components

The first step in adding Quotes & Testimonials is to create a Quote block.

The fields available in this schema are:

  • Title

  • Quote (required)

  • Source of quote

  • Title of source

  • Image

  • Links to:

    • Content Item

    • External Item and “Custom Read More” text

Do not enter quotation marks in the Quote field; they will be added automatically.

The Quote schema’s available fields.

 

The optional information can help provide context or additional information for the quote or source, but the most important (especially in a Testimonial and Testimonial Gallery) is an image.

To attach an image to the quote, click on the image field and either select from the Media Library or upload your image. Add the Title and Alt Text as prompted.


Layout Options

Select the Quote component you created, then choose one of the following options from the Component Template drop down menu (highlighted in yellow above).

Examples of the following types of Component Layouts can be found in the next section of these instructions.

  • Quote: Just the text of the quote and the source, without any of the additional information.

  • Quote Banner: The text of the quote, the source, and the additional information (like a title) displayed over the image.

  • Testimonial Blue: The source, additional information, and text of the quote in a large blue box, with the image next to it.

  • Testimonial Gray: The source, additional information, and text of the quote in a large gray box, with the image next to it.

  • Testimonial Small Blue: The source, additional information, text of the quote, and image inside a smaller blue box.

  • Testimonial Small Gray: The source, additional information, text of the quote, and image inside a smaller gray box.

Once you’ve chosen the type of Layout View you want, click Add Content to add it to your page.

Selecting the Layout View for your page

 

In the window for your page, click Publish Content.

Individual Quote Examples

The screenshots below are examples of the different Component Layouts you can choose from when adding your Quote block to a page, as they look on a website:

Quote and Quote Banner:


The Quote (yellow) and Quote Banner (blue) templates.


 

Testimonial Blue and Gray:


The Testimonial Blue (yellow) and Gray (blue) templates.


 

Testimonial Small Blue and Gray:


The Testimonial Small Blue (yellow) and Gray (blue) templates.


 

Creating a List Component for a Testimonial Gallery

You can create a Gallery of Testimonials (example above) by using a List - Single Level schema, or content item, made up of several Quote blocks.

To start, create your Quote blocks (information about this can be found above in these instructions).

Once all of your Quotes have been completed, you must create a List - sing level item.

  • This list will house all of your Quotes.

  • Then, you can add the List to a page or create it from the page editing area.

 

 

When you have multiple Quote components in the list, you can sort them by dragging the sort icons or delete them.

Once your list is complete, click Save & Close in the Home tab (highlighted in blue above).

 

Select the List component you created, then choose Tetimonial Gallery Blue or Testimonial Gallery Gray from the Component Template drop down menu (highlighted in yellow above).

Once you have chosen a Layout View, you can publish your page.

Example of a Testimonial Gallery on a Page

Below is an example of the Testimonial Gallery List Component we created in the above instructions, as it lives on a web page:


A Blue Testimonial Gallery as it appears on a website, the arrows scroll through the Gallery.


A Gray Testimonial Gallery as it appears on a website, the arrows scroll through the Gallery.