{"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\/es\/guia-completa-para-crear-un-precargador-profesional-en-elementor-pro-para-una-experiencia-web-mas-fluida","title":{"rendered":"Gu\u00eda completa para crear un precargador profesional en Elementor Pro para una experiencia web m\u00e1s fluida"},"content":{"rendered":"

Introducci\u00f3n<\/h4>

Una forma eficaz de mejorar esta experiencia es a\u00f1adir un precargador -un animaci\u00f3n<\/strong> o imagen<\/strong> que aparece mientras el contenido de la p\u00e1gina se carga en segundo plano. Esto proporciona a los usuarios una transici\u00f3n fluida mientras esperan, asegurando que su sitio se sienta pulido y profesional. En esta gu\u00eda, recorreremos cada paso de la configuraci\u00f3n de un precargador<\/strong> en Elementor Pro<\/mark><\/strong>, permiti\u00e9ndole mostrar animaciones personalizadas o logotipos de marca que refuercen la identidad de su sitio.<\/p>

Haga clic para<\/a><\/strong> vaya al canal de compra original de Elementor Pro.<\/p>

\"\"<\/figure>

\u00bfQu\u00e9 es un precargador y por qu\u00e9 utilizarlo?<\/h4>

Un precargador es una animaci\u00f3n o gr\u00e1fico de marcador de posici\u00f3n que se muestra mientras se carga el contenido de su sitio. Esto puede ser especialmente \u00fatil para p\u00e1ginas con contenido pesado que pueden tardar m\u00e1s en cargarse. El uso de un precargador crea una mejor experiencia de usuario al reducir el tiempo de carga percibido, mantener a los usuarios atentos y evitar que vean p\u00e1ginas parcialmente cargadas. Adem\u00e1s, un precargador le permite mostrar su marca y a\u00f1adir un poco de personalidad a su sitio web.<\/p>

C\u00f3mo crear un precargador en Elementor Pro<\/h3>

Paso 1: Crear una plantilla de cabecera<\/h4>

El primer paso es crear una cabecera<\/strong> plantilla<\/strong> que incluye el precargador. Al colocar el precargador en una plantilla de cabecera, puede asegurarse de que aparezca de forma coherente en todas las p\u00e1ginas de su sitio web.<\/p>

Acceder al constructor de temas<\/strong>:<\/p>

  • Vaya a su Panel de Elementor<\/strong>Navegar Plantillas<\/mark><\/strong>y seleccione Creador de temas<\/mark><\/strong>.<\/li><\/ul>
    \"\"<\/figure><\/div>

    Crear una nueva plantilla de cabecera<\/strong>:<\/p>

    • En el Creador de temas, localice el Encabezado<\/mark><\/strong> y pulse el bot\u00f3n +<\/mark><\/strong> para crear una nueva plantilla.<\/li><\/ul>
      \"\"<\/figure><\/div>
      • Seleccione una plantilla y pulse Insertar para ir a la p\u00e1gina.<\/li><\/ul>
        \"\"<\/figure>

        Publicar la plantilla<\/strong>:<\/p>

        • Despu\u00e9s de dise\u00f1ar su cabecera, haga clic en Publique<\/strong>.<\/li><\/ul>
          \"\"<\/figure><\/div>
          • Cuando se le soliciten las condiciones de visualizaci\u00f3n, seleccione Todo el sitio<\/mark><\/strong> para asegurarse de que el precargador se aplica a todas las p\u00e1ginas de su sitio web.<\/li><\/ul>
            \"\"<\/figure><\/div>
            • Haga clic en Guardar y cerrar<\/strong>.<\/li><\/ul>

              Paso 2: A\u00f1adir un contenedor y establecer un ID CSS<\/h4>
              \"\"<\/figure><\/div>

              Ahora, a\u00f1adamos un contenedor<\/strong> que albergar\u00e1 la animaci\u00f3n del precargador. Establecer un \u00fanico CSS ID<\/strong> para este contenedor nos permitir\u00e1 orientarlo con CSS y JavaScript m\u00e1s adelante.<\/p>

              A\u00f1adir un contenedor<\/strong>:<\/p>

              • Dentro de su nueva plantilla de cabecera, a\u00f1ada un contenedor de una sola columna.<\/li><\/ul>
                \"\"<\/figure><\/div>

                Establezca el ID de CSS<\/strong>:<\/p>

                • Ir a la Avanzado<\/strong> de los ajustes del contenedor.<\/li><\/ul>
                  \"\"<\/figure><\/div>
                  • En el CSS ID<\/strong> campo, introduzca <\/mark>abc_preload<\/mark><\/strong>. Este ID se utilizar\u00e1 para aplicar CSS y JavaScript personalizados para controlar el comportamiento del precargador.<\/li><\/ul>
                    \"\"<\/figure>

                    Paso 3: A\u00f1adir un icono o widget de imagen<\/h4>

                    Para crear el elemento visual<\/strong> de su precargador, puede a\u00f1adir un Icono<\/strong> o Imagen<\/strong> widget para mostrar un icono de carga o el logotipo de su marca.<\/p>

                    A\u00f1adir el widget<\/strong>:<\/p>

                    • Puede a\u00f1adir un widget Icono o Imagen al contenedor, dependiendo de si desea un icono de carga est\u00e1ndar o un logotipo personalizado.<\/li><\/ul>
                      \"\"<\/figure><\/div>

                      Establezca el ID CSS para el Widget<\/strong>:<\/p>

                      • Ir a la Avanzado<\/strong> de los ajustes del widget y establezca el ID CSS en abc_loader<\/mark><\/strong>.<\/li><\/ul>
                        \"\"<\/figure><\/div>

                        Estilizar el icono o la imagen<\/strong>:<\/p>

                        • Navegue hasta el Estilo<\/mark><\/strong> y ajuste el tama\u00f1o del icono o de la imagen para adaptarlo a su dise\u00f1o. Suele ser mejor utilizar iconos con un tama\u00f1o de alrededor de 1px<\/strong>.<\/li><\/ul>
                          \"\"<\/figure><\/div>

                          Paso 4: A\u00f1adir un widget HTML para controlar el precargador<\/h4>

                          A continuaci\u00f3n, a\u00f1adiremos un widget HTML que contenga JavaScript para controlar cu\u00e1ndo se muestra el precargador y cu\u00e1ndo desaparece. Este script ocultar\u00e1 el precargador tras un breve retardo, permitiendo que su contenido se cargue sin problemas.<\/p>

                          A\u00f1adir el widget HTML<\/strong>:<\/p>

                          • Debajo del widget Icono o Imagen, a\u00f1ada un widget HTML.<\/li><\/ul>
                            \"\"<\/figure><\/div>\n\n
                            \"\"<\/figure><\/div><\/div>

                            Insertar c\u00f3digo JavaScript<\/strong>:<\/p>

                            • En el widget HTML, pegue el siguiente 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 ocultar\u00e1 el precargador 2 segundos despu\u00e9s de que el contenido de la p\u00e1gina haya comenzado a cargarse. Bas\u00e1ndose en el tiempo medio de carga de su sitio web, puede ajustar el 2000<\/strong> para aumentar o disminuir el retardo (en milisegundos).<\/p>
                              Establezca el ID CSS para el widget HTML<\/strong>:<\/p>
                              • En el widget HTML Avanzado<\/strong> establezca el ID de CSS en abc_preloader_adds<\/strong> para evitar el espaciado involuntario.<\/li><\/ul>
                                \"\"<\/figure>
                                Paso 5: A\u00f1adir CSS personalizado para dar estilo al precargador<\/h4>
                                Con la estructura en su lugar, vamos a a\u00f1adir CSS personalizado<\/strong> para dar estilo al contenedor de precarga y a la animaci\u00f3n de carga.<\/p>
                                Abrir la configuraci\u00f3n CSS personalizada<\/strong>:<\/p>
                                • Pulse el bot\u00f3n Ajuste de p\u00e1gina<\/strong> (icono de engranaje) en el panel de Elementor.<\/li><\/ul>
                                  \"\"<\/figure><\/div>
                                  • Ir a la Avanzado<\/strong> y abra la pesta\u00f1a CSS personalizado<\/strong> secci\u00f3n.<\/li><\/ul>
                                    \"\"<\/figure><\/div>
                                    • Pegue el siguiente c\u00f3digo CSS<\/strong>:<\/li><\/ul>
                                      #abc_preload {\n  posici\u00f3n: fija;\n  arriba 0;\n  izquierda: 0\n  ancho: 100%;\n  altura: 100%;\n  fondo: #fff;\n  mostrar: flex;\n  alinear-elementos: centro;\n  justify-content: center;\n  z-index: 1000;\n}\n\n#abc_loader {\n  borde 8px solid #363636;\n  border-top: 8px s\u00f3lido #3498db;\n  radio del borde: 50%;\n  anchura: 50px;\n  altura: 50px;\n  animaci\u00f3n: giro 1s lineal infinito;\n}\n\n@keyframes giro {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n#abc_preloader_adds {\n  display: none;\n}\n<\/code><\/pre>