Cuando desarrollamos el tema Astra, nos centramos constantemente en mejorar el rendimiento de su sitio web. Como resultado, hemos actualizado los fundamentos para combinar funcionalidad y atractivo visual. El sitio web debe ser fácil de usar y atractivo a la vista. Estos son los principales cambios que hemos actualizado en la nueva versión del tema Astra.
Mejora de la experiencia de usuario del editor de bloques
Un estudio afirma que el uso de CSS en tu web es directamente proporcional a la velocidad de tu web. Cuanto más CSS utilice, más lento se cargará su sitio web. Dado que la velocidad del sitio web es uno de los principales factores de clasificación, es muy importante minimizar el uso de CSS. Eso es lo que hemos hecho con el editor de bloques. Hemos utilizado el CSS incorporado de WordPress y reducido el uso de CSS en el tema.
- Principalmente hemos eliminado nuestra compatibilidad CSS actualizada (excepto las obligatorias)
- Hemos incluido cambios de acabado basados en revisiones de diseño y sugerencias adicionales
- Se han mejorado los diseños del editor de bloques, incluidos los espaciados interiores, las alineaciones y una vista sensible del editor.
- Hemos incorporado nuevos ajustes en el diseño de la interfaz de usuario para algunos bloques (Últimas publicaciones, Cita, Tabla).
Echemos un vistazo a los principales cambios:
Bloque de últimas entradas
En la nueva versión, hemos diseñado el bloque de últimas entradas de forma que resalte automáticamente los encabezados, cambie el color del enlace y de las metaetiquetas, cambie el tamaño de la fuente en función del tema y muchas otras funciones.
Bloque Pullquote y Quote
El bloque pull-quote puede hacer que los fragmentos cortos se vean bonitos de forma rápida y sencilla y también añade valor cuando se intenta atraer a los usuarios a una parte concreta del sitio web. Hemos mejorado la experiencia del usuario con la nueva versión del tema Astra actualizando las posiciones del borde y de la cita. Antes, cuando se movía la cita a la posición centrada en el medio o centrada a la derecha, seguía apareciendo alineada a la izquierda. Ahora esto se ha cambiado y se ve mucho mejor. También hemos corregido algunos errores menores en esta sección.
Diseño por defecto del bloque Grupo
Cuando un usuario añade un bloque de grupo, por defecto heredará el diseño de la configuración por defecto. El usuario puede desactivar esta opción utilizando el control deslizante situado junto a la configuración.
Actualización del diseño de ancho completo
Para los bloques Grupo y Portada, el diseño "Ancho completo" se establecerá al arrastrar y soltar. Por defecto, el contenido se pegará dentro del área de ancho del contenedor Astra.
Mejoras en el theme.json
El diseño de una página web influye en la forma en que su público objetivo percibe su marca. La impresión que les causa puede persuadirles para que permanezcan en tu página y conozcan más sobre tu empresa, o puede persuadirles para que vayan a la página de un competidor. Por eso hemos añadido más armas al editor de bloques, que le permitirán diseñar el bloque de forma más creativa.
Cambio de color del enlace
Hemos añadido una nueva opción de color de enlace en el grupo de colores a la última versión del tema Astra, permitiéndote cambiar el color de los enlaces que aparecen dentro del bloque.
Mejoras de los márgenes
Hemos añadido una opción de margen al control de dimensión para ofrecerle un mayor control sobre la dimensión.
Mejora del acolchado
La opción de relleno mejorada le permitirá seleccionar el espacio en el que aparecerá su bloque. El espaciado entre bloques interiores te permite controlar la distancia entre los bloques interiores y el bloque contenedor, elevando la experiencia general del usuario.
Mejora del control fronterizo
También hemos añadido opciones de control del borde, que permiten elegir y cambiar la anchura, el estilo, el color y el radio del bloque.
Mejora de la configuración del diseño de las metaetiquetas
Hemos realizado cambios significativos en las metaetiquetas y en cómo aparecen en tu sitio. Las metaetiquetas se han rediseñado, optimizado y hecho más elegantes. He aquí algunos cambios destacados.
Desactivar cabecera
Se ha añadido una nueva opción meta llamada "Desactivar cabecera" - Antes teníamos tres opciones para desactivar partes de la cabecera (desactivar arriba, desactivar primaria y desactivar abajo), pero ninguna opción global para desactivar completamente la cabecera).
La opción "Desactivar título de página" ha pasado a llamarse "Activar/desactivar icono del ojo" y ahora se encuentra junto al título. Puede ocultar o mostrar el título de la página haciendo clic en el icono del ojo situado junto al título de la página.
- Para utilizar esta opción, basta con pasar el ratón por el extremo derecho del título de la página para que aparezca el icono del ojo.
- Haga clic en el ojo para activar o desactivar el título de la página
- El título de la página aparecerá en gris una vez desactivado
Otros cambios en los Metaajustes
- Utilización de un control de imagen interactivo en lugar de un control desplegable (para la barra lateral y el diseño de contenido)
- Los desplegables se convierten en un control de selección de botones.
- Los metaajustes de cabecera se encapsulan en una ventana emergente de ajustes de cabecera.
Aparte de esto, ahora tienes un mejor control sobre la barra lateral y el diseño del contenido con los diseños visuales de diseño para elegir justo dentro del editor de bloques. Elementos de página donde el número de toggles se ha reducido o aparecerán condicionalmente lo que a su vez cargará la página más rápido.
Configuración avanzada de la cabecera
La configuración avanzada de la cabecera le permitirá tener un mejor control sobre la sección de cabecera. Cuando elija esta opción, aparecerá una ventana emergente en la pantalla con más ajustes que le permitirán modificar las siguientes opciones
- Activar/desactivar cabecera primaria
- Activar/desactivar cabecera transparente
- Activar/desactivar la cabecera adhesiva
- Elija la posición de la cabecera adhesiva
Mejora del rendimiento
Con todos los cambios realizados, el rendimiento general ha aumentado significativamente. El nuevo editor de temas Astra carga ahora 1,21 segundos más rápido que la versión anterior y 0,26 segundos más rápido en el frontend. A continuación se muestra la comparación de rendimiento de la versión anterior y la nueva versión.
| Funciones | Versión Master | Última versión |
|---|---|---|
| Editor | CSS estático: 21 KB CSS dinámico: 21,4 KB Tamaño de la página: 588 KB | CSS estático: 15 KB CSS dinámico: 7 KB Tamaño de la página: 547 KB |
| Frontend | CSS: 9,77 KB Tamaño de la página: 111 KB | CSS: 4,44 KB Tamaño de la página: 106 KB |
Nuevo editor de bloques en el personalizador
Hemos añadido una potente opción al personalizador para cambiar el relleno de todo el sitio web. Puede acceder a esta opción navegando a Apariencia > Personalizar > Global > Editor de bloques. Con esta opción global, ahora puede establecer rellenos personalizados para todos los bloques de su sitio web. Esta configuración se sobrescribirá si alguno de los bloques tiene alguna dimensión personalizada establecida.
Los usuarios disponen ahora de dos nuevas opciones de preajuste de relleno como "Compacto" y "Confort". La opción compacta está preestablecida con el relleno de 2em y la opción confort está preestablecida con 3em. Estas opciones se aplicarán a Grupos, Columnas o a un bloque de Portada.
¿Cómo utilizar el editor de bloques para definir el relleno manualmente?
- Vaya a Apariencia > Personalizar > Global > Editor de bloques
- Por defecto, la opción "Legacy" estará seleccionada. Legacy es la configuración predeterminada de WordPress y no puede ser modificada por los usuarios.
- La opción heredada será visible para los usuarios existentes. Todos los usuarios nuevos solo verán la opción "personalizada" junto con las opciones "compacto" y "confort".
- Para ajustar el relleno manualmente, haga clic en el botón "personalizado".
- Elija el relleno que necesita fijar
Mejora en las Imágenes Destacadas de la página de Entradas
Con la última versión del tema Astra, ahora puedes desactivar la imagen destacada de la página de una sola entrada; sin embargo, todavía, mostrarla en la página de la lista de entradas. Para acceder a esta opción, simplemente haz clic en el botón Configuración en la esquina superior derecha de cualquier página de entrada individual y marca la casilla justo debajo de la opción de imagen destacada. Una vez marcada, esta opción habilitará la imagen destacada en la página de lista de entradas; sin embargo, estará deshabilitada en la página de entrada única.
Cambiar el ancho de contenido por defecto para el tema
Con la última versión del tema Astra, ahora puedes cambiar el ancho del contenido por defecto (910PX) a cualquier cosa basada en tus necesidades. Simplemente añade el siguiente filtro al tema hijo. Para actualizar el ancho de sus diseños, por favor actualice el Ancho del Contenedor desde Personalizador > Global > Contenedor.
function astra_update_block_content_size( $content_size ) {
return '840px'; // Default 910px overridden by 840px.
}
add_filter( 'astra_block_content_width', 'astra_update_block_content_size' );
Algunos filtros más
En la v3.8.3 hemos lanzado una experiencia más mejorada del editor de bloques con algunas novedades, mejoras, etc. Esta es la lista resumida
- Nuevo: Preajustes de acolchado, como Compacto y Confort, para las secciones de bloques centrales.
- Los diseños de bloque se sincronizarán con los diseños de contenedor Astra, por lo que funcionarán los diseños de bloque según el diseño del contenedor.
- Se ha mejorado el espaciado predeterminado de los contenedores Astra para que la interfaz de usuario de la configuración del tema resulte más elegante.
Para utilizar estas funciones, utilice los siguientes filtros en su tema hijo -
add_filter( 'astra_get_option_customizer-default-layout-update', '__return_true' );
add_filter( 'astra_get_option_wp-blocks-v2-ui', '__return_true' );
