Add motion to the blocks you already use
Ghost Kit Pro extends the standard WordPress block editor with a broader motion system and additional design controls. Instead of rebuilding a page in a separate page builder, you can select an existing block, open its Effects settings, and configure how it behaves as visitors view, scroll past, or interact with it.
The plugin works with core WordPress blocks such as Paragraph, Heading, Image, Cover, Group, Columns, Buttons, and Query Loop. Ghost Kit blocks also include the Effects panel, while blocks from another plugin can opt in by declaring supports.ghostkit in their block.json file.
Advanced motion effects
Ghost Kit Pro adds scroll effects, mouse effects, and loop animations to the reveal animations available in the free plugin. Scroll effects can connect a block’s position, scale, rotation, and opacity to the visitor’s scroll position, making them suitable for parallax sections and scroll-driven reveals.
Mouse effects respond as the pointer moves across a block. You can move, tilt, scale, or rotate content, with separate hover and press states. Loop animations run continuously and can create rotating badges, floating shapes, or drifting backgrounds.
Pro also adds 3D rotation, custom viewport settings, and replay options for reveal animations. Per-block CSS transforms and transitions can be configured with a hover state, giving you more control over how blocks change during interaction.
Responsive extensions and styling
Use the extensions panel to control common layout and presentation details without leaving the block editor. Pro includes custom block attributes and custom responsive breakpoints, while the available extensions support practical page-building tasks.
- Set a block to absolute or fixed positioning and adjust its offset for each screen size.
- Configure padding and margin per screen size.
- Apply borders, corner radius, and shadows, including a separate hover state.
- Hide blocks on screen sizes where they are not needed.
- Translate, scale, rotate, and skew blocks, with hover-state options.
- Add custom CSS and JavaScript per page or site wide, with syntax highlighting in the admin.
Additional blocks, formats, and design options
Ghost Kit Pro adds selected blocks including Marquee, Code Highlight, Interactive Links, Magnifying Image, Image Scroller, Circle Button, and Toggle Content. It also adds Animated Text, Stroke, Spoiler, and Tooltip formats that apply to selected text.
Design options include more icon packs, Adobe Fonts, custom font files, and gradients for buttons, backgrounds, icons, and badges. Extra shapes are available for the Shape Divider block. Ghost Kit also provides a WPML compatibility layer, and its blocks are translation ready.
Practical workflow
Build a page with WordPress blocks, select the block you want to enhance, and open Effects or the relevant extension panel in the block settings. Tune the behavior, preview the result, and reuse settings with the block toolbar’s Ghost Kit menu. Copy extensions from one block and paste them onto another instead of configuring the same effect again.
Reduced motion is respected automatically. Each effect checks prefers-reduced-motion: reduce and skips animation for visitors who have disabled motion in their operating system. The effects script loads only on pages that use an effect.
Installation
- Install and activate Ghost Kit.
- Open an existing page in the standard block editor or Site Editor.
- Select a core, Ghost Kit, or compatible block.
- Open the Effects or extension settings and configure the desired options.
- Save or publish the page.
Ghost Kit documentation covers its blocks, extensions, filters, and events for developers.
