La página de inicio de sesión de tu vendedor es a menudo uno de los primeros puntos de contacto para los socios de tu marketplace. Es muy esencial que luzca pulida y coherente con tu marca. Con el plugin WC Vendors Signup , no necesitas editar archivos del plugin ni escribir código complicado para lograr un diseño profesional.
Con unas pocas líneas de CSS, puedes transformar el formulario de inicio de sesión predeterminado de WC Vendors en una interfaz elegante y fácil de usar que se alinea perfectamente con el estilo visual de tu sitio.
Dónde añadir CSS personalizado
Puedes añadir de forma segura el código de estilo a continuación utilizando uno de los métodos siguientes:
1. A través del personalizador de WordPress (Recomendado)
- Navega a Apariencia → Personalizar → CSS adicional en tu panel de control.
- Pega el código y haz clic en Publicar para ver tus cambios al instante.
2. En un tema hijo
- Si estás utilizando un tema hijo, abre el archivo
style.css. - Añade el fragmento de CSS allí para asegurar que tus personalizaciones permanezcan intactas incluso después de las actualizaciones del tema.
3. Usando un plugin de CSS personalizado
- Plugins como WPCode Lite te permiten insertar fragmentos de forma segura sin editar los archivos del tema.
- Simplemente pega el código en tu plugin de fragmentos de código preferido y guarda.
CSS personalizado para el formulario de registro de WC Vendors
Utiliza el siguiente CSS para modernizar la apariencia de tu Formulario de inicio de sesión de WC Vendors. Estiliza los campos de entrada, botones y enlaces para crear un diseño coherente y profesional.
Cómo estos estilos transforman tu formulario de inicio de sesión de vendedor
Una vez aplicado, este CSS le da a tu página de inicio de sesión un aspecto más limpio y coherente. Esto es lo que ha cambiado:
- Campos de entrada refinados: Bordes suaves, tonos neutros y texto claro para una fácil legibilidad.
- Diseño de botón moderno: Un fondo verde oscuro con texto amarillo suave y una transición suave al pasar el ratón.
- Enlaces legibles: Contraste claro entre el fondo y el texto, haciendo que los enlaces de contraseña y registro destaquen.
- Tipografía coherente: La fuente Verdana mantiene el diseño simple y accesible en todos los navegadores.
Tu página de inicio de sesión se sentirá más pulida y acogedora. Este diseño mejorado ayuda a los vendedores a iniciar sesión con confianza.
Personaliza el formulario de inicio de sesión del vendedor para que coincida con tu marca
Haz que tu página de inicio de sesión de vendedor se sienta como parte de tu marca ajustando el CSS:
- Colores: Actualiza los códigos de color (por ejemplo,
#00008B,#012b09) para que coincidan con tu paleta de marca. - Fuentes: Reemplaza la fuente predeterminada (por ejemplo, Verdana) con la fuente de tu marca para mantener una tipografía coherente.
- Diseño y espaciado: Ajusta los espacios entre columnas, márgenes o tamaños de fuente para crear un formulario más compacto o espacioso.
- Botones y efectos al pasar el ratón: Estiliza los botones para que coincidan con los colores de tu marca y las transiciones al pasar el ratón.
Estos cambios aseguran que el formulario de inicio de sesión se alinee visualmente con tu marketplace, haciéndolo sentir profesional y cohesivo.
Mejora tu página de inicio de sesión de vendedor usando bloques de Gutenberg
Recomendamos usar el editor de páginas de Gutenberg para añadir contenido y estructura a tu página de inicio de sesión de vendedor más allá del simple estilo:
- Imagen: Usa un bloque de Imagen encima del formulario de inicio de sesión para mostrar el logo de tu marketplace o un banner personalizado.
- Mensaje de Bienvenida: Añade un bloque de Encabezado o Párrafo para saludar a los vendedores y presentar la voz de tu marca.
- Enlaces Útiles: Usa un bloque de Lista para incluir enlaces a tu Centro de Ayuda, información de contacto de soporte o consejos para contraseñas.
- Estructura y Legibilidad: Añade bloques de Espaciador o Separador para organizar secciones y mejorar la legibilidad.
- Llamada a la Acción: Añade un bloque de Botón o Llamada a la Acción enlazando a tu página de registro de vendedor, con el estilo de los colores de tu marca.
Previsualiza tus cambios
Comprueba la diferencia que estas personalizaciones pueden hacer en tu formulario de inicio de sesión de vendedor
Al estilizar tu formulario de inicio de sesión con CSS, puedes crear una experiencia profesional y acorde a la marca que refleje inmediatamente la identidad de tu marketplace y haga que los vendedores se sientan seguros y bienvenidos.