{"id":28311,"date":"2023-08-07T13:42:00","date_gmt":"2023-08-07T10:42:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=28311"},"modified":"2026-01-20T11:19:14","modified_gmt":"2026-01-20T09:19:14","slug":"page-transitions","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/page-transitions\/","title":{"rendered":"Create page transitions for your site"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"28311\" class=\"elementor elementor-28311\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-29a73098 e-flex e-con-boxed e-con e-parent\" data-id=\"29a73098\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-667f346 elementor-widget elementor-widget-text-editor\" data-id=\"667f346\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\">\n<div class=\"wp-block-embed__wrapper\">Page Transitions create a smoother surfing experience for your website visitors. There are two types of these transitions:<\/div>\n<ul>\n<li><strong>Page transitions<\/strong>: Add special effects when users go from one page of your site to another. The new page loads while the effect is taking place, making it seem like the page loads immediately.\u00a0<\/li>\n<li><strong>Preloader<\/strong>: A preloader adds a visual timer, such as a spinning circle, that shows visitors a page is loading. This is an indication that visitors should wait for the page to load. Preloaders can operate when visitors arrive at your site and when they navigate between your site&#8217;s pages.<\/li>\n<\/ul>\n<p>If you use both a preloader and page transitions, the preloader will be active when visitors first arrive at your site, and page transitions will work when they navigate between your site&#8217;s pages.\u00a0<\/p>\n<\/figure>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a73e47d elementor-widget__width-initial elementor-widget elementor-widget-video\" data-id=\"a73e47d\" data-element_type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/xlZMR-xx8hs&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-753b02a elementor-widget elementor-widget-text-editor\" data-id=\"753b02a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><\/figure><h2 class=\"wp-block-heading\">Access the page transition controls<\/h2><p>Page transitions are part of site settings.<\/p><p><strong>To access site settings<\/strong>:<\/p><ol><li>In the Elementor Editor, from the top bar, click the Elementor logo.<br \/><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone wp-image-156967 size-full\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png\" alt=\"\" width=\"1000\" height=\"499\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png 1000w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo-300x150.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo-768x383.png 768w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/li><li>Select <strong>Site Settings<\/strong> from the dropdown menu.<br \/><img decoding=\"async\" class=\"alignnone wp-image-156974 size-full\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Select-Site-Settings-from-the-dropdown.png\" alt=\"\" width=\"1001\" height=\"400\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Select-Site-Settings-from-the-dropdown.png 1001w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Select-Site-Settings-from-the-dropdown-300x120.png 300w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Select-Site-Settings-from-the-dropdown-768x307.png 768w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><br \/>In the panel, the <strong>Site Settings<\/strong> menu appears.<br \/><img decoding=\"async\" width=\"280\" height=\"755\" class=\"wp-image-49462\" style=\"width: 280px;\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Site-settings-menu-with-page-transitions-highlighted.png\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Site-settings-menu-with-page-transitions-highlighted.png 306w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Site-settings-menu-with-page-transitions-highlighted-111x300.png 111w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/li><li>In the panel, click <strong>Page Transitions<\/strong>.<\/li><\/ol><p><div class=\"hbox callout-note\">\n                <div class=\"hicon\"> \n                    <span class=\"material-symbols-outlined\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n\t\t\t\t\t<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.36581 2.36386C3.86061 0.869064 5.88798 0.0292969 8.00194 0.0292969C10.1159 0.0292969 12.1433 0.869064 13.6381 2.36386C15.1329 3.85865 15.9726 5.88603 15.9726 7.99999C15.9726 10.1139 15.1329 12.1413 13.6381 13.6361C12.1433 15.1309 10.1159 15.9707 8.00194 15.9707C5.88798 15.9707 3.86061 15.1309 2.36581 13.6361C0.871017 12.1413 0.03125 10.1139 0.03125 7.99999C0.03125 5.88603 0.871017 3.85865 2.36581 2.36386ZM8.00194 1.5293C6.28581 1.5293 4.63996 2.21103 3.42647 3.42452C2.21298 4.63801 1.53125 6.28385 1.53125 7.99999C1.53125 9.71612 2.21298 11.362 3.42647 12.5755C4.63996 13.7889 6.28581 14.4707 8.00194 14.4707C9.71807 14.4707 11.3639 13.7889 12.5774 12.5755C13.7909 11.362 14.4726 9.71612 14.4726 7.99999C14.4726 6.28385 13.7909 4.63801 12.5774 3.42452C11.3639 2.21103 9.71807 1.5293 8.00194 1.5293ZM8.00194 7.25002C8.41616 7.25002 8.75194 7.58581 8.75194 8.00002V11.6104C8.75194 12.0246 8.41616 12.3604 8.00194 12.3604C7.58773 12.3604 7.25194 12.0246 7.25194 11.6104V8.00002C7.25194 7.58581 7.58773 7.25002 8.00194 7.25002ZM7.54165 4.09316C7.7077 3.9822 7.90293 3.92298 8.10265 3.92298C8.37045 3.92298 8.62729 4.02937 8.81666 4.21874C9.00603 4.40811 9.11242 4.66495 9.11242 4.93275C9.11242 5.13246 9.0532 5.32769 8.94224 5.49375C8.83128 5.65981 8.67358 5.78923 8.48907 5.86566C8.30456 5.94208 8.10153 5.96208 7.90565 5.92312C7.70978 5.88416 7.52986 5.78799 7.38863 5.64677C7.24741 5.50554 7.15124 5.32562 7.11228 5.12975C7.07332 4.93387 7.09331 4.73084 7.16974 4.54633C7.24617 4.36182 7.37559 4.20412 7.54165 4.09316Z\" fill=\"black\"\/>\n\t\t\t\t  <\/svg><\/span>\n                <\/div>\n                <div class=\"hboxinfo\">\n                    <strong>Note<\/strong>\n                    <div class=\"hcontent\"><\/div>\n                <\/div>\n            <\/div>Site Settings can also be accessed from WP Admin by going to <strong>Elementor&gt;Editor<\/strong>]<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-15e6c8cb e-flex e-con-boxed e-con e-parent\" data-id=\"15e6c8cb\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1c51ff1d elementor-widget elementor-widget-heading\" data-id=\"1c51ff1d\" data-element_type=\"widget\" id=\"settings\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Settings for the page transitions<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f7df2b elementor-widget elementor-widget-text-editor\" data-id=\"2f7df2b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p class=\"sc-jMbUWg fdTPyi\">You can customize page transitions using the menu in the panel.<\/p>\n<p class=\"sc-jMbUWg fdTPyi\">Click the tabs below to see all the settings available for page transitions.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1b89dab elementor-widget__width-auto e-n-tabs-mobile elementor-widget elementor-widget-n-tabs\" data-id=\"1b89dab\" data-element_type=\"widget\" data-settings=\"{&quot;tabs_justify_horizontal&quot;:&quot;start&quot;,&quot;horizontal_scroll&quot;:&quot;disable&quot;}\" data-widget_type=\"nested-tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-tabs\" data-widget-number=\"28876203\" aria-label=\"Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.\">\n\t\t\t<div class=\"e-n-tabs-heading\" role=\"tablist\">\n\t\t\t\t\t<button id=\"e-n-tab-title-288762031\" data-tab-title-id=\"e-n-tab-title-288762031\" class=\"e-n-tab-title\" aria-selected=\"true\" data-tab-index=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"e-n-tab-content-288762031\" style=\"--n-tabs-title-order: 1;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tPage Transitions\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t<button id=\"e-n-tab-title-288762032\" data-tab-title-id=\"e-n-tab-title-288762032\" class=\"e-n-tab-title\" aria-selected=\"false\" data-tab-index=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"e-n-tab-content-288762032\" style=\"--n-tabs-title-order: 2;\">\n\t\t\t\t\t\t<span class=\"e-n-tab-title-text\">\n\t\t\t\tPreloader\t\t\t<\/span>\n\t\t<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t<div class=\"e-n-tabs-content\">\n\t\t\t\t<div id=\"e-n-tab-content-288762031\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-288762031\" data-tab-index=\"1\" style=\"--n-tabs-title-order: 1;\" class=\"e-active elementor-element elementor-element-f05c7c0 e-con-full e-flex e-con e-child\" data-id=\"f05c7c0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5b8c6c86 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"5b8c6c86\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"506\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/page-transition-options.png\" class=\"attachment-medium_large size-medium_large wp-image-49468\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/page-transition-options.png 302w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/page-transition-options-179x300.png 179w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd2689a elementor-widget__width-initial elementor-widget elementor-widget-n-accordion\" data-id=\"bd2689a\" data-element_type=\"widget\" data-settings=\"{&quot;default_state&quot;:&quot;all_collapsed&quot;,&quot;max_items_expended&quot;:&quot;one&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1980\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1980\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Rating Scale <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1980\" class=\"elementor-element elementor-element-1ac142fd e-con-full e-flex e-con e-child\" data-id=\"1ac142fd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36ead6c7 elementor-widget elementor-widget-text-editor\" data-id=\"36ead6c7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Set the number of symbols for your rating system. Most rating system allows only up to a maximum of five or ten, but the Rating widget allows you to choose any number of rating icons.\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1981\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"2\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1981\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Rating <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1981\" class=\"elementor-element elementor-element-6c13d905 e-con-full e-flex e-con e-child\" data-id=\"6c13d905\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-375b297f elementor-widget elementor-widget-text-editor\" data-id=\"375b297f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Enter the number of symbols you want to represent the rating. For example, enter 3 to display the possibility of a 3 star rating.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1982\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"3\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1982\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Icon <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1982\" class=\"elementor-element elementor-element-25319290 e-con-full e-flex e-con e-child\" data-id=\"25319290\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c762614 elementor-widget elementor-widget-text-editor\" data-id=\"c762614\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<table><tbody><tr><td><p><span style=\"font-weight: 400;\">Icon allows you to switch out the star symbol for another symbol. Click the star <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41020\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/10\/Star-button.png\" alt=\"\" width=\"21\" height=\"21\" \/>\u00a0<\/span><span style=\"font-weight: 400;\"> to choose a symbol from the icon library. Click the SVG button <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-41021\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/10\/SVG-symbol.png\" alt=\"\" width=\"25\" height=\"21\" \/>\u00a0<\/span><span style=\"font-weight: 400;\"> to upload an SVG image.\u00a0<\/span><\/p><\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1983\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"4\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1983\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Alignment <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><i aria-hidden=\"true\" class=\"fas fa-minus\"><\/i><\/span>\n\t\t\t<span class='e-closed'><i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1983\" class=\"elementor-element elementor-element-7f96b35e e-con-full e-flex e-con e-child\" data-id=\"7f96b35e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-132b6f5b elementor-widget elementor-widget-text-editor\" data-id=\"132b6f5b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<table><tbody><tr><td><p><span style=\"font-weight: 400;\">Set the alignment so the rating symbols will appear on the left edge, right edge or center of the widget.<\/span><\/p><\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div id=\"e-n-tab-content-288762032\" role=\"tabpanel\" aria-labelledby=\"e-n-tab-title-288762032\" data-tab-index=\"2\" style=\"--n-tabs-title-order: 2;\" class=\" elementor-element elementor-element-755e03eb e-con-full e-flex e-con e-child\" data-id=\"755e03eb\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3a8ec177 elementor-widget__width-initial elementor-widget elementor-widget-image\" data-id=\"3a8ec177\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"569\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/page-transition-preload-options.png\" class=\"attachment-large size-large wp-image-49472\" alt=\"\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/page-transition-preload-options.png 302w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/page-transition-preload-options-159x300.png 159w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-486e9fa4 elementor-widget__width-initial elementor-widget elementor-widget-n-accordion\" data-id=\"486e9fa4\" data-element_type=\"widget\" data-settings=\"{&quot;default_state&quot;:&quot;all_collapsed&quot;,&quot;max_items_expended&quot;:&quot;one&quot;,&quot;n_accordion_animation_duration&quot;:{&quot;unit&quot;:&quot;ms&quot;,&quot;size&quot;:400,&quot;sizes&quot;:[]}}\" data-widget_type=\"nested-accordion.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"e-n-accordion\" aria-label=\"Accordion. Open links with Enter or Space, close with Escape, and navigate with Arrow Keys\">\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1210\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"1\" tabindex=\"0\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1210\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Type <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1210\" class=\"elementor-element elementor-element-193bd5b4 e-con-full e-flex e-con e-child\" data-id=\"193bd5b4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3357ccea elementor-widget elementor-widget-text-editor\" data-id=\"3357ccea\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>From the <strong>Type<\/strong> dropdown menu choose:<\/p>\n<ul>\n<li>None<\/li>\n<li>Animation<\/li>\n<li>Icon<\/li>\n<li>Image<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1211\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"2\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1211\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Animation <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1211\" class=\"elementor-element elementor-element-809b11a e-con-full e-flex e-con e-child\" data-id=\"809b11a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-313515a5 elementor-widget elementor-widget-text-editor\" data-id=\"313515a5\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you choose <strong>Animation<\/strong> from the <strong>Type<\/strong> dropdown menu, you&#8217;ll have the following options:<\/p>\n<ul>\n<li><strong>Animation<\/strong>:\u00a0choose \u00a0Circle, Circle Dashed, Bouncing Dots, Pulsing Dots, Pulse, Overlap, Spinners, Nested Spinners, Opposing Nested Spinners, Opposing Nested Rings, Progress Bar, Two Way Progress Bar, or Repeating Bar.<\/li>\n<li><strong>Animation Duration<\/strong> (ms): Use the slider or manually enter the value in the field.<\/li>\n<li><strong>Preloader delay<\/strong> (ms): Use the slider or manually enter the value in the field.<\/li>\n<li><strong>Color<\/strong>: Use the color picker to select a color for the animation. For more details, see <a href=\"https:\/\/elementor.com\/help\/choose-color\/\">Choose a color<\/a> or <a href=\"https:\/\/elementor.com\/help\/how-do-i-use-global-fonts-and-colors\/\">Use global fonts and colors<\/a>.\u00a0<\/li>\n<li><strong>Size<\/strong>: Use the slider to make the animation bigger or smaller.<br \/>\u00a0<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1212\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"3\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1212\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Icon <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1212\" class=\"elementor-element elementor-element-7747804b e-con-full e-flex e-con e-child\" data-id=\"7747804b\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-420b145d elementor-widget elementor-widget-text-editor\" data-id=\"420b145d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you choose <strong>Icon<\/strong> from the <strong>Type<\/strong> dropdown menu, you&#8217;ll have the following options:<\/p>\n<ul>\n<li><strong>Icon<\/strong>: Select an icon from the icon library or upload your own SVG.<\/li>\n<li><strong>Animation<\/strong>: From the dropdown menu select from the following options Spinning,\u00a0 Bounce, Flash, Pulse, Rubber Band, Shake, Head Shake, Swing, Tada, Wobble, or Jello.<\/li>\n<li><strong>Animation Duration<\/strong> (ms): Use the slider or manually enter the value in the field.<\/li>\n<li><strong>Color<\/strong>: Use the color picker to select a color for the animation. For more details, see <a href=\"https:\/\/elementor.com\/help\/choose-color\/\">Choose a color<\/a> or <a href=\"https:\/\/elementor.com\/help\/how-do-i-use-global-fonts-and-colors\/\">Use global fonts and colors<\/a>.\u00a0<\/li>\n<li><strong>Preloader delay<\/strong>: Use the slider increase or decrease the preloading time.<\/li>\n<li><strong>Color<\/strong>: Use the color picker to select a color for the animation. For more details, see <a href=\"https:\/\/elementor.com\/help\/choose-color\/\">Choose a color<\/a> or <a href=\"https:\/\/elementor.com\/help\/how-do-i-use-global-fonts-and-colors\/\">Use global fonts and colors<\/a>.\u00a0<\/li>\n<li><strong>Size<\/strong>: Use the slider to make the animation bigger or smaller.<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1213\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"4\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1213\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Image <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1213\" class=\"elementor-element elementor-element-d140a82 e-con-full e-flex e-con e-child\" data-id=\"d140a82\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2381f40c elementor-widget elementor-widget-text-editor\" data-id=\"2381f40c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>If you choose <b>Image <\/b>from the <strong>Type<\/strong> dropdown menu, you&#8217;ll have the following options:<\/p>\n<ul>\n<li><strong>Image<\/strong>: Select an image from the media library or upload your own. For more details, see <a href=\"https:\/\/elementor.com\/help\/add-graphic-element\/\"><span>Adding images and icons<\/span><\/a><span>.<\/span><br \/>\u00a0<\/li>\n<li><strong>Animation<\/strong>: From the dropdown menu select from the following options Spinning,\u00a0 Bounce, Flash, Pulse, Rubber Band, Shake, Head Shake, Swing, Tada, Wobble, or Jello.<\/li>\n<li><strong>Animation Duration<\/strong> (ms): Use the slider or manually enter the value in the field.<\/li>\n<li><strong>Preloader delay<\/strong>: Use the slider increase or decrease the preloading time.<\/li>\n<li><strong>Width<\/strong>: Use the slider to make the image wider or narrower.\u00a0<\/li>\n<li><strong>Width<\/strong>: Use the slider to determine how large the image can be.<\/li>\n<li><strong>Opacity<\/strong>: Use the slider to make the image more or less transparent.\u00a0<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1214\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"5\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1214\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Preview Page Transition <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2.25 10C2.25 9.58579 2.58579 9.25 3 9.25H17C17.4142 9.25 17.75 9.58579 17.75 10C17.75 10.4142 17.4142 10.75 17 10.75H3C2.58579 10.75 2.25 10.4142 2.25 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.5303 9.46967L13 10L13.5303 10.5303C13.8232 10.2374 13.8232 9.76256 13.5303 9.46967ZM11.9393 10L5.46967 16.4697C5.17678 16.7626 5.17678 17.2374 5.46967 17.5303C5.76256 17.8232 6.23744 17.8232 6.53033 17.5303L13.5303 10.5303C13.5304 10.5303 13.5303 10.5303 13 10C13.5303 9.46967 13.5304 9.4697 13.5303 9.46967L6.53033 2.46967C6.23744 2.17678 5.76256 2.17678 5.46967 2.46967C5.17678 2.76256 5.17678 3.23744 5.46967 3.53033L11.9393 10Z\" fill=\"black\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1214\" class=\"elementor-element elementor-element-0936586 e-con-full e-flex e-con e-child\" data-id=\"0936586\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bcd9ba8 elementor-widget elementor-widget-text-editor\" data-id=\"bcd9ba8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Experience the page transitions as visitors would see them.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3f34dab e-flex e-con-boxed e-con e-parent\" data-id=\"3f34dab\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-80606b4 elementor-widget elementor-widget-heading\" data-id=\"80606b4\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Disable Page Transitions<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7ab6f5e elementor-widget elementor-widget-text-editor\" data-id=\"7ab6f5e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>By default, page transitions apply to all internal links on the page. Clicking a link will start the transition process.<\/p>\n<p><\/p>\n<p>You can disable page transitions for selected links, by adding a <strong>Custom Link Attribute<\/strong>:`data-e-disable-page-transition|true`. This attribute will disable the transition functionality for that specific link.<\/p>\n<p><\/p>\n<p>To add an attribute to a link:<\/p>\n<ol>\n<li>In the panel, click the cog icon <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49488\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/cog-icon.png\" alt=\"\" width=\"14\" height=\"13\" \/> next to the link.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49489\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Click-the-cgo-icon-next-to-the-link.png\" alt=\"\" width=\"307\" height=\"322\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Click-the-cgo-icon-next-to-the-link.png 307w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Click-the-cgo-icon-next-to-the-link-286x300.png 286w\" sizes=\"(max-width: 307px) 100vw, 307px\" \/><br \/>This will open the link attributes.<br \/><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-49490\" src=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Enter-custom-attribute.png\" alt=\"\" width=\"305\" height=\"471\" srcset=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Enter-custom-attribute.png 305w, https:\/\/elementor.com\/help\/wp-content\/uploads\/2023\/08\/Enter-custom-attribute-194x300.png 194w\" sizes=\"(max-width: 305px) 100vw, 305px\" \/><\/li>\n<li>In the <strong>Custom Attributes<\/strong> text box, enter: <strong>data-e-disable-page-transition|true<\/strong><\/li>\n<\/ol>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Page Transitions create a smoother surfing experience for your website visitors. There are two types of these transitions: Page transitions: Add special effects when users go from one page of your site to another. The new page loads while the effect is taking place, making it seem like the page loads immediately.\u00a0 Preloader: A preloader [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"_acf_changed":false,"_elementor_kustomer_id":["65a3d8a8f2bce6763d44bc43"],"footnotes":""},"categories":[1458],"tags":[1389,1388,1387,1390,1398,1235],"class_list":["post-28311","post","type-post","status-publish","format-standard","hentry","category-site-settings","tag-advanced","tag-agency","tag-essential","tag-expert","tag-legacy-essential","tag-pro"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create page transitions for your site | Elementor<\/title>\n<meta name=\"description\" content=\"Learn everything about Create page transitions for your site in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/help\/page-transitions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create page transitions for your site | Elementor\" \/>\n<meta property=\"og:description\" content=\"Learn everything about Create page transitions for your site in this article from Elementor&#039;s Knowledge Base. Get Elementor tips &amp; more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/help\/page-transitions\/\" \/>\n<meta property=\"og:site_name\" content=\"Help\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-07T10:42:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:19:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"499\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Alan Kaler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Alan Kaler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/\"},\"author\":{\"name\":\"Alan Kaler\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\"},\"headline\":\"Create page transitions for your site\",\"datePublished\":\"2023-08-07T10:42:00+00:00\",\"dateModified\":\"2026-01-20T09:19:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/\"},\"wordCount\":1832,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png\",\"keywords\":[\"Advanced\",\"Agency\",\"Essential\",\"Expert\",\"Legacy Essential\",\"Pro\"],\"articleSection\":[\"Site settings\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/\",\"url\":\"https:\/\/elementor.com\/help\/page-transitions\/\",\"name\":\"Create page transitions for your site | Elementor\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/help\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png\",\"datePublished\":\"2023-08-07T10:42:00+00:00\",\"dateModified\":\"2026-01-20T09:19:14+00:00\",\"description\":\"Learn everything about Create page transitions for your site in this article from Elementor's Knowledge Base. Get Elementor tips & more.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/help\/page-transitions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png\",\"width\":1000,\"height\":499},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/help\/page-transitions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Help Center\",\"item\":\"https:\/\/elementor.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elementor Editor\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Universal settings\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Site settings\",\"item\":\"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/site-settings\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Create page transitions for your site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/help\/#website\",\"url\":\"https:\/\/elementor.com\/help\/\",\"name\":\"Elementor\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/help\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/help\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/help\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/help\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430\",\"name\":\"Alan Kaler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g\",\"caption\":\"Alan Kaler\"},\"description\":\"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create page transitions for your site | Elementor","description":"Learn everything about Create page transitions for your site in this article from Elementor's Knowledge Base. Get Elementor tips & more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/help\/page-transitions\/","og_locale":"en_US","og_type":"article","og_title":"Create page transitions for your site | Elementor","og_description":"Learn everything about Create page transitions for your site in this article from Elementor's Knowledge Base. Get Elementor tips & more.","og_url":"https:\/\/elementor.com\/help\/page-transitions\/","og_site_name":"Help","article_published_time":"2023-08-07T10:42:00+00:00","article_modified_time":"2026-01-20T09:19:14+00:00","og_image":[{"width":1000,"height":499,"url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png","type":"image\/png"}],"author":"Alan Kaler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Alan Kaler","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/help\/page-transitions\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/help\/page-transitions\/"},"author":{"name":"Alan Kaler","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430"},"headline":"Create page transitions for your site","datePublished":"2023-08-07T10:42:00+00:00","dateModified":"2026-01-20T09:19:14+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/help\/page-transitions\/"},"wordCount":1832,"publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"image":{"@id":"https:\/\/elementor.com\/help\/page-transitions\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png","keywords":["Advanced","Agency","Essential","Expert","Legacy Essential","Pro"],"articleSection":["Site settings"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/elementor.com\/help\/page-transitions\/","url":"https:\/\/elementor.com\/help\/page-transitions\/","name":"Create page transitions for your site | Elementor","isPartOf":{"@id":"https:\/\/elementor.com\/help\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/help\/page-transitions\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/help\/page-transitions\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png","datePublished":"2023-08-07T10:42:00+00:00","dateModified":"2026-01-20T09:19:14+00:00","description":"Learn everything about Create page transitions for your site in this article from Elementor's Knowledge Base. Get Elementor tips & more.","breadcrumb":{"@id":"https:\/\/elementor.com\/help\/page-transitions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/help\/page-transitions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/page-transitions\/#primaryimage","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/11\/Click-the-Elementor-logo.png","width":1000,"height":499},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/help\/page-transitions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Help Center","item":"https:\/\/elementor.com\/help\/"},{"@type":"ListItem","position":2,"name":"Elementor Editor","item":"https:\/\/elementor.com\/help\/elementor-editor\/"},{"@type":"ListItem","position":3,"name":"Universal settings","item":"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/"},{"@type":"ListItem","position":4,"name":"Site settings","item":"https:\/\/elementor.com\/help\/elementor-editor\/universal-settings\/site-settings\/"},{"@type":"ListItem","position":5,"name":"Create page transitions for your site"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/help\/#website","url":"https:\/\/elementor.com\/help\/","name":"Elementor","description":"","publisher":{"@id":"https:\/\/elementor.com\/help\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/help\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/elementor.com\/help\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/help\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/help\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/help\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/ebf805be1a1abdd587d4b97e3328f430","name":"Alan Kaler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/elementor.com\/help\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7618989d1401c38afe50748601d8dad91fdb8930f53fe037881768b15ab4b108?s=96&d=mm&r=g","caption":"Alan Kaler"},"description":"Alan Kaler is an expert Elementorist at Elementor and a WordPress Magician who thinks that the three most beautiful words in our language are: I told you"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/28311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/comments?post=28311"}],"version-history":[{"count":25,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/28311\/revisions"}],"predecessor-version":[{"id":161891,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/posts\/28311\/revisions\/161891"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/media?parent=28311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/categories?post=28311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/help\/wp-json\/wp\/v2\/tags?post=28311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}