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 en largeur . Vous n’avez pas à proprement dit de limite en termes 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.
Néanmoins 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
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 ce widget, elle doit être de 290px.
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 d'inscription 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 par contre, il n’est pas possible de mettre une image de fond. Vous n’êtes pas limité en terme de taille de l’image. Nous vous conseillons néanmoins de la détourer.
Vous pouvez observer un exemple ci-dessous. 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 d'inscription email
Fermer le widget sous une version réduite
5) La chasse
SPREAD a mis en place une mécanique dynamique: la chasse. Cela oblige le visiteur à parcourir plusieurs pages de votre site et donc réduire le taux de rebond. Il doit alors chercher plusieurs images, 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. Les dimensions de celles-ci sont sans limites. Leur affichage peut s’effectuer partout sur votre site à l’exception du centre. Il n’est pas possible de mettre une 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 qui lui reste à trouver. Il est aussi possible de mettre en place un autre message si l’internaute s’approche de la croix de fermeture.
Paramétrez uniquement ce widget chasse et la pop up d'information. Si vous ajoutez un pied de page, par exemple, qui renvoie au module, les participants accèderont directement au module indiquant qu'ils ont trouvé toutes les images et ils peuvent s'inscrire. La mécanique est 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 qui soit 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) Les icônes pour le calendrier
Les icônes pour 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 égale à 150x150 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é
Vous avez un second widget calendrier, le calendrier avancé. Ses dimensions sont plus grandes, en effet, vous devez télécharger une image de 640px de large et de 480px 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) Les widgets 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 |
II) 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
Étape de la galerie du module Vote média de brandalley.com
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