Raison n° 1

Pour assister au Live de ce Jeudi bien sur!

On papotera de “Comment transformer ta passion, tes compétences et ton expertise en un Business en ligne rentable dès le 1er jour”

3 SUPER raisons
de nous rejoindre
Raison n° 2

Pour les Cadeauuuuuuuuux

Puisque tu aimes aussi les cadeaux, reçois dans ta boite mail de l’énergie, les stratégies et les outils (plus grandioses les uns que les autres) qui vont générer des résultats dans ton Business.

3 SUPER raisons
de nous rejoindre
Raison n° 3

Pour la bonne humeur & la motivation

Par ce qu’on est super sympas et que des gens sympas aiment s’entourer d’autres gens sympas, alors qu’est ce que t’attends? Rejoins-nous!

3 SUPER raisons
de nous rejoindre
Psssst! On me chuchote
dans l’oreillette que
tu ne seras pas déçu!
INSCRIPTION GRATUITE

Rejoins-nous

Wouhou, ça c'est une excellente décision!
Oops! Réessaye pour voir?
Héééélaba! T'es tombé au bon endroit - Libère-toi 1h ce jeudi pour découvrir l’entourloupe qui propulsera ton Business sur le Web

Modèle d'emboîtement sur Webflow : comment fonctionne-t-il ?

August 14, 2020
Web Design,Freelance,Business
emboîtement sur webflow
Photo by Brina Blum on Unsplash

Après avoir lu cet article, tu sauras mieux concevoir un site internet. Même si notre principe est de créer un site internet sans code, sache 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 ?

L’emboîtement, c’est quoi ?

Je te propose de te rendre sur un site de ton choix. Si tu me suis depuis quelque temps déjà, tu sauras 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"

emboîtement sur webflow
Photo by Sarah C on Unsplash

Leur modèle d’emboîtement est certainement correct. Mais comment le vérifier ?

Dans ma vidéo, je l’explique plus clairement. Connais-tu l’outil de Chrome “inspecter” ? Lorsque tu te trouves sur le site en question, fait 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ù tu rencontres un problème (de même pour ceux qui travaillent sur Safari), pourquoi ne pas installer Chrome (ne serait-ce que pour cette fois) ?

Ton objectif doit être de comprendre comment se passent les emboîtements sur une page web. Comme tu verras 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 tu as compris (ou presque), il est temps de voir comment fonctionnent ces emboîtements sur Webflow.

emboîtement sur webflow
Photo by Louis Hansel Shotsoflouis on Unsplash

Le principe de l’emboîtement sur Webflow

Tu as 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 tu as 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 t’expliquer l’emboîtement sur Webflow. J’ai utilisé le div bloc. Au fil des années, tu comprendras mieux quand utiliser les différentes balises. Mais aujourd’hui, je te propose de te 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, tu devras 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 tu veux que les boîtes prennent forme, tu n’as qu’à utiliser le CSS. Je te montre d’ailleurs dans une autre de mes vidéos comment apprendre le CSS grâce à Webflow.

emboîtement sur webflow
Photo by Lettuce Grow on Unsplash

Conclusion

Désormais, quand tu conçois une page web, je te conseille d’utiliser les emboîtements. Tu auras alors une structure plus propre et plus correcte. Comme tu le sais 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.

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be
Kevin Palombo, Gérant de Happydesk
Reçois une montaaaagne de cadeaux

Cadeaux.

On garde tous son âme d’enfant, alors on aime recevoir plein de cadeaux, une montaaaagne de cadeaux, une galaxiiiiiie de cadeaux, une.... YOUHOU, t’es toujours avec nous? Puisque tu aimes aussi les cadeaux, reçois dans ta boite mail de l’énergie, les stratégies et les outils (plus grandioses les uns que les autres) qui vont générer des résultats dans ton Business.

Psssst !

Libère-toi du temps pour jeudi car une surprise intergalactique t’attend.