Centered Elementor Testimonial Section

Dindin Solehudin

This Elementor testimonial section shows one customer quote in the center of the page, with a company logo above it and the customer's photo, name, and role below. Testimonial Simple Centered is a free, responsive block shared as a JSON file and built only with native Elementor widgets.

Elementor testimonial section with a centered customer quote, a company logo above it, and a round avatar with a name and role below

What's Inside the Block

  • A centered column, 56 rem wide on desktop, on a very light mint gradient with a soft diagonal edge.
  • An Image widget for a company logo above the quote, set to a height of 48 px.
  • A large quote in semibold navy text, 1.5 rem on desktop and 1.25 rem on mobile.
  • A round 40 px Image widget for the customer's photo.
  • A name, a small dot, and a role on one line.

Tip: Use a short, specific quote. One or two sentences about a concrete result read better than general praise. Fill in the logo, photo, name, and role of a real customer, and put the quote in their own words with their permission.

Requirements

  • A recent version of Elementor with Flexbox Container available.
  • No Elementor Pro required.
  • The Inter font available on your site (otherwise a fallback font is used).
  • Your own images: a logo (optional) and a customer photo.

Note: Both Image widgets have no image selected, so Elementor shows its default placeholder until you choose your own files. The quote, name, and role are sample text and must be replaced with a real testimonial you have permission to publish. The quote uses a paragraph tag, not a heading, so no heading is added to your page outline. The name and role stay on one row on every screen size, so very long values may get tight on mobile. Back up your page before importing a template into an existing layout.

Download Elementor Template (JSON)

Widgets Used

ElementPurposePro?
Flexbox ContainerSection wrapper, centered column, name row, and the dot divider (4 in total)No
HeadingQuote, name, and role (3 in total)No
ImageCompany logo and customer photo (2 in total)No

Frequently Asked Questions

How do I import this Elementor JSON template?

First, download the JSON file using the button above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.

Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.

How do I change the quote, name, and role?

Click the quote, the name, or the role and type the new text. The quote already includes curly quotation marks, so keep them or remove them as you prefer. To change colors or sizes, select the widget and open the Style tab.

How do I add the logo and the customer photo?

Select an Image widget, open its Content tab, and choose or upload an image. The logo is set to a height of 48 px with the image fitted inside, so a wide logo keeps its proportions. The photo is a 40 px circle with the image cropped to fill, so a square photo works best.

How do I remove the logo or the photo?

Delete the Image widget you don't need. The remaining content stays centered. If you remove the photo, you can also reduce the top margin of the name row so the spacing stays even.

How do I show more than one testimonial?

This block holds a single testimonial. To show several, duplicate the section and change the content, or place the centered column inside a grid or a carousel of your own. Keep the same text size in each so the quotes look consistent.

How do I add a star rating?

Add a Star Rating widget between the logo and the quote, or between the quote and the photo. Center it and set the rating that matches the customer's real review. Only show a rating that the customer actually gave.

What is the small dot between the name and the role?

It is a tiny Flexbox container, 3 px wide and 3 px high, with a navy background and a fully rounded shape. It acts as a divider on the row, so if you change the text color you may want to change the dot's background color too.

Where should I place this testimonial section?

Place it after the content that explains your product or service, such as features or pricing, and before the final call to action. A real quote at that point supports the decision your visitor is about to make.

Do I need Elementor Pro?

No. The block only uses native Heading and Image widgets inside Flexbox containers.

Why won't the file import?

Make sure the file has a .json extension and hasn't been unzipped or edited. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.

Why do the Flexbox settings look different or missing?

Update Elementor to the latest version. On older versions, the Flexbox Container feature may need to be enabled first in Elementor's feature settings.

Why does the font look different?

The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.

Looking for more testimonial sections? Browse all Elementor testimonial section templates, or see every free block in Elementor Templates.

Comments

Popular Posts

Grid Sizing and How to Size Columns and Rows
Grid Sizing and How to Size Columns and Rows

Tutorials

Grid Sizing and How to Size Columns and Rows

Hello everyone! In our last post about Grid Layouts , we explored how to create a basic grid structure in CSS. Now, let’s take that one step...

Customer Lifetime Value Calculator
Customer Lifetime Value Calculator

Tools

Customer Lifetime Value Calculator

Calculate Customer Lifetime Value easily with our free tool. Learn how to retain customers, boost profits, and grow your business today.