Editor de Plantilla

Editor gráfico online para modificar la plantilla de tu tienda online. Desde este editor podrás añadir o eliminar bloques y elementos en la plantilla.
También podrás editar los elementos que componen la plantilla: modificar tamaños, tipos de letra, colores, etc...

Índice:




Introducción

La vista del editor gráfico de plantillas es la siguiente:

Funciones en la barra de herramientas:

Aquí se selecciona la vista por dispositivos. Por defecto el editor se muestra en vista de escritorio.
editor para la plantilla web.
editor de la plantilla de la ficha de productos. Ficha pequeña del producto, aquí aparece imagen principal, nombre de producto, precio, botón para compra y/o botón para acceder a las propiedades del producto.
editor de la plantilla para las propiedades del producto. Aquí aparecen todos los datos del producto: imagen principal, imágenes adicionales, descripciones, cantidades, stock, precios, descuentos, comentarios, etc...
editor de la plantilla para editar los elementos del carrito de compras.
activa o desactiva los marcos de los elementos de la plantilla.
muestra una previsualización de la plantilla.
clic para mostrar el editor de plantilla a pantalla completa.
mostrar el código fuente de la plantilla.
deshacer últimos cambios realizados.
rehacer últimos cambios realizados.
guardar plantilla.
restaurar plantilla a su estado original.
editor de estilos CSS del elemento HTML seleccionado.
configuración básica del elemento HTML seleccionado.
visor de la estructura de capas y bloques de la plantilla.
para insertar bloques o elementos en la plantilla.



Insertar elementos o bloques en la plantilla

Para insertar elementos en la plantilla debe de hacer clic en la herramienta :

Para insertar un elemento de en la plantilla solo tienes que hacer clic en el bloque y luego arrastrarlo hacia el lugar a donde quieres ubicarlo:

Según el tipo de plantilla ( Plantilla web, Ficha de Productos, Propiedades de Producto, Carrito) hay bloques determinados para cada una.

A continuación se va a detallar como la función de cada uno de los bloques disponibles para insertar según el tipo de plantilla.

PLANTILLA WEB :

crea una capa contenedora.
inserta 2 capas cotenedoras ocupando el 50% del ancho del tamaño en cada una de ellas.
inserta 3 capas contenedoras ocupando 1 tercio en cada una de ellas.
inserta 4 capas contenedoras ocupando el 25% en cada una de ellas.
crea 2 capas contenedoras, una de ellas ocupa aprox. el 30% del ancho y la otra el 70% del ancho.
inserta una imagen en la plantilla.
bloque para insertar una capa de texto.
inserta una capa de texto con un encabezado para introducir un título para el contenido.
para insertar un vídeo en la plantilla. Tienes diferentes opciones de configuración: vídeo HTML5, vídeo de YouTube y vídedo de Vimeo.
inserta una mapa de ubicación de Google Maps. Una vez insertado hay que editar la configuración con la dirección exacta.
introduce un hipervínculo. Una vez insertado hay que editar la configuración del link para introducir la URL de destino.
inserta una capa de texto con diseño de cita.
introduce el tag {carrito} en la plantilla. Este tag {carrito} se sustituye automáticamente por el carrito de compras en la tienda online.
inserta el tag {buscador} en la plantilla. Este tag {buscador} se reemplaza automáticamente por el buscador de productos de la tienda online.
inserta el tag {Menú Secciones Cabecera} en la plantilla. Este tag {Menú Secciones Cabecera} se sustituye automáticamente por el menú de secciones de contenido para la cabecera de la tienda online.
IMPORTANTE: Este menú está diseñado para ser utilizado en la cabecera de la web, asegúrate de que inserta este menú en la parte superior de la plantilla (cabecera).
inserta el tag {Menú Secciones Pie} en la plantilla. Este tag {Menú Secciones Pie} se sustituye automáticamente por el menú de secciones de contenido del pie de la tienda online.
IMPORTANTE: Este menú está diseñado para ser utilizado en el pie de la web, asegúrate de que inserta este menú en la parte inferior de la plantilla (pie).
inserta el tag {Menú Categorías Lateral} en la plantilla. Este tag{Menú Categorías Lateral} se sustituye automáticamente por el menú de categorías estándar de productos en el lateral de la tienda online.
IMPORTANTE: Este menú está diseñado para ser utilizado en los laterales de la web, asegúrate de que insertas este menú en algún lateral (izquierdo o derecho) de la plantilla. Si la plantilla tiene un diseño sin laterales no lo utilices.
inserta el tag {Menú Categorías Cabecera} en la plantilla. Este tag {Menú Categorías Cabecera} se sustituye automáticamente por el menú de categorías de productos para la cabecera de la tienda online.
IMPORTANTE: Este menú está diseñado para ser utilizado en la cabecera de la web, asegúrate de que inserta este menú en la parte superior de la plantilla (cabecera).
inserta el tag {Menú Categorías / Secciones Cabecera} en la plantilla. Este tag {Menú Categorías / Secciones Cabecera} se reemplaza automáticamente por el menú híbrido de categorías de productos y secciones de contenido para la cabecera de la tienda online.
IMPORTANTE: Este menú está diseñado para ser utilizado en la cabecera de la web, asegúrate de que inserta este menú en la parte superior de la plantilla (cabecera).
inserta el tag {Noticias} en la plantilla. Este tag {Noticias} se sustituye automáticamente por las noticias introducidas en tu tienda online.
inserta el tag {Menú Categorías en Árbol} en la plantilla. Este tag {Menú Categorías en Árbol} se sustituye automáticamente por el menú de categorías estándar de productos en el lateral de la tienda online.
IMPORTANTE: Este menú está diseñado para ser utilizado en los laterales de la web, asegúrate de que insertas este menú en algún lateral (izquierdo o derecho) de la plantilla. Si la plantilla tiene un diseño sin laterales no lo utilices.

FICHA DE PRODUCTOS :

Para acceder a esta plantilla tienes que hacer clic en del menú de herramientas:

Bloques Disponibles:

crea una capa contenedora.
inserta 2 capas cotenedoras ocupando el 50% del ancho del tamaño en cada una de ellas.
inserta una imagen en la plantilla.
bloque para insertar una capa de texto.
introduce un hipervínculo. Una vez insertado hay que editar la configuración del link para introducir la URL de destino.
inserta una imagen que representa la imagen del producto en la plantilla. Esta imagen se sustituye automáticamente por la imagen del producto en la ficha.
insertar el tag {Nombre_Producto} en la plantilla, que en las fichas de producto de la tienda online se sustituye por el nombre real del producto.
insertar el tag {Precio_Producto} en la plantilla, que en las fichas de producto de la tienda online se sustituye por el precio real del producto.
insertar el tag {Valoraciones} en la plantilla, que en las fichas de producto de la tienda online se sustituye por la puntuación del producto con las valoraciones.
insertar el tag {stock} y {stock_disp} en la plantilla, que en las fichas de producto de la tienda online se sustituye por la disponibilidad del producto y con las unidades del producto disponibles respectivamente.
añade el botón en la ficha de producto para acceder a las descripción completa del producto.
añade el botón en la ficha de producto para añadir el producto directamente al carrito.

PROPIEDADES DEL PRODUCTO :

Para acceder a esta plantilla tienes que hacer clic en del menú de herramientas:

Bloques disponibles:

crea una capa contenedora.
inserta 2 capas cotenedoras ocupando el 50% del ancho del tamaño en cada una de ellas.
inserta 3 capas contenedoras ocupando 1 tercio en cada una de ellas.
inserta 4 capas contenedoras ocupando el 25% en cada una de ellas.
crea 2 capas contenedoras, una de ellas ocupa aprox. el 30% del ancho y la otra el 70% del ancho.
inserta una imagen en la plantilla.
bloque para insertar una capa de texto.
inserta una capa de texto con un encabezado para introducir un título para el contenido.
para insertar un vídeo en la plantilla. Tienes diferentes opciones de configuración: vídeo HTML5, vídeo de YouTube y vídedo de Vimeo.
inserta una mapa de ubicación de Google Maps. Una vez insertado hay que editar la configuración con la dirección exacta.
introduce un hipervínculo. Una vez insertado hay que editar la configuración del link para introducir la URL de destino.
inserta una capa de texto con diseño de cita.
inserta una imagen que representa la imagen principal del producto en la plantilla. Esta imagen se sustituye automáticamente por la imagen principal del producto en la ficha de propiedades del producto.
inserta una imagen que representa las imágenes adicionales del producto en la plantilla. Esta imagen se reemplaza automáticamente por las imágenes adicionales creadas para el producto.
insertar el tag {Nombre_Producto} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por el nombre real del producto.
insertar el tag {Valoraciones} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por la puntuación del producto con las valoraciones.
insertar el tag {stock} y {stock_disp} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por la disponibilidad del producto y con las unidades del producto disponibles respectivamente.
añade el botón en las propiedades de producto para añadir el producto directamente al carrito.
insertar el tag {Codigo_Producto} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por el código del producto.
insertar el tag {Descripcion_Corta} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por la descripción corta del producto.
insertar el tag {Descripcion_Larga} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por la descripción larga del producto.
insertar el tag {Contenido_1} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por el contenido adicional 1 del producto.
insertar el tag {Contenido_2} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por el contenido adicional 2 del producto.
insertar el tag {Fabricante} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por el nombre del fabricante del producto.
insertar una imagen que representa los iconos de las redes sociales para compartir el producto.
insertar el tag {Campo_Cantidad} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por el campo para poder introducir la cantidad de productos a comprar.
insertar el tag {Tabla_Descuentos_Cantidad} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por la tabla de descuentos por volumen del producto.
insertar el tag {Variaciones_Producto} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por el selector de variaciones del producto.
insertar el tag {Atributos_Producto} en la plantilla, que en las propiedades de producto de la tienda online se sustituye por el selector de atributos del producto.

CARRITO :

Para acceder a esta plantilla tienes que hacer clic en del menú de herramientas:

Bloques disponibles:

crea una capa contenedora.
inserta 2 capas cotenedoras ocupando el 50% del ancho del tamaño en cada una de ellas.
inserta 3 capas contenedoras ocupando 1 tercio en cada una de ellas.
inserta 4 capas contenedoras ocupando el 25% en cada una de ellas.
inserta una imagen en la plantilla.
introduce un hipervínculo. Una vez insertado hay que editar la configuración del link para introducir la URL de destino.
bloque para insertar una capa de texto.
inserta una capa de texto con un encabezado para introducir un título para el contenido.



Editor Estilos CSS de los Elementos de la plantilla

Para editar los estilos de algún componente de la plantilla tiene que hacer clic en el elemento para seleccionarlo y luego clic en la herramienta :

El editor de estilos CSS se divide en 4 grupos: General, Dimensiones, Tipografía y Decoración.

General

Dentro de "General" puedes editar lo siguiente:

  • Flotar: esta propiedad posiciona la caja (capa) moviéndola todo lo posible a la izquierda o derecha de su posición original. Los tres valores de esta propiedad se interpretan de la siguiente manera:
    • No: la caja no se desplaza respecto de su posición original. Además de ser el valor por defecto de esta propiedad.
    • izquierda: la caja se desplaza todo lo posible a la izquierda de la posición en la que se encontraba. El resto de elementos de la página se adaptan para mostrarse a su derecha.
    • derecha: la caja se desplaza todo lo posible a la derecha de la posición en la que se encontraba. El resto de elementos de la página se adaptan para mostrarse a su izquierda.
  • Mostrar: establece el tipo de la caja (capa) que genera cada elemento. Los valores a editar de esta propiedad son los siguientes:
    • Bloque: ocupa todo el espacio disponible hasta el final de su línea, aunque sus contenidos no ocupen todo el sitio.
    • En línea: ocupa el espacio necesario para mostrar sus contenidos.
    • En línea - bloque: esta caja se comporta como bloque y los elementos que le rodean se comportan como en línea.
    • Ocultar: oculta el elemento.
  • Posición: posiciona los elementos de las siguientes formas:
    • Estática: es el valor que se aplica por defecto. Con esta propiedad no se tiene en cuenta los valores introducidos en arriba, derecha, abajo y izquierda.
    • Relativa: también se corresponde con la posición normal de los elementos como static, pero en este caso si afecta los valores introducidos en arriba, derecha, abajo y izquierda.
    • Absoluta: corresponde al posicionamiento absoluto. En este caso, la referencia respecto de la que se desplaza un elemento no es su posición original, sino los bordes superior/inferior/derecho/izquierdo del elemento en el que se encuentra, es decir, de su elemento padre.
    • Anclado: es una variante del posicionamiento absoluto. La posición inicial del elemento se calcula de la misma manera que con la propiedad position: absolute. La diferencia es que una vez posicionado, el elemento ya no se mueve nunca de esa posición. Si haces scroll en la página del navegador, el elemento siempre se muestra en la misma posición de la pantalla.

Dimensiones

IMPORTANTE: los valores a introducir en los diferentes aparatos están por defecto en píxeles. Puede cambiar a porcentaje haciendo clic aquí en cada uno de los apartados:

En la sección de "Dimensiones" puedes editar lo siguiente:

  • Ancho: establece la anchura del elemento.
  • Alto: esteblece la altura del elemento.
  • Margen superior: establece la anchura del margen superior del elemento.
  • Margen derecho: establece la anchura del margen derecho del elemento.
  • Margen inferior: establece la anchura del margen inferior del elemento.
  • Margen izquierdo: establece la anchura del margen izquierdo del elemento.
  • Relleno superior: establece la anchura de la zona de relleno superior del elemento.
  • Relleno derecho: establece la anchura de la zona de relleno derecho del elemento.
  • Relleno inferior: establece la anchura de la zona de relleno inferior del elemento.
  • Relleno izquierda: establece la anchura de la zona de relleno izquierdo del elemento.

Tipografía

En la sección de "Tipografía" puedes editar lo siguiente:

  • Fuente: establece la fuente o tipo de letra. Clic en el selector para seleccionar el tipo de letra.
  • Tamaño Fuente: establece el tamaño de letra. Inserte el valor en píxeles del tamaño
  • Grosor: establece el grosor de cada letra. Clic para seleccionar los grosores disponibles: normal, fina, negrita, etc.
  • Espaciado: establece la separación entre las letras del texto. Inserta el valor en Píxeles.
  • Color: establece el color de la fuente.
  • Interlineado: establece la alineación del contenido de un elemento de bloque. Clic para alinear a la izquierda, centro, derecha o justificado el texto.
  • Sombra para el Texto: agrega una sombra al texto. Clic en "+" para añadir una sobra al texto.

Decoración

Dentro de "Decoración" puedes editar lo siguiente:

  • Opacidad: establece la transparencia del elemento seleccionado. El valor por defecto es del 100%, clic para agregar transparencia al elemento.
  • Color de fondo: establece el color de fondo de un elemento. Clic en el cuadro de color para realizar el cambio.
  • Imagen de fondo: establece una imagen de fondo para la capa o elemento seleccionado. Clic en "+" para agregar una imagen de fondo, acto seguido deberá de seleccionar la imagen y establecer algunos valores básicos.
  • Radio del Borde: redondea las 4 esquinas de un elemento con borde.
  • Radio superior izquierdo: redondea solo la esquina superior izquierda de un elemento con borde.
  • Radio superior derecho: redondea solo la esquina superior derecha de un elemento con borde.
  • Radio inferior derecho: redondea solo la esquina inferior derecha de un elemento con borde.
  • Radio inferior izquierdo: redondea solo la esquina inferior izquierda de un elemento con borde.
  • Ancho del Borde: establece el grosor del borde. Inserta el valor en píxeles o porcentaje.
  • Estilo del Borde: selecciona aquí el estilo de borde.
  • Color del Borde: clic en la caja de color para definir un color para el borde.
  • Sombra para la Caja: clic en "+" para crear una sombra para el elemento o capa seleccionada. Defina los valores de la sobra.



Editor de atributos HTML de los elementos de la plantilla

Para editar los atributos HTML de algún elemento, primero tienes que seleccionarlo y luego clic en :

Según el elemento que selecciones tendrá unos atributos u otros.

Imagen:

  • Alt: El atributo alt es para insertar un texto alternativo para la imagen. Es de especial utilidad de cara al posicionamiento, insertando palabras clave en dicho atributo.

Capa o Caja (div):

  • Id: identificador de la capa. Es muy importante que el Id del elemento no se repita en cualquier otro elemento.
  • Title: ofrece una descripción emergente a la capa o caja.

Link o enlace:

  • Title: ofrece una descripción emergente al enlace.
  • Href: la URL de destino del link.
  • Target: posibilidad de abrir en enlace en la misma ventana o en una nueva ventana.

 




Eliminar elementos o bloques

Para eliminar algún elemento de la plantilla solo tienes que seleccionarlo y presionar el botón "Suprimir" de tu teclado:

Si quieres deshacer los cambios y volver a recuperar los elementos eliminados haz clic en




Vídeos de ejemplo

Insertar logo en la plantilla:

Cambiar color de fondo en las cajas:

Cambiar color de los textos:

Insertar banners en la plantilla:

Insertar Mapa con dirección en la plantilla:

Cambiar Imagen de Fondo: