2.8.5 Apariencia< Ajustes < Panel del Gestor de Wakaprint

• 2.8.5.1 Apariencia - Introducción
• 2.8.5.2 Apariencia - Estructura
• 2.8.5.3 Apariencia - Textos
• 2.8.5.4 Apariencia - Logos
• 2.8.5.5 Apariencia - Tamaños de las imágenes
• 2.8.5.6 Apariencia - Slider página inicio
• 2.8.5.7 Apariencia - Menú principal público

2.8.5.1 Apariencia - Introducción

Desde la sección del gestor Otros->Apariencia se accede al menú de ajustes del tema (afectan a la vista pública). 

Más ajuste del tema (apariencia)

• En la sección Ajustes>Ajustes generales>Tema>Se presentan más opciones de personalización de la apariencia.
  
  
• En la sección de Ajustes> Scripts de terceros se pueden añadir elementos, modificar la apariencia, aplicar estilos, enlaces externos a archivos JavaScript y CSS, más etiquetas meta adicionales para incluir en el head. Perfecto para cargar bibliotecas externas como Bootstrap, jQuery o archivos SDK de redes sociales.
  
  
• Con el maquetador Builder disponible en paginas de contenido y desplegable de elementos del menú principal se puede también modificar la apariencia. Por ejemplo; el cuerpo de la página de inicio.
  
  

Observaciones sobre el tema

La plantilla del tema ha sido diseñada empleando como base el Framework de diseño Bootstrap 5, lo que significa que cada fila soporta un máximo de 12 columnas.

2.8.5.2 Apariencia - Estructura

Desde la sección del gestor Otros>Apariencia>Estructura se accede al menú de ajustes de estructura del tema (afectan a la vista pública). 

1. Se modifica el color primario del tema y el el color de fondo. 

Para modificar hacer clic en el círculo de color. Mostrará un selector de color. El color se puede especificar en hexadecimal, en RGB, en HSL y mediante selector.

2. Radio de las esquinas

El siguiente parámetro permite cambiar la apariencia de los ángulos en aquellos elementos del tema que se muestran ligeramente redondeados, pudiendo seleccionar entre ángulos rectos, ángulos ligeramente redondeados (por defecto) o ángulos muy redondeados. 

Esto cambiará, por ejemplo, la apariencia de los campos de formulario y los botones de la interfaz del cliente.

3. Tipografías

Desde el siguiente panel se puede actualizar la tipografía del tema y la de los encabezados. En los selectores de tipografías están disponibles la mayor parte de las tipografías de Google.

4. Anchos

Aquí se actualizan los anchos del encabezado, contenido y pie de página de forma independiente.
Ofrece dos modos de ancho. Ancho completo o Encajado. 
Ésta y las siguientes interfaces de Apariencia presentan una previsualización esquemática inmediata de los cambios. 

5. Barras laterales

Para actualizar las barras laterales como activar o desactivar el menú de navegación lateral, especificar el ancho a ocupar entre otros. La interfaz presenta indicaciones para comprensión de los ajustes posibles.

	Ajuste	Funcionalidad
5.1	Habilitar el navegador lateral	Botón para mostrar el navegador lateral recogido.  Se ve el primer nivel de categorías. Para ver las categorías descendientes requiere hacer clic en la del nivel superior. En magenta está activo. En la vista escritorio se muestra en el lateral derecho cuando el cliente está dentro de una categoría o subcategoría o producto. En la vista móvil se muestra después de los productos cuando se accede a una categoría o a un  producto.
5.2	Navegación lateral ampliada	Botón para mostrar el navegador lateral abierto. Se ve todo el árbol de categorías y categorías descendientes. En magenta está activo. En la vista escritorio se muestra en el lateral derecho cuando el cliente está dentro de una categoría o subcategoría o producto. En la vista móvil se muestra después de los productos cuando se accede a una categoría o a un  producto.
5.3	Productos en la navegación lateral	Botón para mostrar el navegador lateral abierto que muestra también productos.  Se ven todo el árbol de categorías y los productos que están en las categorías y subcategorías.  No recomendado para tiendas con muchas categorías. En magenta está activo. En la vista escritorio se muestra en el lateral derecho cuando el cliente está dentro de una categoría o subcategoría o producto. En la vista móvil se muestra después de los productos cuando se accede a una categoría o a un  producto.
5.4	Habilitar los filtros	Botón para mostrar la búsqueda por filtros (facetas). La aplicación por defecto mostrará como filtros todas las características con sus valores (opciones) que tienen los productos, salvo que desde Catálogo>Características, se desactive el botón llamado Mostrar en búsqueda por facetas" en las que no se quiere que aparezcan como filtros. En magenta está activo. En la vista escritorio se muestra en el lateral derecho cuando el cliente está dentro de una categoría o subcategoría o producto. En el lugar de o después del navegador lateral. Se pueden mostrar el navegador lateral y los filtros. O solo el uno o el otro. En la vista móvil se muestra después de los productos cuando se accede a una categoría o a un producto. En el lugar de o después del navegador lateral.
5.5	Habilitar mostrar color en filtro (Búsqueda por facetas)	Botón para añadir a la búsqueda por filtros las características de tipo color y sus valores de color. Misma forma de visualización que los filtros salvo porque se muestra recuadro del color.
5.6	Ancho de la columna lateral	Para definir el ancho que va a ocupar el navegador lateral. A tener en cuenta,  concretamente en vista escritorio,  que el máximo son 12 unidades. Si ocupa 3 unidades el resto del contenido en la horizontal tendrá disponible 9 unidades de espacio y el contenido se adaptará.

6. Encabezado principal

Ajuste para dos opciones:

• Encabezado flotante cuando se hace scroll en escritorio.
  Al activarlo, el encabezado de la página se mantendrá en la parte superior al hacer scroll sólo en la vista de escritorio.
  
  
• Encabezado flotante cuando se hace scroll en móvil.
  Al activarlo, el encabezado de la página se mantendrá en la parte superior al hacer scroll solo en la vista móvil.

7. Página del producto

Aquí se puede ajustar la vista de la ficha de producto con dos opciones. Destacado y columna central o Dos columnas. 
En ignorar valores por defecto en el configurador si el botón está activo se cargará el producto en la vista del cliente sin ninguna opción seleccionada. No mostrará el precio hasta que el cliente seleccione en cada característica una opción.

Ajuste de apariencia de ficha de producto en destacado y columna central

7.1 .Ajuste de apariencia de ficha de producto en dos columnas. Este modo de ficha de producto dispone de los siguientes ajustes:

7.1.1 Modo de presentación del producto.
Ajuste para elegir entre mostrar todas las opciones directamente o que se muestre un botón y este abra el panel de personalización.

7.1.1.1 Normal

7.1.1.2 Abrir con botón (Requiere hacer clic en el botón de presupuestar para acceder a las opciones de configuración del producto)

 7.1.2 Botón para usar o no usar carrusel de imágenes para el modo de dos columnas

 7.1.3 Botón flotante de añadir al carrito (activar o desactivar).
Si se activa, el usuario verá una barra inferior que incluye el precio y el botón de comprar. Esta barra solo se muestra cuando el botón original de añadir al carrito no está en pantalla y el usuario no ha navegado más abajo de dicho botón.

 7.1.4 Ancho de la columna en el modo de producto e dos columnas.
Cambia la anchura de la columna que aparece junto al configurador de producto para hacerla más ancha o estrecha.
Se recomienda un valor no mayor de 6 ni menor de 3.

 7.1.5 Invertir sentido de las columnas en ubicación horizontal en la página del producto.
Afecta a los dos modos de ficha de producto.

8. Listado de productos

8.1 Ajuste Productos por fila. Numero de elementos a mostrar por fila cuando se visualiza la lista de productos

8.2 Productos por fila en móvil. Número de productos a mostrar por fila en móvil.

9. Página de categorías

Botón para mostrar o no la imagen de la categoría cuando se está en ella. En magenta muestra la imagen.

2.8.5.3 Apariencia - Textos

Esta sección se encuentra en el gestor en Ajustes>Apariencia>Textos.

Cada sección es un editor de textos. En cada una se editan los textos generales que se presentan en distintas secciones en la vista pública. Cada actualización del texto requiere guardado desde el botón "Guardar" del editor actualizado.

1. Información adicional del pedido se muestra en zona inferior del pedido en la vista pública. Su propósito es mostrar contenido de interés al cliente en relación con el pedido.

2. Editor de texto con el propósito de redactar una breve descripción de la empresa y mostrarlo en el pie de página de la vista pública.

3. Editor de texto con el propósito de editar el mensaje para mostrar al público cuando la tienda esté en modo mantenimiento.

2.8.5.4 Apariencia - Logos

Desde esta sección se cargan las diferentes imágenes para los logotipos 

En Apariencia>logos cada carga de imagen requiere guardado con el botón correspondiente para cada logo.

Cada sección de ajuste presenta indicaciones de las imágenes a cargar. En el correo de bienvenida se adjunta PDF con instrucciones y solicitudes para prestación de la asistencia en el arranque. Entre las indicaciones se especifica el tamaño máximo y tipo de cada archivo.

1. Carga de imagen del logo para cabecera de la página

• Vista del cliente con ejemplo de logo en la cabecera de la página

2. Carga de imagen de imagen del logotipo para mostrar en los PDF

Presupuestos, albaranes y facturas entre otros.

• Vista pública del logo de ejemplo en documentos PDF.

3. Carga de imagen para el logo en el pie de página

A tener en cuenta que se pueden ajustar la apariencia del tema con dos tipos de pie de página. Uno es con fondo oscuro y otro con fondo blanco.

• Vista pública del logo en el pie de página

4. Carga de imagen del logo para los emails

• Vista del logotipo en el encabezado del email recibido por el cliente.

5. Carga de imagen del logotipo para el favicon

Se muestra en la pestaña del navegador.

• Ejemplo de logotipo tipo favicon desde la vista del cliente
  
  

5. Carga de imagen del logotipo para página de Atención al Cliente

El logotipo que se muestra en la página de atención al cliente. "Imagen que aparecerá en la pantalla de contacto". Se sube desde Ajustes>Ajustes generales>Atención al cliente. Requiere guardar cambios.

• Ejemplo de logotipo en página Atención al Cliente.

2.8.5.5 Apariencia - Tamaños de las imágenes

El menú de "Tamaño de imágenes" se explica en un capítulo de este manual llamado "XII Imágenes". 

2.8.5.6 Apariencia - Slider página inicio

Introducción Slider página de inicio

• Desde la sección del gestor Ajustes->Apariencia->Slider se accede a la interfaz de creación del slider de la página de inicio.
  
• Desde este panel  se gestiona el carrusel de la página principal de la tienda.
  
• A cada imagen del carrusel (slider) se le puede asignar un título, una descripción y un enlace.
  
• Para añadir una imagen más al carrusel crear otro slider. Se pueden añadir tantas imágenes al carrusel como se quieran. 
  
  

Desde el gestor>Ajustes>Ajustes generales>Tema> presenta un ajuste llamado "Ancho del slider". Con dos opciones para seleccionar una:

a. Compacto.

b. Ancho completo de pantalla. El ancho del slider se cambia a todo el ancho disponible de la pantalla.

Cómo crear y añadir diapositivas al Slider

Al hacer clic en botón "Crear Slider" accedemos a la interfaz de creación de una diapositiva del slider. Requiere campo ´"Título" y hacer clic en botón "Crear" para guardar.

Elemento	Función
Título	Nombre a dar a la diapositiva para el slider
Enlace	Url a especificar a la que lleve al  usuario al hacer clic en la diapositiva
Descripción	No se muestra al cliente. "Google puede leer textos dentro de imágenes, gracias a una tecnología llamada OCR (Optical Character Recognition, o reconocimiento óptico de caracteres)"
Seleccionar archivo	Para subir la imagen para la diapositiva del Slider
Crear	Botón para crear el slider. Guardado

En la vista pública se ven las imágenes en modo slider (carrusel).

En la interfaz de Slider cada slider que se añade es una nueva diapositiva del carrusel. 

2.8.5.7 Apariencia - Menú principal público

Desde Ajustes > Apariencia > se presenta un acceso a la interfaz de configuración del menú principal. 
Desde Ajustes se presenta un acceso directo a a la interfaz de configuración del menú principal. 

Para evitar duplicidades en el contenido este manual, la información relativa al "Menú" se presenta en el capítulo  llamado Menú>Ajustes.