{"id":2696,"date":"2024-10-15T21:52:45","date_gmt":"2024-10-15T13:52:45","guid":{"rendered":"https:\/\/www.openbyt.com\/?p=2696"},"modified":"2024-10-19T10:02:55","modified_gmt":"2024-10-19T02:02:55","slug":"complete-guide-to-creating-a-professional-preloader-in-elementor-pro-for-a-smoother-website-experience","status":"publish","type":"post","link":"https:\/\/www.openbyt.com\/pt\/guia-completo-para-criar-um-pre-carregador-profissional-em-elementor-pro-para-uma-experiencia-de-sitio-web-mais-suave","title":{"rendered":"Guia completo para criar um pr\u00e9-carregador profissional no Elementor Pro para uma experi\u00eancia de site mais suave"},"content":{"rendered":"

Introdu\u00e7\u00e3o<\/h4>

Uma forma eficaz de melhorar esta experi\u00eancia \u00e9 adicionar um pr\u00e9-carregador - um anima\u00e7\u00e3o<\/strong> ou imagem<\/strong> que aparece enquanto o conte\u00fado da p\u00e1gina carrega em segundo plano. Isto proporciona aos utilizadores uma transi\u00e7\u00e3o perfeita enquanto esperam, assegurando que o seu site parece polido e profissional. Neste guia, iremos percorrer cada passo da configura\u00e7\u00e3o de um pr\u00e9-carregador<\/strong> em Elementor Pro<\/mark><\/strong>permitindo-lhe apresentar anima\u00e7\u00f5es personalizadas ou log\u00f3tipos de marcas que refor\u00e7am a identidade do seu s\u00edtio.<\/p>

Clique para<\/a><\/strong> aceda ao canal de compra genu\u00edno do Elementor Pro.<\/p>

\"\"<\/figure>

O que \u00e9 um pr\u00e9-carregador e porqu\u00ea utiliz\u00e1-lo?<\/h4>

Um pr\u00e9-carregador \u00e9 uma anima\u00e7\u00e3o ou gr\u00e1fico de espa\u00e7o reservado que \u00e9 apresentado enquanto o conte\u00fado do seu site est\u00e1 a carregar. Isto pode ser especialmente \u00fatil para p\u00e1ginas com conte\u00fado pesado que podem demorar mais tempo a carregar. A utiliza\u00e7\u00e3o de um pr\u00e9-carregador cria uma melhor experi\u00eancia para o utilizador, reduzindo o tempo de carregamento percet\u00edvel, mantendo os utilizadores envolvidos e impedindo-os de ver p\u00e1ginas parcialmente carregadas. Al\u00e9m disso, um pr\u00e9-carregador permite-lhe mostrar a sua marca e dar um pouco de personalidade ao seu s\u00edtio Web.<\/p>

Como criar um pr\u00e9-carregador no Elementor Pro<\/h3>

Passo 1: Crie um modelo de cabe\u00e7alho<\/h4>

O primeiro passo \u00e9 crie um cabe\u00e7alho<\/strong> modelo<\/strong> que inclui o pr\u00e9-carregador. Ao colocar o pr\u00e9-carregador num modelo de cabe\u00e7alho, pode garantir que este aparece de forma consistente em todas as p\u00e1ginas do seu Web site.<\/p>

Aceda ao Theme Builder<\/strong>:<\/p>

  • Aceda ao seu Painel de controlo do Elementor<\/strong>, navegue Modelos<\/mark><\/strong>e selecione Criador de temas<\/mark><\/strong>.<\/li><\/ul>
    \"\"<\/figure><\/div>

    Crie um novo modelo de cabe\u00e7alho<\/strong>:<\/p>

    • No Theme Builder, localize o Cabe\u00e7alho<\/mark><\/strong> sec\u00e7\u00e3o e clique no bot\u00e3o +<\/mark><\/strong> para criar um novo modelo.<\/li><\/ul>
      \"\"<\/figure><\/div>
      • Selecione um modelo e clique em Inserir para ir para a p\u00e1gina.<\/li><\/ul>
        \"\"<\/figure>

        Publique o modelo<\/strong>:<\/p>

        • Depois de desenhar o seu cabe\u00e7alho, clique em Publicar<\/strong>.<\/li><\/ul>
          \"\"<\/figure><\/div>
          • Quando lhe forem solicitadas as condi\u00e7\u00f5es de visualiza\u00e7\u00e3o, selecione Todo o s\u00edtio<\/mark><\/strong> para garantir que o pr\u00e9-carregador \u00e9 aplicado a todas as p\u00e1ginas do seu s\u00edtio Web.<\/li><\/ul>
            \"\"<\/figure><\/div>
            • Clique em Guardar e fechar<\/strong>.<\/li><\/ul>

              Passo 2: Adicione um contentor e defina uma ID CSS<\/h4>
              \"\"<\/figure><\/div>

              Agora, vamos adicionar um contentor<\/strong> que ir\u00e1 alojar a anima\u00e7\u00e3o do pr\u00e9-carregador. Definir um \u00fanico ID CSS<\/strong> para este contentor permitir-nos-\u00e1 direccion\u00e1-lo com CSS e JavaScript mais tarde.<\/p>

              Adicionar um contentor<\/strong>:<\/p>

              • No seu novo modelo de cabe\u00e7alho, adicione um contentor de coluna \u00fanica.<\/li><\/ul>
                \"\"<\/figure><\/div>

                Defina o ID CSS<\/strong>:<\/p>

                • Aceda ao Avan\u00e7ado<\/strong> das defini\u00e7\u00f5es do contentor.<\/li><\/ul>
                  \"\"<\/figure><\/div>
                  • No ID CSS<\/strong> campo, introduza <\/mark>abc_preload<\/mark><\/strong>. Este ID ser\u00e1 utilizado para aplicar CSS e JavaScript personalizados para controlar o comportamento do pr\u00e9-carregador.<\/li><\/ul>
                    \"\"<\/figure>

                    Passo 3: Adicione um \u00edcone ou widget de imagem<\/h4>

                    Para criar o elemento visual<\/strong> do seu pr\u00e9-carregador, pode adicionar um \u00cdcone<\/strong> ou Imagem<\/strong> para apresentar um \u00edcone de carregamento ou o log\u00f3tipo da sua marca.<\/p>

                    Adicione o Widget<\/strong>:<\/p>

                    • Pode adicionar um widget \u00cdcone ou Imagem ao contentor, dependendo se pretende um \u00edcone de carregamento padr\u00e3o ou um log\u00f3tipo personalizado.<\/li><\/ul>
                      \"\"<\/figure><\/div>

                      Defina o ID CSS para o Widget<\/strong>:<\/p>

                      • Aceda ao Avan\u00e7ado<\/strong> das defini\u00e7\u00f5es do widget e defina o ID CSS para abc_loader<\/mark><\/strong>.<\/li><\/ul>
                        \"\"<\/figure><\/div>

                        Estilize o \u00edcone ou a imagem<\/strong>:<\/p>

                        • Navegue at\u00e9 ao Estilo<\/mark><\/strong> e ajuste o tamanho do \u00edcone ou da imagem de acordo com o seu design. Muitas vezes, \u00e9 melhor utilizar \u00edcones com um tamanho de cerca de 1px<\/strong>.<\/li><\/ul>
                          \"\"<\/figure><\/div>

                          Passo 4: Adicione um widget HTML para controlar o pr\u00e9-carregador<\/h4>

                          Em seguida, adicionaremos um widget HTML que cont\u00e9m JavaScript para controlar quando o pr\u00e9-carregador \u00e9 apresentado e quando desaparece. Este script ir\u00e1 ocultar o pr\u00e9-carregador ap\u00f3s um pequeno atraso, permitindo que o seu conte\u00fado seja carregado sem problemas.<\/p>

                          Adicione o widget HTML<\/strong>:<\/p>

                          • Por baixo do widget de \u00edcone ou imagem, adicione um widget HTML.<\/li><\/ul>
                            \"\"<\/figure><\/div>\n\n
                            \"\"<\/figure><\/div><\/div>

                            Insira o c\u00f3digo JavaScript<\/strong>:<\/p>

                            • No widget HTML, cole o seguinte c\u00f3digo JavaScript:<\/li><\/ul>
                              <script>\n  document.addEventListener('DOMContentLoaded', function () {\n    setTimeout(function () {\n      document.getElementById('abc_preload').style.display = 'none';\n      document.getElementById('content').classList.add('visible');\n    }, 2000); \/\/ Adjust the delay as needed (in milliseconds)\n  });\n<\/script>\n<\/code><\/pre>
                              \"\"<\/figure>
                              Este c\u00f3digo ir\u00e1 ocultar o pr\u00e9-carregador 2 segundos depois de o conte\u00fado da p\u00e1gina ter come\u00e7ado a carregar. Com base no tempo m\u00e9dio de carregamento do seu s\u00edtio Web, pode ajustar o 2000<\/strong> para aumentar ou diminuir o atraso (em milissegundos).<\/p>
                              Defina o ID CSS para o Widget HTML<\/strong>:<\/p>
                              • Na sec\u00e7\u00e3o Avan\u00e7ado<\/strong> defina o ID CSS para abc_preloader_adds<\/strong> para evitar um espa\u00e7amento n\u00e3o intencional.<\/li><\/ul>
                                \"\"<\/figure>
                                Passo 5: Adicione CSS personalizado para estilizar o pr\u00e9-carregador<\/h4>
                                Com a estrutura montada, vamos adicione CSS personalizado<\/strong> para estilizar o contentor do pr\u00e9-carregador e a anima\u00e7\u00e3o de carregamento.<\/p>
                                Abra as defini\u00e7\u00f5es de CSS personalizadas<\/strong>:<\/p>
                                • Clique no bot\u00e3o Defini\u00e7\u00e3o da p\u00e1gina<\/strong> (\u00edcone de engrenagem) no painel do Elementor.<\/li><\/ul>
                                  \"\"<\/figure><\/div>
                                  • Aceda ao Avan\u00e7ado<\/strong> e abra o separador CSS personalizado<\/strong> sec\u00e7\u00e3o.<\/li><\/ul>
                                    \"\"<\/figure><\/div>
                                    • Cole o seguinte c\u00f3digo CSS<\/strong>:<\/li><\/ul>
                                      #abc_preload {\n  posi\u00e7\u00e3o: fixo;\n  top: 0;\n  esquerda: 0;\n  largura: 100%;\n  altura: 100%;\n  fundo: #fff;\n  exibi\u00e7\u00e3o: flex;\n  alinhar-itens: centro;\n  justify-content: center;\n  z-index: 1000;\n}\n\n#abc_loader {\n  border: 8px solid #363636;\n  border-top: 8px solid #3498db;\n  border-radius: 50%;\n  largura: 50px;\n  altura: 50px;\n  anima\u00e7\u00e3o: gire 1s linear infinito;\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n#abc_preloader_adds {\n  display: none;\n}\n<\/code><\/pre>