Page Transitions

Last update: 10 May 2024 by Olivier Latour

What are Page Transitions?

Page Transitions are animated effects applied to page changes on your website. These animations can include fades, slides, and other visually appealing transitions.

Why should you use Page Transitions?

Page Transitions not only add a layer of interactivity but also improve user engagement. They reduce perceived loading times, make your website more memorable and user-friendly, giving your visitors a reason to stay longer.

Accessing Page Transitions Settings

From the Elementor editor, click on the hamburger icon in the top-left corner. Select “Site Settings.”

In the Site Settings, locate the “Page Transitions” section.

Background Color

This option allows you to set the background color for the transition effect. You can choose a solid color that complements your website’s design. Select a color that matches your brand or the overall theme of your site. This background color will serve as the canvas on which the transition animation is displayed.

Entrance Animation

Entrance animations define how elements on your page appear when the page loads. You can choose from a variety of entrance animations such as fade, slide, zoom, and more. These animations add an engaging element to the initial page view and can be tailored to your content’s style.

Exit Animation

Exit animations dictate how elements disappear when navigating away from a page. Similar to entrance animations, you can select from options like fade, zoom, and more. Exit animations create a visually pleasing transition as users move to a different page.

Animation Duration (ms)

This setting controls the duration of the entrance and exit animations in milliseconds. You can adjust the speed of the animation to your preference. A shorter duration will result in a faster transition, while a longer duration will slow it down for a more dramatic effect.

Preloader Type

The preloader is the animation or visual element displayed while the page content is loading. You can choose from three preloader types: Animation, Icon, or Image. Animation is a dynamic loading animation, Icon uses a predefined icon, and Image allows you to upload a custom image to serve as the preloader.

Preloader Delay (ms)

This setting determines the delay before the preloader appears when a user accesses your page (after exit animation). It is specified in milliseconds and can be adjusted to control how quickly or slowly the preloader is displayed.

Getting Help With Page Transitions

Navigating the Page Transitions functionality in Elementor can sometimes present challenges, especially when aiming to balance aesthetic appeal with SEO optimization. If you find yourself needing assistance with this functionality, it’s precisely what we do every day here at Heeded. Our website design and development services are tailored to ensure that every aspect of your site, including the crucial page titles, is not only visually engaging but also meticulously optimized for search engines. You can even get an instant online quote for a website. At Heeded, we pride ourselves on our comprehensive approach, integrating SEO services into our web design and development processes. This ensures that your website not only looks great but also performs exceptionally well in search engine rankings. Let us take the helm in refining your Elementor page titles, making the process seamless and your website standout, all while boosting your SEO.