4 min de lecture
Après avoir lu cet article, vous saurez mieux concevoir un site internet. Même si notre principe est de créer un site internet sans code, sachez que cela ne nous permet pas de déroger à la règle. En effet, elle est très importante en termes d’emboîtement HTML et CSS. Mais de quoi s’agit-il réellement ? Et comment s’y prendre pour structurer une page web de manière correcte ?
Je vous propose de vous rendre sur un site de votre choix. Si vous me suivez depuis quelque temps déjà, vous saurez que je vais encore prendre le site de Apple. Non seulement leur design est bien travaillé, mais leur site ne cesse d’être mis à jour. Leur équipe est à l’affût des dernières actualités.
Il y a une vidéo Youtube dans laquelle je décris cela en bas de l'article. Soutenez-moi en vous abonnant à la chaine YouTube "Happy Desk Design"
Leur modèle d’emboîtement est certainement correct. Mais comment le vérifier ?
Dans ma vidéo, je l’explique plus clairement. Connaissez-vous l’outil de Chrome “inspecter” ? Lorsque vous vous trouvez sur le site en question, faites un clic droit avec la souris, et inspecter. Une barre apparaît de suite sur la partie droite. Tout un ensemble de codes s’affiche. Chaque élément sélectionné sur l’écran correspond à un ensemble de codes dans la partie droite (un emboîtement dans lequel il peut y avoir un titre, quelques sous-titres, images ou autres éléments).
En principe, Firefox fonctionne de la même manière. Mais au cas où vous rencontrez un problème (de même pour ceux qui travaillent sur Safari), pourquoi ne pas installer Chrome (ne serait-ce que pour cette fois) ?
Votre objectif doit être de comprendre comment se passent les emboîtements sur une page web. Comme vous verrez dans ma vidéo, dans une boîte, on peut avoir plusieurs autres sous-boîtes. Et dans ces dernières, des sous-sous-boîtes, et ainsi de suite.
Une fois que vous avez compris (ou presque), il est temps de voir comment fonctionnent ces emboîtements sur Webflow.
Vous avez vu le nombre de codes dans une page web ? Il y en a vraiment beaucoup ! Heureusement pour nous, l’emboîtement sur Webflow nous épargne tout cela. Même en concevant les emboîtements sur cette plateforme, nous n’avons pas besoin de comprendre les codes.
Mais si vous avez envie d’en apprendre un peu plus (HTML ou Javascript), rendez-vous sur mes autres vidéos et articles ;)
Revenons à notre principale sujet :
Je suis parti d’une page blanche avant pour vous expliquer l’emboîtement sur Webflow. J’ai utilisé le div bloc. Au fil des années, vous comprendrez mieux quand utiliser les différentes balises. Mais aujourd’hui, je vous propose de vous contenter de cette balise-là. C’est comme une sorte de couteau suisse, il peut s’utiliser dans n’importe quel contexte.
Ensuite, dans cette première boîte, vous devrez ajouter d’autres boîtes, avant d’insérer les éléments comme les titres, les images, les paragraphes… D’ailleurs, c’est le principe même de l’emboîtement sur Webflow (et dans la conception d’un site internet en général). Tout se fait dans les boîtes ; chaque élément appartient à sa propre boîte.
Si vous voulez que les boîtes prennent forme, vous n’avez qu’à utiliser le CSS. Je vous montre d’ailleurs dans une autre de mes vidéos comment apprendre le CSS grâce à Webflow.
Conclusion
Désormais, quand vous concevez une page web, je vous conseille d’utiliser les emboîtements. Vous aurez alors une structure plus propre et plus correcte. Comme vous le savez sûrement, Google adore les sites bien conçus :) D’où l’intérêt de ne pas déroger à la règle de l’emboîtement sur Webflow.
Revenez sur cette page chaque fois que vous voudrez. Avez-vous trouvé des idées que j’aurais oubliées ? Si oui, lesquelles ? Laissez un commentaire ci-dessous ou envoyez un e-mail à hello@happydesk.be
Dans la joie et la bonne humeur
Que vous soyez débutant ou expérimenté, la Happy.webacademy vous donne l’énergie, les stratégies et les outils pour avoir plus de liberté et générer des résultats qui propulseront votre chiffre d’affaires dans les étoiles.
