Advanced Background Changer

Presentación

Advanced Background Changer ha sido concebido para realizar personalizaciones múltiples del último plan de su tienda PrestaShop. El módulo permite añadir imágenes personalizadas en el fondo, crear presentaciones y zonas de clic para mostrarlas en toda la tienda o limitarlas a páginas determinadas. Ofrece compatibilidad multilingüe y es capaz de gestionar un número ilimitado de fondos.

Características generales y principios de funcionamiento

Con Advanced Background Changer puede utilizar un número ilimitado de fondos que puede desactivar en cualquier momento.
El módulo está diseñado para que resulte fácil de usar para principiantes con PrestaShop. Si necesita funciones más avanzadas, puede activar el «Modo Profesional» disponible en todas las pestañas.

En el modo profesional, el módulo ofrece la posibilidad de insertar imágenes de fondo siguiendo dos métodos diferentes:

– En JavaScript, que permite crear presentaciones o muestras de pantalla completa. No es necesario contar con ningún conocimiento especial, pero es poco adaptable.
– En CSS3, que ofrece un nivel de personalización muy elevado con ajustes más específicos, además de la posibilidad de definir sus propias instrucciones CSS desde el campo de estilos avanzados. Para este modo de integración es necesario contar con nociones de integración web.

Con este módulo, podrá programar y temporizar los fondos de manera precisa, lo que le permitirá concentrarse en su actividad y automatizar las animaciones comerciales. Por ejemplo, durante el período de rebajas, los fondos que haya definido previamente se activarán y se desactivarán en las fechas previstas, cuando volverá a mostrarse el fondo inicial.

Advanced Background Changer le permite distinguir a los visitantes de los clientes. Así, podrá mostrar un fondo específico a los clientes y otro a los visitantes, con lo cual, por ejemplo, podrá ofrecer ventajas a los clientes a través del fondo.

Por último, para mejorar el diseño responsive de la tienda, el módulo se desactivará de manera automática al acceder a la tienda desde un smartphone para evitar la ralentización del tiempo de carga de la web con imágenes pesadas e innecesarias para este tipo de dispositivo.

Instalación

Para instalar Advanced Background Changer, puede consultar nuestro tutorial de instalación de módulos disponible aquí

Modo Mantenimiento

Este módulo cuenta con un modo de mantenimiento. Consulte el tutorial de uso aquí

Configuración

Tiene que acceder al panel de configuración del módulo para configurar los ajustes. Diríjase al back office de su tienda y haga clic en la pestaña Módulos. Busque «Advanced Background Changer» , y haga clic en el botón Configurar .
image-abg

De aquí en adelante, se encuentra en la interfaz de administrador de módulo. Aquí puede configurar el módulo en función de sus necesidades.
bo-abg

Gestionar las reglas de asociación

Esta pestaña le permite gestionar las reglas de muestra de los fondos. Cada imagen se asociará a una o varias reglas. Una regla define las páginas en las que quiere aplicar los fondos, el período de muestra o, incluso, las opciones de presentación.

Añadir una nueva regla

Nombre de la regla

nom-de-la-règle
Esta opción le permite definir un nombre para la nueva regla.

Aplicar a todas las páginas

appliquer-sur-toutes-les-pages
Al seleccionar Sí, esta opción aplicará la regla que se está creando a todas las páginas de la tienda. Por extensión, la o las imágenes que se asociarán a esta regla serán visibles en todas las páginas de la tienda.

Período de activación

période-d'activation
Esta opción permite programar la muestra de la regla (y, por extensión, la o las imágenes que se le asociarán después) Una vez concluido este período, se restablecerá la regla anteriormente en vigor.

Por ejemplo, puede utilizar esta opción para mostrar un fondo distinto durante el período de rebajas.

Asociaciones

Aplicar esta regla a páginas de categoría

categories
Esta opción permite aplicar la regla a todas o una selección de las páginas Categoría.

Atención: las páginas de productos no heredan esta regla, incluso en los casos en los que los productos pertenezcan a la categoría elegida.

Aplicar esta regla a los productos de las categorías siguientes

produits-categories
Esta opción permite aplicar la regla a todos los productos de la categoría seleccionada.

Por ejemplo, puede utilizar esta opción para mostrar una imagen de fondo de reloj para todos los productos pertenecientes a la categoría Reloj.

Aplicar esta regla a páginas de producto

produits
Esta opción permite aplicar la regla a todas o una selección de las páginas Producto.

Aplicar esta regla a páginas de fabricante

fabricant
Esta opción permite aplicar la regla a todas o una selección de las páginas Fabricante.

Por ejemplo, puede utilizar esta opción para mostrar una imagen que indique una promoción en la página de un fabricante.

Aplicar esta regla a páginas de distribuidor

fournisseurs
Esta opción permite aplicar la regla a todas o una selección de las páginas Proveedor.

Aplicar esta regla a páginas CMS

cms
Esta opción permite aplicar la regla a todas o una selección de las páginas CMS.

Aplicar esta regla a algunas páginas especiales

pages-spéciales
Esta opción permite aplicar la regla a las páginas que no se enumeren aquí.

Por ejemplo, puede utilizar esta opción para mostrar una imagen especial en su página 404.

Opciones de fondos (modo profesional únicamente)

Color del fondo

couleur-du-fond
Esta opción permite elegir el color mostrado detrás de la imagen.

También puede mostrar un único color en segundo plano. Para ello, tiene que crear una regla y configurar esta opción con el color deseado. Por último, no aplique ninguna imagen a la regla creada.

Temporización

temporisation
Esta opción permite definir el tiempo de muestra de cada imagen de fondo. Tiene que indicar un valor en milisegundos (5000 milisegundos correspondientes a 5 segundos).

Esta opción únicamente afecta a las reglas que tengan varias imágenes atribuidas (con lo cual se crea una presentación). No afecta a los fondos JavaScript con una sola imagen ni los fondos CSS.

Textura que se aplicará a los fondos

texture
Puede aplicar un motivo a la o las imágenes de fondo. La imagen no se verá alterada, sino que el módulo añadirá el motivo encima de la o las imágenes de fondo.

Restricciones (modo profesional únicamente)

Usuarios afectados por esta regla

liste-restrictions
Esta opción permite restringir la regla (y, por extensión, la imagen atribuida) a un grupo de usuarios.

Por ejemplo, puede mostrar un fondo con una promoción únicamente a los clientes, y no a los visitantes.

Organización de las imágenes

tri-des-images
Esta opción permite definir el orden de muestra de las imágenes asociadas a la regla. Al asignar varias imágenes a una misma regla, se aplica un orden independientemente del tipo de fondo utilizado. Para modificar este orden, mantenga el clic izquierdo presionado sobre la flecha de un fondo y desplazarlo en función del orden que quiera atribuirle.

En el caso de un fondo JavaScript, el orden aquí configurado definirá el orden en el que se mostrarán las imágenes de la presentación. Así, la primera imagen de la lista será la primera en aparecer, seguida por la segunda, etc.
En el caso de un fondo CSS, el orden aquí configurado definirá el orden de superposición de las imágenes. De esta manera, la última imagen de la lista será la que se muestre al fondo y el resto de las imágenes se irán superponiendo a esta, respetando el orden definido.

Atención: tiene que atribuir las imágenes a la regla para poder modificar el orden.

Gestionar las imágenes de fondo

Añadir una imagen de fondo

ajouter-un-fond
Este botón recupera la lista de reglas anteriormente creadas. Aquí es donde puede asignarles una imagen.

Únicamente podrá asignarles un nombre a las imágenes en el modo profesional. Aquí, el módulo les asignará un nombre de manera automática. El nombre únicamente será visible en el back-office, no en la página de la tienda.

Reglas

liste-règles
Esta opción permite seleccionar una o varias reglas para asignarles la imagen que vaya a añadir.

Descargar un fondo

télécharger
Este botón permite enviar una imagen a la tienda seleccionándola desde el ordenador. Puede seleccionar una imagen para cada uno de los idiomas instalados en la tienda PrestaShop.
Una vez que haya seleccionado el fichero, aparecerá una vista previa para que pueda verificar la imagen. Si está satisfecho, puede continuar con el proceso de adición. Si quiere eliminar la imagen, marque la casilla «Eliminar este fichero», que se encuentra debajo de la vista previa.
ex-upload

Atención: si tiene varios idiomas instalados en la tienda, tendrá que añadir una imagen por idioma. Para ello, cuenta con una lista desplegable en la que puede elegir entre los idiomas disponibles. Para aplicar la imagen que está añadiendo a todos los idiomas de la tienda, haga clic en la casilla «Aplicar a todos los idiomas sin imagen», situada debajo de la vista previa.
appliquer-à-tous-les-langages-sans-image

Nombre del fondo (modo profesional únicamente)

nom-du-fond
Este campo permite asignarle un nombre a la imagen que está añadiendo.

Tipo de fondo (modo profesional únicamente)

type-de-fond
Este campo permite elegir el tipo de fondo que quiere crear. Puede crear:

– Un fondo JavaScript (opción predeterminada en el modo Normal), que será una imagen única en pantalla completa. Para crear una presentación, tendrá que asociar varios fondos a una misma regla.

– Un fondo CSS es un fondo más permisivo, que permite mostrar varias imágenes al mismo tiempo e identificadores de forma precisa.

Activar (modo profesional únicamente)

activer
Esta opción permite activar el fondo que cree una vez que lo haya guardado. En modo normal, esta opción se configura como Sí de manera automática.

Opciones del fondo (modo profesional únicamente)

Conservar el tamaño original del fondo (únicamente fondo JavaScript)

conserver-la-taille-d'origine-du-fond
Esta opción permite conservar el tamaño de la imagen añadida. Si selecciona «No», el fondo se mostrará en pantalla completa de manera automática. Si selecciona «Sí», la imagen añadida conservará su tamaño original.

Se recomienda no añadir una imagen con un tamaño concreto y aplicarla a la web en modo JavaScript. En caso contrario, se deformará al utilizar una pantalla con otro tamaño (por ejemplo, en un smartphone)

Alineación horizontal (únicamente fondo JavaScript)

alignement-horizontal
Esta opción permite definir la alineación horizontal de la imagen que añada en porcentaje.

Alineación vertical (únicamente fondo JavaScript)

alignement-vertical
Esta opción permite definir la alineación vertical de la imagen que añada en porcentaje.

Tiempo de transición entre fondos (únicamente fondo JavaScript)

temps-de-la-transition
Esta opción permite definir la duración de la animación de transición por fondo en milisegundos.

Esta opción está fijada en 2000 milisegundos de manera predeterminada, lo cual son 2 segundos

Fondo fijo (únicamente fondo JavaScript)

fond-fixe
Esta opción permite fijar el fondo en la página: si activa esta opción, el fondo no se moverá cuando un usuario avance por la página. Sin embargo, si elige «No», el fondo seguirá el avance del usuario.

Si, por ejemplo, la imagen de fondo añadida está destinada a indicar una promoción, podría interesarle que sí se desplace, para que los clientes puedan verla en todo momento.

Posición del fondo (únicamente fondo CSS)

position-du-fond
Esta opción permite situar la imagen de fondo de manera muy precisa, tanto con imágenes pequeñas como grandes. Al desplegar la lista, tiene acceso a 4 modos de configuración:

– Por posición: permite seleccionar entre las ubicaciones horizontales y verticales predefinidas (arriba a la izquierda, abajo a la derecha, en el centro a la izquierda, etc.)
par-position

– Por porcentaje: permite definir un porcentaje horizontal y vertical para situar la imagen.
par-pourcentage

– Por píxel: permite indicar un número de píxeles horizontales y verticales para poder situar el fondo de manera precisa.
par-pixels

– Custom CSS (usuario avanzado): permite ingresar valores personalizados para la etiqueta CSS Background-position. Para ello, tendrá que ingresar los valores en el siguiente orden: valor horizontal valor vertical.
custom-css

Gracias a esta opción, puede combinar las posiciones en palabras clave («center» «top», etc.) y en píxeles, tal y como se muestra en el siguiente ejemplo.

Ejemplos:

El efecto sombreado sobre las imágenes se utiliza para resaltar el resultado. El módulo no aplicará ningún efecto al fondo.

exemple-position-top-left
Veamos un ejemplo con la opción «Por posición» configurada como Vertical: Top y Horizontal: Left
exemple-pourcentage-8:100-20:100
Veamos un ejemplo con la opción «Por porcentaje» configurada como Vertical: 8 % y Horizontal: 20 %
exemple-pixels-400-1240
Veamos un ejemplo con la opción «Por píxeles» configurada como Vertical: 440 píxeles y Horizontal: 1240 píxeles
custom-css-center-10px
Veamos un ejemplo con los valores de Custom CSS «center 10 px»

Repetición del fondo (únicamente fondo CSS)

répétition-du-fond
Esta opción permite crear una repetición del fondo. Para ello, cuenta con 4 opciones: «no repeat», «repeat-x», «repeat-y» y «repeat»

– No repeat permite no crear ninguna repetición del fondo.

– Repeat permite crear una repetición vertical y horizontal del fondo.

– Repeat-x permite crear una repetición horizontal del fondo.

– Repeat-y permite crear una repetición vertical del fondo.

Ejemplos:

no-repeat
Aquí tenemos un ejemplo con la opción «no-repeat»
repeat
Aquí tenemos un ejemplo con la opción «repeat»
repeat-x
Aquí tenemos un ejemplo con la opción «repeat-x»
repeat-y
Aquí tenemos un ejemplo con la opción «repeat-y»

Fondo fijo

fond-fixe
Esta opción permite fijar el fondo en la página: si activa esta opción, el fondo no se moverá cuando un usuario avance por la página. Sin embargo, si elige «No», el fondo seguirá el avance del usuario.

Si, por ejemplo, la imagen de fondo añadida está destinada a indicar una promoción, podría interesarle que sí se desplace, para que los clientes puedan verla en todo momento.

Período de activación

période-d'activation
Esta opción permite definir un período de activación para el fondo. Así, puede programar cuándo se mostrará configurando un período de inicio y de fin (Año/Mes/Día Hora:Minutos:Segundos).
Si ingresa la misma fecha y hora en los campos «inicio» y «fin», el período de activación será infinito.

Se recomienda utilizar esta función para mostrar un fondo especial, por ejemplo, de Promociones o Rebajas. Así, puede definir durante cuánto tiempo se mostrará con las fechas indicadas.

Gestionar las zonas de clic

Anadir una zona de clic

Título al pasar el ratón

titre-au-survol
Esta opción le permite definir el título de la zona de clic. El título se mostrará si el cliente pasa el ratón por encima de la zona de clic (este campo se corresponde a la etiqueta «título» de la imagen).

Enlace

lien
Esta opción le permite definir el destino de la zona de clic. Puede ingresar un enlace a una página de su web o a una página externa a la tienda. Para ello, tiene que indicar una URL válida y completa.
Ejemplo: http://google.fr

Atención: si no se incluye la http delante de la URL, no se creará el enlace previsto. En este ejemplo, se añadirá google.fr después de la URL de la tienda, es decir, votreboutique.com/google.fr.
Para evitarlo, indique la «http:/» antes del enlace para que esté plenamente operativo.

Activar

activer
Esta opción permite activar la zona de clic que está creando. Puede editar este parámetro después.

Seleccionar un fondo al que asociar la zona

sélectionner-un-fond-auquel-associer-la-zone
Esta lista indica todos los fondos que son compatible con la función Zona de clic. Para que un fondo sea compatible, debe ser del tipo Fondo JavaScript y contar con una regla de muestra asociada (Pestaña «Reglas de asociación»). Todos los fondos JavaScript que cumplan con estas condiciones se mostrarán en esta lista.
Marque una o varias casillas para enlazar los fondos con la zona de clic. Los enlaces estarán operativos de forma inmediata.

Opciones de muestra

Zona fija

zone-fixée
Esta opción permite hacer que la zona de clic vaya avanzando. Si elige SÍ, la zona no avanzará cuando el cliente se desplace por la página. Si elige NO, la zona de clic avanzará con la página.

Borde, para desarrollo

bordure-pour-le-dev
Esta opción permite resaltar la zona de clic rodeándola con un borde con color.

Se recomienda utilizar esta opción únicamente al realizar un desarrollo en la tienda, ya que el borde no está adaptado a una muestra comercial.

Color del borde

couleur-de-la-bordure
Esta opción permite elegir el color del borde de desarrollo anteriormente configurado.

Si la opción del borde para el desarrollo está desactivada, no se mostrará el color aquí configurado.

Anchura

largeur
Esta opción permite definir la anchura de la zona de clic. Puede elegir dos unidades de medida: píxeles o porcentaje.

Para una zona en píxeles, el punto de origen para el cálculo se corresponde con la esquina superior izquierda de la página. Sin embargo, puede modificarse este punto con las opciones siguientes o el tema.

Altura

hauteur
Esta opción permite definir la altura de la zona de clic. Puede elegir dos unidades de medida: píxeles o porcentaje.

Para una zona en píxeles, el punto de origen para el cálculo se corresponde con la esquina superior izquierda de la página. Sin embargo, puede modificarse este punto con las opciones siguientes o el tema.

Margen izquierdo

marge-à-gauche
Esta opción permite insertar un margen a la izquierda de la zona de clic (margen horizontal). Así, podrá situar la zona de clic donde quiera horizontalmente.

Al combinar este parámetro con la opción «Margen superior», podrá situar la zona de clic en el lugar de la página que quiera.

Margen superior

marge-au-dessus
Esta opción permite insertar un margen encima de la zona de clic (margen vertical). Así, podrá situar la zona de clic donde quiera verticalmente.

Al combinar este parámetro con la opción «Margen izquierdo», podrá situar la zona de clic en el lugar de la página que quiera.

Ajustes avanzados

Editar los estilos CSS

éditer-les-styles-css
Esta opción permite añadir código CSS personalizado a los parámetros del módulo, con lo cual contará con un grado de personalización elevado. Sin embargo, para utilizar este método hay que tener conocimientos de CSS.

Si no tiene conocimientos de CSS, no modifique las opciones presentes en esta zona de texto.

Ajustes avanzados (únicamente modo profesional)

Selector CSS dónde aplicar los fondos

sélecteur-css-où-appliquer-les-fonds
Esta opción permite definir las etiquetas en las que se aplicarán los fondos CSS (no afecta a los fondos en JavaScript).

Selector CSS dónde ocultar los fondos

sélecteur-où-masquer-les-fonds
Esta opción permite definir las etiquetas en las que quiere ocultar los fondos aplicados por su tema, con el fin de darles prioridad a los fondos insertados desde el módulo.

Valor z-index para las zonas de clic

valeur-zindex
Esta opción permite definir el valor z-index de las zonas de clic. El z-index es un valor que se puede asimilar a la profundidad de un elemento. El elemento con el z-index más alto se mostrará por encima de los demás y así de forma descendente.

Si no aparecen las zonas de clic, podría deberse a que su tema modifique el z-index de algunos elementos de la tienda.
En este caso, consulte la siguiente parte, sobre la adaptación del tema.

Si no puede analizar la página, ingrese un valor excesivamente elevado para sobrepasar todos los elementos (ej. 5555), la mayoría se encuentran en torno a 1.

Cabe notar que el tema predeterminado de PrestaShop indica un valor de z-index de 5003 para el elemento «header», lo cual podría ser la causa del problema.

Adaptar su tema

Al utilizar Advanced Background Changer se pueden generar conflictos con el tema existente. Algunos elementos podrían desaparecer al aplicar un nuevo fondo.
En esta parte encontrará una guía de resolución de los conflictos más frecuentes.

A continuación, se explica el vocabulario empleado:

– Código HTML: el HTML es un lenguaje Web que permite mostrar y maquetar datos utilizando etiquetas de contenido.
– Código CSS: el CSS es un lenguaje de estilo que permite darle formato al código HTML.
– Z-index: el z-index es un atributo CSS que indica la profundidad de un elemento. El elemento con el z-index más alto se mostrará por encima de los demás y así de forma descendente.
– Etiqueta: una etiqueta contiene el contenido que mostrará la página. Se encontrará entre los signos < y > y podrá estar acompañada de atributos como «class» o «href», por ejemplo.
– Clase: una clase es el nombre otorgado a todos los atributos CSS que pueden afectar a un elemento en la etiqueta. Se definen en los ficheros CSS.

Instalar las herramientas

Antes de analizar los conflictos, tendrá que contar con las herramientas necesarias para ello. Es muy sencillo, únicamente tiene que descargarse dos herramientas:

– La primera es el navegador Mozilla Firefox (a no ser que ya lo tenga): es gratuito y está disponible para Windows y Mac, aquí: Descargar Firefox

firefox

– La segunda es una extensión para Firefox, que se llama Firebug. Firebug se instala en Firefox y le agrega herramientas de desarrollo muy eficaces. Se puede descargar aquí: Descargar Firebug

firebug

Para instalar Firefox, abra el archivo ejecutable previamente descargado y siga las instrucciones.
Una vez completada la instalación, abra Firefox y diríjase a la página de Firebug (indicada más arriba). Haga clic en el botón «Añadir a Firefox». Comenzará la descarga del módulo.
Haga clic en Instalar cuando termine la descarga.

Ya cuenta con las herramientas necesarias para resolver los conflictos.

Analizar los conflictos

Ahora que ya tiene todas las herramientas necesarias, puede comenzar el análisis.
Al hacer clic derecho en una web, podrá elegir la opción «Inspeccionar el elemento con Firebug». Aparecerá la siguiente ventana en la parte inferior del navegador:

inspection

Utilizaremos las siguientes herramientas:

– Hacer clic en un elemento de la página para inspeccionarlo: esta opción permite inspeccionar el código fuente de un elemento haciendo clic en él.

bouton-inspecter

Por ejemplo, si se dirige a la demo de Advanced Background Changer y quiere inspeccionar el último plan, utilice esta función y haga clic en el último plan de la página.

– La pestaña HTML: muestra todo el código HTML de la página actualmente consultada. Al inspeccionar un elemento con la opción anterior, el código de dicho elemento aparecerá en la pestaña HTML subrayado en azul.

inspection-colonne-html

– La pestaña Estilo: muestra el código CSS de la página. Gracias a esta parte podrá detectar los conflictos de estilo entre Advanced Background Changer y su tema.

inspection-colonne-css

Problemas frecuentes

A continuación, encontrará las soluciones a los problemas más frecuentes con el módulo.

Zonas de clic no visibles

Si crea zonas de clic y, a pesar de estar bien configuradas, no aparecen, podría haber un conflicto entre el módulo y el tema. La causa suele ser el Z-index.
Para verificarlo, utilizaremos el inspector Firebug previamente instalado. Comience activando el borde para el desarrollo en los parámetros de la zona de clic. Diríjase a la página en la que se deberá mostrar la zona e inspeccione dicha zona. En este ejemplo, se ha configurado para que aparezca en la parte izquierda de toda la página.

inspection

Al inspeccionar esta parte, se muestra el código de la página pero no se detecta la zona de clic. Al ir un poco más arriba en el código, se muestra una etiqueta <a> (que sirve para crear un enlace) con una clase .abg_click_zone, y el título otorgado en los parámetros (aquí Pared de piedra). También se encuentra el enlace previamente registrado en el back-office indicado. Por lo tanto, podemos concluir que se trata de la zona de clic invisible. Al hacer clic en esta etiqueta, se mostrará el código CSS asociado en la columna de la derecha y se coloreará el bloque en la página.

cliquer-sur-(a)-pour-afficher-son-style

Aquí comienza la tarea de análisis de conflictos. Si la zona no aparece a pesar de la presencia del código, significa que debe estar cubierta por otro elemento (un z-index más elevado). Por tanto, debemos analizar el valor z-index de nuestra zona. Avance por los estilos hasta que encuentre el valor z-index. Se encuentra configurado como -1, lo que debería hacerlo aparecer en primer plano. Sin embargo, debe haber un elemento cercano con un valor más elevado.

z-index-zone-de-clic

La zona de clic aquí presentada no dispone de ningún margen superior ni izquierdo. Por lo tanto, su origen se encuentra en la esquina superior izquierda de la página. Realizaremos aquí la inspección y la búsqueda del elemento causante del fallo. Aquí, la inspección muestra que nos encontramos en el bloque <body> «, y que el siguiente bloque es <header> » (si situamos el cursor sobre la etiqueta <header> en el código HTML, Firefox nos mostrará su ubicación con colores). Vamos a verificar el valor del z-index de este bloque. Para ello, haga clic en la etiqueta <header> «y diríjase a la columna derecha.

code-header

En este ejemplo, al recorrer el código CSS, podemos ver que el valor z-index del bloque <header> está fijado en 5003. Esto explica la desaparición de la zona de clic: el bloque <header> está situado a una capa 5002 veces más elevada. Ahora que hemos identificado el conflicto, tenemos que modificar el z-index de nuestra zona para que aparezca.

z-index-header

Para ello, diríjase a los parámetros del módulo Advanced Background Changer y active el «Modo profesional». Después, haga clic en la pestaña «Ajustes avanzados». Aquí se encuentra la opción «Valor z-index para las zonas de clic»: esto es justamente lo que queremos modificar. En nuestro ejemplo, el bloque que estaba ocultando la zona de clic tenía un z-index de 5003. Por lo tanto, indicaremos un valor superior (5004 es suficiente aquí). Haga clic en Guardar una vez que haya ingresado el valor. Actualice la página y verá una zona de clic totalmente operativa.

El valor que defina en este ajuste se aplicará a todas las zonas de clic.

z-index-backoffice

Realice los últimos ajustes, desactive el borde para el desarrollo y la zona estará plenamente operativa.

El procedimiento de análisis será idéntico para todos los temas.

No aplicar el fondo al centro de la página

Al insertar un fondo en la tienda, el centro de la página mostrará dicho fondo y con el resto de elementos «situados» encima, con lo cual el resultado podría no ser demasiado atractivo.

sans-modif-css

Para solucionarlo, tendrá que modificar los Estilos avanzados del módulo e indicar que no quiere que el color de fondo se muestre en el centro de la página. Diríjase a los parámetros de Advanced Background Changer y a la pestaña «Estilos avanzados».

onglet-styles-avancés

Tiene que descomentar una parte del código prerrellenado dependiendo de la versión de PrestaShop de la tienda (cuando se encuentra como comentario, el código aquí escrito está inactivo). El número de versión se indica en la esquina superior izquierda del back-office. Una vez identificada, avance por la zona «Estilos avanzados» hasta que encuentre su versión, (solo se necesitan las 2 primeras cifras de su versión PrestaShop para estos ajustes. Por ejemplo, una tienda en versión 1.6.1.0 utilizará la parte PrestaShop 1.6).

Elimine las etiquetas de comentarios para descomentar el código. Estas etiquetas son:

– “/*” para abrir un comentario
– “*/” para cerrar un comentario

Sin embargo, tiene que eliminar las etiquetas correctas. Puede ver las etiquetas que tiene que eliminar en cada versión en las siguientes capturas:

modifs-ps1.6
Estas son las etiquetas de comentarios que hay que eliminar para una tienda de PrestaShop 1.6.X 
modifs-ps1.5
Estas son las etiquetas de comentarios que hay que eliminar para una tienda de PrestaShop 1.5.X

Una vez que haya eliminado las etiquetas de comentarios, haga clic en Guardar y actualice la página de la tienda. A partir de ahora, el fondo no se mostrará en la parte central de la tienda y se aplicará a todas las páginas de la tienda.

avec-modif-css

Mostrar una imagen en cada lado de una página

El método para lograrlo no consiste en crear una imagen con unas dimensiones concretas para que el fondo únicamente muestre dos columnas, a la izquierda y la derecha de la página. Al cambiar el tamaño de la ventana, el fondo ya no aparecerá como usted quiere que lo haga.

El método correcto para obtener este resultado consiste en crear dos fondos en CSS y situarlos en las columnas izquierda y derecha. De esta manera, los fondos conservarán el tamaño correcto y el resultado se optimizará, ya que habrá reducido el tamaño de las imágenes y, con ello, el tiempo de carga de las páginas de la tienda.

Estas son las dos imágenes que se utilizarán en este ejemplo:
fond-bleu fond-rouge

Aquí se repetirán ambas imágenes para rellenar toda la página, ya que son muy pequeñas (256 × 256 píxeles). Sin embargo, no es necesario repetirlas si utilizamos una imagen más grande

Para ello, utilice una imagen para cada columna y diríjase a los parámetros del módulo. Cree su regla de asociación en función de sus necesidades y diríjase a la pestaña «Gestionar las imágenes de fondo». Cree una imagen de fondo para cada una de las columnas y asígnele el tipo «Fondo CSS». Diríjase a «Opciones de fondos» y seleccione «Por posición» en Posición del fondo. Seleccione la posición vertical que necesite y, en la lista «Horizontal», elija «Left» para la columna de izquierda y «Right» para la columna derecha. Complete el resto de ajustes en función de sus necesidades y guarde la configuración cuando termine.

config-img-2

config-img-1

Vuelva a la página destino de la regla y actualícela. Aquí verá una imagen a cada uno de los lados de la página.

résultat

Si no se muestran las imágenes, verifique que no haya otra regla que esté creando un conflicto con la que acaba de crear y que las imágenes se encuentran entre las primeras del orden de organización (pestaña Reglas de asociaciones).

Mostrar una imagen de fondo en un bloque concreto

Tal vez quiera utilizar una imagen de fondo en un bloque concreto, como el <header> o el <footer>. Sin embargo, no hay ajustes predeterminados para este tipo de posiciones. Por lo tanto, habrá que indicarle al módulo dónde tiene que insertar la imagen con el parámetro «Editar los estilos CSS» de los ajustes avanzados (para acceder a esta opción, active el modo Profesional).

Tendrá que identificar el nombre del bloque al que quiere asignarle el fondo. Para ello, utilice las herramientas de inspección previamente instaladas.
En esta parte, utilizaremos como ejemplo el bloque <footer>, que se corresponde con el bloque de la parte inferior de la página.

footer-avant

Para comenzar, tendrá que enviar la imagen al servidor. Para ello, puede utilizar la pestaña «Gestionar las imágenes de fondo» y añadir la imagen desde la herramienta del módulo. Una vez finalizada la selección, haga clic derecho en la reseña e inspecciónelo. Se encontrará en una etiqueta <img> con un atributo src="...". Copie y conserve la url que se encuentra entre paréntesis: ¡es la ubicación de la imagen!

balise-img-src

Si la imagen ya se ha añadido, edítela e inspeccione la reseña de la misma manera para recuperar su URL

Haga clic en la pestaña «Ajustes avanzados» y avance hasta el final de la zona «Editar los estilos CSS». Vamos a añadir el código necesario para mostrar la imagen en el bloque <footer>.

Añada el siguiente código:

footer { background: url("Indique aquí su url"); }

Guárdelo y vuelva a la tienda. Actualice la página para observar el bloque modificado. A partir de ahora, únicamente se aplicará una imagen al bloque (aquí el footer).

footer-après

La imagen de fondo no se ve

Acaba de añadir y configurar una imagen de fondo, pero no siempre aparece a pesar de haber realizado varias pruebas. Podría haber un conflicto entre la imagen y el tema actualmente instalado en la tienda.

exemple-avant

Para resolverlo, tiene que localizar el bloque en el que el tema ya muestre una imagen, lo cual impide que se vea el nuevo fondo. Para ello, tiene que dirigirse a la zona en la que debería mostrarse la nueva imagen e inspecciónela con Firebug.

exemple-conflit-code2

En este ejemplo, el tema actual ya ha aplicado un comportamiento al bloque <header> . Esto es lo que impide que se vea el fondo que queremos aplicar a este bloque <header> . Para solucionarlo, diríjase al back-office y a la pestaña «Ajustes avanzados». Utilice el segundo selector, añada una coma e indique el o los nombres del bloque que están ocultando la imagen para la inspección, separando cada adición con una coma.

bo-réglages-avancés

Guárdelo, actualice la página y, a partir de ahora, podrá ver el fondo.

exemple-après