Una página de inicio de sesión en azul predeterminado puede desentonar junto a los colores de marca de tu tienda. Los clientes se dan cuenta. Un botón que no coincide con tu logo, o un panel de promoción que choca con tu encabezado, hace que la página se sienta inacabada. Inicio de sesión personalizado para WooCommerce te permite establecer los colores principales de la página de inicio de sesión desde una sola pantalla, sin necesidad de código.
Este artículo te muestra cómo establecer los colores del panel, texto, botón, enlace, campo y botón de promoción. También elegirás cómo se comporta el panel de promoción en los teléfonos. Elegir una plantilla, renombrar las etiquetas del formulario y editar el texto de la promoción tienen sus propios artículos.
Prerrequisitos
| Requisito | Detalles |
|---|---|
| Complemento | Custom Login for WooCommerce instalado y activo |
| WooCommerce | Instalado y activo |
| Acceso | Una cuenta que puede administrar la configuración de WooCommerce |
| Valores de color | Tus colores de marca como códigos hexadecimales, por ejemplo #1e40af |
Paso 1: Abre la pestaña Diseño
- Ve a WooCommerce → Custom Login en tu administrador de WordPress.
- Haz clic en la pestaña Diseño.
Los ajustes de color se encuentran en sus propias secciones: Colores del Panel, Colores del Botón, Colores del Botón de Promoción, Colores del Enlace y Colores del Campo. Visualización de Promoción en Móvil se encuentra debajo de ellos.
Cada color tiene una muestra de color y un pequeño cuadro de texto. Haz clic en la muestra para elegir un color visualmente. O escribe un código hexadecimal directamente en el cuadro de texto.
Paso 2: Establecer los colores del panel
La sección Colores del Panel establece los colores de fondo y de texto para los dos lados de una página de inicio de sesión dividida. El lado izquierdo contiene tu formulario de inicio de sesión. El lado derecho contiene tu mensaje promocional.
| Ajuste | Lo que cambia | Predeterminado |
|---|---|---|
| Fondo del Panel Izquierdo | Fondo detrás del formulario de inicio de sesión | #ffffff |
| Texto del Panel Izquierdo | Color del texto en el lado del formulario | #333333 |
| Fondo del Panel Derecho | Fondo detrás del mensaje promocional | #1e40af |
| Texto del Panel Derecho | Color del texto en el lado de la promoción | #ffffff |
Elige un fondo y un color de texto con un fuerte contraste. Por ejemplo, texto claro sobre un fondo oscuro se mantiene fácil de leer, mientras que texto gris sobre un fondo gris pálido no lo hace.
Paso 3: Establecer los colores del botón
La sección Colores del Botón da estilo a tu botón de inicio de sesión. El paso del ratón (hover) significa el momento en que un cliente mueve su ratón sobre el botón. Un color diferente al pasar el ratón les indica que el botón está listo para hacer clic.
| Ajuste | Lo que cambia | Predeterminado |
|---|---|---|
| Fondo del Botón | Color del botón de inicio de sesión | #3b82f6 |
| Texto del botón | Color de las palabras del botón | #ffffff |
| Fondo del botón al pasar el ratón | Color del botón cuando el ratón está sobre él | #2563eb |
Un color al pasar el ratón que sea ligeramente más oscuro que el color principal funciona bien.
Paso 4: Establecer los colores del botón de promoción
La sección Colores del botón de promoción aplica estilos al botón dentro de tu panel de promoción, como Aprende más. Estos colores solo importan cuando el panel de promoción está visible. Si desactivaste Activar sección de promoción en la pestaña Contenido, puedes omitir este paso.
| Ajuste | Lo que cambia | Predeterminado |
|---|---|---|
| Fondo del botón de promoción | Color del botón de promoción | #ffffff |
| Texto del botón de promoción | Color de las palabras del botón | #1e40af |
| Fondo del botón de promoción al pasar el ratón | Color del botón cuando el ratón está sobre él | #f3f4f6 |
| Borde del botón de promoción | Contorno alrededor del botón | #ffffff |
Asegúrate de que el botón destaque sobre el Fondo del panel derecho. Si ambos tienen el mismo color, el botón se mezcla con el panel.
Paso 5: Establecer los colores de los enlaces
La sección Colores de los enlaces aplica estilos al enlace ¿Has perdido tu contraseña? debajo del formulario de inicio de sesión.
| Ajuste | Lo que cambia | Predeterminado |
|---|---|---|
| Color del enlace | Color del enlace | #3b82f6 |
| Color del enlace al pasar el ratón | Color del enlace cuando el ratón está sobre él | #1d4ed8 |
Paso 6: Establecer los colores de los campos de entrada
La sección Colores de los campos de entrada aplica estilos a los cuadros de Dirección de correo electrónico y Contraseña.
| Ajuste | Lo que cambia | Predeterminado |
|---|---|---|
| Borde del campo de entrada | Contorno alrededor de cada cuadro | #d1d5db |
| Borde del campo de entrada al enfocar | Contorno mientras un cliente escribe en el cuadro | #3b82f6 |
El foco significa la caja en la que ha hecho clic un cliente. Un color de foco más intenso les muestra dónde están en el formulario.
Paso 7: Elige cómo se muestra la promoción en el móvil
En una pantalla ancha, el panel de promoción se sitúa junto al formulario de inicio de sesión. En un teléfono no hay espacio para ambos. La sección Mobile Promo Display te permite decidir qué sucede en su lugar.
| Opción | Qué sucede en un teléfono |
|---|---|
| Ocultar en el móvil | Solo se muestra el formulario de inicio de sesión. Esta es la opción predeterminada. |
| Apilar debajo del formulario de inicio de sesión | El panel de promoción se muestra debajo del formulario de inicio de sesión. |
Estas opciones se aplican a pantallas de aproximadamente 768 píxeles de ancho o menos. En Gradient Modern y Warm Organic, el cambio ocurre a 900 píxeles. Stack below login form solo tiene efecto cuando Enable promo section está activado.
Elige Hide on mobile para un inicio de sesión más rápido y limpio. Elige Stack below login form cuando tu promoción contenga una oferta que quieras que los compradores del móvil vean.
Paso 8: Guarda y comprueba tu página de inicio de sesión
- Haz clic en Save Settings.
- Cierra sesión o abre una ventana privada del navegador.
- Visita
tuTienda.com/loginpara ver los nuevos colores. - Pasa el ratón por encima del botón de inicio de sesión para comprobar su color al pasar el ratón.
- Pasa el ratón por encima del enlace ¿Has olvidado tu contraseña? para comprobar su color al pasar el ratón.
- Abre la página en tu teléfono para comprobar el diseño móvil.
Qué colores utiliza cada plantilla
Cada plantilla lee tu configuración de color, pero algunas plantillas también establecen algunos colores propios. Esos colores de plantilla prevalecen sobre la configuración correspondiente. Classic Split sigue todos tus colores. Las otras plantillas conservan parte de su aspecto integrado, por lo que algunas configuraciones no tienen un efecto visible allí.
| Ajuste | Clásica Dividida | Tarjeta Centrada | Gradiente Moderno | Modo Oscuro | Orgánico Cálido |
|---|---|---|---|---|---|
| Fondos del panel | Sí | No | No | No | No |
| Texto del panel | Sí | Sí | Parcialmente | No | No |
| Fondo del botón y Fondo del botón al pasar el ratón | Sí | Sí | No | No | No |
| Texto del botón | Sí | Sí | Sí | No | No |
| Colores de los enlaces | Sí | Sí | Sí | No | No |
| Borde del campo de entrada | Sí | No | No | No | No |
| Borde del campo de entrada al enfocar | Sí | Sí | No | No | No |
| Colores del botón de promoción | Sí | Solo teléfonos, cuando están apilados | Sí | Sí | Sí |
“Parcialmente” significa que las etiquetas del formulario usan tu color de texto, pero la plantilla establece sus propios colores de encabezado y de promoción. Centered Card oculta el panel de promoción en pantallas anchas, por lo que la configuración de promoción no tiene nada que colorear allí.
En todas las plantillas, Button Background también colorea la casilla de verificación Remember Me cuando está marcada.
Si deseas un control total de cada color, elige Classic Split. Para obtener instrucciones detalladas, consulta cómo elegir una plantilla de página de inicio de sesión.
Solución de problemas
#, y haz clic en Save Settings. El plugin solo acepta códigos hexadecimales como #1e40af. Cualquier otra cosa, incluyendo un nombre de color como blue o un código al que le falte el #, se descarta y se muestra el color predeterminado en su lugar.Preguntas frecuentes
¿Necesita ayuda?
Custom Login for WooCommerce es un plugin premium, así que si tienes problemas, abre un ticket de soporte y nuestro equipo podrá ayudarte a configurarlo.
