Personalización de WoodMart Login Registro Popup Estilos Tutorial

en uso Temas WoodMartAl crear un sitio web de comercio electrónico, la ventana emergente de inicio de sesión/registro es una de las primeras interfaces con las que se encontrarán los usuarios. Si no tiene estilo o no coincide con el estilo de su marca, puede restar valor a la primera impresión que el usuario tenga de su sitio.WoodMart ya ofrece una ventana emergente de inicio de sesión y registro muy flexible, que puede utilizar para crear su propia ventana emergente de inicio de sesión/registro.personalizaciónEl enfoque estilizado hace que este módulo esté más en consonancia con la visión de la marca y refuerza la sensación general de profesionalidad y reconocimiento.

Paso 1: Activar y previsualizar las ventanas emergentes de inicio de sesión/registro

Antes de empezar, asegúrate de que tienes WoodMart activado en la configuración de tu tema.ventana emergenteFunción de inicio de sesión:

• Vaya al backend de WordPress y haga clic en WoodMart > Configuración del tema.
• mostrar (una entrada) Mi cuenta Página de configuración.
• garrapata Pestañas de inicio de sesión/registro(Activar la función de inicio de sesión emergente).

• Después de guardar, visite la página de inicio de su sitio web, haga clic en el "Icono de usuario" de la esquina superior derecha y asegúrese de que la ventana emergente aparece normalmente.

El estilo de ventana emergente que ves en este punto es el aspecto base que WoodMart proporciona por defecto.

Paso 2: Realice ajustes básicos de estilo con el panel Configuración del tema

El poder de WoodMart es que muchos estilos se pueden ajustar a través del panel de temas sin necesidad de escribir código:

• entrar en WoodMart > Configuración del tema > Estilos > BotonesEl color, el tamaño de letra, las esquinas redondeadas, etc. de los botones de la ventana emergente pueden modificarse de manera uniforme.

• salir para Estilo > FormulariosPuede modificar el estilo del cuadro de entrada del formulario, como el color del borde, el color del texto de entrada, el color de fondo, etc.

• existe Creador de cabeceras En el caso del portal de acceso emergente superior, también puede cambiar el estilo de su icono o la fuente de la etiqueta.

Se recomienda mantener la coherencia del estilo de la ventana emergente con el esquema de colores de todo el sitio, resaltando el tono principal del color de la marca, y al mismo tiempo prestar atención al contraste entre el texto del botón y el fondo, para evitar que los usuarios lo vean.

Paso 3: embellecer aún más los detalles con CSS personalizado

Si la configuración incorporada no satisface la demanda, puede añadir un poco deCSS personalizadopara realizar ajustes de estilo más precisos. He aquí algunos ejemplos de personalizaciones habituales:

Modificar el color de fondo y las esquinas redondeadas de la ventana emergente

.wd-popup.popup-login {
  color de fondo: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
}

Modificar el borde del cuadro de entrada y el estado de enfoque

.woocommerce-form .form-row input.input-text {
  borde: 1px sólido #ccc;
  input-text { border: 1px solid #ccc; border-radius: 6px;
  input-text { border: 1px solid #ccc; border-radius: 6px; padding: 10px; font-size: 14px; font-size: 14px
  font-size: 14px; }
}

.woocommerce-form .form-row input.input-text:focus {
  box-shadow: 0 0 0 1px #162ae8; }
  box-shadow: 0 0 0 1px #162ae8;
}

Cambiar el color y el tipo de letra de los botones

.button.wd-login-submit {
  color de fondo: #162ae8;
  font-weight: 600; font-weight: 600; wd-login-submit { background-colour: #162ae8; color: #fff; wd-login-submit
  
  border-radius: 6px; }
}

.button.wd-login-submit:hover {
  background-color: #0d1cb0; } .button.
}

Pegue el código CSS anterior en el campo WordPress Backend > Apariencia > Personalización > CSS Extra en, guárdelo y actualice la página principal para ver el efecto.

Paso 4: Formularios multilingües o de varios pasos (opcional)

Si su sitio web está orientado a usuarios multilingües, puede aprovechar las ventajas del WPML tal vez Polylang WoodMart es compatible con estos plugins y sólo necesita traducir el texto correspondiente del formulario de acceso/registro.

Además, si desea que el proceso de registro sea un formulario de varios pasos, como rellenar una dirección de correo electrónico en el primer paso y establecer una contraseña en el segundo, puede combinar los botones Código corto de inicio de sesión personalizado O utilice un plugin de ventanas emergentes de terceros integrado en la aplicación Pop-ups de WoodMarten la estructura de activación.

Consejo: evite personalizarlo en exceso y procure que sea sencillo y fácil de usar.

Los estilos personalizados pueden realzar visualmente la marca, pero no hay que exagerar el diseño y comprometer laformulario (documento)de usabilidad. He aquí algunas sugerencias:

• Los cuadros de entrada deben tener límites claros y espacio suficiente para evitar que sean demasiado compactos.
• Se recomienda que todos los botones tengan un texto claro, colores contrastados y una respuesta evidente al hacer clic.
• Priorizar si el contenido emergente es altoMóvil adaptableefecto para evitar derrames.

resúmenes

Personalizar el estilo de la ventana emergente de inicio de sesión/registro de WoodMart no es complicado, ya sea que desee optimizar las fuentes de color de una manera pequeña o hacer una unificación estilística visual en profundidad, se puede hacer con ajustes incorporados y un poco de CSS. Con las ideas claras y unos pocos retoques, la primera impresión de su sitio web será aún mejor.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres