🚀¡La mejor Estrategia para Mejorar la Carga Lenta en Elementor!

Hola amigos de Marieú Technology Corporation, ¡la mejor estrategia para mejorar carga Elementor!, con vídeo paso a paso. En efecto, en esta guía, paso a paso, aprenderás a cómo evitar la carga lenta del editor web de Elementor. En especial, utilizaremos shortcode con Elementor y plantillas para nuestra optimización en WordPress.

Elementor es un maquetador de páginas  web o «page builde». Permite crear y diseñar páginas web mediante plantillas, widgets o bloques predefinidos. La instalación del plugin de Elementor se realiza por medio de WordPress. Donde, encontrarás una versión gratuita y otra de pago, para este último, con mayor cantidad de widgets y plantillas.

¿Cuál es la mejor estrategia para mejorar la carga lenta en Elementor?

Entonces amigos, aquí tenemos un diagrama para acelerar sitio web Elementor. Vamos a trabajar dentro de WordPress y el complemento del plugin de Elementor. Algunas características, del antes y el después, tenemos a continuación.

Entonces, dentro de lo que es la página de precios, nosotros vimos el «navigator» y vemos que tienen bastantes widgets. En este caso, encabezados, editores de texto, lotties, encabezados, imagenes, entre otros. Entonces, cuando nosotros comenzamos a incrementar, mucho más, dentro de la columna lo que son los widgets, sea nuestra página principal, servicios, precios, estudios, contactos, se sobrecarga. Y, ahora, a eso si le adicionamos que tenemos, de repente, algún complemento o «plugins» de Yoast, Rank Math, se va a ser mucho más lenta. Entonces, ¿cómo nosotros solucionamos este erro?, ¿cuál sería el resultado final de aplicar estas recomendaciones, que nosotros les brindamos?, tenemos aquí.

Ya tenemos las secciones, estamos en la misma página de precios y lo vamos a trabajar con shortcode Elementor. Entonces, por cada una de las secciones, entramos a una columna y, finalmente, ingresa un shortcode. Tenemos un «Advanced Toggle» o alternativa avanzada, el cual, es mucho más fluido si nosotros incluimos directamente las tablas aquí. Entonces, es recomendable por lo menos usar «shortcode» y «advanced toggle». Entonces, ¿cuál serían los pasos que nosotros vamos a realizar para llegar a estos «shortcode» y estos «advanced toggle»?

Antes de iniciar a optimizar secciones Elementor, tenemos que actualizar siempre los plugin de WordPress y Elementor, porque de repente tenemos una versión que genera error. Recuerden que siempre las actualizaciones contienen mejoras. Entonces, en este caso, se recomienda actualizar los plugins de WordPress y de Elementor. Número dos, vamos a abrir la página con editor en Elementor. La página que nosotros deseamos que esta carga sea mucho más rápida.

Entonces, número dos, abrimos la página con editor de Elementor. Va a ser la página que nosotros deseamos que no esté lenta, que esté mucho más fluida. Número tres, copiamos las secciones. Recuerden, si tenemos las secciones, ¡aquí!, copiamos las secciones y vamos a crear plantillas Elementor y pegar las secciones. Salimos de esa página, vamos a plantillas, creamos una plantilla y copiamos las secciones. Por cada una de estas secciones, se recomienda usar una plantilla. Vamos a guardar cambios y copiar el código de shortcode.

Cada vez que uno crea una plantilla y pega las secciones, se genera, en automático, un código de shortcode, código de Elementor. Después, en la página de editar, insertamos el widget. En la página de editar, en este caso, de precios, en este caso, de página de precios, insertamos el widget y pegamos el shortcode de la plantilla, en este caso, el shortcode de la plantilla, ¡ahí está! Y, finalmente, eliminar caché y actualizar los cambios, para que nosotros podamos ver los resultados.

Diagrama: Solucionar problema de carga lenta en el editor de Elementor.
Fuente: Propia, mediante software Miro.

Aquí estamos en WordPress, vamos a irnos a las páginas, abrimos páginas y ¡aquí! nos vamos a centrar en nuestra página de precios, precios de página web. Ya está, ponemos editar con Elementor. Una vez que lo tenemos abierta la página de editor de Elementor, vamos a identificar secciones. Tenemos la parte del header, la segunda sección sería la parte del cabezado, la tercera, la parte de planes, ya está en el body, ahí están los planes, mensual y anual. Recuerden que este es el servicio de precios de página web Marieú.

Entonces, tenemos tres planes en periodo mensual y, también, tres planes en lo que es en periodo anual. Para el periodo mensual, hay un Plan Básico, hay un Plan Medium y un Plan Premium. En el el caso de la primera, es una página web estándar, donde, solamente hay una sola página y se divide en varias secciones, para que pueda, la empresa, ofrecer todos sus servicios. En la página de Plan Medium son varias páginas, donde se pueden clasificar, de repente, por principal servicios, contactos, precios, entre otros. Y, finalmente, lo que es el Plan Premium, donde ofrecemos una página e-commerce, es una página de tienda virtual.

Después, tenemos identificado otra sección, esta secciónes son de FAQs, son las preguntas frecuentes, las preguntas y las respuestas, ¡ahí está! Y, finalmente, la sección del footer. Entonces, una vez que hemos identificado cada una de estas secciones, nosotros lo vamos a pasar, pasamos a la secciones de la página a lo que son los «templates» o las plantillas. Entonces, una vez aquí, nos vamos a ir a plantillas y vamos a crear «añadir nueva». Vamos a añadir dos, ¿está bien? ¿por qué? recuerden que, ya tuvimos un video anterior, donde agregamos el header, tenemos un video de agregar lo que es el header y el footer como shortcode.

Entonces, por ese lado, nosotros, ya no vamos a optimizarlo, ya está optimizado. Lo mismo con sección de las tablas que también está optimizado. Se agrega un «advanced toggle», y, en este caso, ya no es necesario optimizarlo. Nos vamos a centrar, entonces, en dos secciones, la sección del encabezado y la sección de los FAQs, que son las preguntas frecuentes, entonces, serían dos plantillas.

Ahora, para mejorar rendimiento Elementor, vamos a añadir una plantilla nueva. Vamos a seleccionar página y colocamos el nombre de la plantilla: precios página web cabecera, creamos plantilla. Una vez que haya terminado de cargar el editor, pegamos aquí la sección que hemos copiado. La sección de la cabecera copiamos y y pegamos aquí. Y lo mismo será con la sección de los FAQs, de las preguntas frecuentes. Clic derecho, copiamos y vamos a crear otra plantilla. Página y pegamos el nombre, y ponemos el nombre: precios página web FAQs, creamos plantilla.

Una vez que terminó de cargar el editor, vamos a pegar, vamos a pegar la sección y ¡ahí está!. Para ambos casos, tenemos nosotros que seguir optimizando. Vamos a desplegar un poco la sección y ahí tenemos todo el contenido. Entonces, ahora lo que vamos a hacer es optimizar primero la sección y, de ahí, vamos a bajar a la columna. Seleccionamos sección y nos vamos a ir a «avanzado». En «avanzado», nosotros vamos a desactivar el margen y volver a activarlo. Aquí también, lo que es el relleno.

No queremos que tengan algunas limitaciones, tanto arriba como abajo, sino que inicie por defecto, en cero. Desactivamos y volvemos a activar, ponemos cero, guardamos cambios. Ahora nos vamos a la columna, ponemos avanzado y, algo similar, desactivamos y activamos, el relleno también ¡listo! En el caso de «disposición», nosotros queremos que la alineación esté por defecto. Algo similar con alineación horizontal, por defecto. También lo vamos a hacer con los encabezados, tenemos dos encabezados, un editor de texto y un lottie.

Entonces, para estos cuatro contenidos, se va a hacer lo mismo que la sección y la columna. Seleccionamos encabezado, vamos avanzado, desactivamos y volvemos a activar. Para el caso del segundo encabezado también y, para el «lottie» también, lo desactivamos y lo volvemos a activar. Ya en esta etapa, recuerden actualizar los cambios. Vamos a poner publicar, si nos sale un «error de 405», en este caso, recomendamos lo siguiente. Vamos a WordPress y purgamos todo o eliminamos caché. Volvemos a publicar, recuerden guardar cambios, publicamos ¡listo!

Ahora, vamos a optimizar Elementor en los FAQs. Tenemos la sección, una columna y el contenido. Tenemos dos encabezados, un editor de texto y dos imágenes. Internamente, en la columna, tenemos una sección interior, que corresponde a lo que son las preguntas y las respuestas. Y si nosotros desplegamos más, vamos a encontrar que es un «accordion», un acordeón. Por cada pregunta se va desplegando la respuesta, por cada pregunta muestra la respuesta, ¡listo!

Entonces, ponemos primero la sección y vamos a optimizar. Desactivamos, volvemos a activar, ponemos en cero. Algo similar aquí, ¡listo! Ahora vamos con la columna, avanzado, desactivamos, volvemos a activar, desactivamos y volvemos a activar, colocamos en cero. Entonces, con los dos encabezados el editor de texto y las dos imágenes igual, de manera similar, ponemos encabezado, desactivamos y volvemos a activar, ponemos en cero, ¡listo!

Entonces, antes de pasar a la sección interior, vamos a incrementar un poco el tamaño de estas preguntas populares. Seleccionamos el encabezado, que son las preguntas populares y, en el contenido, nosotros vamos a poner el tamaño XL, ¡ahí está! incrementa un poco más. Entonces, para la sección interior, la columna y el acordeón, de manera similar, vamos avanzado y colocamos desactivamos y volvemos a activar, el margen y el relleno. Y lo colocamos en cero, ponemos publicar ¡listo!

Para continuar y acelerar carga páginas Elementor, nos dice: tu página está en directo. Ahora, dentro de la sección de plantillas, actualizar para poder visualizar nuestras dos páginas que hemos editado, ¡ahí está! Tenemos, precios página web FAQs y precios página web cabecera. Cada una de estas dos se ha generado su shortcode, vamos a insertarlo dentro de la página.

Recuerden que aquí, estando dentro de la página de precios de página web Marieú, vamos a incluir los shortcode. Entonces, eliminamos el encabezado, el editor de texto y el «lottie». Vamos a agregar lo que es un shortcode, ponemos widgets y ponemos shortcode. Seleccionamos, arrastramos y soltamos, y aquí vamos a pegar el código que hemos copiado de la plantilla, pegamos y aplicamos.

En algunos casos, cuando nosotros incluimos lo que es el shortcode, ustedes no van a poder visualizar. Si quieren ustedes visualizar cuál es ese contenido que nosotros estamos integrando, con el shortcode, desde la plantilla, nosotros tenemos que actualizar la página, actualizamos. Recuerden siempre guardar los cambios antes de actualizar la página, actualizamos y ¡ahí está! Ahora sí les muestra, dentro del editor de Elementor, nos muestra cómo está quedando. Pueden visualizarlo aquí en el editor o también pueden hacerlo por previsualización. Seleccionamos previsualizar cambios y ¡ahí está!

Entonces, hemos incluido lo que es el shortcode dentro de la sección del encabezado y, ahora, vamos a incluir lo que son los FAQs. Recuerden, eliminamos todo el contenido de la columna, para poder incluir el shortcode. Ponenemos clic derecho, ponemos clic derecho borrar, si no seleccionamos y ponemos suprimir. Entonces, abrimos el widget shortcode, seleccionamos, arrastramos y soltamos. Seleccionamos y arrastramos. Recuerden que el shortcode debe ir debajo de la primera columna. Entonces, seleccionamos y lo subimos encima de «sección interior» ¡ahí está!

Luego de utilizar shortcodes Elementor, nosotros vamos a pegar lo que es el código de la plantilla. Vamos a la plantilla, estos son los precios de la página web FAQs, copiamos el shortcode y aquí pegamos y ponemos «aplicar». Nos faltó, eliminar la sección interior. Eliminamos la sección interior para solo quedamos con el shortcode y, para poder ver los cambios, vamos a actualizar la página.

Después mejorar la velocidad de carga en Elementor.
Fuente: Propia, mediante software Elementor.

Resultados Finales

Como resultados finales, luego de optimizar la carga de páginas en Elementor, vamos a desplegar las secciones. Vemos que están con shortcode, desplegamos la segunda sección y, también, esta sección son de tablas y tiene un «advanced toggle», extrae la información de las tablas desde una plantilla de costos. La sección de los FAQs también tiene el shortcode y, finalmente, lo que es el footer, también tiene shortcode. Entonces, estando así es mucho más sencillo poder editar.

Si queremos hacer algún cambio del del encabezado, queremos hacer algún cambios de los FAQs, nos vamos directamente a la plantilla y se actualiza en automático. Vamos a ver los cambios, dentro de previsualizar cambios, y ¡ahí está! Ahí están los FAQs, ahí está el acordeón y está el footer. ¡Listo, gracias amigos de Marieú Technology Corporation!