The widget library for WordPress is here Download plugin

Split-Layout Editorial Testimonial Card

Elevate your social proof with the Split-Layout Editorial Testimonial Card, a visually striking widget designed to look like a premium magazine pull-quote or a high-ticket event pass. Unlike standard, text-only reviews, this component treats your client testimonials as a featured story.

The design utilizes a bold, warm yellow color palette (#ffc800) to immediately grab attention, contrasted with sharp black typography for maximum readability. The card is divided into two distinct functional areas by a stylish vertical dotted divider:

The Author Pane (Left): Dedicated to establishing credibility. It features a large, stylized portrait (using a unique oval mask), clearly defined author name and role, and a dedicated space for the client's company logo.

The Quote Pane (Right): Dedicated to the message. It uses massive, editorial-style quotation marks and a large font size to make the testimonial impossible to ignore.

This widget is fully responsive. On desktop, it stands as a wide, impressive banner. On mobile devices, it intelligently stacks, converting the vertical divider into a horizontal one, ensuring the design remains coherent and professional across all screen sizes. It is the perfect choice for SaaS landing pages, agency case studies, or any section where trust signals need to be loud and clear.

Key Features:

  • High-Impact Visuals: Uses a vibrant yellow background and high-contrast text to create a focal point on your page.
  • Credibility Boosters: Dedicated slots for both an Author Photo and a Company Logo ensure the review feels authentic and verified.
  • Editorial Typography: Features massive quotation marks and heavy headers, mimicking the layout of top-tier print publications.
  • Responsive Architecture: The "split-panel" layout transforms seamlessly into a stacked card on mobile, preserving the custom dotted divider effect.
  • Rich Text Support: The quote area supports bolding, underlining, and other formatting to highlight key metrics (e.g., "300% increase").

How to use this widget

  • Change your content and adjust the styles to match your design
  • Click export and copy the code
  • Paste it on your web page by adding a code/html block in your website builder (e.g., Squarespace, WordPress, Webflow, Wix) and paste the code.

👋 P.S. Have questions? Leave a comment.