Background

Documentación Segurishop

Agregar contenido a la portada

VOLVER

Para agregar contenido a la portada, es importante primero conocer la configuración general de esta. Entender también que según el plan que tengas, tienes acceso a distintas herramientas para el diseño de portada.

Conozcamos primero la configuración general, donde podremos definir qué mostrar y en qué cantidad para ciertos casos.

Mostrar tema/skin del editor: Esta herramienta nos permite mostrar lo que configuramos en Editor de Inicio > Editor de temas.
Mostrar la edición básica: Esta herramienta nos permite mostrar lo que configuramos en Editor de Inicio > Editor básico.
Mostrar productos destacados: Esta herramienta nos permite mostrar los productos que hemos destacado desde Administración > Productos > [Botón desplegable] > Agregar a destacados.
Mostrar Categorías del editor: Esta herramienta nos permite mostrar lo que configuramos en Editor de Inicio > Categorías en Inicio.
Mostrar productos más vistos: Esta herramienta nos permite mostrar los productos que tienen más cantidad de visitas en nuestro sitio web de forma descendente.
Mostrar productos más vendidos: Esta herramienta nos permite mostrar los productos que han tenido más ventas de forma descendente, limitando la muestra según la cantidad que determines.
Mostrar últimos productos: Esta herramienta nos permite mostrar los productos agregados más recientemente, pero puedes limitar la cantidad a mostrar.
Mostrar productos en oferta: Esta herramienta nos permite mostrar los productos que están en oferta actualmente, pero puedes limitar la cantidad a mostrar.

Podemos también ordenar esta lista de presentación seleccionando y arrastrando cada fila según queramos.
El campo que contiene números, representa la cantidad a mostrar, es decir, podemos definir si queremos que se muestren 4 productos que estén en oferta, 8 productos de los más vendidos y 6 de los productos más vistos, como se muestra en la imagen anterior.
 

Editor básico:

Este editor te permite agregar todo tipo de contenidos a tu portada. La diferencia con el editor de temas, es que requiere de conocimientos mayores para dejar el contenido adaptado a móviles. Puedes crear tablas, capas, listas, insertar fotos, videos, frames, enlaces, etc. Teniendo los conocimientos intermedios en HTML y CSS, el editor puede ser una herramienta muy potente.

  • Para insertar foto: Click en el ícono de imagen (segunda fila, tercer cuadro de objetos, primer ícono).
  • Para insertar tabla: Click en el ícono de tabla (segunda fila, tercer cuadro de objetos, segundo ícono).
  • Para insertar video Youtube o iframe: Click en el ícono de planeta (segunda fila, tercer cuadro de objetos, tercer ícono).
  • Para insertar capa (div): Click en el ícono DIV (segunda fila, primer cuadro de objetos, sexto ícono).
  • Para editar las propiedades de una imagen, hacer doble click sobre esta.
  • Para editar las propiedades de una tabla, hacer click derecho sobre la tabla > Propiedades de tabla.
  • Para conocer bien el resto de herramientas, solo basta con pasar el mouse sobre el ícono en la barra de herramientas y se desplegará un diálogo, indicando qué hace dicho ícono.

 

Editor de temas:

Este editor te permite agregar imagenes con una presentación pre-establecida. A diferencia del editor básico, con este no requieres ningún conocimiento para dejar una portada profesional y adaptada a móviles. Solo debes seguir las indicaciones que se dan en la misma página en cuanto al tamaño de los cuadros y enlaces.

Puedes definir el alto de los cuadros en los Skins normales, mientras que en los Skins Especiales, tendrás que asegurarte de diseñar cada cuadro según la forma y tamaño que quieras presentar en tu sitio. Aquí se puede requerir un poco de conocimentos en diseño básico (Photoshop por ejemplo y los pixeles).

Puedes ver el resultado de este ejemplo en la siguiente foto:

 

Categorías en Inicio:

Aquí puedes integrar las categorías de productos o secciones del sitio web a través de fotos en la portada.
Debes definir si la categoría es de producto o sección de la web. Luego, seleccionas la categoría o sección específica, cargas la imagen y listo.

 

Puedes ver cómo queda este recuadro en la siguiente imagen:

 

Recuerda que es importante tener configurado y marcado en Editor de Inicio > Configuración > Mostrar Categorías del editor.
Esta última imagen se obtiene configurando la muestra únicamente de Editor de temas y Categorías del Editor. La foto del deslizador ha sido suprimida en este ejemplo.

Desde el computador, al pasar el mouse sobre una de estas imágenes, podrás ver el siguiente efecto:
 

GIF de muestra con calidad reducida: