{"id":2096,"date":"2025-09-03T16:26:53","date_gmt":"2025-09-03T09:26:53","guid":{"rendered":"https:\/\/boldlabelagency.com\/?p=2096"},"modified":"2025-12-23T14:31:48","modified_gmt":"2025-12-23T07:31:48","slug":"elementor-pro-page-transition","status":"publish","type":"post","link":"https:\/\/boldlabelagency.com\/mm\/elementor-pro-page-transition\/","title":{"rendered":"How We Created a Custom Page Transition on Elementor Pro"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"2096\" class=\"elementor elementor-2096\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d7fb67a e-flex e-con-boxed e-con e-parent\" data-id=\"4d7fb67a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[]}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-74d7ad6 elementor-widget elementor-widget-image\" data-id=\"74d7ad6\" data-element_type=\"widget\" data-e-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 decoding=\"async\" width=\"800\" height=\"431\" src=\"https:\/\/boldlabelagency.com\/wp-content\/uploads\/2025\/09\/page-transition-animation-.gif\" class=\"attachment-large size-large wp-image-2097\" alt=\"Custom page transition on elementor pro site\" \/>\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-c55a773 elementor-widget elementor-widget-text-editor\" data-id=\"c55a773\" data-element_type=\"widget\" data-e-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 data-start=\"214\" data-end=\"524\">For one of our recent projects, I wanted to create a custom page transition on Elementor pro website to solve a design gap. Standard transitions often feel clunky, so we crafted a smoother flow that keeps users engaged while navigating between pages.<\/p><p><strong data-start=\"83\" data-end=\"189\">Oh, and for people who don\u2019t know what Elementor Pro is \u2014 it\u2019s a <a href=\"https:\/\/elementor.com\/pro\/\" target=\"_blank\" rel=\"noopener\">website builder<\/a> plugin for WordPress.<\/strong> Basically, it lets you design pages visually without coding. The \u201cPro\u201d version adds advanced widgets, animations, and customization options, but even then, some creative ideas still need custom tweaks.<\/p><p data-start=\"214\" data-end=\"524\">One of the details I keep returning to in my practice is <strong data-start=\"271\" data-end=\"279\">flow<\/strong>. Websites aren\u2019t just static canvases \u2014 they\u2019re experiences. Every click, every scroll, every transition matters. For one of our client projects, we wanted to push this further by experimenting with a <strong data-start=\"481\" data-end=\"521\">custom Elementor Pro page transition<\/strong>.<\/p><p data-start=\"526\" data-end=\"756\">Normally, when you click a link in Elementor, you get a brief blank screen before the new page loads. It\u2019s only a fraction of a second, but it interrupts the rhythm. That pause feels clunky and pulls users out of the experience.<\/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-1245f71 elementor-widget elementor-widget-heading\" data-id=\"1245f71\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Elementor Pro has some default transitions, but honestly ...<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d613d8 elementor-widget elementor-widget-text-editor\" data-id=\"8d613d8\" data-element_type=\"widget\" data-e-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 data-start=\"983\" data-end=\"1214\">Elementor Pro has some default transitions, but honestly, they don\u2019t carry the experience the way I wanted. The fade felt too plain. The slide was distracting. None of them matched the continuity we were chasing for this project.<\/p>\n<p data-start=\"1216\" data-end=\"1282\">That\u2019s when I realized we had to push beyond the built-in tools.<\/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-9d2de51 elementor-widget elementor-widget-heading\" data-id=\"9d2de51\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">So we just built something smooth with custom transition<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9129997 elementor-widget elementor-widget-text-editor\" data-id=\"9129997\" data-element_type=\"widget\" data-e-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 data-start=\"1347\" data-end=\"1598\">So we decided to design a <strong data-start=\"1373\" data-end=\"1399\">custom page transition<\/strong>. The result was a smooth handover between pages that kept the rhythm intact. Instead of a blank pause, visitors were carried forward in a way that felt natural \u2014 like the site was telling a story.<\/p><p data-start=\"1600\" data-end=\"1750\">I can\u2019t share the client\u2019s live site here, but I tested the same setup on our staging environment so you can see how it works: <a class=\"decorated-link\" href=\"https:\/\/boldlabelagency.com\/mm\/lxiykvyt\/\" data-start=\"1727\" data-end=\"1747\">Here\u2019s the demo<\/a>.<\/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-4e62c8a elementor-widget elementor-widget-heading\" data-id=\"4e62c8a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">What I Actually Used to Make This Work<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-da402f0 elementor-widget elementor-widget-text-editor\" data-id=\"da402f0\" data-element_type=\"widget\" data-e-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<ul><li data-start=\"1871\" data-end=\"1962\"><strong data-start=\"1871\" data-end=\"1897\">A lightweight GIF file<\/strong> \u2192 Used for the loading visual. Keeping it small ensures speed.<\/li><li data-start=\"1963\" data-end=\"2053\"><p data-start=\"1965\" data-end=\"2053\"><a href=\"https:\/\/wordpress.org\/plugins\/code-snippets\/\" target=\"_blank\" rel=\"noopener\"><strong data-start=\"1965\" data-end=\"1990\">A custom code snippet<\/strong><\/a> \u2192 Handles the transition logic, beyond Elementor\u2019s defaults.<\/p><\/li><\/ul><p data-start=\"2055\" data-end=\"2165\">That\u2019s really all it took \u2014 no heavy plugins, no over-engineering. Just a mix of design and a touch of code.<\/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\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u1010\u1004\u103a\u1014\u1031\u1005\u1009\u103a\u1021\u1010\u103d\u1004\u103a\u1038 \u1017\u101c\u102c\u1019\u103b\u1000\u103a\u1014\u103e\u102c\u1015\u103c\u1004\u103a\u1015\u103c\u101e\u1019\u100a\u1037\u103a\u1021\u1005\u102c\u1038\u104a \u1000\u103b\u103d\u1014\u103a\u102f\u1015\u103a\u1010\u102d\u102f\u1037\u104f \u1005\u102c\u1019\u103b\u1000\u103a\u1014\u103e\u102c\u1021\u1000\u1030\u1038\u1021\u1015\u103c\u1031\u102c\u1004\u103a\u1038\u1000\u102c\u1010\u103d\u1014\u103a\u1038\u101e\u100a\u103a \u101c\u102c\u101b\u1031\u102c\u1000\u103a\u1000\u103c\u100a\u1037\u103a\u101b\u103e\u102f\u101e\u1030\u1019\u103b\u102c\u1038\u1000\u102d\u102f \u1005\u102c\u1019\u103b\u1000\u103a\u1014\u103e\u102c\u1019\u103b\u102c\u1038\u1021\u1000\u103c\u102c\u1038\u1010\u103d\u1004\u103a \u1005\u103d\u1032\u1006\u1031\u102c\u1004\u103a\u1014\u1031\u1005\u1031\u1015\u102b\u101e\u100a\u103a\u104b.<\/p>","protected":false},"author":5,"featured_media":2179,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"elementor_theme","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"client-brand":[46],"class_list":["post-2096","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-development","client-brand-bold-label"],"_links":{"self":[{"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/posts\/2096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/comments?post=2096"}],"version-history":[{"count":16,"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/posts\/2096\/revisions"}],"predecessor-version":[{"id":4433,"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/posts\/2096\/revisions\/4433"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/media\/2179"}],"wp:attachment":[{"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/media?parent=2096"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/categories?post=2096"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/tags?post=2096"},{"taxonomy":"client-brand","embeddable":true,"href":"https:\/\/boldlabelagency.com\/mm\/wp-json\/wp\/v2\/client-brand?post=2096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}