Aligner des éléments sur une page

Dans cet article, vous apprendrez à aligner des éléments sur votre page PageFly.lign elements on your PageFly page.

Étape 1: sélectionnez le conteneur de l’élément

Dans notre exemple, il y a une section avec 2 colonnes. Dans la colonne de droite, nous avons des éléments d’en-tête, de paragraphe et de bouton.

Tout d’abord, nous devons comprendre comment les éléments sont contenus sur la page. Par exemple, nous sélectionnons l’élément Bouton et le fil d’Ariane affiche ses conteneurs: Section – Ligne – Colonne – Bouton.

Puisque nous voulons aligner ce bouton, nous devons sélectionner son conteneur qui est la colonne dans le fil d’Ariane.

Étape 2: aligner tous les éléments dans le conteneur sélectionné

Avant de passer aux étapes spécifiques, vous pouvez regarder la vidéo ci-dessous

Maintenant, nous voulons aligner l’élément Button au centre, sélectionnez la colonne> onglet Style> section TYPOGRAPHIE> cliquez sur l’icône Centrer sous Alignement du texte selon l’image ci-dessous

Étape 3: aligner un élément spécifique à l’intérieur d’un conteneur

Dans ce cas, nous souhaitons toujours que l’en-tête et le paragraphe soient alignés à gauche, procédez comme suit:

  • Choisissez le conteneur du texte de l’en-tête, qui est l’élément En-tête.
  • Accédez à l’onglet Style dans l’inspecteur d’éléments à droite.
  • Cliquez sur l’icône Gauche sous Alignement du texte de la section TYPOGRAPHIE.

Faites de même pour le paragraphe en sélectionnant Élément Paragraphe> onglet Style> section TYPOGRAPHIE> icône de gauche sous Alignement du texte. En conséquence, vous verrez quelque chose comme l’image ci-dessous.

La priorité des paramètres de style

N’oubliez pas que les paramètres des éléments imbriqués ont une priorité plus élevée que ceux de leurs conteneurs. Par exemple, si vous définissez l’alignement de la colonne sur “centre”, mais que l’élément de paragraphe de cette colonne est défini sur “gauche”, ce paragraphe sera aligné à gauche.

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!
Languages