Tweak Library
Note: We have updated our folder structure in Neto 6 and this has not been updated on all tweaks yet. More info.

Testimonials

Three testimonials, to boost confidence in your company.

Industries

  • Bicycles
  • Auto Parts
  • Computers & Electronics
  • Fitness & Supplements
  • Furniture & Homewares
  • Music & Instruments

Wireframe

Testimonials

Coding Instructions

Customer testimonials are best implemented by creating a custom content type, so each testimonial is its own content page that is called via a thumblist.

First, set up the content type.

Call the name of the type testimonials & the unique code to be the same, all in lowercase. Then set up the following fields: short_description1 as the Customer name & the description_1 field for the testimonial itself. Remember to hide the fields that will not be in use to make it easier for the customer to set up this data in the future.

After saving, go to the newly created content type and create a new page. Give the Testimonial a title, keeping in mind that including it on the front-end is optional. Otherwise include the testimonial, the customer name, and in this example, an image as well.

Now that the data is set up, implement the code.

The following thumb_list data will need to be pasted in the desired location to display the testimonials.

[%thumb_list type:'content' content_type:'testimonials' limit:'3'%]
    [%param *header%]
        <h3>Testimonials</h3>
        <div class="row">
    [%/param%]
    [%param *body%]
        <div class="col-sm-4 testimonial">
            <blockquote>
                <p>[@content_description1@]</p>
                <footer>[@content_short_description1@] <img src="[%asset_url type:'content' id:'[@content_id@]' /%]"></footer>
            </blockquote>
        </div>
    [%/param%]
    [%param *footer%]
        </div>
    [%/param%]
[%/thumb_list%]

If using the image code, additional styling will be required. This styling works best with square images.

.testimonial blockquote footer > img {
    width:40px;
    height:auto;
    border-radius:50px;
}

The result:

You'll get this


1 related articles found: