Temas de WordPress, estilo y glosario de términos básicos | Togeppi

Estilo

El recuadro rojo es donde se configura el estilo.

El estilo se define como la manera en que se decora lo que se ve externamente, como la fuente, color, tamaño del texto, fondo, ancho y márgenes, y los bordes del widget seleccionado.

También explicaré el estilo como lo hice con el widget de botón.

(1) Tipografía

• Familia: Especifica la fuente de las letras.

• Tamaño: Especifica el tamaño de la letra.

• Peso: Especifica el grosor de la letra.

• Transformar: Especifica la capitalización.

• Estilo: Especifica la inclinación de la letra.

• Decoración: Puede agregar una línea recta a la letra.

• Altura de línea: Ajusta el espacio arriba y abajo del texto.

• Espaciado de letras: Ajusta el ancho entre las letras.

• Espaciado de palabras: Ajusta el ancho entre las palabras.

Pueda que la diferencia entre el Espaciado de letras y el Espaciado de palabras sea confusa, pero verlo aplicado a continuación puede ayudar a entender mejor.

(2) Sombra de texto

No es una función que uso mucho, pero agrega un efecto de sombra detrás del texto. Consulte el botón a continuación como referencia.

El efecto puede variar, pero he exagerado el efecto para mostrar claramente la diferencia.

(3) Normal / Hover

Ya han visto cómo cambia el color de un botón cuando pasas el mouse sobre él, dando la sensación de que está funcionando. Esto es lo que se configura aquí.

Hover se refiere generalmente al mouse hover, y también se usa para describir el vuelo estacionario de un helicóptero. Se dice que se encuentra en Hover cuando el mouse está sobre el botón.

Normal es cómo se configura para mostrar el botón cuando no se toca, y Hover es cómo cambian cuando el mouse está sobre él.

• Color de texto: Especifica el color del texto.

• Tipo de fondo: Especifica si el fondo será de color sólido o tendrá un efecto de degradado.

• Color: Especifica el color de fondo que aparece tras configurar el fondo.

• Color del borde: Especifica el color del borde (Border) si hay un borde presente.

• Animación de hover: Especifica el efecto en hover.

Ahora, revisemos los botones configurados a continuación para ver qué efectos tienen.

(4) Borde

Borde, que mencioné brevemente antes, es simplemente eso: un borde.

Especifica el borde del widget. No es complicado.

• Tipo de borde: Especifica cómo se aplicará el borde, ya sea línea recta o punteada.

• Ancho: Especifica el grosor del borde.

• Radio del borde: Especifica cuán redondeadas o angulosas serán las esquinas del borde.

• Sombra de cuadro: Es similar a la función de sombra mencionada antes.

Revise los siguientes botones para ver las diferencias.

(5) Relleno

Hemos introducido un nuevo concepto. Relleno, que también puede recordar a la ropa de invierno. Si consideramos que el relleno realmente significa un material de amortiguación, la idea es similar.

El relleno es una función que agrega espacio alrededor del borde de un widget.

Existen configuraciones en las que se menciona el Margen, que son bastante similares, y al principio puede ser confuso. Lo explico así: el Relleno se utiliza más para aumentar el tamaño del widget, mientras que el Margen se utiliza para reducir el tamaño del widget.

Veamos los siguientes botones para verlo en la práctica.

¿Siente la diferencia?

El número junto a los valores px indica si se va a ajustar en píxeles o en porcentaje del tamaño total.

El icono que parece un candado es la función de sincronización (SYNC). Similar a la función de sincronización en los vehículos, si activa este botón y hace ajustes, los valores de Top, Bottom, Right, Left se ajustarán al mismo número.

Así que hemos terminado con la sección de configuración de estilo del widget de botón.

Avanzado

-Contenido a añadir-