Il peut arriver que vous souhaitiez afficher une bannière différente dans votre campagne Qualifio sur ordinateur et sur mobile. Voici les étapes que vous pouvez suivre.
Dans l'étape Apparence de votre campagne Qualifio, il y a un élément appelé "Bannière". Vous pouvez l'utiliser pour placer une image au-dessus du contenu de votre campagne, mais il n'est pas possible de définir des images différentes pour les ordinateurs de bureau (desktops) et les mobiles. Or, en réalité, il peut être difficile de créer une image pour le mobile et le desktop et de faire en sorte que la campagne soit parfaite sur les deux types d'appareils...
La façon la plus simple de résoudre le problème ci-dessus consiste à héberger votre bannière mobile dans Qualifio, puis à vous plonger dans un peu de code CSS. Ne vous inquiétez pas, nous vous guiderons tout au long du processus ! Grâce à cette personnalisation, vous serez en mesure d'utiliser une image différente sur mobile.
Étape 1. Créer l'apparence pour desktop
Connectez-vous à Qualifio, sélectionnez votre campagne et créez-en l'apparence avec l'image de bannière que vous souhaitez afficher sur ordinateur.
Conseil de pro : pour une meilleure performance et un aspect visuel optimal, nous recommandons une bannière de 810 (largeur) * 300 (hauteur) pour l'ordinateur et 810 (largeur) * 500 (hauteur) pour le mobile. Cependant, il n'existe pas de taille d'image qui soit parfaite pour chaque écran, chaque type d'appareil et de navigateur. C'est pourquoi nous avons quelques bonnes pratiques et recommandations générales pour les images dans Qualifio. Pour plus de détails, veuillez visiter cette page.
Étape 2. Ajouter la bannière mobile
Hébergez l'image de bannière que vous voulez afficher sur le mobile dans Qualifio.
- Allez dans Documents → Bibliothèque multimédia → Envoyer.
- Double-cliquez sur votre image → Copier l'URL.
Étape 3. Ajouter la bannière mobile en CSS
Ajoutez ce code à la section CSS de la campagne (cliquez sur l'étape Apparence et ouvrez l'éditeur, puis allez dans Paramètres avancés et collez ce code dans CSS) :
@media (max-width: 550px) {
#bandeau_sup img {
content: url("https://manager.qualifio.com/library/demo/images/example.jpg");
}
}Là où vous voyez l'URL se terminant par "exemple.jpg", remplacez-la par l'URL de votre propre image.
Comme vous pouvez le constater, nous utilisons l'option @media avec la taille d'écran 550px comme seuil de largeur pour différencier le mobile du desktop. Vous pouvez ajuster ce seuil (en pixels) comme vous le souhaitez.
Appliquez le code CSS.
Étape 4. Mettre la campagne en ligne
Si vous êtes satisfait(e) des changements, félicitations ! Jusqu'ici, tout va bien.
La dernière étape est simple : il suffit de publier votre campagne.
Que faire si vous avez besoin d'afficher un footer/une image de bas de page différente ?
Si vous souhaitez utiliser un footer (image en bas de page) personnalisé pour le mobile, vous devrez répéter les étapes ci-dessus tout en utilisant la customisation manuelle suivante.
Copiez et collez ces éléments dans le code :
@media (max-width: 550px) {
#footer img {
content: url("https://manager.qualifio.com/library/demo/images/example.jpg");
}
}N'oubliez pas de remplacer l'URL par la vôtre.
N'oubliez pas d'appliquer le code et d'enregistrer.
Vous savez maintenant comment implémenter et afficher des bannières ou des pieds de page différents pour le desktop et le mobile, et vous pouvez améliorer vos campagnes.