Comment adapter ma bannière de campagne au mobile

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 JavaScript et 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.

Attention: Pour les différents formats swiper (quiz et test de personnalité), la bannière et le footer ne s'afficheront pas en mobile en même temps que les images à glisser à gauche et à droite. Ceci est intentionnel afin de limiter le déroulement pour les utilisateurs en 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.

Schermafbeelding_2022-03-09_om_16.54.39.png

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.

Conseil de pro : placez le texte au centre afin d'éviter qu'il ne soit coupé sur le mobile.

Étape 3. Ajouter la bannière mobile en JavaScript

Ajoutez ce code à la section JavaScript de la campagne (cliquez sur l'étape Apparence et ouvrez l'éditeur, puis allez dans Paramètres avancés et collez ce code dans JavaScript) :

Schermafbeelding_2022-03-09_om_16.55.53.png

$('#bandeau_sup').append('<img class="bannermobile" src="https://manager.qualifio.com/library/demo/images/2022/example.jpg">');

Là où vous voyez l'URL se terminant par "exemple.jpg", remplacez-la par l'URL de votre propre image.

Appliquez le code JavaScript.

Étape 4. Ajouter la CSS pour gérer l'affichage

Après avoir appliqué le code JavaScript, les deux bannières sont affichées, ce qui n'est évidemment pas ce que nous voulons. Nous voulons afficher une bannière sur mobile et une autre sur desktop. Alors, comment faire ?

Ajoutez le code CSS suivant sur une nouvelle ligne dans l'onglet CSS :

Schermafbeelding_2022-03-09_om_16.56.55.png

div#bandeau_sup img.bannermobile { display: none !important; }
@media (max-width: 500px) {
div#bandeau_sup img { display: none !important; }
div#bandeau_sup img.bannermobile { display: block !important; }
}

Comme vous pouvez le constater, nous utilisons l'option @media avec la taille d'écran 500px 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 5. Prévisualiser et tester

Utilisez les icônes mobile/ordinateur de l'éditeur pour prévisualiser les deux bannières différentes :

Schermafbeelding_2022-03-09_om_16.57.53.png

Étape 6. 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 :

$('#footer').append('<img class="footermobile" src="https://manager.qualifio.com/library/demo/images/2022/example.jpg">');

N'oubliez pas de remplacer l'URL par la vôtre.

div#footer img.footermobile { display: none !important; }
@media (max-width: 500px) {
div#footer img { display: none !important; }
div#footer img.footermobile { display: block !important; }
}

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.