Ghost Kit Pro: Motion Effects for WordPress Blocks

Ghost Kit Pro includes motion effects and design controls to the WordPress block editor. Select a block, open Effects or the relevant extension panel, adjust its settings, preview the result, then save or publish. Effects work with core blocks such as Paragraph, Heading, Image, Cover, Group, Columns, Buttons, and Query Loop, as well as Ghost Kit blocks. Blocks from other plugins can opt in by declaring works with.ghostkit in their block.json file. You can use Ghost Kit in the standard block editor or Site Editor without rebuilding pages in a separate page builder.

Motion by trigger

Reveal animations use presets such as Fade In and Zoom In, with adjustable offset, opacity, scale, and rotation. Ghost Kit Pro adds 3D rotation, custom viewport settings, and replay settings for reveals.

Scroll effects link a block’s position, scale, rotation, or opacity to the visitor’s scroll position. Use them for parallax sections or reveals that progress as the page moves. Mouse effects move, tilt, scale, or rotate content as the pointer crosses a block, with separate hover and press states. They stay idle on touch screens. Loop animations execute continuously for effects such as rotating badges, floating shapes, and drifting backgrounds.

Pro also provides per-block CSS transforms and transitions with a hover state.

Responsive layout and styling

Set custom block attributes and responsive breakpoints, then use the extensions to adjust each block’s layout and presentation:

• Position blocks absolutely or fixed, with offsets for various screen sizes.
• Set padding and margin by screen size.
• Apply borders, corner radius, and shadows, including a separate hover state.
• Hide blocks at screen sizes where they are not needed.
• Translate, scale, rotate, or skew blocks, with hover-state options.
• Add custom CSS and JavaScript per page or website wide, with syntax highlighting in the admin.

Blocks, formats, and design options

Ghost Kit Pro includes the Marquee, Code Highlight, Interactive Links, Magnifying Image, Image Scroller, Circle Button, and Toggle Content blocks. Its text formats include Animated Text, Stroke, Spoiler, and Tooltip.

Design options include additional icon packs, Adobe Fonts, custom font documents, and gradients for buttons, backgrounds, icons, and badges. The Shape Divider block has extra shapes. Ghost Kit also has a WPML compatibility layer, and its blocks are translation ready.

Reuse settings and respect motion preferences

Copy extensions from a block and paste them onto another using the Ghost Kit menu in the block toolbar. This lets you reuse a configured effect instead of setting it up again.

Effects check prefers-reduced-motion: reduce and skip animation when a visitor has enabled that operating system preference. The effects script loads only on pages that use an effect.