En esta lección configuraremos los botones básicos de la web, al igual que hicimos en una clase anterior con la tipografía y los colores. El objetivo es dejar una base lista para facilitar el desarrollo, aunque siempre tendremos la posibilidad de realizar ajustes más adelante.
Objetivo de la Clase
- Diseñar y configurar los botones base de la web.
- Facilitar la personalización y coherencia visual durante el desarrollo.
Pasos para Configurar los Botones
1. Ir al Personalizador
- Accede al personalizador: Apariencia > Personalizar.
- Navega a la sección Global > Botones.
2. Selección de un Botón Base
- Elige un estilo predeterminado, como el botón redondeado.
Ejemplo: Botón con bordes redondeados de 10 píxeles.
3. Configuración de Estilo
- Cambia los siguientes parámetros:
- Color de fondo: Selecciona un color de la paleta para el estado normal y hover.
- Texto: Define el color (ejemplo: blanco para ambos estados).
- Borde: Sin borde en este caso.
- Relleno (padding): Configura valores como
20px 30px.
Problemas Detectados y Soluciones
Problema 1: Configuración no Guardada
- En algunos casos, al recargar el personalizador, el radio de borde no se guarda correctamente.
Problema 2: Contraste de Texto y Fondo
- Si el fondo es blanco, el texto también aparece blanco en ciertos preajustes, lo que dificulta la visibilidad.
Solución Temporal:
Ajustar manualmente los estilos desde el editor de páginas al crear el contenido.
Ejemplo Práctico: Creación de un Botón en una Página
- Accede a una página: Páginas > Sample Page.
- Añade un bloque de botón.
- Configura el estilo desde las opciones del bloque:
- Relleno, contorno, colores, etc.
Limitaciones en Astra
- Los problemas pueden deberse a:
- Desincronización entre el personalizador y el editor de páginas.
- Funcionalidades limitadas en la configuración de bordes y contornos.
- Recomendación: Usa un plugin como Spectra para añadir bloques avanzados en Gutenberg.
Reflexiones Finales
- Las herramientas como Astra suelen presentar algunos inconvenientes de configuración.
- A medida que se actualicen, algunos problemas podrían solucionarse.
- Lo importante es ser flexible y buscar alternativas, como plugins, cuando sea necesario.
