No se han encontrado resultados. ¿Intentar de nuevo con otras palabras?

La búsqueda debe tener al menos 3 caracteres.

¿Cómo mejorar CLS para el logotipo SVG?

El cambio de diseño acumulativo (CLS) es una métrica importante relacionada con la estabilidad visual del sitio web. Más concretamente, esta métrica registra los cambios de diseño inesperados que experimentan los usuarios en su sitio web. Este documento le mostrará cómo mejorar la puntuación CLS si utiliza el logotipo SVG en su sitio web.

Cuando añada una imagen de logotipo en los formatos .png y .jpg a su sitio web, la altura del logotipo se añadirá automáticamente en función de la anchura del logotipo. Por el contrario, si carga una imagen SVG, WordPress solo establecerá la anchura del logotipo, pero no la altura.

Como resultado, es posible que el logotipo se reduzca, lo que puede provocar un desplazamiento inesperado del diseño en la sección de cabecera. La versión 3.6.0 de Astra Theme ha mejorado la forma en que se gestionan las imágenes SVG del logotipo, lo que evita desplazamientos inesperados. Por lo tanto, este cambio puede ayudar a mejorar la puntuación general de CLS. 

¿Cómo lo mejoramos?

Para mejorar esto, hemos añadido un código JavaScript que calculará automáticamente la altura del logotipo SVG una vez importado a su sitio web. Después, la altura se calculará en función de la anchura del logotipo que establezca en el personalizador. Puede encontrar más detalles sobre esto en nuestro Artículo de blog.

Esta mejora del logotipo SVG se reflejará en una cabecera estándar y transparente. Este problema no se presentaba con el logotipo de cabecera adhesivo.

¿Cómo solucionarlo?

Para todos los sitios web nuevos, la mejora del logotipo SVG se aplicará automáticamente. Una vez que cargue el logotipo SVG y establezca la anchura del logotipo, la altura se calculará y guardará automáticamente. Por otro lado, si ya tiene un sitio web con un logotipo SVG, tendrá que realizar algunos cambios menores.

No hemos aplicado esta mejora a sitios web existentes para evitar posibles problemas que pudieran haber aparecido. En algunos casos, aplicar esta mejora automáticamente a logotipos ya en uso podría dar lugar a cambios no deseados.

Para aplicar esta mejora a su sitio web, siga estos pasos:

Primer paso - Vaya a Personalizador > Cabecera > widget "Identidad y logotipo del sitio";

Paso 2 - Actualizar/editar el valor de la anchura del logotipo

Paso 3 - Pulse el botón "Publicar" para guardar los cambios. 

En función de la anchura que acaba de actualizar, la altura del logotipo se calculará automáticamente y se guardará en la configuración del personalizador. Esto aplicará mejoras al logotipo SVG utilizado en su sitio web.

¿Le ha resultado útil este artículo?
¿No ha encontrado una solución? Estamos aquí para ayudarle a conseguirlo.

Documentos relacionados

Astra es gratis. Ahora y siempre.

Creemos que crear sitios web atractivos no debería ser caro. Por eso Astra es gratis para todos. Empieza gratis y amplía con paquetes asequibles.

REWIND

RESUMEN DEL AÑO

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form
Scroll al inicio
Ahora elija la opción que prefiera
page builder addon
Elija su complemento de creación de páginas preferido

La descarga está a un solo clic

Introduce tu dirección de correo electrónico y sé el primero en enterarte de las actualizaciones y novedades.

Descargar gratis Astra Theme - Modal Popup Form