Saltar al contenido principal

Cómo optimizar el diseño de su sitio web con Elementor

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

¿Quiere saber cómo optimizar el diseño de su sitio web con Elementor?

Optimizar el rendimiento del sitio web es uno de los aspectos más importantes de su experiencia de usuario. Un sitio web de carga lenta puede frustrar a cualquier usuario, lo que a menudo resulta en un tasa de rebote alto que puede afectar negativamente el éxito de nuestro negocio.

El rendimiento del sitio web puede verse afectado por muchos factores, por ejemplo: tamaños de imagen grandes, configuraciones de servidor, demasiados complementos, entre otros factores.

El rendimiento del sitio web es uno de nuestros valores más fuertes como creadores web. Por eso hemos creado este curso en 5 partes.

Ahora puede aprender a crear diseños y publicaciones utilizando técnicas óptimas. Este conocimiento garantizará que sus sitios web no incluyan secciones, columnas o widgets redundantes que simplemente no son necesarios. También exploraremos algunas funciones de widget integradas para mejorar los tiempos de carga.

Al final de este tutorial, estará completamente listo para optimizar el rendimiento de cada sitio web de Elementor que cree y cosechar las recompensas de inmediato.

Lección 1: Prácticas recomendadas para la optimización del diseño

inspector de rendimiento del sitio web

En nuestra primera lección, cubriremos la forma más eficiente de crear sus páginas y publicaciones en el editor de Elementor. A menudo vemos el uso de demasiadas secciones, columnas, secciones internas y widgets, cuando se podría haber logrado el mismo diseño utilizando muchos menos elementos.

El uso de cantidades excesivas de elementos ralentiza el rendimiento de su sitio web, así que profundicemos y aprendamos a crear sitios web con Elementor de la manera más eficiente.

Cubriremos los siguientes temas:

  • Una mirada más cercana a la estructura de una página correcta
  • Ver y probar el rendimiento de su sitio web
  • Optimización del contenido de su encabezado, pie de página y página
  • Ejemplos de buenas y malas prácticas de diseño de sitios web
  • Uso correcto de widgets, posicionamiento y estilos globales
  • Consejos para evitar el retraso de carga, mejorar el SEO y aumentar el tiempo de carga
  • Optimización de accesibilidad
  • Reducir la cantidad de elementos DOM
  • Et bien plus encore!

Para comprender mejor los diseños óptimos en Elementor, exploraremos una plantilla de Elementor que muestra abusos comunes de secciones, columnas y widgets. Al final de esta lección, habremos reconstruido por completo toda la página reduciendo el número de columnas y widgets. Nuestra página inicial consta de nueve secciones, 31 columnas, cinco secciones internas y 44 widgets.

Al final del tutorial, nuestra página optimizada se reducirá a seis secciones, siete columnas y 16 widgets.

Usaremos la luz gratis Hola tema y recrearemos cada sección de la plantilla y mejoraremos el rendimiento general del sitio web utilizando las mejores prácticas.

optimiza el diseño de tu sitio web con Elementor

Prueba de malas prácticas

Antes de sumergirnos en la optimización del diseño del sitio web, realizaremos una prueba en nuestra página para comprender completamente qué sucede cuando alguien visita nuestro sitio web. Una vez que se hayan realizado todas nuestras optimizaciones, repetiremos la prueba y compararemos los resultados.

Paso 1: Verifica tu sitio web en una ventana de incógnito

  • Abra una nueva ventana en "modo incógnito" y escriba la URL de la página web que está probando.

Paso 2: Verifique que está utilizando la ruta de URL directa

Si no está seguro del enlace de su página, puede encontrarlo fácilmente yendo a su panel de WP:

  • Haga clic en "Páginas" para ver todas las páginas de su sitio web.
  • Pase el cursor sobre su página y haga clic en la opción "Ver". Esto lo llevará directamente a su página.
  • Copie y pegue esta URL en la ventana de incógnito y una vez que se cargue el sitio web, ¡estará listo para probarlo!
Prueba y visualización de resultados de rendimiento

Paso 1: prueba los resultados de rendimiento

inspector de rendimiento de pruebas de elementor

Es posible que haya utilizado las herramientas de desarrollo de Chrome en el pasado.

De lo contrario, para inspeccionar y mostrar el contenido HTML y CSS de su página:

  • Haga clic derecho en cualquier lugar de su página y seleccione "Inspeccionar". Verá varias pestañas donde puede leer su HTML y CSS, encontrar errores, obtener resultados de SEO y ejecutar varias pruebas.
  • Seleccione la pestaña Red y presione los botones cmd o ctrl + R para cargar los resultados.

Como puede ver, nuestro diseño actual tarda 2,88 segundos en cargar y realiza 81 solicitudes.

Paso 2: ver los resultados de rendimiento

malos resultados de optimización del inspector
  • Cambie a la pestaña Lighthouse, donde podemos ejecutar un informe de auditoría en nuestra página.

Esto nos dará más información sobre el rendimiento actual de la página.

  • Seleccione "Generar informe". Después de unos momentos, aparecerá su informe.

Actualmente estamos recibiendo una calificación de rendimiento de 73/100, en la que ciertamente podemos trabajar.

Idealmente, nos gustaría que todos estos números fueran verdes. Ahora pasemos a optimizar nuestra página y mejorar nuestras estadísticas.

Tenga en cuenta que después de cada paso de optimización que hacemos, es posible que tomemos algunas de las mejores prácticas de los cambios y las tengamos en cuenta para los sitios web que creemos en el futuro.

Optimización de elementos de la página

Paso 1: Optimiza el encabezado

Empecemos con el Principio de la mente.

Como puede ver en este diseño, la cabecera se hizo con tres columnas.

En la primera columna, nuestro logo consta de dos widgets:

  1. Un Imagen de widget que muestra un archivo de imagen .png de nuestro logotipo
  2. Un widget de título.

En la segunda columna, el menú de encabezado consta de nuestro widget de menú de navegación.

La tercera columna contiene:

  1. Un widget de sección interno (que controla la posición del widget de iconos).
  2. Nuestros datos de contacto para el encabezado

Veamos cómo podemos minimizar la cantidad de secciones, widgets y secciones aquí.

Paso 2: crea el nuevo encabezado

héroe de la casa de diseño

Columna 1:

Mejores prácticas para imágenes:
  • Asigne a cada archivo de imagen de su sitio web un título relevante y un texto alternativo en la biblioteca de medios.

Esto mejorará la accesibilidad de su página y su clasificación en los motores de búsqueda. En el logotipo que usamos originalmente, el título es irrelevante para la imagen real y no hay texto alternativo.

  • Defina las dimensiones de la imagen dentro del widget.

Esto permite que la página se distribuya con el espacio adecuado antes de que se carguen las imágenes, evitando el retraso del diseño (un factor medido por los navegadores).

En el ejemplo en el que estamos trabajando juntos, resuelva este problema yendo a la pestaña Estilo y estableciendo el ancho de la imagen en 200px.

Columnas 2

Regrese al panel de widgets:

  • Arrastre y suelte el widget del menú de navegación debajo del logotipo
  • Establece el puntero en "Ninguno".
  • Vaya a la pestaña "Estilo" y agregue la fuente de su preferencia (para que coincida con nuestro diseño anterior)

Mejores prácticas para el estilo general:

  • Evite el uso de más de 2 fuentes diferentes que incluyan varios pesos (Fuentes globales).
  • Evite seleccionar diferentes colores para cada elemento con el selector de color (Colores globales).
  • Mejore la velocidad de carga de su sitio web generando menos consultas (fuentes en general).
  • Repita el código innecesario dos veces (colores globales).
  • Mantenga la coherencia y el control de su modelo (estilo general).

Fuentes globales:

Esto se puede hacer usando la función de fuentes globales:

  • Vaya a la pestaña "Estilo" y agregue su fuente preferida (para que coincida con nuestro diseño anterior) seleccionando una, haga un pequeño cambio y coloque el cursor sobre el ícono más.
  • Haga clic en el icono más y seleccione la familia de fuentes que necesita
  • Guarde los estilos que usará en la plantilla como fuentes globales

Luego puede usar este estilo en cada widget que cree.

Colores globales:

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

Se puede utilizar el mismo método para sus colores generales:

  • Haga clic en "Global"
  • Coloca el cursor sobre el selector de color y haz clic en él.
  • Seleccione un color y apunte al icono más
  • Haga clic en "Global" >> seleccione "Principal"

Una vez que haya hecho eso, el color se guardará en la paleta de colores de su plantilla, por lo que puede seleccionarlo de su lista de colores globales siempre que lo necesite para un elemento o widget.

Antes de continuar con nuestro encabezado, establezcamos el relleno vertical en cero.

Paso 3: edita el encabezado

Columna 3

  • Ve al panel "Widgets".
  • Arrastre el widget Lista de iconos debajo del menú de navegación.
  • Quitar elementos adicionales de la lista
  • Agrega tu texto
  • Elija el icono de su elección
  • Ve a la pestaña "Estilo"
  • Defina los colores y fuentes generales de su elección

Ahora tenemos que arreglar una cosa más: los tres elementos del encabezado están actualmente apilados y no alineados entre sí. Podemos resolver este problema cambiando el ancho de cada elemento a su tamaño real, de modo que no ocupe todo el espacio de la columna.

Para resolver este problema :

  • Seleccione el widget del logotipo del sitio >> pestaña 'Avanzado'
  • Seleccione "Posicionamiento" y establezca su ancho en "En línea".

Repita este paso exacto para el widget de menú de navegación y para el widget de lista de iconos.

Ahora que todos los elementos del encabezado están alineados, solo queda colocarlos correctamente.

Definición del posicionamiento de la columna con elementos en línea

  • Seleccione su columna >> vaya a la pestaña "Diseño"
  • En "Alineación vertical", elija "Abajo"
  • "En alineación horizontal", elija "Espacio entre"

La elección de la alineación "Espacio entre" coloca el primer y el último widget en ambos extremos, dando un espacio igual entre todos los demás widgets.

Sin embargo, el primer y el último widgets tienen diferentes anchos, por lo que es posible que el mismo espacio no siempre centre nuestro widget interno.

Podemos solucionar este problema ajustando los márgenes:

  • Seleccione el widget Menú de navegación >> pestaña "Avanzado"
  • Desagrupe el margen y elimine el espaciado con un valor negativo

Paso 4: haz que el encabezado responda

Ahora veamos cómo se ve la versión actual de nuestro sitio web en dispositivos móviles.

Mejores prácticas para la capacidad de respuesta móvil:

  • Simplifique su diseño y piense en formas de hacer que las mismas secciones respondan, para evitar usar el doble de código que afectará la velocidad de su página.

Tal como ve en este encabezado: es común ver la misma sección rediseñada específicamente para tabletas y dispositivos móviles. Esto es lo que vemos aquí: se crearon dos versiones del diseño: una versión para escritorio y otra para móvil.

En cambio, cuando su diseño y código responden, la velocidad de su página mejora porque usará menos código.

Veamos cómo podemos lograr esto, usando la configuración de "Ancho personalizado" para nuestros widgets y elementos.

Establecer un ancho personalizado para la tableta

  • Haga clic en 'Menú de navegación' >> pestaña 'Avanzado'
  • Seleccione "Posicionamiento" >> establezca el ancho en "Personalizado".
  • Seleccione "%" >> dé al widget el mismo ancho (en porcentaje) del espacio vacío a su alrededor.
  • Haga clic en la pestaña "Contenido" >> "Alternar alineación" >> seleccione "Derecha".

Esto le permite alinear el menú de alternancia en cualquier lugar dentro del ancho del widget.

Ahora terminemos de personalizar el menú de alternancia.

  • "Contenido" >> Haga clic en el botón "Ancho completo" y configúrelo en "Sí".
  • "Estilo" >> Elimina el fondo arrastrando la barra "Selector de color" completamente hacia la izquierda.

Ahora veamos cómo se ven las cosas en la pantalla de un móvil.

Definición de un ancho personalizado para dispositivos móviles

En este escenario, mantendremos los tres widgets de encabezado dentro de la ventana gráfica. Pero tenga en cuenta que para algunos sitios web puede tener más sentido omitir ciertos elementos del encabezado cuando se visualizan en un dispositivo móvil o tableta.

En este caso, lo que sucede con nuestro encabezado cuando se muestra en un dispositivo móvil es que los widgets del menú de navegación y del logotipo no pueden caber en una sola fila.

Para resolver este problema :

Posicionamiento del menú de navegación

  • Haga clic en "Menú de navegación" >> pestaña "Avanzado"
  • Seleccione "Posicionamiento" >> establezca el ancho en "Personalizado"
  • Selecciona "%" >> Dale al widget un ancho del 30%, para que encaje junto a nuestro logo.

Posicionamiento de la lista de iconos

  • Haga clic en "Lista de iconos" >> pestaña '' Avanzado '
  • Seleccione "Rellenar" >> Desagrupar valores
  • Agregar relleno de 12px a "TOP"

¿Puedes creerlo?

Nuestro encabezado originalmente utilizado 2 secciones, 12 widgets y 10 columnas. Ahora nuestro encabezado usa 1 sección, 3 widgets y 1 columna.

¡Y el resultado es el mismo!

Paso 5: Optimiza la sección Hero

Pasemos a la siguiente sección de nuestro sitio web: la sección de héroes

Prácticas recomendadas para las secciones Hero:

  • Asegúrese de que el texto de la sección de héroe sea fácilmente visible, especialmente cuando tiene una imagen de fondo.

Controlar la posición del widget en una columna

Un error común que vemos que se comete en el editor de Elementor es usar columnas y espacios adicionales para controlar el posicionamiento de un widget.

En nuestro modelo de ejemplo, nuestro imagen de héroe consta de una sección con una imagen de fondo. El título y el texto se colocan horizontalmente, utilizando dos columnas. También hay un espaciador dentro de la sección para espaciar los elementos verticalmente.

Veamos cómo podemos crear el mismo diseño con una sola sección:

  • Elimina la columna adicional a la derecha del texto.
  • Retire el espaciador.

En cambio, para colocar nuestro texto de héroe donde lo queremos, usaremos las opciones de alineación de columnas:

  • Seleccione la columna.
  • Establezca la "Alineación vertical" en "Medio".
  • Vaya a la pestaña "Avanzado".
  • Seleccione "Rellenar" >> Desagrupar valores
  • Establezca el Relleno derecho al 50%.
  • Seleccione la sección.
  • Seleccione "Altura mínima" >> configúrelo en 80.

Contraste fijo entre textos y fondos.

Es importante que cada sitio web tenga un buen contraste entre el texto y el fondo. La información ilegible afecta la puntuación de su sitio web y también puede alejar a los visitantes. De cualquier manera, el texto siempre debe ser claramente legible.

Hay varias formas de mejorar la claridad de una sección cuyo fondo es una imagen en color (como vemos en esta plantilla):

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

  • Haga clic en su encabezado.
  • Vaya a la pestaña "Estilo" >> Seleccione "Sombra de texto".

Esto mejorará la legibilidad del texto al destacarlo de su imagen de fondo.

Otra forma de hacer que su texto sea más claro es usar superposiciones.

  • Seleccione la sección >> pestaña 'Estilo' >> 'Superposición de fondo'
  • Seleccione uno de sus colores generales y juegue con la opacidad hasta que obtenga el resultado que desea

Paso 6: Optimiza la sección con cuadros de iconos

diseño de cajas de iconos de inicio

Ahora pasemos a la siguiente sección, donde actualmente tenemos una sección interna con cuatro columnas. Actualmente, cada columna incluye tres widgets: widget de imagen, widget de título y widget de editor de texto.

Veamos cómo podemos simplificar este apartado para mejorar su rendimiento.

Contenido del área de iconos

  • Seleccione el botón »Icon Box Widget« en el menú del widget y arrástrelo a la columna
  • Seleccione el "Cuadro de iconos"
  • Señalar la imagen del icono
  • Seleccione "Descargar SVG" **
  • Inserta tu icono personalizado

** Nota: las insignias son archivos SVG. Si no lo ha hecho, vaya al panel de WordPress y luego a Elementor >> Configuración. Deberá habilitar Habilitar descargas de archivos sin filtrar.

  • Escriba su "título"
  • Escriba su "Descripción"
  • Seleccione "Estilo" >> Elija un color general
  • Seleccione "Tamaño" y arrastre la barra hasta el tamaño que desee.
  • Seleccione "Relleno" y arrastre la barra hasta el número que desee.

Paso 8: Optimice la sección "Servicios"

servicios de casa de diseño

Ahora vamos a reconstruir la sección "Servicios", que actualmente usa dos columnas, dos imágenes, el widget de título y el widget de editor de texto.

Creemos el mismo diseño en una nueva sección, pero con una sola columna.

  • Crea una nueva sección con una columna
  • En "Diseño" >> establece "Ancho del contenido" en "Ancho completo"
  • Seleccione el "Cuadro de imagen de widget" en el panel de widgets y arrástrelo a la columna

(Podremos integrar todos los activos de la sección en este widget)

  • Escriba el título
  • Escriba la descripción

Para la imagen, mantendremos el diseño actual que usamos para nuestras imágenes.

  • Insertar la misma imagen de la biblioteca de medios
  • Vaya a la pestaña "Contenido" >> Establezca "Posición de la imagen" en "Derecha"
  • Ve a la pestaña "Estilo"
  • Aumentar el espaciado entre elementos.
  • Aumentar el "ancho" de la imagen
  • Expanda la sección "Contenido"
  • Elija la alineación "central"
  • Establezca "Alineación vertical" en "Medio"
  • Defina los colores y fuentes generales de su elección
  • Vaya a la pestaña "Avanzado"
  • Agregue un 10% de relleno al widget

Ahora la sección de Servicios tiene el mismo diseño, pero con menos activos.

Paso 9: Optimice la sección de llamada a la acción

Mejores prácticas para los enlaces de CTA:

  • Asegúrese de que todos los enlaces de sus redes sociales funcionen correctamente y que el botón contenga el enlace.
  • Cuando agregue un vínculo a otro sitio web, incluya este atributo: "rel | noopener"

(Puede hacerlo haciendo clic en el icono de engranaje y escribiendo el atributo en "Atributos personalizados"). Esto abrirá el enlace en una nueva pestaña del navegador y aumentará su puntuación de rendimiento.

La siguiente sección presenta un llamado a la acción para nuestros servicios.

Actualmente, la sección tiene dos columnas, que contienen:

  1. Una imagen de fondo con un espaciador
  2. Dos encabezados, una sección interna, un editor de texto y un botón

Creemos el mismo diseño en una nueva sección, pero con una sola columna.

  • Vaya a la pestaña "Diseño" >> establezca "Ancho del contenido" en "Ancho completo"
  • Vaya a la pestaña "Avanzado" >> Elimine cualquier relleno adicional
  • Seleccione el "Widget de llamada a la acción" en el panel de widgets y arrástrelo a la columna
  • Establecer "Posición de la imagen" en "Izquierda"
  • Seleccione su imagen de la biblioteca de medios
  • Expanda la sección "Contenido"
  • Escribe el encabezado
  • Escriba la descripción
  • Escriba el texto del botón
  • Ve a la pestaña "Estilo"
  • Agregar "relleno" entre los elementos
  • Ajustar el ancho de la imagen
  • Expanda la sección "Contenido"
  • Seleccione la fuente global para su título
  • Aumentar el espacio entre la descripción y el botón.
  • Elija los colores globales adecuados para cada recurso
  • Expanda la sección "Botón"
  • Establezca su tamaño en "Grande"
  • Personalícelo según sus necesidades, como el color de fondo y el radio del borde

Hasta ahora ha sido una sección de 2 columnas con 6 widgets. ¡Ahora es una sección de 1 columna con solo 1 widget!

Paso 10: Optimiza el carrusel de imágenes

optimización del carrusel de imágenes

El diseño actual de nuestra sección de carrusel de imágenes tiene un error común con la forma en que muestra varias imágenes.

Este diseño consta de 5 columnas, una práctica que muchos usuarios suelen hacer para controlar el tamaño de sus imágenes.

Exploremos una forma más sencilla que también optimizará el rendimiento de su sitio web.

  • Crea una nueva sección con 1 columna
  • Vaya a la pestaña "Diseño" >> establezca "Ancho del contenido" en "Ancho completo"
  • Seleccione el botón »Image Carousel Widget« del panel de widgets y arrástrelo a la columna.
  • Agregue las imágenes deseadas de la biblioteca de medios
  • Vaya a la pestaña "Contenido"
  • Establezca "Tamaño de imagen" en "Medio: 300 x 300"
  • Ajuste "Diapositivas para mostrar", "Diapositivas para desplazarse" y "Navegación" según sus preferencias.
  • Ve a la pestaña "Estilo"
  • Establezca "Alineación vertical" en "Centro"
  • Personaliza el "Espaciado"
  • Vaya a la pestaña "Avanzado"
  • Agrega el relleno necesario

Lo que antes era una sección de 5 columnas ahora es solo una columna.

Pasemos a la siguiente sección, donde podemos optimizar los videos en nuestro sitio web.

Paso 11: Optimiza la sección de video

Mejores prácticas para contenido de video:

  • Utilice Lazy Load siempre que sea posible, para mejorar los tiempos de carga de sus sitios web.

¿Qué sucede cuando aplicamos la opción "Carga diferida"?

Técnicamente hablando, el código de inserción de video se reemplaza por una imagen estática. De esta manera, el video solo se carga cuando el usuario hace clic en la imagen, lo que realmente ayuda con los tiempos de carga de nuestra página.

Lo que vamos a hacer ahora es cambiar la forma en que usamos el widget de video, para que no retrase la velocidad de nuestra página o el rendimiento del sitio web.

  • Seleccione el "Widget de video"
  • Ve a la pestaña "Estilo"
  • Seleccione "Carga diferida"

Paso 12: Optimice el pie de página y manténgalo actualizado

optimización de elemento o pie de página

Un error común que se observa en muchos sitios web es que su pie de página utiliza varios encabezados para la fecha y la descripción, así como un icono para el símbolo de copyright.

Veamos cómo optimizar el pie de página y asegurarnos de que siempre esté actualizado.

Configuraremos este proceso de actualización continua usando Etiquetas dinámicas. De esta manera, no necesitaremos cambiar el contenido del encabezado cada año, ya que las etiquetas dinámicas se actualizarán automáticamente al año actual.

Para ello procederemos de la siguiente manera:

  • Elimina los widgets adicionales, dejando solo el widget de título
  • Seleccione el widget de título
  • Haga clic en el símbolo "Etiquetas dinámicas" a la derecha del campo "Título" (también conocido como el "Botón principal"
  • En el menú desplegable, seleccione el elemento de menú "Fecha y hora actuales".
  • Haga clic en el icono principal de la llave.
  • Haga clic en la pestaña "Formato de fecha" y seleccione el elemento de menú "Personalizado"
  • Elimina lo que se encuentra actualmente en el campo "Formato personalizado", excepto la "Y"
  • Seleccione la pestaña "Avanzado"
  • Resalta el campo "Adelante" y mantén presionadas las teclas "opción" y "G" simultáneamente (o "control", alt "y" C "simultáneamente) para escribir el símbolo" © ".
  • Agrega un espacio después del "©"
  • Seleccione el campo "Después"
  • Escriba un espacio y escriba el texto que desea que aparezca después del año, como "Todos los derechos reservados".

Puede notar que en el sitio web de ejemplo de este tutorial, cada widget tiene su propia sección. Hemos hecho esto para que el tutorial sea más claro y fácil de seguir.

Idealmente, cuantas menos secciones tenga, menos CÓDIGO HTML adicional tendrá.

Puede fusionar algunos widgets en la misma sección arrastrándolos y soltándolos en la sección anterior y luego eliminando la sección vacía.

Y eso es todo, ¡tu diseño está optimizado!

Evaluación del rendimiento del nuevo sitio web

Comprobaremos los resultados en la ventana DevTools (Inspector):

  • Seleccione la pestaña "Red":

Aquí hay algunos cambios agradables y positivos:

  • El sitio web ahora tarda 568 milisegundos en cargar
  • Pasamos de 81 solicitudes a 46
  • Seleccione la pestaña "Faro", donde verá que nuestra puntuación de rendimiento ha aumentado de 73 a 98

Tenga en cuenta que hemos optimizado nuestro rendimiento sin utilizar complementos de terceros. Todo lo que se necesitó fueron ajustes simples y mejores prácticas.

Paso 13: prueba los resultados con efectos de movimiento

Queremos que nuestro sitio sea más interactivo y divertido, pero ¿cómo afectará eso a nuestras puntuaciones de rendimiento? Veamos qué podemos hacer.

Haga del encabezado un elemento "fijo":

  • Seleccione el encabezado
  • Vaya a la pestaña "Avanzado"
  • Expande la pestaña "Efectos de movimiento"
  • Establezca la opción "Fija" en "Arriba"

Haz que la sección de héroe sea un elemento "fijo":

  • Seleccione la sección de héroe
  • Ve a la pestaña "Estilo"
  • Seleccione la lista desplegable "Adjunto" y seleccione "Fijo"

utilice una Animación de entrada para el texto del héroe (encabezado):

  • Seleccione el widget de encabezado
  • Vaya a la pestaña "Avanzado"
  • Expande la pestaña "Efectos de movimiento"
  • Seleccione Input Animation y configúrelo en "Fade In"

Use una animación de entrada para la descripción del texto del héroe (widget Editor de texto):

  • Seleccione el widget Editor de texto
  • Vaya a la pestaña "Avanzado"
  • Expande la pestaña "Efectos de movimiento"
  • Selecciona la "Animación de entrada" y configúrala en "Fundido de entrada".

Haga lo mismo con los widgets que vienen después, para efectos sutiles cuando se carga la página.

Ahora ejecutemos la prueba de rendimiento nuevamente, para ver cómo los efectos de movimiento afectaron nuestra puntuación:

  • Volver a la ventana "Inspector"
  • Seleccione la pestaña "Faro"
  • Haga clic en "Generar un informe".

Ahora vemos que nuestra puntuación de rendimiento se ha reducido a 97; esto definitivamente no es una gran diferencia y hace que el sitio web sea más interesante y divertido.

¿Puedes creer nuestro nuevo puntaje de desempeño?

Estamos encantados de que ahora esté completamente equipado para aumentar su puntuación de rendimiento en cada sitio web de Elementor que cree. Marcará una gran diferencia en los objetivos de creación de su sitio web y el éxito de su negocio.

Le sugerimos que marque este tutorial para consultarlo en el futuro, de modo que pueda examinar el rendimiento de las páginas de su sitio web y aplicar las mejores prácticas para optimizar su diseño.

Y eso es solo el comienzo: la siguiente parte de este curso cubreoptimización de imagen.

En el tutorial, revisaremos cada imagen en el sitio web de muestra y aprenderemos cómo mejorarlas para tiempos de carga aún más eficientes.

¡Obtenga Elementor Pro ahora!

Conclusión

Listo ! Eso es todo por este artículo que le muestra cómo optimizar el diseño de su sitio web con Elementor. Si tiene alguna duda sobre cómo llegar favísanos en el comentarios.

Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.

...

Este artículo contiene los comentarios 0

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba