Una de las mayores diferencias en Blocs V5 en comparación con Blocs V2 es el hecho Blocs ya no crea sitios web usando Bootstrap 3 y en su lugar utiliza el nuevo y mejorado Bootstrap 4 framework.
Herramienta de migración
Proyectos creados en Blocs V2 usa el Bootstrap 3 framework lo que obviamente no es ideal, ya que Bootstrap 3 y 4 son bastante diferentes. Sin embargo, Blocs V5 viene con una herramienta de migración integrada que está diseñada para ayudar a convertir Blocs Proyectos V2 (Bootstrap 3) en Blocs Proyectos V5 (Bootstrap 4) con la menor molestia posible.
Al migrar un Blocs proyecto V2 (Bootstrap 3) a un Blocs Proyecto V5 (Bootstrap 4) le garantizamos que notará que varios aspectos de su sitio pueden requerir más atención, esto se debe a una serie de factores que ampliaremos a lo largo de esta publicación.
También recuerda Blocs V2 se puede ejecutar junto Blocs V5, por lo que si tiene grandes sitios o proyectos con fechas límite, evite migrarlos a menos que tenga tiempo para realizar cambios manuales sustanciales que puedan ser necesarios.
El proceso de migración
Cuando abre una tarjeta de crédito Blocs Proyecto V2 en Blocs V5, Blocs le preguntará si desea migrar el proyecto a Blocs V5. En este punto, es importante asegurarse de tener una copia de seguridad de su proyecto para que pueda volver fácilmente a Blocs 2 si su migración requiere mucho más trabajo del que había previsto inicialmente.
Cuándo Blocs migra un proyecto a Bootstrap 4, verifica el HTML del proyecto en busca de referencias a clases antiguas de Bootstrap 3 y también escanea la estructura HTML haciendo cambios cuando es necesario. Es importante recordar Blocs no cambia ninguna clase personalizada, por lo que cualquier problema de estilo visual causado por clases personalizadas deberá modificarse manualmente.
Diferencias visuales naturales
Hay una serie de factores que harán que su sitio se vea diferente en Blocs V5 en comparación con Blocs V2. Lo siguiente es normal y se debe a cambios clave en el marco de Bootstrap.
El texto es más grande
Después de la migración, el cambio más común que puede notar es que el texto puede parecer más grande. Esto se debe a que Bootstrap 4 ahora usa tamaños de fuente más grandes en todo su estilo de tipografía principal. La referencia a continuación ilustra las diferencias entre Bootstrap 3 y 4 al volver a calificar los tamaños de fuente para las etiquetas de encabezado.
Bootstrap 3
H1 = 36 píxeles
H2 = 30 píxeles
H3 = 24 píxeles
H4 = 18 píxeles
H5 = 14 píxeles
H6 = 12 píxeles
Bootstrap 4
H1 = 2.5 rem
H2 = 2 rem
H3 = 1.75 rem
H4 = 1.5 rem
H5 = 1.25rem
H6 = 1rem
Alternar estilo de símbolo
Otro problema visual común al migrar son los problemas con el estilo del símbolo de alternancia. Esto se debe a que, en Bootstrap 4, el símbolo de alternancia del navegador ahora es una imagen SVG. Esto significa que ya no es posible personalizar el símbolo de alternancia con subclases antiguas de Blocs V2. Para cambiar el color del símbolo de alternancia en Blocs V5 para fondos claros u oscuros, deberá configurar la navegación principal Brics estilo del tema.
Problemas de caché
Cuando migra un proyecto a Bootstrap 4 y lo exporta, es muy probable que la caché del servidor haga que su sitio parezca roto inicialmente una vez que esté alojado. Esto se puede solucionar fácilmente borrando la memoria caché de un navegador. Puede leer más sobre cómo abordar los problemas de caché del navegador aquí.
Fuente impresionante
In Blocs V5, el conjunto de iconos de Font Awesome se ha actualizado a V5. Blocs intentará migrar cualquier clase de icono anterior de Font Awesome V4 a las nuevas clases requeridas para V5. Sin embargo, si ha agregado sus propias implementaciones de código personalizado de los iconos de Font Awesome, entonces estos deberán actualizarse manualmente.
Puede leer sobre qué clases han cambiado en Font Awesome V5 y cómo migrar manualmente las clases aquí.
Carrusel, Lightbox y Scroll To Top UI Icons
In Blocs V5, el carrusel, la caja de luz y el botón de desplazamiento hacia la parte superior usan íconos SVG en lugar de fuentes de íconos, esto significa que las antiguas subclases que se usaban en Blocs V3 para establecer el color de los iconos ya no funcionará. Existen nuevas subclases que apuntan a estos iconos SVG.
Tenga en cuenta que ya no usará el color de la fuente para establecer el color del icono, sino que usará el Color de trazo SVG controles de estilo en el Editor de clases.
Fondo de paralaje
La forma en que funciona el paralaje ha cambiado en Blocs V5, anteriormente usaba esta tecnica que aplica la regla de clase background-attachment: fixed;
. Sin embargo, este enfoque tiene una desventaja importante: no funciona en dispositivos móviles.
In Blocs V5, el paralaje ahora funciona con un Solución javascript lo que significa que funciona muy bien en computadora de escritorio y móvil. Hay algunas desventajas en este nuevo método de paralaje, la principal es que los fondos ya no se repiten sin problemas si tiene varios Blocs apilados junto con la misma imagen de fondo. Una solución para esto es simplemente reubicar las filas principales que contienen el Bloc contenido de cada individuo Bloc y colocarlos en un solo Bloc con el efecto de fondo de paralaje activado.
Si realmente necesitas conseguir el clásico Blocs Efecto de paralaje V3 en Blocs V5, esta guía lo guiará a través del proceso de creación manual.
Icono Menú
In Blocs V5 El icono del menú de alternancia ahora es un SVG en línea. Esto significa que se puede diseñar y personalizar fácilmente utilizando clases personalizadas. Sin embargo, si anteriormente utilizó un Bric personalizado como Easy Burger para personalizar el menú de su sitio web, es posible que encuentre algunos problemas. Le recomendamos que vuelva a crear su menú y elimine cualquier Brics que manipulan el menú, si encuentra problemas.
Margen
Blocs V5 ya no tiene controles de margen preestablecidos limitados para texto e imágenes, en su lugar Blocs tiene pleno acceso a la Utilidades de espaciado Bootstrap que ofrecen una experiencia mucho mayor. Estos le permiten aplicar margen y relleno preestablecidos para cualquier borde en cualquier elemento. Sin embargo, al usar el espaciado, es posible que los controles no surtan efecto. Para vaciar elementos, márgenes o relleno, mantenga presionada la tecla de opción y haga clic en la pequeña X en el control segmentado del borde relevante que le gustaría borrar. Después de esto, ahora puede aplicar un nuevo valor de margen/relleno a ese borde.
Colores
Blocs V5 tiene un sistema de color completamente nuevo con muchos beneficios excelentes. Sin embargo, debido a un cambio tan grande, es posible que encuentre algunas muestras globales que no funcionen correctamente en Blocs V5, cuando intenta asignarlos a un elemento. Simplemente haga clic derecho en la muestra problemática en el Swatch Manager y duplíquela, ahora elimine la original y use la versión duplicada.
Con Blocs V2 y V5 uno al lado del otro
Es posible correr Blocs V2 y V5 en el mismo sistema, ya que ambos usan recursos de soporte de aplicaciones dedicados a la versión. Sin embargo, se deben considerar los siguientes puntos.
- Ambas versiones de Blocs comparten el mismo nombre, esto significa que es imposible que ambas aplicaciones ocupen el mismo espacio dentro de la carpeta de aplicaciones de MacOS. Para evitar este problema, simplemente cambie el nombre del Blocs aplicación V2 de Blocs a Blocs V2. Esto permitirá que ambas aplicaciones se coloquen en la carpeta de aplicaciones de MacOS.
- Blocs V2 y V5 tienen diferentes tipos de archivos. Esto significa que una vez que se guarda un archivo en Blocs V5 no se puede abrir en Blocs V2. Con esto en mente, le recomendamos que mantenga varias copias de sus proyectos, para evitar verse obligado a usarlos en una versión específica de Blocs.