Toute une panoplie de systèmes de créateur de site web existe actuellement sur le marché. Comme tu le sais, mon outil préféré : Webflow. Et en tant que web designer, on aime le côté visuel des choses. On ne veut pas écrire des lignes de codes et bloqué par des fonctions complexe à comprendre, et pourtant, on a une créativité débordante qui n’attends qu’une seule chose : “la liberté”. Aujourd’hui, je vais donc te parler de l’une d’entre elle : le positionnement des éléments sur Webflow.

À toi la liberté de création...

SONDAGE

Selon toi, la meilleure méthode pour placer ou déplacer un élément est

L’utilisation du code html, css, javascript

La fonctionnalité glisser-déposer

Autre?

Que tu utilises ou non du code, tu devras utiliser la propriété position.

Elle définit la façon dont un élément est placé sur une page. Il va également falloir entrer des valeurs chiffrées (top, right, bottom, left) à cette propriété.

Dans ce guide, tu vas découvrir les notions sur la propriété position (ainsi que sur d’autres propriétés relatives). Après lecture et quelques pratiques, tu pourras enfin designer un site web comme bon te semble sur Webflow, en plaçant chaque élément d’une page web à l’endroit adapté.

D’ailleurs, c’est précisément pour cette raison que j’ai décidé d’utiliser Webflow, et non d’autres systèmes de création de sites. Je voulais du beau et du code propre.

SOMMAIRE

Webflow, le code et les propriétés

Différentes sortes de position

Paramétrage du Float

Propriété Clear sur Webflow

Conclusion

Webflow, le code et les propriétés

Tu vas peut-être me dire que tous les autres créateurs de site web permettent de déplacer les éléments d’une page web, car les fonctionnalités que je vais t’expliquer tout à l’heure sont universelles. C’est du code CSS que les développeurs web et certains webdesigners peuvent manipuler.

Mais alors, pourquoi Webflow ?

Je dois t’avouer qu’à mes débuts, je ne connaissais rien au code. J’ai essayé pas mal de systèmes de création de sites web, mais je n’arrivais pas à trouver celui qui me convenait vraiment. C’est vrai que je pouvais créer des sites internet sur ces autres systèmes, mais quand je voulais aller plus loin, je découvrais que je devais maîtriser ne serait-ce que les bases HTML et CSS. Je ne pouvais donc pas créer un site sur mesure, exactement comme je le voulais.

C’est alors que j’ai pris connaissance de l’existence de Webflow, le logiciel de création de sites internet destinés aux webdesigners ! Pour construire un site web, il suffit d’user de la fonction glisser-déposer. En aucun cas, je n’ai été amené à utiliser du code ni même à les comprendre. Les modifications se font visuellement. Je me suis dit : pourquoi pas ? Et me voilà où je suis, quelques années plus tard.

Avec Webflow, il est donc évident que tu peux pleinement faire usage des différentes propriétés que je vais aborder au cours de cet article. Elles sont même plus faciles sur Webflow.

Positionnement Webflow : lesquels ?

En tout, 5 types de positions sont utilisés pour concevoir un site internet :

1. Statique
2. Relative
3. Absolue
4. Fixe
5. Sticky

Position statique

Il s’agit de la position par défaut d’un élément. Chaque élément que tu insères sur une page web aura automatiquement cette position. En termes plus techniques, on peut dire que l’élément en question suit le flux normal de page.

Position relative

Pour t’aider à mieux mémoriser, une simple définition du mot “relatif” peut suffire. On dit que quelque chose est relatif lorsque celui-ci dépend d’une autre chose.

De la même manière, un élément a une position relative lorsqu’elle (ou plus précisément, sa position) est fonction d’autre chose (et donc, de sa position normale). Je m’explique : l’élément en question peut être décalé, mais par rapport à sa position initiale. Pour le décaler, il suffit de modifier les valeurs de top, left, bottom et right.

On a généralement recours à ce type de position lorsqu’on veut ajuster quelque chose.

Une fois que l’élément en question est déplacé, il ne perd pas encore sa place initiale. Elle lui appartient toujours. Quant aux autres éléments qui l’entourent, ils ne sont pas affectés par ce déplacement. C’est pourquoi il se peut que les différents éléments se mettent à cheval par dessus les uns les autres.

Position absolue

Lorsque tu glisses un élément sur une page web, celui-ci prend tout de suite une position statique (la position par défaut, comme je l’ai expliqué tout à l’heure). Cependant, cette place ne convient pas forcément au design de ton site. Il faut déplacer l’élément. C’est là que la position absolue entre en jeu.

Cette fonction permet de placer un élément n’importe où sur une page (que ce soit à haut à droite, en haut à gauche, en bas ou encore au centre...). Encore ici, il suffit de modifier les valeurs des top, bottom, right et left. Tu dois savoir que le déplacement ne se fait pas forcément par rapport à l’écran entier. Si l’élément se trouve dans un bloc, ce bloc sera sa référence lors du déplacement (ce qui est valable même si ce bloc est placé en position fixe, relative ou absolue).

Que se passe-t-il si 2 éléments sont placés en absolu en même temps ? Ils risquent de se chevaucher, à moins que tu n’utilises la propriété z-index (je l’expliquerai un peu plus tard).

Position fixe

La position fixe ressemble à celle absolue. L’élément peut être placé où que tu veuilles. Seulement, il reste visible même lorsque tu défiles la page vers le bas (voici un exemple que tu rencontres certainement souvent : la barre de menu qui reste visible quand tu descends plus bas dans la page).

Position sticky

Cette position est un mélange de position relative et de position fixe. En effet, l’élément reste sur une position relative au flux du document jusqu’à un certain point. Il prend alors le comportement d’un élément fixe, c’est-à-dire qu’il reste visible même si tu défiles la page encore plus loin. Ensuite, lorsqu’il atteint le bas de page (un point que tu auras défini également), le défilement de l’élément s’arrête.

Pour qu’elle fonctionne, tu dois spécifier à partir de quel moment cet élément adoptera la position sticky (les valeurs top, left, bottom et right).

Comme cette position est assez récente (elle est celle qui est apparue la dernière parmi toutes celles citées), elle n’est pas encore compatible avec certains navigateurs. Alors, si jamais tu rencontres un problème avec ton site sur ce point, veille premièrement à vérifier sur d’autres navigateurs.

Paramétrage de positionnement Webflow

Entrons maintenant dans le vif du sujet : comment configurer ces positions sur Webflow ?

La position statique n’entre pas en ligne de mire ici. Comme je l’ai très bien expliqué tout à l’heure, il s’agit de la position d’un élément par défaut. Celles qui nous intéressent sont plutôt :

• positionnement webflow fixe
• positionnement webflow absolue
• positionnement webflow sticky

Pour chacune d’entre elles, tu auras à ta disposition :

• le contrôle de positionnement Webflow
• l’indicateur de relativité
• Z-index

Contrôle de positionnement

Ce que j’adore avec Webflow, c’est que tout est déjà prêt (ou presque). Tu verras par exemple des positions prédéfinies pour les positions absolue et fixe (en haut à gauche, en haut à droite, en bas à gauche, en bas à droite, gauche, à droite, top, bas, full). Rien de plus simple que de cliquer sur la position que tu souhaites.

Sinon, tu peux toujours la régler sur des valeurs personnalisées (pour chaque côté). Ces astuces pourront également t’aider :

• Haut : en augmentant la valeur, tu pousses l'élément vers le bas (à partir du haut ; de même pour le bas )
• Gauche : en augmentant la valeur, tu pousses l’élément vers la droite (à partir de la gauche ; de même pour la droite)

Remarque : les valeurs négatives sont permises. L’élément se déplacera alors dans la direction opposée.

Indicateur de relativité

Il s’agit d’un repère qui t’aide à savoir par rapport à quel élément l’élément concerné est positionné. Une piqûre de rappel n’a jamais fait de mal :

• Position relative : l’élément est positionné par rapport à lui-même.
• Position absolue : l’élément est positionné par rapport à un élément parent, lequel doit avoir une autre position à part statique.
• Position fixe : l’élément est positionné par rapport au corps de la page et reste visible.
• Position sticky : l’élément est positionné par rapport à un élément parent (le corps de la page dans la plupart des cas).

Z-index

Z-index est la position d’un élément sur l’axe Z imaginaire. Je t’en ai un peu parlé dans les paragraphes précédents.

Chaque élément sur ta page web a une valeur Z par défaut. En la modifiant, tu pourras changer l’ordre d’affichage. Le chiffre accepté étant un nombre entier entre 1 à 2147483647. Qu’en est-il des chiffres négatifs ? Ils sont aussi valables. Seulement, tu risques de perdre la visibilité de l’élément concerné.

En fait, les éléments ajoutés en premier se trouvent logiquement en dessous des récents éléments. Ceux en bas de la page s’empilent donc au-dessus de ceux en haut. Pareillement, ceux à droite s’empilent au-dessus de ceux à gauche.

Ensuite, les éléments au positionnement statique se trouvent toujours en dessous des éléments positionnés (relative, absolue, fixe et sticky).

Paramétrage du Float

Ce paramètre peut être modifié au niveau du panneau style. En quoi consiste-t-il précisément ? L’exemple le plus proche qui me vient à l’esprit est celui de l’image qui flotte à droite d’un texte. Cette image est aussi entourée par ce texte.

Par ailleurs, c’est cette technique qui est utilisée pour certains composants prédéfinis de Webflow : colonne, liste de collection, etc.

Bref, le float permet ainsi de faire sortir un élément du flux normal d’une page (ou plus simplement, de le faire flotter comme son nom l’indique). Cette manipulation est délicate puisqu’elle a un impact sur les autres éléments environnants. Pour y accéder, il faut se rendre dans le panneau style.

Attention toutefois, le float ne fonctionne pas sur un élément avec position absolue.

Il existe 3 types de float :

• float none
• float gauche
• float droite

Float none

Il est le paramètre par défaut. L’élément n’est donc pas flottant.

Float à gauche

L’élément flottera évidemment à gauche du conteneur. Sinon, il sera décalé vers la gauche jusqu’à ce qu’il touche un autre élément en float left.

Float à droite

Tu connais le refrain : l’élément flottera à droite du conteneur ou sera déclaré vers la droite jusqu’à ce qu’il touche un autre élément en float right.

Propriété Clear sur Webflow

Pour encore mieux contrôler le design d’un site web, la propriété clear s’avère être d’une importance capitale. Grâce à elle, tu peux empêcher un élément de se positionner automatiquement près d’un élément flottant ; il ira tout de suite se placer en bas. Si tu as bien suivi, tu sauras que cette propriété s’utilise donc juste après celle float.

Évidemment, le clear setting ne s’applique pas à l’élément flottant lui-même. Ce serait contradictoire.

Comme le float setting, celui-ci se catégorise en :

• clear none
• clear left
• clear right
• clear both

Clear none

Il s’agit de la valeur par défaut. Si tu l’actives, il n’y aura aucun impact sur l’élément. Il restera positionné à côté des éléments flottants.

Clear left

Celui-ci empêche un élément de se placer près des éléments avec propriété float : left. Il en est de même pour le clear right.

Clear right

Celui-ci empêche un élément de se placer près des éléments avec propriété float : right.

Clear both

Celui-ci empêche un élément de se placer près des éléments avec les 2 propriétés float : left et float : right.

Notez ici que la propriété clear va avoir un comportement légèrement différent selon qu’on l’applique à des éléments non flottants ou au contraire à des éléments déjà flottants.

Conclusion

Bref, je peux comprendre que le mode de positionnement est à première vue complexe et nécessite de la pratique. C’est pourquoi je t’invite à jouer avec ces propriétés et de voir si en pratiquant tu puisses mieux comprendre l’utilité de ces propriétés.

N’hésite pas à partager tes créations en commentaires ou lors des évènements prochains!

Commentaires