WP Sales Graphicssales page elements for WordPress · live demo
WP Sales Graphics · Sales page elements for WordPress
Give your best words the attention they deserve.
Your offer deserves more than a wall of text. Bring it into focus with hand-drawn marks, distinctive buttons and clear offer layouts. Explore the live examples below and find a look that fits your brand.
Hand-drawn emphasisThree live stylesCustom coloursEditable examples
For marketers, copywriters and WordPress site builders
Make the next step clear.
Circle the point that matters. Highlight the benefit. Give your call to action a place to stand out. WP Sales Graphics brings sales-page design into focus, with elements you can see and try here.
Your copy leads. The design supports it.
You have an offer. Help people understand it.
A good sales page answers three questions: what is it, why does it matter, and what happens next? Use visual emphasis to guide that reading journey, without turning every sentence into a headline.
WP Sales Graphics is a collection of sales-page elements for WordPress. This page demonstrates the visual approach: marks that fit the words, buttons with personality, and layouts that give an offer room to breathe.
Start with the message. Add a mark where it helps. Choose a style and colour that feel like your brand. Keep the route to your offer easy to follow.
From first glance to a clear decision.
Focus attention: circles, underlines, highlighter swipes and arrows put emphasis exactly where your reader needs it.
Present the offer: order boxes, value stacks and pricing layouts give readers a structured way to compare details.
Make it feel like yours: try Classic, Modern or Creator, then adjust the ink and pen weight.
Add personality with purpose: cards, notes, seals and subtle effects support the message. Use them sparingly.
The examples demonstrate page behaviour. Confirm the final plugin contents, editor compatibility and integrations in the product details before buying.
Go on, poke it
ExampleOffer cards
ExampleClear next steps
ExampleBrand colours
Hover or tap the cards
★your style
Hover the badge
Live button examples
Buttons that ask to be clicked
Choose your licence
The right fit for the sites you build.
Choose your site allowance below. WP Sales Graphics is supplied digitally.
Choose a licence above. Checkout links have not yet been connected.
A few useful answers
What can I try on this page?
Switch all three styles, change the ink and pen, replay marks, edit a headline, adjust sample values and explore the interactive layouts.
Can I use it on client sites?
Single site covers 1 site, Multi site covers up to 5 sites, and Agency covers up to 50 sites. Client-use permissions will be confirmed in the full licence terms.
Is there a money-back guarantee?
Digital product only. Refunds are considered only in exceptional circumstances. This policy does not affect your statutory rights.
Does this replace the 2011 plugin?
The 2011 WP Sales Graphic is historical inspiration for this project. This page does not claim official ownership, a revival or compatibility with its old shortcodes. Its historical PLR/white-label licensing does not establish a licence for this project.
Will these elements increase my sales?
They give you ways to clarify and present your offer. Results depend on your copy, product, audience and page. No conversion uplift is promised.
Can I reduce the animation?
This demo respects your device’s reduced-motion preference. The message and controls remain available without the animated effects.
P.S. The best place to start is your own headline. Try it with a live mark, then compare the three styles.
Interactive layout examples · not a product offer
Put the elements through their paces.
These sample amounts, timers and seals demonstrate controls only. They are not WP Sales Graphics prices, deadlines, discounts or refund terms.
Countdown example · resets on reload
Sample countdown — no offer expires00:05:00
Give your offer a clear focus.
Use one visual cue to draw attention to the point that matters. The mark follows the text as the layout changes.
Value stack example · sample figures
Show how an offer adds up.
Untick an item or edit the sample amount. The total and order preview update together. Use substantiated values in a real offer.
Seal designer · example only
Preview a 30-day seal.
Change the number and ring text to see the seal redraw. A seal should always reflect your actual published terms; this example makes no refund promise.
Order box preview · sample amounts
Give the next step a clear home.
Sample total £430
£49
Proof frames · empty examples
Leave room for real evidence.
A genuine customer email, used with permission
A real conversation, with personal details removed
A verified review, with its source
No testimonials or customer ratings are claimed here.
Style lab · extra effects, all CSS
Style lab
Explore more visual examples. These show design possibilities, rather than a confirmed list of plugin features. The thin line under the top bar is the reading-progress bar.
Paper & texture
Step 1: clarify your offer. Step 2: highlight the benefit. Step 3: show the next step.
Lined notepadrepeating gradients
A clear message, well presented
Graph paper4 layered gradients
A useful note beside your offer.
Sticky note with curlrotate + shadow trick
Make the message clear before adding the finishing touches.
Torn paper edgeclip-path, new tear each load
Your screenshot
Taped-on screenshot::before / ::after tape
Film grain
Grain textureSVG noise filter
Halftone
Halftone printdot gradient + fade mask
Text effects
Focus
Moving gradient textbackground-clip: text
Clarity
Outline (hover to fill)text-stroke
Bonus
Retro 3Dstacked text-shadow
Live example
Neon signglow + flicker
Sold out
Rubber stampnoise mask for worn ink
£49.99one-off
Price with raised pencegrid + sup
Badges & shapes
★example
Starburst, any number of pointsgenerated clip-path
ExampleFeatured layout
Corner ribbonrotated band, overflow hidden
Bonuses inside
Folded banner headingclip-path ends + folds
£49
Swing price tagclip-path + punched hole
wave
zigzag
scallop
torn
Section dividersinline SVG, any colour
Movement
Price counts up when seen@property counter, no script maths
Shimmer sweepanimated gradient
Attention wiggle every 4skeyframes
Enrolment open
Live pulse dotping animation
Your productExample box
3D product box, follows the mousepreserve-3d + perspective
Layout pieces
Starter
£29
Sample feature A
Checklists
Featured
£49
Sample feature B
Sample resource
Sample extra
Extended
£99
Everything
Sample support
Pricing table with a lifted “most popular” plan
View AView B
Before/after sliderclip-path driven by a range input
Bonus 1Offer checklist
Bonus 2Page outline
Bonus 3Brand palette
Bonus cards that fan outtransform on hover / tap
How do the cards work?
Hover, tap or use Enter or Space to fan them out.
Can I change the colours?
Use the brand-colour picker below to explore a coordinated palette.
Are these real offers?
No. This lab contains illustrative layouts and sample prices only.
FAQ accordionnative <details>, zero script
One colour in, full theme out
Every shade, hover state, border and text colour on the right is worked out from that one colour.
Brand preview
Make your message stand out
A layout that takes your offer from hard to scan to clear.
Live text marks
Ten ways to give words emphasis.
Tap a card to replay its mark. Every one is drawn fresh for the text it sits on, so it fits any word length, font or screen size.
Playground
Try your own headline
An offer worth a closer look
Before & after
From a static image to a live design
Static image · historical reference
Historical inspiration: a fixed image with the colour and circle baked in.
Now · CSS + a live mark
Buy Now
Drag the slider. Same gloss, any colour, responsive to the preview, and the circle is a real mark you can switch off.
Inspired by a useful idea.
The 2011 WP Sales Graphic showed how visual elements could support a sales letter. It is a historical reference here, with no claim of affiliation, official revival or inherited licensing rights.
