Courses
Show what students struggle with and what they achieve.
Content / widget · Elementor module
Before and After Statement Widget Plugin for Elementor
Compare how things were and how they are in two labelled panels side by side, with points marked by crosses and ticks, an arrow and a result line.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Before and after statementProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published widgets comparing before and after a watercolour course.
02 / Inside WordPress
Before and after statement controls in Elementor
Before and after sets the heading and its tag, the two labels and statements, a result line, cross and tick marks, side by side or stacked panels and the gap, text before and after each statement, text when both are empty, the statement tag and the arrow icon. The Style tab covers the panels’ text, colour, alignment, background, border, radius and padding, the arrow, and the before and after colours and backgrounds, label, heading and result styles.
03 / Website use cases
Where to use before and after statement
A transformation reads best as a comparison, and building two matching columns with ticks and crosses by hand takes several widgets that drift apart. This widget takes a before and an after statement, turns several lines into points marked with crosses and ticks, shows them in two labelled panels side by side with an arrow between (stacked on phones), and adds an optional heading and result line.
Services
Problem and solution side by side.
Case studies
A client’s situation before and after the work.
04 / Installation and setup
How to add a before and after comparison in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Elementor and Complementor, connect your license and enable Before and after statement in the Complementor library.
Add the widget to a landing page, course page or case study.
Type the before and after statements, one point per line.
Add a heading and a result line if you like.
Style the two tones, panels and arrow.
05 / Content and style controls
Customize before and after statement in Elementor
Configure the settings available for this module to suit the page you are building.
Two labelled panels with your own labels.
One statement, or several lines as points.
Points marked with crosses and ticks.
An arrow between the panels, turned downwards on phones.
A heading and a result line.
Separate colours for the before and after sides.
06 / Choose the right approach
Before and after statement and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Authored quotation
A quotation with its speaker and source.
Public post reading list
Hand-picked posts in reading order.
07 / Requirements and compatibility
Before and after statement compatibility with Elementor
- Requires Elementor.
- Compares two statements; no images or slider.
- Shows the text you type without checking it.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot before and after statement
Check these settings if the published page behaves differently from the editor.
Why is there no arrow?
Both statements need text for the arrow to show, and the arrow must be turned on.
Why are my points one long line?
Put each point on its own line in the statement box.
Why do the panels stack on my laptop?
The panel layout is set to stacked for that screen size; set it to side by side.
Before and after statement plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is it an image comparison slider?
No. It compares statements; it has no images or slider.
Can I change the Before and After labels?
Yes. Both labels are editable, or leave them empty.
Does it check the claims?
No. It shows what you type.
Is it accessible?
Yes. Points are lists, and the crosses, ticks and arrow are hidden from screen readers.
10 / Annual All Access subscription
Get before and after statement with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.