Colores y plantillas
Personaliza los colores, los botones y las plantillas de un bloqueo concreto y consulta el resultado en vivo antes de guardar.
Cada bloqueo de Sami B2B Lock, Password Protect tiene sus propios ajustes de diseño (colores, estilo de botón y un par de interruptores de visualización) completamente independientes de los de cualquier otro bloqueo. Esto significa que tu catálogo mayorista protegido con código de acceso puede verse totalmente distinto de tu mensaje «inicia sesión para ver esta colección», aunque ambos se creen con la misma aplicación. Nada de lo que hagas en esta página afecta a ningún otro bloqueo.
Abre el panel de diseño de un bloqueo
Sección titulada «Abre el panel de diseño de un bloqueo»- Abre la aplicación y ve a Locks; después abre el bloqueo cuyo estilo quieres cambiar (o crea uno nuevo).
- En la pestaña Lock setup, busca la tarjeta Preview a la derecha y haz clic en Customize templates.
Haz clic en Customize templates en la tarjeta Preview del editor de bloqueos.
- Se abre el panel Customize templates a pantalla completa. La barra lateral izquierda enumera las pantallas que este bloqueo puede mostrar a quien compra: Placeholder card, Notification message, Passcode, Subscription form, Confirmation prompt, Secret link y Country Restriction, además de un control Collapse sidebar en la parte inferior. Haz clic en una pantalla para cargar sus ajustes de Translation y Design en la columna central, con una vista previa en vivo a la derecha.
El panel Customize templates: elige una pantalla a la izquierda, dale estilo en el centro y comprueba el resultado a la derecha.
- En la columna central, desplázate más allá de la sección Translation (que se explica en Traducir los mensajes del bloqueo) hasta la sección Design que hay debajo. Todo lo que se explica en esta guía está en esa sección Design.
Colores
Sección titulada «Colores»Cada color es una muestra con su valor hexadecimal al lado. Haz clic en la muestra (o en el icono del lápiz) para abrir el selector, elige o escribe un color y la vista previa en vivo de la derecha se actualiza al instante.
Para la pantalla Passcode, por ejemplo, tienes:
| Campo | Aplica estilo a |
|---|---|
| Color button text | La etiqueta del botón Submit |
| Color text | El texto del mensaje de bloqueo |
| Color input passcode | El texto que escribe quien compra en el campo del código de acceso |
| Box shadow color | La sombra paralela de la tarjeta, cuando Box shadow está activado |
| Background button | El relleno del botón Submit |
| Background notification | El fondo de la tarjeta de bloqueo |
| Background input passcode | El relleno del campo del código de acceso |
Cada color muestra una muestra y su valor hexadecimal; haz clic para abrir el selector.
Interruptores de sombra y de imagen del logotipo
Sección titulada «Interruptores de sombra y de imagen del logotipo»Dos interruptores están en la parte superior de la sección Design, encima de los selectores de color:
- Box shadow: agrega una sombra paralela alrededor de la tarjeta de bloqueo (su color se define en Box shadow color, más abajo).
- Use image: muestra la ilustración del bloqueo en la tarjeta. Desactívalo para una tarjeta solo con texto.
Activa Box shadow o Use image para cambiar cómo se presenta la tarjeta de notificación.
Placeholder card
Sección titulada «Placeholder card»Selecciona Placeholder card en la barra lateral para dar estilo a lo que ve quien compra en lugar de un producto bloqueado cuando aparece en una lista, como una página de colección.
La pantalla Placeholder card controla cómo aparecen los artículos bloqueados en los listados de productos.
CSS personalizado por bloqueo
Sección titulada «CSS personalizado por bloqueo»En la parte inferior de la sección Design hay un editor Custom css. Todo lo que escribas aquí se aplica solo a los widgets de este bloqueo. Es un buen lugar para un pequeño ajuste que necesite tu tema (un tamaño de fuente, un margen) sin tocar la hoja de estilos de tu propio tema.
Cada bloqueo tiene su propio editor Custom css para estilos puntuales.
El panel de vista previa en vivo
Sección titulada «El panel de vista previa en vivo»La columna derecha del panel Customize templates siempre muestra una vista previa en vivo, con el estilo de la tienda online, de la pantalla que tengas seleccionada: tus cambios de color y estilo aparecen al instante, sin guardar. En la parte superior del panel, un selector Desktop preview / Mobile preview te permite comprobar cómo se muestra la misma pantalla en cada tamaño.
Cambia entre la vista previa de escritorio y la de móvil para comprobar ambos diseños antes de guardar.
Como todo este panel está dentro del editor de un bloqueo concreto, la vista previa siempre refleja los ajustes propios de ese bloqueo (contenido, reglas y diseño), no un ejemplo genérico.