Trinchera WP
Regresar al curso Acceder Registrarse
Para acceder a este contenido:
Clases
Crear Botones

¡Obtén acceso a todos los cursos!

99
Acceso a todo

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

  1. Accede a una página: Páginas > Sample Page.
  2. Añade un bloque de botón.
  3. 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.