Referencia de configuración de Estilo del formulario
En este documento
Tiempo de lectura: 4 minutos | Dificultad: Intermedia
Resumen
Esta es una referencia completa de cada configuración de estilo de formulario disponible en WP Simple Pay. Úsela junto con la guía principal de estilo de formulario para obtener instrucciones detalladas de configuración.
Prerrequisitos
- WP Simple Pay Pro con una licencia Plus o superior
- Un formulario de pago que utiliza el tipo de formulario en el sitio (Incrustado o Superpuesto)
Ajustes predeterminados de tema
| ID de tema | Nombre | Primario | Secundario | Texto | Fondo |
|---|---|---|---|---|---|
predeterminado |
Predeterminado | #0f8569 |
#0e7c62 |
#32325d |
#ffffff |
atardecer |
Atardecer | #e74c3c |
#c0392b |
#2c3e50 |
#ecf0f1 |
bosque |
Bosque | #27ae60 |
#219955 |
#2c3e50 |
#f9f9f9 |
océano |
Océano | #3498db |
#2980b9 |
#2c3e50 |
#ecf0f1 |
monocromo |
Monocromo | #333333 |
#555555 |
#333333 |
#ffffff |
luz del sol |
Luz de sol | #f1c40f |
#f39c12 |
#34495e |
#ffffff |
coral |
Coral | #e67e22 |
#d35400 |
#2c3e50 |
#f9f9f9 |
minimalista |
Minimalista | #bdc3c7 |
#95a5a6 |
#2c3e50 |
#ffffff |
Cuando seleccionas un tema, el color primario se asigna al fondo del botón y al color de acento, el color secundario se asigna al estado de pasar el ratón por encima del botón, el color del texto se asigna a los colores generales del texto y las etiquetas, y el color de fondo se asigna a los fondos de los formularios y las entradas.
Ajustes de color
Todos los ajustes de color aceptan:
- Colores hexadecimales:
#0f8569,#fff - RGB/RGBA:
rgba(15, 133, 105, 0.8) - HSL/HSLA:
hsl(160, 80%, 29%) - Valor vacío (hereda el valor predeterminado o recurre a un ajuste del elemento superior)
| Ajuste | Descripción | Comportamiento de reserva |
|---|---|---|
| Fondo del formulario | Fondo del contenedor del formulario | Transparente (hereda el fondo de la página) |
| Fondo de entrada | Fondo del campo de entrada | Transparente |
| Color de texto general | Todos los elementos de texto | Predeterminado del navegador |
| Color del texto de la etiqueta | Solo etiquetas de campo | Vuelve al Color de Texto General |
| Color del texto del campo | Texto dentro de los campos | Vuelve al Color de Texto General |
| Color del título | Título del formulario | Vuelve al Color de Texto General |
| Color de la descripción | Descripción del formulario | Vuelve al Color de Texto General |
| Color primario (acento) | Estados de enfoque, resaltados | Predeterminado del tema |
| Color del borde | Bordes de campos y elementos | Predeterminado del tema |
| Color del borde de error | Bordes de error de validación | Predeterminado rojo |
| Color del texto de error | Texto del mensaje de error | Predeterminado rojo |
| Fondo del botón | Fondo del botón de envío | Color primario |
| Texto del botón | Texto del botón de envío | Blanco |
| Fondo del botón al pasar el ratón | Estado del botón de envío al pasar el ratón | Primario más oscuro |
Ajustes de tipografía
| Ajuste | Descripción | Valores aceptados | Predeterminado |
|---|---|---|---|
| Tamaño de fuente de etiqueta | Tamaño de etiqueta de campo | Entero positivo (píxeles) | 14 |
| Peso de fuente de etiqueta | Peso de etiqueta de campo | normal, bold, 100–900 |
— |
| Tamaño de fuente de entrada | Tamaño de texto de entrada | Entero positivo (píxeles) | 16 |
| Tamaño de fuente del título | Tamaño del título del formulario | Entero positivo (píxeles) | 24 |
| Peso de fuente del título | Peso del título del formulario | normal, bold, 100–900 |
— |
| Tamaño de fuente de descripción | Tamaño de descripción del formulario | Entero positivo (píxeles) | 16 |
| Peso de fuente de descripción | Peso de descripción del formulario | normal, bold, 100–900 |
— |
Configuración de diseño y maquetación
| Ajuste | Descripción | Valores aceptados | Predeterminado |
|---|---|---|---|
| Radio de borde del formulario | Redondeo de esquinas del contenedor del formulario | Entero positivo (píxeles) | 0 |
| Radio de borde de entrada y botón | Redondeo de esquinas de entrada/botón | Entero positivo (píxeles) | 4 |
| Relleno del formulario | Espaciado interno del contenedor del formulario | Entero positivo (píxeles) | 0 |
Aplicabilidad
| Tipo de formulario | ¿Estilos aplicados? |
|---|---|
| Incrustado en el sitio | Sí |
| Superposición en el sitio (Modal) | Sí |
| Checkout de Stripe (Fuera del sitio) | No |
| Página de pago (en el sitio) | Sí |
¿Qué Sigue?
- Estiliza los formularios de pago con Estilo de formulario: guía de configuración paso a paso
- Tipos de visualización del método de pago – Elige entre diseños de Pestañas y Acordeón
¿Todavía tiene preguntas? ¡Estamos aquí para ayudarle!
Última modificación: