Before And After
Five paired before and after panels joined by arrows, each labelled by the dimension that changed, selling outcomes rather than deliverables.
Five paired before and after panels joined by arrows, each labelled by the dimension that changed, selling outcomes rather than deliverables.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Before And After presents five paired panels, each showing the state of a client's product before an engagement and what it looks like after, joined by an arrow and labelled by the dimension that changed: design decisions, developer handoff, interface copy, consistency, and ownership.
Pairs are one array with dimension, before, and after fields. The distinctive choice is framing the pitch as a transformation of the client's situation rather than a list of the freelancer's qualities, so it sells outcomes instead of deliverables.
Reach for this block on a services or landing page when the goal is to sell what changes rather than what gets delivered. The installer rewrites the pairs around the situations their clients actually arrive in and the state those clients leave with.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the client transformation across five dimensions. Other before and after layouts:
Tip: write the before column in real client language, the pairs land hardest when a prospect recognises their own situation in the left panel.