✅Cómo Personalizar el Estilo de Formularios y Páginas en Ultimate Affiliate Pro

Cada programa de afiliación tiene su propia identidad visual, y adaptar el diseño a la estética del sitio web puede marcar la diferencia en la experiencia del usuario. Ultimate Affiliate Pro permite personalizar fácilmente el estilo de sus formularios y páginas (Login, Registro, Cuenta) mediante un sistema de plantillas y CSS personalizado.

A continuación, se explica cómo realizar estas personalizaciones paso a paso, sin necesidad de modificar archivos del plugin.

Plantillas prediseñadas y personalización con CSS

Ultimate Affiliate Pro incluye varias plantillas prediseñadas para los formularios de acceso, registro y la página de cuenta del afiliado. Estas plantillas se pueden utilizar tal como vienen o adaptarse mediante CSS a las necesidades específicas de diseño.

Para realizar cambios visuales más profundos, el plugin ofrece un campo de Custom CSS en cada sección de los formularios (conocidas como showcases), donde se puede escribir código CSS personalizado que se aplicará directamente en el front-end del sitio.

Pasos para personalizar el estilo con CSS

1. Identificar la clase CSS que se desea modificar

El primer paso es localizar la clase CSS del elemento HTML que se quiere personalizar. Esto se puede hacer fácilmente con herramientas de inspección como las que incluye cualquier navegador (por ejemplo, clic derecho > “Inspeccionar”).

2. Acceder al área de Custom CSS

Desde el Dashboard de Ultimate Affiliate Pro, se debe ir al apartado correspondiente al showcase que se desea personalizar:

• Login Form
• Registration Form
• Account Page

Dentro de cada sección, se encuentra un campo específico llamado Custom CSS, donde se puede escribir el código personalizado.

3. Escribir el código CSS personalizado

En el campo Custom CSS, se debe escribir el estilo deseado, siempre finalizando cada regla con !important; para asegurar que el estilo personalizado tenga prioridad sobre el estilo por defecto del plugin.

Ejemplo básico:

.uap-register-form input[type="text"] {
  background-color: #f2f2f2 !important;
  border: 1px solid #13b0a0 !important;
  color: #111518 !important;
}

4. Guardar cambios y limpiar caché

Una vez añadido el CSS, hay que guardar los cambios y, si el sitio utiliza un sistema de caché, se recomienda limpiarlo para ver los resultados reflejados correctamente en el front-end.

Recomendaciones

• Es recomendable tener nociones básicas de CSS para realizar estas personalizaciones.
• Si se quiere aplicar estilos avanzados, se pueden consultar recursos y ejemplos en línea que explican cómo trabajar con clases y estructuras HTML.
• Utilizar colores y estilos coherentes con la identidad visual del sitio ayuda a mejorar la confianza del usuario y la integración del programa de afiliados con el resto de la web.

Conclusión

Ultimate Affiliate Pro ofrece una solución flexible para quienes necesitan personalizar visualmente sus formularios y páginas de afiliados. Gracias al campo Custom CSS incluido en cada sección, es posible adaptar fácilmente el diseño sin modificar archivos ni complicarse con desarrollos externos. Con unos pocos ajustes, se puede conseguir un resultado más profesional y alineado con la estética del sitio.

Nos vemos en el siguiente tutorial. Un saludo.