10 min de lecture
Toute une panoplie de systèmes de créateur de site web existe actuellement sur le marché. Comme vous le savez, 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 vous parler de l’une d’entre elle : le positionnement des éléments sur Webflow.
À vous la liberté de création...
Selon vous, 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 vous utilisiez ou non du code, vous devrez 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, vous allez découvrir les notions sur la propriété position (ainsi que sur d’autres propriétés relatives). Après lecture et quelques pratiques, vous pourrez enfin designer un site web comme bon vous 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.
Vous allez 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 vous 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 vous 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 vous pouvez 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.
En tout, 5 types de positions sont utilisés pour concevoir un site internet :
Il s’agit de la position par défaut d’un élément. Chaque élément que vous insérez 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.
Pour vous 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.
Lorsque vous glissez 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 votre 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. Vous devez 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 vous n’utilisez la propriété z-index (je l’expliquerai un peu plus tard).
La position fixe ressemble à celle absolue. L’élément peut être placé où que vous vouliez. Seulement, il reste visible même lorsque vous défilez la page vers le bas (voici un exemple que vous rencontrez certainement souvent : la barre de menu qui reste visible quand vous descendez plus bas dans la page).
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 vous défilez la page encore plus loin. Ensuite, lorsqu’il atteint le bas de page (un point que vous aurez défini également), le défilement de l’élément s’arrête.
Pour qu’elle fonctionne, vous devez 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 vous rencontrez un problème avec votre site sur ce point, veillez premièrement à vérifier sur d’autres navigateurs.
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 :
Pour chacune d’entre elles, vous aurez à votre disposition :
Ce que j’adore avec Webflow, c’est que tout est déjà prêt (ou presque). Vous verrez 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 vous souhaitez.
Sinon, vous pouvez toujours la régler sur des valeurs personnalisées (pour chaque côté). Ces astuces pourront également vous aider :
Remarque : les valeurs négatives sont permises. L’élément se déplacera alors dans la direction opposée.
Il s’agit d’un repère qui vous aide à savoir par rapport à quel élément l’élément concerné est positionné. Une piqûre de rappel n’a jamais fait de mal :
Z-index est la position d’un élément sur l’axe Z imaginaire. Je vous en ai un peu parlé dans les paragraphes précédents.
Chaque élément sur votre page web a une valeur Z par défaut. En la modifiant, vous pourrez 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, vous risquez 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).
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 :
Il est le paramètre par défaut. L’élément n’est donc pas flottant.
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.
Vous connaissez 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.
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, vous pouvez 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 vous avez bien suivi, vous saurez 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 :
Il s’agit de la valeur par défaut. Si vous l’activez, il n’y aura aucun impact sur l’élément. Il restera positionné à côté des éléments flottants.
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.
Celui-ci empêche un élément de se placer près des éléments avec propriété float : right.
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.
Bref, je peux comprendre que le mode de positionnement est à première vue complexe et nécessite de la pratique. C’est pourquoi je vous invite à jouer avec ces propriétés et de voir si en pratiquant vous pourrez mieux comprendre l’utilité de ces propriétés.
N’hésitez pas à partager vos créations en commentaires ou lors des évènements prochains!
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.
