Skip to main content
Bevel → Site Settings → Page Transitions replaces the teaser the free editor shows there with the real controls. Control ids, CSS variables and the transition element follow Elementor Pro’s, so a site configured with Pro keeps its transitions.

​
Page transition

  • Background: the colour of the page behind the animation (default a near-black).
  • Entrance animation: fade in, fade in from a direction, zoom in, slide in from a direction, per device.
  • Exit animation: the matching set, shown once an entrance is chosen.
  • Animation duration, default 1.5 s.
  • Preview replays it in the editor.

​
Preloader

  • Type: none, an animation, an icon, or an image.
  • Animation: thirteen built-in loaders (circle, dashed circle, bouncing dots, pulsing dots, pulse, overlap, spinners, nested spinners, opposing rings, progress bars, a repeating bar).
  • Icon or image, with an optional motion (spinning, bounce, flash, pulse, rubber band, shake, swing, tada, wobble, jello) and a duration.
  • Preloader delay: how long the loader stays before the next page shows.
  • Style: colour, size, rotation for icons; width, maximum width and opacity for images.

​
Where it plays

On pages, posts, archives, the blog home and the front page, not on paged URLs, and only when an entrance animation or a preloader is set. The script loads in the head so the overlay never flashes. Links into wp-admin are never intercepted.