Créez une fonctionnalité simple

Vous avez identifié la structure d’une page, modifié son style et pris en main l’interface de WeWeb. Dans ce chapitre, vous allez réaliser une fonctionnalité simple, de bout en bout. Vous allez assembler les trois pièces du puzzle : structurer une page, lui appliquer un style cohérent et y ajouter une première logique interactive. L’idée est de créer une mini-interface fonctionnelle, simple mais complète, qui mobilise l’essentiel de ce que vous avez appris jusqu'ici. Mais, avant de cliquer partout, posons le plan de bataille.

Nous n'allons pas construire une application complexe comme Airbnb ou Uber tout de suite ! Le but ici est de créer une fonctionnalité isolée qui traverse toutes les couches techniques (Structure, Design, Logique).

Reprenons notre fil rouge : le lancement de la chaussure "Running Pro 2024". Vous avez déjà analysé sa carte produit.

Maintenant, l'équipe marketing a besoin d'une Landing Page de pré-lancement.

L'objectif de cette page est simple :

1. Présenter le produit (Titre + Image).

2. Capturer l'intérêt des visiteurs via un bouton d'inscription à une liste d'attente.

3. Confirmer l'inscription à l'utilisateur sans recharger la page.

Il est parfait pour débuter car il nécessite :

• De l'agencement (sections, conteneurs).

• Du style (mise en valeur du produit).

• De l'interactivité (réagir au clic du bouton).

Visualisez le résultat : Une page épurée avec une barre de navigation (Header), une grande section centrale (Hero) contenant le produit et un appel à l'action, et un pied de page (Footer) discret.

C'est parti pour la construction.

Construisez la structure de la page

Avant de rendre une page belle ou interactive, il faut d’abord lui donner des bases solides.

Dans ce screencast, vous allez apprendre à construire le squelette HTML de votre landing page dans WeWeb. Nous allons découper la page en grandes zones (Header, Hero, Footer), puis ajouter un Container central pour organiser correctement les éléments essentiels : un titre, une image, un texte et un bouton.

L’objectif est simple : poser une structure claire et robuste, en gardant toujours un œil sur le Navigator, afin de vérifier que chaque élément est bien placé dans la bonne “boîte”.

La page est encore brute et empilée… mais parfaitement structurée. C’est une étape indispensable avant de passer à la mise en forme. Dans la section suivant, nous allons justement transformer ce squelette en une page attractive grâce au style et aux classes réutilisables.

Appliquez le style et créez un Design System

Maintenant que votre structure est solide, il est temps de passer à la décoration. Dans ce deuxième screencast, vous allez apprendre à appliquer les premiers styles essentiels pour obtenir une landing page claire, centrée et professionnelle. Vous commencerez par ajouter de l’espace grâce au padding, puis vous utiliserez les options de Layout (Flexbox) pour centrer facilement tout le contenu à partir du conteneur parent. Enfin, vous ferez un pas important vers une approche plus “pro” : au lieu de styliser vos éléments un par un, vous allez créer des classes globales, comme “Bouton Primaire” ou “Titre Hero”, pour construire un design system réutilisable.

La page est non seulement plus esthétique, mais aussi plus cohérente et prête à évoluer dans un vrai projet. Il y a maintenant une interface bien structurée, bien alignée, et les bases d’un style réutilisable pour la suite.

Ajoutez une logique simple

Votre page est belle, mais le bouton ne fait rien. Il est temps d’ajouter une logique interactive grâce aux Workflows. Nous voulons que, au clic sur le bouton, l'utilisateur reçoive un message de confirmation. Pour que l'interface change, elle doit "savoir" que quelque chose s'est passé. Nous allons utiliser une Variable.

• Allez dans le panneau de gauche, onglet Data (ou Variables).

• Créez une nouvelle Variable nommée isRegistered(est Inscrit).

• Type : Boolean (Vrai/Faux).

• Valeur par défaut : false (Non, il n'est pas encore inscrit).

Ensuite, créez l'action :

• Sélectionnez votre bouton "M'inscrire".

• Dans le panneau de droite, cliquez sur l'icône Éclair (Workflows).

• Cliquez sur + Create a workflow.

• Trigger (Déclencheur) : Choisissez "On click".

• Action : Choisissez "Change variable value".

• Sélectionnez votre variableisRegisteredet définissez sa nouvelle valeur sur true.

Maintenant, il faut que l'interface réagisse à ce changement de variable.

• Ajoutez un nouveau Text sous le bouton : "Merci ! Vous êtes bien inscrit."

• Ajoutez éventuellement une couleur verte..

• Avec ce texte sélectionné, allez dans le panneau de droite, onglet Settings (roue crantée).

• Cherchez Conditional Rendering (Rendu conditionnel).

• Cliquez sur l'icône de lien (Bind) et sélectionnez votre variableisRegistered

Ce texte n'existera dans la page que siisRegisteredest vrai. Lancez le mode Preview (l'œil en haut). Cliquez sur le bouton. Le texte de confirmation apparaît ! Vous venez de créer votre première application web dynamique.

À vous de jouer

Pour vous approprier l'outil, je vous invite à ne pas vous arrêter là. Une interface vit par ses détails. Choisissez une des tâches suivantes et réalisez-la en autonomie :

1. Ajouter une deuxième interaction : Faites en sorte que le bouton "M'inscrire" disparaisse une fois que l'utilisateur a cliqué (Indice : utilisez aussi le Conditional Rendering sur le bouton, mais avec l'inverse de la variable).

2. Modifier un style global : Changez la couleur de votre classe "Bouton Primaire" pour un orange vif et observez comment cela met à jour votre bouton instantanément.

3. Ajouter une icône : Ajoutez une icône "Enveloppe" à l'intérieur de votre bouton, à gauche du texte, pour renforcer le contexte d'inscription.

En résumé

• Une fonctionnalité simple est toujours une combinaison de trois couches : Structure (HTML), Style (CSS) et Logique (Workflows).

• L'utilisation de Containers et du Padding est essentielle pour structurer et aérer votre design.

• Les Classes (Styles Globaux) sont obligatoires pour maintenir une cohérence visuelle et gagner du temps sur le long terme.

• Les Variables servent de mémoire à votre page, et le Conditional Rendering permet d'afficher ou cacher des éléments selon l'état de ces variables.

• WeWeb permet d'assembler visuellement ces concepts complexes pour produire des interfaces fonctionnelles immédiates.

Dans le prochain chapitre, nous prendrons un peu de hauteur pour découvrir l'étendue des possibilités offertes par WeWeb, notamment la connexion à des données réelles externes, pour transformer vos prototypes en applications puissantes.