Widget de producto: Diseño
3 min de lectura
Utiliza las opciones debajo para diseñar un widget de producto perfecto.
Fondos y bordes
- Opacidad y color del fondo: haz clic en la caja de color para seleccionar un color del fondo. Arrastra la barra para cambiar la opacidad.
- Color y ancho del borde (px): haz clic en la caja de color para seleccionar un color del borde para el widget y arrastra la barra para cambiar el ancho del borde.
- Ancho del divisor (px) y color: haz clic en la caja de color para seleccionar el color del divisor y arrastra la barra para cambiar el ancho del divisor.
- Longitud del divisor (px): arrastra la barra parar cambiar la longitud del divisor entre el nombre y el precio.
Texto
Selecciona un color de texto y haz clic en el ícono de Texto 
para elegir la fuente de lo siguiente:
para elegir la fuente de lo siguiente: - Nombre del producto
- Precio del producto
- Desglose del precio (por ejemplo, $2,50/oz)
- Mensaje de Agotado
Botón
- Estilo del botón: haz clic para seleccionar un estilo del botón.
- Color y opacidad del relleno: haz clic en la caja de color para seleccionar un color del relleno del botón. Arrastra la barra para cambiar la opacidad.
- Color y ancho del borde (px): haz clic en la caja de color para seleccionar el color del borde del botón y arrastra la barra para cambiar el ancho del borde.
- Radio de la esquina (px): arrastra la barra para cambiar el radio de la esquina del botón (entre más grande el radio, más redondo el botón).
- Tamaño del botón: arrastra la barra para cambiar el tamaño del botón.
- Fuente y color del texto: haz clic en la caja de color para seleccionar un color del texto y haz clic en el ícono de Texto para seleccionar una fuente para el botón.
Pasar el cursor
Decide cómo cambia el widget de producto cuando los clientes pasan el cursor sobre él:
- Nada: el widget no cambia.
- Transparencia: Uun color de superposición aparece.
- Haz clic en la caja de color para seleccionar un color de superposición. Arrastra la barra para cambiar la opacidad.
- (Opcional) Haz clic en la caja de color para seleccionar el color del borde y arrastra la barra para cambiar el ancho del borde.
- (Opcional) Haz clic en la palanca de Zoom al pasar el mouse:
- Habilitado: cuando el cursor del cliente pasa sobre la imagen, se hace zoom in.
- Deshabilitado: cuando el cursor del cliente pasa sobre la imagen, no se hace zoom.
- Zoom:
- (Opcional) Haz clic en la caja de color para seleccionar un color de superposición. Arrastra la barra para cambiar la opacidad.
- (Opcional) Haz clic en la caja de color para seleccionar el color del borde y arrastra la barra para cambiar el ancho del borde.
- Palanca de Zoom al pasar el mouse: Asegúrate de que la palanca este habilitada para conservar el zoom.
- Borde:
- (Opcional) Haz clic en la caja de color para seleccionar un color de superposición. Arrastra la barra para cambiar la opacidad.
- Haz clic en la caja de color para seleccionar el color del borde y arrastra la barra para cambiar el ancho del borde.
- (Opcional) Haz clic en la palanca de Zoom al pasar el mouse:
- Habilitado: cuando el cursor del cliente pasa sobre la imagen, se hace zoom in.
- Deshabilitado: cuando el cursor del cliente pasa sobre la imagen, no se hace zoom.
Cinta
Selecciona el diseño de cintas. Para aprender como agregar cintas a los productos, haz clic aquí.
- Color y opacidad del relleno: haz clic en la caja de color para seleccionar un color de cinta. Arrastra la barra para cambiar la opacidad de la cinta.
- Color del texto: selecciona un color del texto para la cinta.
¿Te ha sido útil?
|