Com mencer. Quelques étapes rapides sont nécessaires avant de pouvoir commencer à créer un site mobile U.me.

Transcription

1 Commencer 1 - Se créer un compte 3 - Accès à l éditeur L interface U.me Éditer un U.me Prévisualiser votre site web mobile Publier votre site web mobile Contenu général 1- Les boutons a - Intégrer un bouton b - Editer un bouton c - Les boutons particuliers 2 - Le contenu a - Ajouter une zone de texte b - Insérer une vidéo c - Intégrer un formulaire de contact 3 - La mise en page et les grilles a- Les espacements b- Les grilles Images et médias Design Menu de bas de page Diaporama Créer plusieurs pages mobiles Paramètres 1-Analytics 2 -Ajouter un Favicon Communiquer sur votre site web mobile Tuto U.me

2 Com mencer Quelques étapes rapides sont nécessaires avant de pouvoir commencer à créer un site mobile U.me. 1 - Se créer un compte Pour utiliser le service, vous devez avoir un compte Unitag actif. L inscription est gratuite et ne prend que quelques secondes. 2 - Utiliser un crédit U.me Depuis votre espace personnel, cliquez sur Créer un U.me en haut de la page. Donnez-lui un nom (qui sera éditable à tout moment), puis cliquez sur le bouton Créer un U.me. Tout utilisateur dispose d un crédit gratuit. 3 - Accès à l éditeur Vous êtes alors automatiquement redirigé vers la page d édition des U.me. C est ici que vous pourrez créer, modifier, et prévisualiser votre site web mobile.

3 L interface U.me Une fois l U.me créé, vous arrivez dans une interface comportant 4 onglets : Accueil et Publication Éditeur Prévisualisation Paramètres Par défaut l onglet Accueil / Publication est affiché. Un panorama d'images vous rappelle les éléments clés d'un site mobile U.me. Par la suite, cette zone sera remplacée par un résumé de l'u.me ainsi que ses éléments de publication. L onglet éditeur est l outil central qui vous permettra de construire votre site U.me. Nous allons maintenant nous pencher en détail sur son fonctionnement.

4 Éditer un U.me C est ici que vous allez construire votre site web mobile de A à Z. À gauche, se trouvent tous les éléments que vous pourrez intégrer dans votre site web mobile. L organisation de votre site web mobile sera représentée dans le smartphone à droite. Pour intégrer du contenu au site web mobile il vous suffit de cliquer sur l élément de votre choix (bouton, contenu...) et de le faire glisser jusque dans le smartphone situé sur la droite de l écran.

5 Sur la gauche, vous trouverez une petite colonne représentant les différentes catégories de personnalisation (contenu général, images & média, design, menu de bas de page, diaporama). Par défaut vous êtes dans le contenu général qui contient : - Les boutons à intégrer (appel, url, module...) - Le contenu à intégrer (texte, vidéos...) - Les options de mise en page (espace, organisation en colonne...) Prévisualiser votre site web mobile À tout moment lors de la création vous pouvez prévisualiser votre site web mobile en cliquant sur l onglet Prévisualisation dans la barre horizontale en haut. Nous vous proposons de prévisualiser votre U.me avec différents types de smartphones.

6 Publier votre site web mobile Vous êtes satisfait par votre site web mobile? Publiez-le! Pour cela, retournez dans l onglet de l éditeur (dans la barre horizontale), et cliquez sur le bouton Publier en dessous du smartphone à droite. Votre site web mobile est aussitôt publié en ligne! L adresse à laquelle il est publié est accessible dans le premier onglet Accueil / Publication. Votre site web mobile restera modifiable en permanence depuis votre interface U.me. Pour le mettre à jour, recliquez sur ce bouton. Contenu général 1- Les boutons a - Intégrer un bouton Pour intégrer un bouton depuis le contenu général, il vous suffit de cliquer sur le bouton choisi et le faire glisser jusque dans le smartphone à droite de l écran. Par exemple pour intégrer un bouton qui renvoie vers un autre site, il faut cliquer sur le bouton URL et le faire glisser dans le smartphone.

7 Un élément rectangulaire apparaît alors dans le smartphone, pour compléter les informations contenu dans ce bouton il faut cliquer sur l icône Éditer, à droite du rectangle. b - Editer un bouton Le premier bloc vous permet de compléter les informations sur votre bouton. Vous pouvez choisir ou modifier le type de bouton dont il s agit, puis compléter son contenu dans le champ se trouvant dessous. Par exemple, choisissez un bouton de type URL, et tapez dans le champ correspondant au lien l URL vers lequel vous voulez que votre bouton redirige.

8 Le deuxième bloc permet de personnaliser l icône qui apparaîtra sur votre bouton (vous pouvez aussi choisir de ne faire apparaître aucune icône en cochant la case). Si vous souhaitez modifier la couleur du bouton et de son texte, cochez la case Modifier le design du bouton. Le bloc contient maintenant plus de champs vous permettant de personnaliser votre bouton. Et enfin le dernier bloc vous permet de personnaliser le texte qui apparaîtra sur votre bouton. N oubliez pas de cliquer sur le bouton Valider les modifications afin que vos changements soient pris en compte. Suivez le même processus pour tous les boutons que vous voulez intégrer.

9 c - Les boutons particuliers Les boutons de module et de navigation sont un peu particuliers. Toutefois, le processus pour les intégrer et les personnaliser reste similaire aux autres boutons. Le bouton module vous permettra d intégrer un formulaire de contact ou un diaporama. Il suffit de choisir à quel module vous voulez le lier. Votre U.me peut contenir jusqu à 5 pages, le bouton navigation vous permet de passer d une page de votre site web mobile à une autre (voir Créer plus de pages mobiles). 2 - Le contenu Le deuxième bloc du contenu général vous permet d intégrer des zones de texte, des vidéos et un formulaire de contact. Pour les intégrer dans votre U.me il faut suivre le même système que pour les boutons cliquez - déposez.

10 a - Ajouter une zone de texte Vous pouvez ajouter du texte, et le mettre en page comme vous le souhaitez grâce à l outil prévu à cet effet. Comme pour les boutons vous devez cliquer et déposer le bouton zone de texte dans le smartphone, puis cliquer sur le bouton éditer pour en spécifier préciser le contenu. Notre outil vous permet de taper et de personnaliser votre texte comme n importe quel autre programme de traitement de texte. Lorsque vous avez terminé, et que vous êtes satisfait par votre mise en page, cliquez sur Valider les modifications

11 b - Insérer une vidéo Vous pouvez insérer des vidéos dans vos sites web mobile. Elles devront être hébergées sur votre site ou bien sur un hébergeur parmi : youtube, dailymotion. Les vidéos seront visuellement intégrées dans le site web (aucune redirection ne sera nécessaire). Cliquez sur le bouton Lien vidéo et déposez-le dans le smartphone ; cliquez ensuite sur le bouton éditer. Nous vous demanderons alors de choisir le type de vidéo (youtube, dailymotion ou autre), vous n aurez plus qu à taper l URL de votre lien, et cliquer sur valider. c - Intégrer un formulaire de contact Vous pouvez intégrer un formulaire de contact dans votre U.me. Celui-ci se divise en plusieurs catégories.

12

13 Ajoutez des champs à votre formulaire Vous pouvez ajouter plusieurs champs à votre formulaire, chaque champ représentant une zone d information qui devra être remplie par la personne qui voudra vous contacter. Il peut s agir d une zone de texte, d un , ou encore d un numéro de téléphone. Vous pouvez aussi rendre certains champs optionnels, c est à dire qu on pourra vous envoyer un message même si ce champ n est pas renseigné. Champs du formulaire Vous pouvez organiser vos champs pour qu ils apparaissent dans un certain ordre. Pour cela vous devez cliquer et faire glisser chaque champ dans l ordre qui vous convient. Options de design Vous pourrez également personnaliser la couleur des textes et du fond de votre formulaire de contact. Pour cela vous pouvez rentrer directement le code couleur que vous souhaitez ou bien vous pouvez cliquer sur le petit carré noir et choisir la couleur qui vous plaît. de réception Pensez à bien rentrer l sur lequel vous souhaitez recevoir les messages envoyés via ce formulaire de contact. Bouton d envoi Vous pouvez modifier le texte qui apparaîtra sur le bouton d envoi du formulaire. Message s il manque des champs requis Comme cela a été expliqué un peu plus haut, vous pouvez rendre certains champs optionnels. En revanche si jamais une personne essaie de vous envoyer un message alors que tous les champs requis ne sont pas remplis, elle verra apparaître un message, que vous pouvez personnaliser, lui demandant de remplir tous les champs. Page de validation Une fois le message envoyé, le mobinaute sera redirigé vers une autre page de votre site web mobile. Vous pouvez choisir laquelle dans notre liste déroulante. Pensez à valider vos modifications avant de prévisualiser votre formulaire.

14 3 - La mise en page et les grilles Vous pouvez personnaliser la mise en page de votre U.me en rajoutant des espacements ou des grilles. a- Les espacements Vous pouvez rajouter des zones vides entre deux éléments de votre page. Un curseur vous permet de choisir l espacement qui vous convient (plus vous allez à droite, plus l espace sera grand). b- Les grilles Les grilles vous permettent d agencer votre contenu en plusieurs colonnes. Pour cela choisissez le type de grille que vous voulez insérer (1, 2 ou 3 colonnes), cliquez sur le bouton et déplacez-le jusque dans le smartphone.

15 Vous voyez maintenant sous le rectangle habituel que vous venez d ajouter une, deux ou trois colonnes. Faites alors glisser le contenu que vous voulez dans les différentes colonnes. Vous pouvez également personnaliser les couleurs de fond des colonnes, pour cela il vous suffit de cliquer sur le bouton éditer. Images et médias Vous pouvez également intégrer des images dans votre site web mobile. Pour cela cliquez sur le petit onglet Images et médias dans la colonne de gauche. Commencez par télécharger toutes les images que vous souhaitez intégrer, cliquez sur choisissez un fichier puis sur upload.

16 Les images que vous venez d ajouter sont listées dans votre bibliothèque d images. Pour intégrer une image dans votre site web mobile, cliquez sur l image que vous souhaitez ajouter puis faites la glisser dans le smartphone. Vous pouvez modifier les caractéristiques de l image, en cliquant sur le petit bouton éditer. Sur cette page vous pouvez gérer la taille de l image (en déplaçant le curseur sur la barre horizontale), arrondir l image ou bien la rendre cliquable pour qu elle renvoie vers une URL ou vers une action de type appel, envoie d , navigation, etc. Design Pour personnaliser le design de votre site web mobile cliquez sur le petit bouton design dans la colonne de gauche. Sur cette page vous pourrez gérer toutes les options de personnalisation graphique de votre site web mobile. Vous pouvez changer la couleur de vos éléments, du texte, du fond, etc.

17 Si vous le souhaitez vous pouvez aussi intégrer en fond de votre site web mobile une image, pour cela il vous suffit de la télécharger en suivant le lien. Vous pourrez également gérer l arrondi des boutons et la couleur des icônes.

18 Menu de bas de page Vous pouvez également rajouter un menu de bas de page. Vous pouvez gérer automatiquement cette option en vous rendant dans la catégorie Menu de bas de page dans la colonne à gauche. Vous devez ensuite choisir le nombre de bouton que vous voulez intégrer en bas de page, et leur position. Vous pouvez maintenant personnaliser le contenu de vos boutons, pour commencer cliquez sur Éditer le 1er bouton. Vous êtes redirigé vers une page d édition de bouton classique, vous pourrez choisir le type de bouton que vous souhaitez intégrer, son aspect graphique et son contenu. Diaporama Vous pouvez ajouter un diaporama dans votre site web mobile depuis l interface du module. Mais celui-ci est configurable depuis la catégorie Diaporama dans la colonne de gauche.

19 Vous retrouvez sur cette page les images que vous avez téléchargées dans votre bibliothèque. Vous pouvez sélectionner les photos que vous souhaitez voir apparaître dans votre diaporama simplement en cliquant dessus. Chaque photo sélectionnée est encadrée de vert, si vous souhaitez ajouter des photos dans votre bibliothèque rendez-vous sur la catégorie Images et Médias. Lorsque vous consultez votre site mobile, pour accéder à votre diaporama vous devrez cliquer sur le bouton qui lui est associé. Une fenêtre spéciale s ouvrira faisant défiler les images que vous aurez choisies. Créer plusieurs pages mobiles Avec notre interface U.me vous pourrez créer jusqu à 5 pages dans votre site web mobile. Par défaut vous commencez la création de votre site par la première page, pour créer d autres pages vous devez cliquer sur le numéro de page que vous voulez compléter sous le smartphone.

20 Vous pouvez maintenant commencer à créer une deuxième page! Le processus est le même que pour les autres pages. Pour faciliter la navigation, pensez à mettre des liens entre vos pages, pour cela vous devez insérer un bouton module et choisir Navigation dans le type de bouton (voir étape c les boutons spéciaux). Paramètres Pour intégrer des paramètres spéciaux cliquez sur l onglet Paramètres sur la barre horizontale principale.

21 1-Analytics Si vous possédez un compte Google Analytics, vous pouvez renseigner votre identifiant sur cette page afin de suivre les statistiques de votre site web mobile. 2 -Ajouter un Favicon Depuis cette page, vous pouvez rajouter un favicon sur votre site web mobile. La taille recommandée pour cette image est de 16*16 pixels. Un favicon est une petite image représentant le site web, il apparaît dans la barre de navigation, dans la liste des favoris, dans les onglets, dans les raccourcis...

22 Com m u nique r sur votre site web mobile Un fois votre site web mobile est maintenant en ligne il ne vous reste plus qu à le diffuser. Pour commencer, rendez-vous sur la page d accueil de votre U.me, en cliquant sur l onglet Accueil / Publication dans la barre horizontale. Sur cette page vous retrouverez l URL de votre site web mobile, mais vous pourrez aussi lui créer un QR Code.