Version Mobile - Design

 Objectif

Il est très simple de personnaliser la charte graphique de la version mobile grâce au SmartSkin mobile afin d'avoir la même qualité de design que celle du site !
Le SmartSkins est un éditeur CSS compris dans votre abonnement et qui va vous permettre de créer et personnaliser votre charte graphique en toute rapidité et simplicité. Vous pouvez créer autant de présentations que vous le souhaitez.
 
 Mise en place du design

La personnalisation du design mobile se fait depuis le menu [Site \ Version Mobile], menu vertical "Présentations", bouton "Ajouter une présentation".

Cliquez sur l'image pour l'agrandir


Sélectionner le SmartSkin mobile puis Sauver.



Vous pouvez maintenant le personnaliser via l'icone (Personnaliser la présentation SmartSkins).

Cliquez sur l'image pour l'agrandir


Nous proposons différents designs prêt à l'emploi. Chaque design diffère des autres en fonction des couleurs utilisées, de la police, des icones et du style des boutons.
Quelque soit le design choisi il sera possible de modifier chaque élément par la suite de manière indépendante. La fenêtre de droite affiche une prévisualisation du design. Il est possible de naviguer dans le site à partir de la prévisualisation pour vérifier les différentes pages.
Le SmartSkin propose 3 vues : mobile, tablette en portait ou tablette en paysage.

Cliquez sur l'image pour l'agrandir
 
 Personnalisation du design

Pour aller plus loin, il est possible maintenant de personnaliser les éléments grâce au menu horizontal "Configuration".

  • Menu Couleurs

    Ce menu permet d'appliquer les mêmes codes couleur que ceux de votre site. Les éléments qui seront modifiés sont décris dans le sous-titre de l'élément.

    Cliquez sur l'image pour l'agrandir


    En fonction du choix fait dans la partie "Jeux de couleurs", les couleurs de la partie "Couleurs spécifiques" seront dynamiquement modifiés. Cependant, en agissant sur cette dernière zone, les couleurs définies dans la partie "Jeux de couleur" ne seront pas impactées. Par exemple, la couleur Général a été définie en rouge mais le pied de page est bleu.

    Cliquez sur l'image pour l'agrandir


  • Menu Typographies

    Ce menu permet de choisir une police différente pour les titres et les textes, leurs mises en forme (gras, normal) ainsi que des styles d'icone.

    Cliquez sur l'image pour l'agrandir


  • Menu Éléments

    Le menu Éléments permet de personnaliser l'entête du site au niveau de la transparence et de la bordure de l'entête. L'icone du panier peut être également sélectionner selon l'activité du site : caddy, sac ou panier. Enfin, les boutons peuvent être arrondis en utilisant la réglette dédiée.

    Cliquez sur l'image pour l'agrandir


  • N'oublier pas de sauvegarder les modifications via le bouton du menu "Sauver".



 
 Test et modification du design

En cliquant sur le bouton Quitter, le système affiche la liste des différents designs. Le menu vertical "Aperçu" affiche l'aperçu de la version en production.

Cliquez sur l'image pour l'agrandir


Il est possible de créer un nouveau design via le bouton "Ajouter une présentation."
La présentation appliquée au site est repérable grâce à l'icone bleu présent dans la colonne "Défaut". Vous pouvez changer de présentation facilement en cliquant sur l’icône présent dans la colonne "Défaut" de la ligne de la présentation.

Cliquez sur l'image pour l'agrandir
 

Ajouter aux favoris : http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=512&TID=55700&MID=15000&LangID=0
© 2001-2017 Oxatis. Tous droits réservés.