Introduction

Bonjour à nouveau ! Nous sommes de retour dans le magasin Tees X5, notre site web de démonstration que nous utilisons pour vous montrer comment  les ajouts de la nouvelle version 9 de  Website X5 Evolution fonctionnent.

Dans un autre article, nous avons parlé de la création d'un modèle personnalisé [http://answers.websitex5.com/post/4458 ] et nous avons également expliqué comment afficher le modèle en mode plein écran et comment changer les  fonds d'écran et de pages.  Mais nous avons encore d'autres choses à vous dire sur le modèle alors allons-y!

Le mot à retenir: Personnalisation

Une fois que nous avons choisi notre modèle ou, comme dans notre cas, créé un modèle en utilisant l'option Modèle personnalisé, nous pouvons utiliser l'éditeur intégré pour ajouter tous les éléments que nous vous voulons dans l'en-tête (la bannière)  et / ou le pied de page.

ATTENTION! Ne sous-estimez pas l'importance de cette partie du travail ! Le modèle n'est pas qu'un environnement qui optimise la présentation visuelle de notre site. Bien que  le design visuel soit fondamental pour un site Web,  le modèle constitue également un élément capital de l'interface qui permet aux visiteurs d'interagir  avec notre site : il doit être clair, complet et  fonctionnel, en plus d'être esthétique.

Donc, en considérant que la bannière et le pied de page sont des sections qui ne changent pas d'une page à l'autre, contrairement au contenu des pages elles-mêmes, nous allons commencer à y ajouter certains éléments essentiels de l'interface de notre site Web.

La Bannière : un logo et  un slogan

Évidemment, l'un des éléments essentiels dans la bannière de n'importe quel site web est le titre :  après  tout, vous ne trouverez pas de livre sans aucun titre imprimé sur sa couverture, n'est-ce pas ? Si le site n'est pas un site commercial, le titre pourrait se résumer au nom de l'auteur. Mais si le site est  commercial, alors vous aurez besoin d'un logo, d'un nom et, si vous en avez un, d'un slogan. Vous possédez peut-être déjà un  fichier contenant ces trois éléments rassemblés, mais si vous n'avez pas, alors nous pouvons les ajouter sur la bannière individuellement, en tant qu'images et textes distincts.

Pour notre magasin en ligne Tees X5, voici comment nous avons travaillé sur la bannière du site, dans la section Modifier le modèle:

• Nous avons utilisé la commande Insérer image pour importer le fichier logo.png et nous l'avons correctement positionné. Nous avons utilisé un fichier au format png dans le but de préserver la transparence, afin que l'écriture se fonde parfaitement avec l'arrière-plan  du modèle. Une solution alternative aurait été d'utiliser l'option prévue par le programme pour régler la transparence des couleurs.
• Nous avons utilisé la commande Insérer texte pour ajouter le slogan (Your Favourite Tee Store). Afin de nous assurer que nous maintenions l'uniformité des couleurs entre celle du slogan et la  couleur du texte qui est présent dans l'image du logo, nous avons utilisé la Pipette, dans la fenêtre Couleurde texte, pour y sélectionner le rouge. Ensuite, pour donner de la profondeur aux lettres, nous avons appliqué une ombre au texte, en choisissant cet élément dans la liste des effets spéciaux disponibles.

On pourrait croire que  le logo et le slogan devraient se retrouver tout juste à côté du visage de la dame qui apparaît dans notre image d'arrière-plan sur le modèle, mais ce n'est pas le cas! Quand nous regardons une image, nous sommes naturellement attirés par un visage et par les yeux en particulier. Nous sommes également habitués à lire à partir du coin supérieur gauche de la page (ou  de l'écran). Donc, nous devrions essayer de placer notre logo et notre slogan dans une zone stratégique, où l'attention du lecteur est attirée. Il ne s'agit ici que d'un exemple parmi d'autres de l'attention que vous devez porter à des détails de toutes sortes, lors de la planification de notre site Web : la position de chaque élément, la couleur, et tout ce qui détermine l'aspect final de chaque page.

La bannière : le champ de recherche

Si notre site web présente beaucoup de contenu, un blog avec plusieurs articles intéressants, ou un panier virtuel avec un vaste assortiment de produits dans son catalogue, nous allons avoir besoin d'un moteur de recherche intégré. N'oubliez pas que ce n'est pas que pas tout le monde qui utilise le menu de navigation pour explorer un site web : beaucoup de gens utilisent les liens dans une page pour se déplacer dans le site. Ils ne veulent pas gaspiller du temps à se perdre  dans vos pages, en ne trouvant pas tout de suite ce qu'ils recherchent. Voilà donc pourquoi ces visiteurs utilisent souvent le moteur de recherche. Un de nos objectifs est donc de donner aux visiteurs le maximum de choix pour trouver l'information qui les intéresse.

Ajouter un moteur de recherche à votre site Web est très facile, avec Website X5. Voici comment nous avons procédé pour notre site Tees X5, dans la section Modifier le modèle, Onglet En-tête :

• En premier, nous avons cliqué sur l'icône Insérer Champ de recherche.
• Nous voulions un look spécial, pour notre champ de recherche donc nous en avons conçu l'apparence et l'emplacement comme s'ils faisaient partie intégrante de l'image d'arrière-plan. Ensuite, nous avons ajusté le champ de recherche à 168px X 21px et nous l'avons positionné à l'endroit dessiné sur l'image d'arrière-plan (coordonnées 775,14).
• Pour rendre ce champ invisible, nous avons choisi l'option Transparent, à la fois pour les couleurs d'arrière-plan du champ et du bouton.
• La couleur du texte a été réglée à Blanc, de façon a`rendre visible tout texte tapé dans le champ de recherche.
• Pour obtenir un effet de transparence du bouton "Rechercher", afin qu'il apparaisse en superposition sur la loupe de l'image d'arrière-plan, nous avons remplacé le texte du champ Nom du bouton par des points de suspension (...), en utilisant la pipette pour sélectionner la teinte de gris des items placés immédiatement en dessous.

Voilà tout ce qu'il faut faire pour obtenir un moteur de recherche ! La mise à jour de la version 9.0.4 offre des améliorations importantes aux fonctionnalités du moteur de recherche. Jetez un coup d'œil à cette FAQ, pour plus d'information : http://answers.websitex5.com/post/6954

Un petit extra : ajoutez du dynamisme dans votre bannière

Une autre intéressante fonctionnalité aurait pu être ajoutée dans Tees X5. Nous aurions pu y placer un diaporama d'images, montrant, par exemple des accessoires de mode associés aux chandails sur les pages pour femmes, ou encore des éléments plus masculins associés seulement aux pages pour hommes.

Pour ajouter ce genre de dynamisme dans votre bannière, allez dans la section Modifier le modèle, En-tête et suivez ces instructions :

• Cliquez sur l'icône Insérer Diaporama.
• Utilisez les boutons pour ajouter les images qui devront s'afficher sur votre site Web (n'oubliez pas que vous pouvez utiliser une seule image ou encore une courte séquence de plusieurs images) et placez-les dans l'ordre requis.
• Sélectionnez les images ajoutées, une à la fois et cliquez sur le bouton Effet  pour choisir l'un des effets de transition disponibles et ajuster le temps d'affichage. Vous pouvez également choisir la taille et la position de l'image après son affichage (onglet Zoom et position) et enfin choisissez la ou les pages sur laquelle l'image s'affichera (onglet Page) en cliquant sur la page de votre choix dans l'arborescence du site alors affichée.
• Si désiré, vous pouvez affecter un hyperlien sur chacune des images du Diaporama : choisissez l'image désirée, cliquez sur l'icône Associer un lien (dans la barre d'outil en haut de la fenêtre)  et précisez ensuite le lien désiré.

Le pied de page : boutons de section

Vous avez sûrement remarqué que dans certains sites web les concepteurs ont accordé à leur  pied de page une grande importance : ils ont agrandi l'espace disponible pour cet élément de la page, augmenté les informations affichées et y ont ajouté des fonctionnalités.

Dans le pied de page de Tees X5, nous avons choisi d'ajouter quatre gros boutons qui constituent en fait des raccourcis vers des endroits que nous considérons être d'intérêt particulier pour nous (notre Boutique en ligne et nos pages de promotions) et pour nos visiteurs (nous y retrouverons les raccourcis vers l'aide en ligne et notre page Facebook).

Voici comment nous avons créés ces boutons :

• En tout premier lieu, nous avons préparé deux images pour chaque bouton : une lorsque le bouton est relâché, l'autre quand il est survolé par la souris.
• Dans Modifier le modèle/ Pied de page nous avons cliqué sur l'icône Insérer image et importé le fichier shop.png qui représente l'image du premier bouton, à l'état relâché.
• Pendant que cette image, shp.png est encore sélectionnée, nous avons utilisé l'option Fichier image au passage de la souris pour importer le fichier shop_hover.png, qui représente l'image du bouton à l'état survolé.
• Enfin, nous avons cliqué sur l'icône Associer un lien pour insérer un hyperlien vers une page du site, soit celle de la boutique virtuelle.
• Nous avons placé le bouton à l'endroit désiré, puis nous avons recommencé cette procédure pour les trois autres boutons.

Le pied de page : Mentions légales et autres

Le pied de page  est un endroit idéal pour y  afficher des avis  que tout site web devrait comporter (et, dans certains cas, qui sont obligatoires en vertu des lois), tels que nom de l'entreprise, son numéro de TVA, les politiques régissant l'utilisation du site web, la gestion des données sensibles, le mode de fonctionnement de la boutique virtuelle et tout autre détail permettant les contacts.

Dans le pied de pied de page de Tees X5, nous avons placé ce genre d'information générale directement dans l'image d'arrière-plan du modèle et nous avons créé une série de liens vers le site officiel d'Incomedia  et vers nos différentes pratiques et politiques.

Nous avons choisi d'insérer notre information sur les politiques au moyen de documents PDF et donc quand nous avons créé les liens vers ces fichiers, nous avons utilisé l'option Fichier ou URL et sélectionné le fichier PDF concerné  en utilisant l'option Fichier local sur l'ordinateur.

Conclusions
Notre modèle prend progressivement forme et devient de plus en plus intéressant et complet. Comparé au site Web vous pouvez voir (http://tees.websitex5.com ), qu’il y a encore certaines choses qui manquent dans l'en-tête : les boutons de choix de la langue, le bouton de connexion et le compteur d'articles qui ont été ajoutés au panier. Ne vous inquiétez pas ! Nous allons parler de ces points, et d'autres sujets, bientôt.

Restez à l'écoute !

Si vous voulez vous exercez avec quelques exercices pratiques portant sur les sujets qui viennent d'être discutés, téléchargez ce projet : http://bit.ly/utEjit

Téléchargez le fichier .iwpzip et importez-le dans Website X5 Evolution 9 : n'oubliez pas d'installer les mises à jour  pour la version 9.0.4 en premier !