{"id":5124,"date":"2024-10-31T13:55:15","date_gmt":"2024-10-31T05:55:15","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=5124"},"modified":"2024-10-31T14:52:24","modified_gmt":"2024-10-31T06:52:24","slug":"enhance-your-elementor-website-with-custom-preloader-animations","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/pt\/melhore-o-seu-sitio-web-elementor-com-animacoes-personalizadas-do-pre-carregador","title":{"rendered":"Melhore o seu site Elementor com anima\u00e7\u00f5es personalizadas do pr\u00e9-carregador"},"content":{"rendered":"<h3 class=\"wp-block-heading\">\u00cdndice<\/h3><ul class=\"wp-block-list\"><li><a href=\"#Why Preloader Animations Matter\">Porque \u00e9 que as anima\u00e7\u00f5es do pr\u00e9-carregador s\u00e3o importantes<\/a><\/li>\n\n<li><a>Estilos de pr\u00e9-carregador que pode utilizar<\/a><\/li>\n\n<li><a>Passo a passo: Adicionando um pr\u00e9-carregador personalizado no Elementor<\/a><ul class=\"wp-block-list\"><li><a>Passo 1: Instale um plug-in de pr\u00e9-carregador<\/a><\/li>\n\n<li><a>Passo 2: Instalar o Preloader Plus<\/a><\/li>\n\n<li><a>Passo 3: Configurar as defini\u00e7\u00f5es do pr\u00e9-carregador<\/a><\/li>\n\n<li><a>Passo 4: Escolher a anima\u00e7\u00e3o do seu pr\u00e9-carregador<\/a><\/li>\n\n<li><a>Etapa 5: Ajustar a conce\u00e7\u00e3o e o calend\u00e1rio<\/a><\/li><\/ul><\/li>\n\n<li><a>Integrar o Preloader com o Elementor para um maior controlo<\/a><\/li>\n\n<li><a>Testar e otimizar o seu pr\u00e9-carregador<\/a><\/li>\n\n<li><a>Considera\u00e7\u00f5es finais: Fazer com que o seu site Elementor se destaque<\/a><\/li><\/ul><h2 class=\"wp-block-heading\">Porque \u00e9 que as anima\u00e7\u00f5es do pr\u00e9-carregador s\u00e3o importantes<\/h2><p>Um pr\u00e9-carregador pode transformar a primeira impress\u00e3o do seu s\u00edtio Web Elementor em algo memor\u00e1vel. Em vez de uma p\u00e1gina em branco ou o temido spinner de carregamento, um pr\u00e9-carregador bem concebido acrescenta um toque de personalidade e mant\u00e9m os seus visitantes envolvidos enquanto esperam que o seu conte\u00fado apare\u00e7a. Neste artigo, vou gui\u00e1-lo atrav\u00e9s do processo de cria\u00e7\u00e3o e personaliza\u00e7\u00e3o de anima\u00e7\u00f5es de pr\u00e9-carregador no Elementor, dividindo-o em passos simples que qualquer pessoa pode seguir.<\/p><figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.26.11-A-visually-appealing-modern-preloader-animation-illustration-for-a-website-using-Elementor.-The-design-should-feature-a-smooth-animation-with-creativ.webp\" alt=\"\" class=\"wp-image-5127\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.26.11-A-visually-appealing-modern-preloader-animation-illustration-for-a-website-using-Elementor.-The-design-should-feature-a-smooth-animation-with-creativ.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.26.11-A-visually-appealing-modern-preloader-animation-illustration-for-a-website-using-Elementor.-The-design-should-feature-a-smooth-animation-with-creativ-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.26.11-A-visually-appealing-modern-preloader-animation-illustration-for-a-website-using-Elementor.-The-design-should-feature-a-smooth-animation-with-creativ-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.26.11-A-visually-appealing-modern-preloader-animation-illustration-for-a-website-using-Elementor.-The-design-should-feature-a-smooth-animation-with-creativ-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.26.11-A-visually-appealing-modern-preloader-animation-illustration-for-a-website-using-Elementor.-The-design-should-feature-a-smooth-animation-with-creativ-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.26.11-A-visually-appealing-modern-preloader-animation-illustration-for-a-website-using-Elementor.-The-design-should-feature-a-smooth-animation-with-creativ-768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.26.11-A-visually-appealing-modern-preloader-animation-illustration-for-a-website-using-Elementor.-The-design-should-feature-a-smooth-animation-with-creativ-624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>Imagine que clicou numa hiperliga\u00e7\u00e3o e ficou a olhar para um ecr\u00e3 em branco. \u00c9 frustrante, n\u00e3o \u00e9? As anima\u00e7\u00f5es de pr\u00e9-carregamento resolvem este problema fornecendo feedback visual de que a p\u00e1gina est\u00e1 a carregar ativamente - mantendo os visitantes entretidos e seguros de que a sua experi\u00eancia valer\u00e1 a pena. Os pr\u00e9-carregadores n\u00e3o s\u00f3 aumentam o envolvimento do utilizador, como tamb\u00e9m ajudam a transmitir a personalidade da sua marca atrav\u00e9s da criatividade visual.<\/p><h3 class=\"wp-block-heading\">Estilos de pr\u00e9-carregador que pode utilizar<\/h3><p>Antes de nos debru\u00e7armos sobre a forma de adicionar pr\u00e9-carregadores ao seu s\u00edtio Web Elementor, vamos explorar os diferentes estilos que pode utilizar:<\/p><figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/thumb-1024x576.png\" alt=\"\" class=\"wp-image-5130\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/thumb-1024x576.png 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/thumb-600x338.png 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/thumb-300x169.png 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/thumb-768x432.png 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/thumb-624x351.png 624w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/thumb.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><ol start=\"1\" class=\"wp-block-list\"><li><strong>Anima\u00e7\u00e3o do spinner<\/strong>: Uma escolha cl\u00e1ssica. Simples mas eficaz, o spinner rotativo indica aos utilizadores que algo est\u00e1 a acontecer.<ul class=\"wp-block-list\"><li><strong>Caso de utiliza\u00e7\u00e3o<\/strong>: Adequado para s\u00edtios Web minimalistas ou orientados para a tecnologia. Este estilo \u00e9 direto e n\u00e3o distrai, tornando-o ideal para websites onde a simplicidade \u00e9 fundamental.<\/li>\n\n<li><strong>Dicas de personaliza\u00e7\u00e3o<\/strong>: Utilize as cores da sua marca para o spinner para manter a coer\u00eancia.<\/li><\/ul><\/li>\n\n<li><strong>Barra de progresso<\/strong>: Ideal se pretender transmitir uma percentagem exacta de carregamento, dando aos visitantes uma ideia do tempo que t\u00eam de esperar.<ul class=\"wp-block-list\"><li><strong>Caso de utiliza\u00e7\u00e3o<\/strong>: Ideal para s\u00edtios com muito conte\u00fado, como com\u00e9rcio eletr\u00f3nico ou blogues com muitas imagens. As barras de progresso d\u00e3o aos utilizadores uma indica\u00e7\u00e3o clara do progresso do carregamento, reduzindo a frustra\u00e7\u00e3o.<\/li>\n\n<li><strong>Dicas de personaliza\u00e7\u00e3o<\/strong>: Personalize a cor da barra de progresso para a alinhar com a paleta de cores principal do seu Web site e considere a possibilidade de adicionar uma etiqueta como \"A carregar... Aguarde\" para a tornar mais informativa.<\/li><\/ul><\/li>\n\n<li><strong>Anima\u00e7\u00e3o do log\u00f3tipo<\/strong>: Pode animar o seu log\u00f3tipo para manter a marca e, ao mesmo tempo, mostrar algum talento criativo.<ul class=\"wp-block-list\"><li><strong>Caso de utiliza\u00e7\u00e3o<\/strong>: Perfeito para s\u00edtios Web centrados na marca, tais como ag\u00eancias, marcas de moda ou portef\u00f3lios criativos. Este tipo de pr\u00e9-carregador refor\u00e7a a identidade da marca.<\/li>\n\n<li><strong>Dicas de personaliza\u00e7\u00e3o<\/strong>: Utilize ferramentas como <strong>Efeitos posteriores<\/strong> ou <strong>LottieFiles<\/strong> para criar anima\u00e7\u00f5es SVG leves do seu log\u00f3tipo. Certifique-se de que o loop de anima\u00e7\u00e3o \u00e9 suave e n\u00e3o dura mais do que alguns segundos.<\/li><\/ul><\/li>\n\n<li><strong>Fade-In\/Out de texto<\/strong>: Palavras como \"Loading...\" que aparecem e desaparecem s\u00e3o uma op\u00e7\u00e3o simples mas impactante, dando-lhe um toque pessoal.<ul class=\"wp-block-list\"><li><strong>Caso de utiliza\u00e7\u00e3o<\/strong>: Ideal para blogues pessoais ou s\u00edtios Web comunit\u00e1rios. Cria uma sensa\u00e7\u00e3o calorosa e amig\u00e1vel, fazendo com que os utilizadores se sintam mais ligados.<\/li>\n\n<li><strong>Dicas de personaliza\u00e7\u00e3o<\/strong>: Personalize o texto para se adequar \u00e0 voz da sua marca - utilize algo \u00fanico como \"Aguente firme, o conte\u00fado incr\u00edvel est\u00e1 a caminho!\" para adicionar personalidade.<\/li><\/ul><\/li><\/ol><figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/606196a9-6432-421f-9286-2cb761cdff94.webp\" alt=\"\" class=\"wp-image-5128\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/606196a9-6432-421f-9286-2cb761cdff94.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/606196a9-6432-421f-9286-2cb761cdff94-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/606196a9-6432-421f-9286-2cb761cdff94-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/606196a9-6432-421f-9286-2cb761cdff94-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/606196a9-6432-421f-9286-2cb761cdff94-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/606196a9-6432-421f-9286-2cb761cdff94-768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/606196a9-6432-421f-9286-2cb761cdff94-624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><p>O objetivo \u00e9 escolher um pr\u00e9-carregador que se alinhe com a sua marca, corresponda ao estilo do seu s\u00edtio Web e mantenha os seus utilizadores envolvidos enquanto o conte\u00fado carrega.<\/p><h3 class=\"wp-block-heading\">Passo a passo: Adicionando um pr\u00e9-carregador personalizado no Elementor<\/h3><p>Agora, vamos entrar nos detalhes de como voc\u00ea pode adicionar uma anima\u00e7\u00e3o de pr\u00e9-carregador personalizada ao seu site Elementor. N\u00e3o precisa de se preocupar se n\u00e3o for um perito em codifica\u00e7\u00e3o - este m\u00e9todo \u00e9 f\u00e1cil de utilizar para principiantes.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.32.02-A-highly-clear-and-detailed-step-by-step-illustration-on-how-to-add-a-custom-preloader-animation-in-Elementor.-Use-distinct-easy-to-read-icons-for-ea.webp\" alt=\"\" class=\"wp-image-5131\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.32.02-A-highly-clear-and-detailed-step-by-step-illustration-on-how-to-add-a-custom-preloader-animation-in-Elementor.-Use-distinct-easy-to-read-icons-for-ea.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.32.02-A-highly-clear-and-detailed-step-by-step-illustration-on-how-to-add-a-custom-preloader-animation-in-Elementor.-Use-distinct-easy-to-read-icons-for-ea-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.32.02-A-highly-clear-and-detailed-step-by-step-illustration-on-how-to-add-a-custom-preloader-animation-in-Elementor.-Use-distinct-easy-to-read-icons-for-ea-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.32.02-A-highly-clear-and-detailed-step-by-step-illustration-on-how-to-add-a-custom-preloader-animation-in-Elementor.-Use-distinct-easy-to-read-icons-for-ea-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.32.02-A-highly-clear-and-detailed-step-by-step-illustration-on-how-to-add-a-custom-preloader-animation-in-Elementor.-Use-distinct-easy-to-read-icons-for-ea-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.32.02-A-highly-clear-and-detailed-step-by-step-illustration-on-how-to-add-a-custom-preloader-animation-in-Elementor.-Use-distinct-easy-to-read-icons-for-ea-768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.32.02-A-highly-clear-and-detailed-step-by-step-illustration-on-how-to-add-a-custom-preloader-animation-in-Elementor.-Use-distinct-easy-to-read-icons-for-ea-624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h4 class=\"wp-block-heading\">Passo 1: Instale um plug-in de pr\u00e9-carregador<\/h4><p>A forma mais f\u00e1cil de adicionar uma anima\u00e7\u00e3o de pr\u00e9-carregador no Elementor \u00e9 utilizando um plugin. Algumas das op\u00e7\u00f5es mais populares incluem:<\/p><ul class=\"wp-block-list\"><li><strong>LoftLoader<\/strong>: Um plugin altamente personaliz\u00e1vel que se integra bem com o Elementor.<\/li>\n\n<li><strong>Pr\u00e9-carregador Plus<\/strong>: Oferece uma grande flexibilidade para adicionar anima\u00e7\u00f5es e ajustar as defini\u00e7\u00f5es.<\/li>\n\n<li><strong>Carregador de p\u00e1ginas<\/strong>: Uma op\u00e7\u00e3o premium com controlo extensivo sobre o design e a apresenta\u00e7\u00e3o.<\/li><\/ul><p>Para este tutorial, vamos usar o <strong>Pr\u00e9-carregador Plus<\/strong> como exemplo, uma vez que \u00e9 de f\u00e1cil utiliza\u00e7\u00e3o e oferece muitas possibilidades de personaliza\u00e7\u00e3o sem ter de tocar em qualquer c\u00f3digo.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.33.24-A-clear-instructional-illustration-for-the-first-step-in-adding-a-preloader-animation-to-Elementor-by-installing-the-Preloader-Plus-plugin.-Show-the-.webp\" alt=\"\" class=\"wp-image-5132\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.33.24-A-clear-instructional-illustration-for-the-first-step-in-adding-a-preloader-animation-to-Elementor-by-installing-the-Preloader-Plus-plugin.-Show-the-.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.33.24-A-clear-instructional-illustration-for-the-first-step-in-adding-a-preloader-animation-to-Elementor-by-installing-the-Preloader-Plus-plugin.-Show-the--600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.33.24-A-clear-instructional-illustration-for-the-first-step-in-adding-a-preloader-animation-to-Elementor-by-installing-the-Preloader-Plus-plugin.-Show-the--100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.33.24-A-clear-instructional-illustration-for-the-first-step-in-adding-a-preloader-animation-to-Elementor-by-installing-the-Preloader-Plus-plugin.-Show-the--300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.33.24-A-clear-instructional-illustration-for-the-first-step-in-adding-a-preloader-animation-to-Elementor-by-installing-the-Preloader-Plus-plugin.-Show-the--150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.33.24-A-clear-instructional-illustration-for-the-first-step-in-adding-a-preloader-animation-to-Elementor-by-installing-the-Preloader-Plus-plugin.-Show-the--768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.33.24-A-clear-instructional-illustration-for-the-first-step-in-adding-a-preloader-animation-to-Elementor-by-installing-the-Preloader-Plus-plugin.-Show-the--624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h4 class=\"wp-block-heading\">Passo 2: Instalar o Preloader Plus<\/h4><ol start=\"1\" class=\"wp-block-list\"><li><strong>Navegue at\u00e9 ao painel de controlo do WordPress<\/strong>.<ul class=\"wp-block-list\"><li>Inicie sess\u00e3o no seu painel de administra\u00e7\u00e3o do WordPress.<\/li>\n\n<li>A partir do painel de controlo, ter\u00e1 acesso \u00e0 instala\u00e7\u00e3o de plug-ins e \u00e0 personaliza\u00e7\u00e3o das defini\u00e7\u00f5es.<\/li><\/ul><\/li>\n\n<li><strong>Aceda a Plugins &gt; Adicionar novo<\/strong>.<ul class=\"wp-block-list\"><li>Clique no bot\u00e3o <strong>Plugins<\/strong> na barra lateral esquerda e, em seguida, clique em <strong>Adicionar novo<\/strong>.<\/li><\/ul><\/li>\n\n<li>Procure por \"Preloader Plus\" na barra de pesquisa.<ul class=\"wp-block-list\"><li>Escreva \"Preloader Plus\" na barra de pesquisa e prima Enter.<\/li><\/ul><\/li>\n\n<li>Clique em <strong>Instale agora<\/strong> e depois <strong>Ativar<\/strong>.<ul class=\"wp-block-list\"><li>Quando encontrar o plugin, clique em <strong>Instale agora<\/strong>.<\/li>\n\n<li>Ap\u00f3s a conclus\u00e3o da instala\u00e7\u00e3o, clique em <strong>Ativar<\/strong> para ativar o plugin no seu s\u00edtio Web.<\/li><\/ul><\/li><\/ol><p>Uma vez ativado, ver\u00e1 as defini\u00e7\u00f5es do Preloader Plus no seu painel de controlo do WordPress.<\/p><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.34.12-A-detailed-beginner-friendly-illustration-for-Step-2-of-installing-the-Preloader-Plus-plugin-on-a-WordPress-website.-Show-visual-steps-such-as-naviga.webp\" alt=\"\" class=\"wp-image-5133\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.34.12-A-detailed-beginner-friendly-illustration-for-Step-2-of-installing-the-Preloader-Plus-plugin-on-a-WordPress-website.-Show-visual-steps-such-as-naviga.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.34.12-A-detailed-beginner-friendly-illustration-for-Step-2-of-installing-the-Preloader-Plus-plugin-on-a-WordPress-website.-Show-visual-steps-such-as-naviga-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.34.12-A-detailed-beginner-friendly-illustration-for-Step-2-of-installing-the-Preloader-Plus-plugin-on-a-WordPress-website.-Show-visual-steps-such-as-naviga-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.34.12-A-detailed-beginner-friendly-illustration-for-Step-2-of-installing-the-Preloader-Plus-plugin-on-a-WordPress-website.-Show-visual-steps-such-as-naviga-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.34.12-A-detailed-beginner-friendly-illustration-for-Step-2-of-installing-the-Preloader-Plus-plugin-on-a-WordPress-website.-Show-visual-steps-such-as-naviga-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.34.12-A-detailed-beginner-friendly-illustration-for-Step-2-of-installing-the-Preloader-Plus-plugin-on-a-WordPress-website.-Show-visual-steps-such-as-naviga-768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.34.12-A-detailed-beginner-friendly-illustration-for-Step-2-of-installing-the-Preloader-Plus-plugin-on-a-WordPress-website.-Show-visual-steps-such-as-naviga-624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h4 class=\"wp-block-heading\">Passo 3: Configurar as defini\u00e7\u00f5es do pr\u00e9-carregador<\/h4><ol start=\"1\" class=\"wp-block-list\"><li><strong>Abra as defini\u00e7\u00f5es do Preloader Plus<\/strong> do painel de controlo.<ul class=\"wp-block-list\"><li>Aceda a <strong>Defini\u00e7\u00f5es &gt; Pr\u00e9-carregador Plus<\/strong> para aceder \u00e0s op\u00e7\u00f5es de configura\u00e7\u00e3o.<\/li><\/ul><\/li>\n\n<li>Navegue at\u00e9 ao <strong>Defini\u00e7\u00f5es gerais<\/strong> tab.<ul class=\"wp-block-list\"><li>Aqui, pode ativar ou desativar o pr\u00e9-carregador e definir o seu comportamento b\u00e1sico.<\/li><\/ul><\/li>\n\n<li><strong>Ativar o pr\u00e9-carregador<\/strong> ligando o interrutor.<ul class=\"wp-block-list\"><li>Isto activar\u00e1 o pr\u00e9-carregador no seu s\u00edtio Web com base nas defini\u00e7\u00f5es que escolher.<\/li><\/ul><\/li><\/ol><p>Em seguida, \u00e9 altura de decidir quando e onde pretende que o seu pr\u00e9-carregador esteja ativo. Pode querer que esteja ativo apenas na sua p\u00e1gina inicial ou talvez em todo o site.<\/p><ul class=\"wp-block-list\"><li><strong>P\u00e1ginas a mostrar<\/strong>: Selecione as p\u00e1ginas onde pretende que o pr\u00e9-carregador seja vis\u00edvel (por exemplo, P\u00e1gina inicial, Todas as p\u00e1ginas, etc.).<ul class=\"wp-block-list\"><li><strong>Dica<\/strong>: Para uma melhor experi\u00eancia do utilizador, considere ativar o pr\u00e9-carregador apenas em p\u00e1ginas com conte\u00fados pesados que demorem mais tempo a carregar.<\/li><\/ul><\/li>\n\n<li><strong>Frequ\u00eancia de visualiza\u00e7\u00e3o<\/strong>: Escolha se o quer mostrar no <strong>apenas o carregamento da primeira p\u00e1gina<\/strong> ou de cada vez que um visitante navega para uma nova p\u00e1gina.<ul class=\"wp-block-list\"><li><strong>Dica<\/strong>: A sua utiliza\u00e7\u00e3o apenas no primeiro carregamento da p\u00e1gina pode melhorar a experi\u00eancia geral de navega\u00e7\u00e3o, reduzindo as anima\u00e7\u00f5es de carregamento repetitivas.<\/li><\/ul><\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-13.53.43-A-high-quality-clear-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-detailed-steps-with-visual-elements-.webp\" alt=\"\" class=\"wp-image-5140\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-13.53.43-A-high-quality-clear-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-detailed-steps-with-visual-elements-.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-13.53.43-A-high-quality-clear-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-detailed-steps-with-visual-elements--600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-13.53.43-A-high-quality-clear-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-detailed-steps-with-visual-elements--100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-13.53.43-A-high-quality-clear-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-detailed-steps-with-visual-elements--300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-13.53.43-A-high-quality-clear-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-detailed-steps-with-visual-elements--150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-13.53.43-A-high-quality-clear-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-detailed-steps-with-visual-elements--768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-13.53.43-A-high-quality-clear-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-detailed-steps-with-visual-elements--624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h4 class=\"wp-block-heading\">Passo 4: Escolher a anima\u00e7\u00e3o do seu pr\u00e9-carregador<\/h4><ol start=\"1\" class=\"wp-block-list\"><li>Aceda ao <strong>Defini\u00e7\u00f5es de estilo<\/strong> tab.<ul class=\"wp-block-list\"><li>Neste separador, pode configurar o aspeto do seu pr\u00e9-carregador.<\/li>\n\n<li><strong>Exemplo<\/strong>: Pode visitar <a href=\"https:\/\/example.com\" target=\"_blank\" rel=\"noopener\">https:\/\/example.com<\/a> para ver como um pr\u00e9-carregador de anima\u00e7\u00e3o de log\u00f3tipo pode melhorar a marca de um portef\u00f3lio criativo.<\/li><\/ul><\/li>\n\n<li><strong>Selecione o tipo de pr\u00e9-carregador<\/strong>: Escolha entre um spinner, uma barra de progresso ou uma anima\u00e7\u00e3o personalizada.<ul class=\"wp-block-list\"><li>Dependendo do estilo da sua marca, selecione o tipo de pr\u00e9-carregador que melhor se adapta \u00e0s suas necessidades.<\/li>\n\n<li><strong>Exemplo<\/strong>: Para um s\u00edtio Web de com\u00e9rcio eletr\u00f3nico como <a href=\"https:\/\/shopdemo.com\" target=\"_blank\" rel=\"noopener\">https:\/\/shopdemo.com<\/a>Para manter os utilizadores informados, uma barra de progresso funciona bem.<\/li><\/ul><\/li>\n\n<li>Para <strong>Pr\u00e9-carregador personalizado<\/strong>Carregue um GIF ou SVG do seu log\u00f3tipo se pretender uma anima\u00e7\u00e3o com a sua marca.<ul class=\"wp-block-list\"><li>Clique em <strong>Carregar<\/strong> para adicionar a sua anima\u00e7\u00e3o personalizada do pr\u00e9-carregador.<\/li><\/ul><\/li><\/ol><p>Um GIF personalizado do log\u00f3tipo da sua marca pode ser uma excelente forma de deixar uma impress\u00e3o nos seus visitantes. Pode utilizar ferramentas como <strong>Canva<\/strong> ou <strong>Figma<\/strong> para criar anima\u00e7\u00f5es simples de log\u00f3tipos.<\/p><ul class=\"wp-block-list\"><li><strong>Dica<\/strong>: Certifique-se de que a sua anima\u00e7\u00e3o personalizada \u00e9 leve para evitar abrandar o processo de carregamento. Tente obter um ficheiro de anima\u00e7\u00e3o com um tamanho inferior a <strong>200KB<\/strong> para um desempenho \u00f3timo.<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.36.14-An-instructional-illustration-for-Step-4-on-choosing-and-customizing-the-preloader-animation-in-WordPress-using-Preloader-Plus.-Show-the-steps-in-the-.webp\" alt=\"\" class=\"wp-image-5135\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.36.14-An-instructional-illustration-for-Step-4-on-choosing-and-customizing-the-preloader-animation-in-WordPress-using-Preloader-Plus.-Show-the-steps-in-the-.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.36.14-An-instructional-illustration-for-Step-4-on-choosing-and-customizing-the-preloader-animation-in-WordPress-using-Preloader-Plus.-Show-the-steps-in-the--600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.36.14-An-instructional-illustration-for-Step-4-on-choosing-and-customizing-the-preloader-animation-in-WordPress-using-Preloader-Plus.-Show-the-steps-in-the--100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.36.14-An-instructional-illustration-for-Step-4-on-choosing-and-customizing-the-preloader-animation-in-WordPress-using-Preloader-Plus.-Show-the-steps-in-the--300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.36.14-An-instructional-illustration-for-Step-4-on-choosing-and-customizing-the-preloader-animation-in-WordPress-using-Preloader-Plus.-Show-the-steps-in-the--150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.36.14-An-instructional-illustration-for-Step-4-on-choosing-and-customizing-the-preloader-animation-in-WordPress-using-Preloader-Plus.-Show-the-steps-in-the--768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.36.14-An-instructional-illustration-for-Step-4-on-choosing-and-customizing-the-preloader-animation-in-WordPress-using-Preloader-Plus.-Show-the-steps-in-the--624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h4 class=\"wp-block-heading\">Etapa 5: Ajustar a conce\u00e7\u00e3o e o calend\u00e1rio<\/h4><ul class=\"wp-block-list\"><li><strong>Cor de fundo<\/strong>: Defina a cor de fundo para corresponder \u00e0 paleta da sua marca. Pode utilizar uma cor que contraste com o seu log\u00f3tipo para o fazer sobressair.<ul class=\"wp-block-list\"><li><strong>Instru\u00e7\u00f5es<\/strong>: Clique no seletor de cores na janela <strong>Cor de fundo<\/strong> e escolha uma cor que complemente o tema do seu s\u00edtio Web.<\/li><\/ul><\/li>\n\n<li><strong>Dura\u00e7\u00e3o da anima\u00e7\u00e3o<\/strong>: Defina a dura\u00e7\u00e3o durante a qual a anima\u00e7\u00e3o deve ser reproduzida. Normalmente, mantenha-a abaixo de <strong>3 segundos<\/strong> funciona melhor para reter a aten\u00e7\u00e3o do utilizador sem o frustrar.<ul class=\"wp-block-list\"><li><strong>Dica<\/strong>: Teste diferentes dura\u00e7\u00f5es para encontrar o ponto ideal onde o pr\u00e9-carregador n\u00e3o pare\u00e7a nem demasiado r\u00e1pido nem demasiado lento.<\/li><\/ul><\/li>\n\n<li><strong>Fade In\/Out da p\u00e1gina<\/strong>: Utilize efeitos de fade-in\/fade-out para proporcionar uma transi\u00e7\u00e3o mais suave entre o pr\u00e9-carregador e o conte\u00fado atual.<ul class=\"wp-block-list\"><li><strong>Dica<\/strong>: Um ligeiro efeito de fade-in pode fazer com que a transi\u00e7\u00e3o pare\u00e7a mais polida e menos abrupta.<\/li><\/ul><\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.03-An-instructional-illustration-for-Step-5-on-adjusting-design-and-timing-for-a-preloader-animation-in-Preloader-Plus.-Show-the-settings-for-Background-.webp\" alt=\"\" class=\"wp-image-5136\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.03-An-instructional-illustration-for-Step-5-on-adjusting-design-and-timing-for-a-preloader-animation-in-Preloader-Plus.-Show-the-settings-for-Background-.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.03-An-instructional-illustration-for-Step-5-on-adjusting-design-and-timing-for-a-preloader-animation-in-Preloader-Plus.-Show-the-settings-for-Background--600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.03-An-instructional-illustration-for-Step-5-on-adjusting-design-and-timing-for-a-preloader-animation-in-Preloader-Plus.-Show-the-settings-for-Background--100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.03-An-instructional-illustration-for-Step-5-on-adjusting-design-and-timing-for-a-preloader-animation-in-Preloader-Plus.-Show-the-settings-for-Background--300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.03-An-instructional-illustration-for-Step-5-on-adjusting-design-and-timing-for-a-preloader-animation-in-Preloader-Plus.-Show-the-settings-for-Background--150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.03-An-instructional-illustration-for-Step-5-on-adjusting-design-and-timing-for-a-preloader-animation-in-Preloader-Plus.-Show-the-settings-for-Background--768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.03-An-instructional-illustration-for-Step-5-on-adjusting-design-and-timing-for-a-preloader-animation-in-Preloader-Plus.-Show-the-settings-for-Background--624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\">Integrar o Preloader com o Elementor para um maior controlo<\/h3><p>Se pretender um controlo mais granular sobre onde e quando o seu pr\u00e9-carregador aparece, pode integrar o Preloader Plus no Elementor utilizando <strong>CSS personalizado do Elementor<\/strong> carater\u00edstica.<\/p><ul class=\"wp-block-list\"><li>No Elementor, <strong>editar a p\u00e1gina<\/strong> onde pretende adicionar o pr\u00e9-carregador.<ul class=\"wp-block-list\"><li>Navegue at\u00e9 \u00e0 p\u00e1gina que pretende editar e clique em <strong>Edite com o Elementor<\/strong>.<\/li><\/ul><\/li>\n\n<li>Abra o <strong>Avan\u00e7ado<\/strong> e desloque-se para baixo at\u00e9 <strong>CSS personalizado<\/strong>.<ul class=\"wp-block-list\"><li>Clique no bot\u00e3o <strong>Avan\u00e7ado<\/strong> no painel esquerdo e, em seguida, desloque-se para baixo para encontrar o separador <strong>CSS personalizado<\/strong> campo.<\/li><\/ul><\/li>\n\n<li>Adicione c\u00f3digo CSS para criar anima\u00e7\u00f5es de pr\u00e9-carregador para sec\u00e7\u00f5es espec\u00edficas da p\u00e1gina. Por exemplo:<\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.51-An-instructional-illustration-showing-the-process-of-integrating-Preloader-Plus-with-Elementor-for-customized-control-over-preloader-animations.-Illus.webp\" alt=\"\" class=\"wp-image-5137\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.51-An-instructional-illustration-showing-the-process-of-integrating-Preloader-Plus-with-Elementor-for-customized-control-over-preloader-animations.-Illus.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.51-An-instructional-illustration-showing-the-process-of-integrating-Preloader-Plus-with-Elementor-for-customized-control-over-preloader-animations.-Illus-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.51-An-instructional-illustration-showing-the-process-of-integrating-Preloader-Plus-with-Elementor-for-customized-control-over-preloader-animations.-Illus-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.51-An-instructional-illustration-showing-the-process-of-integrating-Preloader-Plus-with-Elementor-for-customized-control-over-preloader-animations.-Illus-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.51-An-instructional-illustration-showing-the-process-of-integrating-Preloader-Plus-with-Elementor-for-customized-control-over-preloader-animations.-Illus-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.51-An-instructional-illustration-showing-the-process-of-integrating-Preloader-Plus-with-Elementor-for-customized-control-over-preloader-animations.-Illus-768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.37.51-An-instructional-illustration-showing-the-process-of-integrating-Preloader-Plus-with-Elementor-for-customized-control-over-preloader-animations.-Illus-624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><pre class=\"wp-block-code\"><code>\/* CSS personalizado para o pr\u00e9-carregador *\/\n.preloader-section {\n  anima\u00e7\u00e3o: fadeIn 2s ease-in-out;\n}\n\n@keyframes fadeIn {\n  0% { opacidade: 0; }\n  100% { opacidade: 1; }\n}<\/code><\/pre><ul class=\"wp-block-list\"><li><strong>Dica<\/strong>: Utilize esta funcionalidade para adicionar pr\u00e9-carregadores apenas a sec\u00e7\u00f5es cr\u00edticas que demoram mais tempo a carregar, tais como galerias de imagens ou incorpora\u00e7\u00f5es de v\u00eddeo. Isto ajuda a manter o resto da p\u00e1gina r\u00e1pida e reactiva.<\/li><\/ul><h3 class=\"wp-block-heading\">Testar e otimizar o seu pr\u00e9-carregador<\/h3><p>Agora que j\u00e1 configurou o seu pr\u00e9-carregador, \u00e9 importante test\u00e1-lo. Aqui tem algumas dicas:<\/p><ul class=\"wp-block-list\"><li><strong>Verifique em diferentes dispositivos<\/strong>: Utilize ferramentas como <strong>Pilha de navegadores<\/strong> para ver o aspeto do seu pr\u00e9-carregador nas vistas de telem\u00f3vel, tablet e computador. Certifique-se de que proporciona uma experi\u00eancia consistente em todos os dispositivos.<ul class=\"wp-block-list\"><li><strong>Instru\u00e7\u00f5es<\/strong>: Abra o BrowserStack, selecione os dispositivos que pretende testar e navegue para o seu s\u00edtio Web.<\/li><\/ul><\/li>\n\n<li><strong>Velocidade de carregamento do monitor<\/strong>: Lembre-se, um pr\u00e9-carregador deve melhorar a experi\u00eancia sem abrandar significativamente a sua p\u00e1gina. Utilize ferramentas como <strong>GTmetrix<\/strong> ou <strong>Google PageSpeed Insights<\/strong> para garantir que a velocidade de carregamento do seu site \u00e9 optimizada.<ul class=\"wp-block-list\"><li><strong>Dica<\/strong>: Se o seu pr\u00e9-carregador estiver a afetar negativamente os tempos de carregamento, considere otimizar o tamanho do ficheiro de anima\u00e7\u00e3o ou limitar a utiliza\u00e7\u00e3o de pr\u00e9-carregadores a p\u00e1ginas espec\u00edficas.<\/li><\/ul><\/li>\n\n<li><strong>Evite a utiliza\u00e7\u00e3o excessiva<\/strong>: As anima\u00e7\u00f5es de pr\u00e9-carregamento s\u00e3o eficazes, mas a sua utiliza\u00e7\u00e3o excessiva em todas as p\u00e1ginas pode frustrar os visitantes. Utilize-as estrategicamente - normalmente em p\u00e1ginas mais pesadas que precisam de tempo extra para carregar.<ul class=\"wp-block-list\"><li><strong>Dica<\/strong>: Teste o comportamento do utilizador com e sem pr\u00e9-carregadores em p\u00e1ginas espec\u00edficas utilizando ferramentas como <strong>Hotjar<\/strong> para ver se os pr\u00e9-carregadores est\u00e3o a melhorar ou a prejudicar a experi\u00eancia do utilizador.<\/li><\/ul><\/li><\/ul><figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.38.40-An-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-steps-for-checking-across-devices-using-tools-like-Brow.webp\" alt=\"\" class=\"wp-image-5138\" srcset=\"https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.38.40-An-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-steps-for-checking-across-devices-using-tools-like-Brow.webp 1024w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.38.40-An-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-steps-for-checking-across-devices-using-tools-like-Brow-600x600.webp 600w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.38.40-An-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-steps-for-checking-across-devices-using-tools-like-Brow-100x100.webp 100w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.38.40-An-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-steps-for-checking-across-devices-using-tools-like-Brow-300x300.webp 300w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.38.40-An-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-steps-for-checking-across-devices-using-tools-like-Brow-150x150.webp 150w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.38.40-An-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-steps-for-checking-across-devices-using-tools-like-Brow-768x768.webp 768w, https:\/\/www.openbyt.com\/wp-content\/uploads\/2024\/10\/DALL\u00b7E-2024-10-31-11.38.40-An-instructional-illustration-for-testing-and-optimizing-a-preloader-on-a-WordPress-site.-Show-steps-for-checking-across-devices-using-tools-like-Brow-624x624.webp 624w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><h3 class=\"wp-block-heading\">Considera\u00e7\u00f5es finais: Fazer com que o seu site Elementor se destaque<\/h3><p>Um pr\u00e9-carregador bem concebido \u00e9 mais do que apenas um ecr\u00e3 de carregamento - \u00e9 uma poderosa ferramenta de marca e um melhorador da experi\u00eancia do utilizador. Para levar o seu s\u00edtio Web Elementor para o n\u00edvel seguinte, n\u00e3o se limite a adicionar um pr\u00e9-carregador. Optimize continuamente o desempenho do seu s\u00edtio e considere a forma como cada intera\u00e7\u00e3o, desde os pr\u00e9-carregadores \u00e0s anima\u00e7\u00f5es de p\u00e1gina, contribui para a hist\u00f3ria da sua marca.<\/p><p>Com estes passos e dicas, tem agora tudo o que precisa para criar um pr\u00e9-carregador personalizado que n\u00e3o s\u00f3 mant\u00e9m os visitantes envolvidos, como tamb\u00e9m refor\u00e7a a identidade da sua marca.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u00cdndice Porque \u00e9 que as anima\u00e7\u00f5es do pr\u00e9-carregador s\u00e3o importantes Um pr\u00e9-carregador pode transformar a primeira impress\u00e3o do seu s\u00edtio Web Elementor em algo memor\u00e1vel. Em vez de um ecr\u00e3 em branco...<\/p>","protected":false},"author":31,"featured_media":5142,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[62,61],"tags":[420,421],"class_list":["post-5124","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-plugin-development","category-plugin-usage-and-recommendation","tag-preloading","tag-wordpress-preloading",""],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/5124","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/comments?post=5124"}],"version-history":[{"count":4,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/5124\/revisions"}],"predecessor-version":[{"id":5141,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/posts\/5124\/revisions\/5141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media\/5142"}],"wp:attachment":[{"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/media?parent=5124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/categories?post=5124"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.openbyt.com\/pt\/wp-json\/wp\/v2\/tags?post=5124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}