Comment créer l'écran d'accueil de votre app ?

Bonjour et bienvenue dans votre back office GoodBarber

Aujourd'hui nous allons apprendre à paramétrer la Home de votre app.

La Home est la première page que les utilisateurs verront lorsqu'ils ouvriront votre application.

Sur cette page, vous pouvez créer une navigation secondaire, en complément de votre mode de navigation principal.

Commençons tout de suite en nous rendant dans le menu My app, Design, Home.

Les modules qui constituent votre Home sont appelés Widgets.

Il en existe plusieurs types:

- Les widgets de contenu.

Ils affichent un aperçu du contenu des sections de votre application.

- Les widgets de lien

Vous pouvez créer des liens vers les pages internes de votre application ou des liens externes sur votre page d'accueil ou des actions comme appeler, envoyer un SMS ou un email.

- Le widget publicitaire

Ce widget affiche les publicités définies dans votre menu de monétisation.

- Le widget de Recherche

Il peut s'activer si vous avez ajouter une section Recherche à votre app. Il permet aux utilisateur d'effectuer des recherche depuis la page d'acceuil.

- Le widget de liens sociaux

Pour afficher des raccourcis vers vos réseaux sociaux.

- Le widget Newsletter

Qui vous permet de collecter les e-mails de vos utilisateurs.

- Le widget Séparateur

Qui affiche un séparateur entre les autres widgets.

- Le Widget HTML

Avec lequel vous pouvez afficher votre propre code HTML.

Attention, la plupart des widgets sont en fait des raccourcis vers des sections existantes. Ils n'apparaitront que si vous avec ajouté la section à votre app. Par exemple, comme je vous l'ai dit, si vous n'avez pas de section Recherche dans votre boutique, le widget Recherche ne vous sera pas proposé.

On va commencer par ajouter un widget Lien.

Je veux proposer une navigation dans les différents services de mon Spa à mes utilisateurs.

Je choisi le template Visual.

En premier lieu je crée les liens vers les différentes sections que je veux rendre accessibles.

Massages en premier.

Je choisi le titre de mon lien, l'image.

Vous pouvez ajouter un description et un bouton d'action mais je ne vais pas le faire.

Je fais la même chose pour les autres sections que je veux afficher.

Facials.

Packages.

Maintenant je paramètre les Settings.

La couleur de fond du widget.

Les polices

Le bouton d'action mais moi je n'en ai pas mis.

Les marges.

Et les effet sur les images.

Et voilà c'est fait !

Je vais maintenant créer un widget de contenu pour afficher les événements de mon Spa.

C'ets toujours le même principe. On ajoute, puis on édite le widget.

J'ajoute ensuite un autre widgets contenu pour afficher ma section Utilisateurs dans laquelle j'ai créer un groupe pour présenter les employées du Spa.

Ensuite un autre widget Lien.

Cette fois je vais y afficher

- ma page About,

- mon formulaire de reservation de soin,

et deux actions:

- l'envoi d'un SMS 

- et l'appel.

Je créer mon design.

Et enfin, je crée un widget Newsletter pour me constituer une petite base de mails ;)

Voilà il est bien ajouté, mais je préfèrerais qu'il soit au dessus de mon widget de lien.

Il suffit de la faire glisser à la bonne place.

Comme ca!

Voilà c'est fini !

La home offre des millions de possibilités, surtout avec les widgets Liens, qui vous permettent d'afficher des liens vers vos différentes sections, mais aussi des actions (appel, mail, sms) ou des liens externes. Et le widget HTML que vous pouvez entièrement personnaliser.

Je vous montre la version finale de ma Home.

Aller, deux autres petits exemple pour que vous voyez qu'on peut vraiment créer des Home toutes différentes visuellement et au niveau fonctionnel.

Voila la Home de mon app d'entreprise.

Et la Home de mon app de News locales.

Voilà vous pouvez maintenant créer votre propre Home, j'ai hâte de voir les résultats !

A bientôt pour un nouveau tutoriel !