Vous trouverez un tableau récapitulatif des formats d'image pour les widgets en bas de page.
I) Les widgets
1) La pop-up
Capture d’écran du widget du site naturabrasil.fr
La pop-up vous permet d’afficher du texte et une image sur toutes les parties de votre site. Les dimensions de l’image ne doivent pas dépasser les 540 px de largeur. Vous n’avez pas de limite de hauteur.
Vous avez la possibilité de :
Rendre le fond transparent ;
Mettre une couleur de fond ;
Mettre une image de fond ;
Modifier la couleur du texte ;
Mettre un bouton qui renvoie sur une page ou un module SPREAD ;
Mettre un formulaire d'inscription email ;
Fermer le widget sous une version réduite.
Il y aura automatiquement des bordures. Si vous souhaitez que le widget s’adapte entièrement aux dimensions de votre image, nous vous conseillons davantage la pop-up image.
2) La pop-up image
L’avantage de la pop-up image est que vous êtes libre concernant sa taille. En effet, le widget s’adapte entièrement aux dimensions de l’image et sans bordure. Les visiteurs n’auront qu’à cliquer sur l’image pour atterrir là où vous le souhaitez.
Cependant, vous ne pouvez pas ajouter de texte supplémentaire à l'exception du texte de fermeture. Si vous souhaitez du texte, celui-ci devra être intégré dans votre image.
Avec ce widget, vous avez la possibilité de :
Rendre le fond transparent ;
Mettre une couleur de fond ;
Mettre un bouton qui renvoie sur une page ou un module SPREAD ;
Fermer le widget sous une version réduite.
3) Le panel
Ce widget est semblable à la pop-up, à l’exception du fait que vous ne pouvez pas l’afficher au centre du site. Les possibilités de configuration sont identiques. Seule la largeur maximale de l’image diffère. Pour un widget de type panel, elle doit être de 290 px.
Concernant la hauteur, vous êtes libres. Il vous est possible de:
Rendre le fond transparent ;
Mettre en couleur de fond ;
Mettre une image de fond ;
Modifier la couleur du texte ;
Mettre en bouton qui renvoie sur une page ou un module SPREAD ;
Mettre un formulaire email ;
Fermer le widget sous une version réduite.
4) Le pied de page et l’en-tête
Ensuite, nous vous proposons le pied de page et l’en-tête. Le premier s’affiche uniquement en bas de votre site, prenant toute la largeur de la page par défaut. Le second se situe en haut de votre site. Mise à part cette distinction, leur configuration est identique.
Vous pouvez ajouter une image mais, il n’est pas possible de mettre une image de fond. Les dimensions de l’image ne sont pas limitées. Nous vous conseillons néanmoins de la détourer.
Lors de son apparition, vous avez le choix entre une apparition classique et une apparition 3D.
Il est possible de configurer :
La couleur de fond ;
La couleur du texte ;
Mettre un bouton qui renvoie sur une page ou un module SPREAD ;
Mettre un formulaire email ;
Fermer le widget sous une version réduite.
5) La chasse
Contrairement aux précédents widgets, la chasse est une mécanique dynamique : elle oblige le visiteur à parcourir plusieurs pages de votre site et permet ainsi de réduire le taux de rebond. Il doit alors chercher plusieurs images ou symboles dans l’ensemble de votre site.
Pour informer le visiteur de cette chasse, nous vous conseillons de paramétrer un widget pop-up pour les avertir et leur expliquer le principe. Vous pouvez intégrer plusieurs images afin de varier les visuels (leurs dimensions sont libres). Votre widget chasse peut apparaître partout sur votre site, mais pas au centre des pages. Il n’est pas possible de mettre de version réduite. Le client aura une croix de fermeture à sa disposition s’il ne souhaite pas participer.
Un message peut être configuré pour indiquer au participant le nombre d’image qu'il lui reste à trouver. Il est aussi possible de mettre en place un autre message si l’internaute s’approche de la croix de fermeture.
| Warning |
|---|
Paramétrez uniquement ce widget chasse et la pop up d'information. Si par exemple, vous ajoutez un pied de page qui renvoie au module, les participants accéderont directement au module indiquant qu'ils ont trouvé toutes les images. Dès lors, ils pourront directement s'inscrire sans avoir à chercher et la mécanique sera donc perdue. |
6) Le cookie
Ce widget a été créé suite à l’obligation d’informer les internautes de la présence de cookies sur les sites. Généralement, nous l’affichons le plus discrètement possible avec un simple message. Mais si vous souhaitez plus de fun, il est possible d’ajouter une image. Le widget s’adapte à la taille de l’image.
7) Pop-up calendrier
Les icônes du calendrier permettent de faire correspondre un jour avec un module en particulier. Vous pouvez mettre une image différente pour chaque jour. Les dimensions doivent être égales à 150 x 150 px. Les images peuvent changer automatiquement au moment du dépassement de la date. Cette image est soumise aux mêmes dimensions.
Pour le fond du widget, dans son intégralité, vous pouvez mettre une image de fond et régler son opacité. Dans l'exemple ci-dessous, il s'agit du paysage avec le titre et la liste. Vous pouvez paramétrer un bouton de fermeture ainsi qu’une version réduite comme pour une pop-up classique.
8) Le calendrier avancé
Comparé au calendrier classique, le calendrier avancé nécessite de plus grandes dimensions. En effet, vous devez télécharger une image de 640 px de large et de 480 px de hauteur. Afin de créer votre image et faciliter sa composition, nous mettons à votre disposition les gabarits des grilles. Ils sont directement téléchargeables dans “Widget > Design > Image” .
9) L'application Facebook
Vous souhaitez relier votre page Facebook à une mécanique SPREAD ? Nous avons le "widget" Facebook classique. L'application apparaîtra dans la liste visible sur la gauche de votre page Facebook.
Après avoir cliqué sur l'intitulé de l'application, votre participant sera redirigé vers la page application de Facebook. Sur cette page, vous pouvez présenter votre application, mettre une image ou une image de fond sur laquelle vous réglez l’opacité. Il est possible d’insérer un bouton afin d’envoyer les participants sur le module correspondant. S’il s’agit d’une incitation à l’inscription à la newsletter, vous pouvez mettre un formulaire d’inscription email.
7) Le widget HTML
Avec le widget HTML vous n’avez aucune limite. Vous pouvez faire ce que bon vous semble, tant que vous avez les connaissances nécessaires en langage HTML et CSS. Vous avez la possibilité de créer votre widget sur une page, ou d’insérer un bloc à un endroit précis sur votre site tout en conservant la mécanique SPREAD.
Voici un tableau récapitulatif avec l'ensemble des critères correspondant aux formats des images des widgets :
Taille image (L x H
Option image de fond
Positions
Bouton
Formulaire email
Bouton de fermeture
version réduite
Popup
540px x Libre
oui
Toutes les cases
oui
oui
oui
oui
Popup image
Libre
non
Toutes les cases
non
non
oui
oui
Panel
290px x Libre
oui
Sauf centre (8 cases)
oui
oui
oui
oui
Pied de page
Libre
non
3 cases du bas
oui
oui
Croix
oui
Entête
Libre
non
3 cases du haut
oui
oui
Croix
oui
Chasse
Libre
non
Sauf centre (8 cases)
non
non
Croix
non
Cookie
Pas d'image
non
Sauf centre (8 cases)
non
non
Croix
non
Calendrier (icône par jour)
150 x 150px
oui
Toutes les cases
non
non
oui
oui
Calendrier avancé
640 x 480px
oui
Toutes les cases
non
non
oui
oui
111 x 74px
oui
Application Facebook
oui
oui
non
non
HTML
Libre
non
Partout sur votre site
oui
oui
non
non
Design du module
Pour les modules, nous vous préconisons une image de 270px de largeur x 460px de hauteur minimum. En respectant ces dimensions, votre image remplira l’ensemble de la partie consacré à l’image sur la gauche de la pop up.
Néanmoins, nous vous conseillons de mettre une image avec une hauteur supérieure à 460px. En effet, la pop up peut s’allonger en fonction de son contenu. C’est le cas par exemple de l’étape d’acquisition de données ou de la galerie si vous êtes dans une opération de vote média. Dans ce dernier cas, votre pop up peut atteindre les 980 px de hauteur.
Ainsi en prévoyant cette marge de 520px de hauteur, vous êtes assurés qu’il n’y aura pas de coupure.
Voici ci-dessus un exemple où l’image ne respecte pas les dimensions.
Ci-dessous, un cas concret d’une opération de vote média de brandalley.fr .
Etape de connexion du module Vote média de brandalley.fr
Certes nous vous proposons un module type constitué d’une image à gauche, de votre description au centre et des modes de connexion à droite. Mais si vous en avez l’envie et les connaissances nécessaires, n’hésitez pas à faire des manipulations dans l’onglet “CSS” et "JavaScript". Vous retrouvez ces sections dans “Paramétrages > Design du module”. Changez la disposition des éléments, les écritures … Faites parler votre imagination !
Pour les novices du langage informatique, nous avons mis à votre disposition quelques encodages dans la base de connaissances SPREAD. Pour y accéder, tapez “Design du module CSS” ou “Design du module JavaScript” dans la barre de recherche:
Étape de connexion du module Jeu-concours de http://www.eliquidandco.com/
L'arrière plan de votre module
Si vous souhaitez indiquer une image, voici le gabarit préconisé : 973 x 509 px
Bandeau email de confirmation
Si vous souhaitez remplacer le bandeau de couleur par défaut par une image, voici le gabarit à respecter : 621 x 82 px
AVANT
APRES
