Saltar al contenido

Cómo usar el editor de templates ​

El editor de templates es un editor de imágenes completo de arrastrar y soltar. Puedes añadir, eliminar y reordenar las capas del template. También puedes editar las propiedades de cada elemento, como el texto, el color y el tamaño. Al abrir el editor, se carga un producto aleatorio en el template, pero puedes cambiar fácilmente a otro producto con los botones de búsqueda o de producto aleatorio.

Es importante tener en cuenta que no diseñas el template para un producto concreto. El producto aleatorio es solo un marcador de posición que te ayuda a ver cómo quedará el template con un producto.

Resumen de las secciones ​

El editor de templates se divide en varias secciones:

  • Canvas: aquí es donde diseñas tu template
  • Barra de elementos: aquí puedes añadir elementos al canvas
  • Panel de capas: aquí puedes ver todos los elementos del canvas y seleccionarlos
  • Panel de atributos: aquí puedes editar las propiedades del elemento seleccionado
  • Barra superior: aquí puedes realizar distintas acciones, como guardar, descargar y salir del editor
  • Formatos: sección en el centro, debajo del canvas, donde puedes cambiar entre los distintos formatos

Añadir elementos ​

Puedes añadir elementos al canvas haciendo clic en ellos en la barra de elementos.

Para añadir una imagen dinámica del producto, haz clic en el botón "Imagen" de la barra de elementos y luego selecciona "Dynamic Product Image".

Puedes tener varias imágenes dinámicas del producto en un mismo template. Es útil si quieres mostrar más de una de las imágenes del producto. Una vez que hayas añadido una imagen dinámica del producto, puedes elegir qué imagen del producto quieres mostrar: haz clic en la imagen y selecciona la imagen en el menú desplegable del panel de atributos.

Editar elementos ​

Para editar un elemento, solo tienes que hacer clic en él en el canvas o en el panel de capas. Se abrirá el panel de atributos en el lado derecho de la pantalla. En este panel puedes editar las propiedades del elemento. Las propiedades disponibles dependen del tipo de elemento que hayas seleccionado.

Mover y cambiar el tamaño de los elementos ​

Para mover un elemento, haz clic en él y arrástralo por el canvas. Para cambiar su tamaño, haz clic y arrastra los controladores de tamaño de las esquinas del elemento. Si quieres cambiar el tamaño sin modificar la relación de aspecto, mantén pulsada la tecla shift mientras arrastras los controladores. Si quieres cambiar el tamaño desde el centro, mantén pulsada la tecla option (macOS) o alt (Windows) mientras arrastras los controladores.

Vista previa de productos ​

Cargamos automáticamente un producto aleatorio en el editor. Sin embargo, siempre puedes cambiar el producto que se usa haciendo clic en el botón "Buscar producto" en la esquina superior derecha del editor.

Panel de propiedades ​

Cuando seleccionas una capa, el panel de propiedades del lado derecho muestra las propiedades de esa capa. El panel está dividido en tres pestañas (Estilo, Condiciones y Producto).

  • Estilo: la pestaña de estilo te permite editar las propiedades visuales del elemento seleccionado.
  • Condiciones: la pestaña de condiciones te permite definir condiciones para el elemento seleccionado. Por ejemplo, puedes definir una condición para que el elemento solo sea visible si el producto está en oferta. Lee más sobre las condiciones aquí.
  • View product: la pestaña de producto te permite ver todos los datos disponibles del producto.

Filtros de imagen ​

Los filtros son una herramienta potente que puede transformar el ambiente y el tono de una imagen con solo unos clics. Tanto si quieres darle un aire vintage con sepia o solarizado, hacer que los colores destaquen con HSL o HSV, o darle a tu imagen un aspecto grunge con ruido o desenfoque, los filtros te ayudan a conseguirlo con facilidad.

Este es un breve resumen de los filtros que puedes elegir:

INFO

En los ejemplos, el filtro solo se aplica al fondo, no a la zapatilla.