Preguntas frecuentes sobre personalización y diseño

¿Cómo cambio el color de los encabezados h1, h2, h3, h4…?

Puedes cambiar el color de todos los encabezados h1, h2 (también puedes cambiar o deshabilitar el fondo) y h3 en las opciones de apariencia de Wasabi Theme:

Si quieres cambiar el color de un encabezado en particular dentro de una entrada o página, tienes que usar el editor propio de Gutenberg. ¿Cómo?

  1. Has click en el encabezado correspondiente
  2. Ve a los ajustes del bloque en la barra lateral de edición
  3. Elige los colores que quieras para el texto y el fondo del encabezado en la sección de “Ajustes de color”

Si quieres que el h2 salga centrado después de cambiar el color usando el editor Gutenberg, tendrás que desmarcar la casilla de “Habilitar el fondo de H2” en los ajustes de apariencia de Wasabi (sección “Encabezados”).

¿Cómo puedo hacer el logo más grande?

Por defecto, el logo se adapta al tamaño de la barra superior para que se mantengan las proporciones del diseño y no quede mucho espacio en blanco.

Si quieres aumentar el tamaño del logo saltándote esta restricción se puede saltar marcando esta opción (disponible a partir la versión 0.33.0):

Ten en cuenta que ahora el logo ocupara todo su tamaño, por lo que es posible que tengas que recortarlo.

En algunas partes del texto no se distingue entre negrita o título y texto normal, ¿por qué?

Este es un problema que te puedes encontrar si usas algunas fuentes de Google.

Solución: elegir otra fuente. ¿Por qué? Porque algunas fuentes de Google no incluyen su versión en negrita.

Las negritas se ven difuminadas, ¿por qué?

Para optimizar el WPO, por defecto solo cargamos 3 variantes para cada fuente seleccionada: normal, negrita y cursiva. Es posible que el texto difuminado no sea realmente una negrita y sea una semi-negrita o una extra-negrita. Para cargar esos estilos, tienes que marcar esta opción:

Cambio la fuente de los encabezados, pero no veo los cambios. ¿Por qué?

La fuente de los encabezados afecta a los elementos h1, h2, h3, h4, etc. ¿Seguro que el elemento en el que esperas ver los cambios es un encabezado? Podría ser un párrafo en negrita. Ejemplo:

Las imágenes destacadas en clusters (miniaturas) aparecen cortadas

El tamaño de la miniatura de las imágenes de clusters, entradas relacionadas, recientes y destacadas en Wasabi es de 300x200px.

Para que todas las imágenes tengan la misma proporción lo que hace WordPress cuando subes una imagen es ajustarla a esa medida y recortarla para mantener la proporción. Es por este motivo que algunas imágenes puedan aparecer cortadas. Tenemos dos formas de solucionarlo:

  • Opción 1 (recomendada): crear las imágenes destacadas siguiendo la proporción 3:2. Esto hará que el tamaño de la miniatura (300×200) cuadre perfectamente con el espacio disponible, y, además, permitirá usar la miniatura, no cargará la versión completa de la foto (mejor WPO).
  • Opción 2: forzar la carga de la versión completa de la foto. Esta opción no se recomienda porque no obtenemos la mejora en WPO que sí que obtendríamos en la opción 1.

Cómo implementar la opción 1

Sube las nuevas imágenes destacadas en un tamaño que siga la proporción 3:2, por ejemplo, 600x400px, 1200x800px, etc.

Si ya hay imágenes destacadas subidas, vuelves a resubirlas con la nueva dimensión.

Cómo implementar la opción 2

Para empezar, tienes que crear e instalar un child theme de Wasabi.

Después, añade lo siguiente en el fichero functions.php del child theme:

add_action( 'init', function () {
    remove_image_size( 'archive-post-thumbnail' );
}, 999 );

Para finalizar, instala este plugin y ejecuta esta funcionalidad con las opciones indicadas marcadas:

Este plugin solo se tiene que ejecutar una vez: lo que hace es eliminar la versión 300×200 de las imágenes destacadas existentes para que Wasabi no las cargue. Como hemos eliminado la definición del tamaño en el fichero functions.php, las imágenes destacadas subidas a partir de ahora simplemente no generarán la versión 300×200, por lo que no haría falta volver a ejecutar el plugin.

Ahora los clusters cargarán la versión completa sin mantener ninguna relación de aspecto, con lo que tendrías que ver la imagen al completo.

Cómo aumentar el tamaño de letra

Puedes cambiar el tamaño de la letra de los encabezados H2, H3, etc. en los Ajustes de Wasabi -> Apariencia -> Encabezados.

Si lo que quieres es cambiar el tamaño de la letra global, puedes hacerlo el añadiendo este código en los Ajustes de Wasabi -> Apariencia -> CSS personalizado:

body {
    font-size: 17px;
}

El tamaño del que parte Wasabi Theme es 17px. Solo tendras que cambiar ese valor en el código anterior para ajustar el texto a la medida deseada.

Cómo aumentar el tamaño de fuente del menú del header

Añade este código en los Ajustes de Wasabi -> Apariencia -> CSS personalizado:

.top-bar .primary-menu>ul>li {
    font-size: 1rem;
}

Cómo aumentar o reducir el ancho de los artículos sin afectar al header ni al footer

Añade este código en los Ajustes de Wasabi -> Apariencia -> CSS personalizado. Ajusta el valor 80 al ancho que necesites. Puedes usar otras unidades como px (píxeles) o valores porcentuales como 80%.

.main-section.section, main article.section {
    max-width: 80rem;
}


Otro tipo de contenido en el blog de Wasabi