Mettre le contenu en colonnes.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une page avec les quatre mises en page de colonnes que vous utiliserez le plus : contenu avec barre latérale, deux moitiés égales, trois tiers et quatre quarts. Chacune reçoit un titre au-dessus. Utilisez-la pour apprendre quel préréglage convient à quel contenu. Pour tous les réglages de ligne, voir Ajouter une ligne.

La vidéo crée la page de collecte des déchets d’une municipalité.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La page est ouverte dans le builder. Pour une nouvelle page, accédez à Content > Add content > Landing Page (/node/add/landing_page) et cliquez sur Save.
  • Les nouveaux éléments arrivent en haut de leur section. C’est pourquoi chaque titre se place après sa ligne : il arrive au-dessus d’elle.

Choisir une mise en page

Layout Best for Preset
Contenu avec barre latérale articles avec liens connexes 2/3 + 1/3
Deux moitiés égales comparaisons, avant et après la valeur par défaut de la ligne
Trois tiers égaux points forts, services 1/3 + 1/3 + 1/3
Quatre quarts égaux statistiques, petites cartes 1/4 + 1/4 + 1/4 + 1/4

Une nouvelle Row arrive avec deux colonnes égales. Toutes les autres mises en page viennent de l’icône de grille de la ligne (Column layout).

Étape 1 : contenu avec barre latérale

  1. Cliquez sur Add Elements sur la page vide et choisissez Section dans l’onglet Layout.
  2. Cliquez sur + sur la section et choisissez Row. Cliquez sur son icône de grille (Column layout), choisissez le préréglage 2/3 + 1/3 et cliquez sur Save.
  3. Cliquez sur + dans la colonne large et choisissez Text dans l’onglet Content. Saisissez l’article, réglez la première ligne sur Heading 3 et cliquez sur Save.
  4. Cliquez sur + dans la colonne étroite et choisissez Text. Saisissez « Related » comme Heading 4, ajoutez une ligne par page connexe et cliquez sur Save.
  5. Cliquez sur + sur la section et choisissez Text ; il arrive au-dessus de la ligne. Saisissez « Content with a sidebar » comme Heading 2 et cliquez sur Save.

Étape 2 : deux moitiés égales

  1. Survolez la section et cliquez sur Add Section Below. Ouvrez les Plus > Paramètres de la nouvelle section, choisissez un Background gris clair dans le panneau Style et cliquez sur Save.
  2. Cliquez sur + sur la section et choisissez Row. Deux colonnes égales est la valeur par défaut, il n’y a donc rien à changer.
  3. Ajoutez un élément Text dans chaque colonne : « Before » et « After » comme Heading 4 avec une ligne chacun.
  4. Ajoutez le titre « Two equal halves » de la même façon qu’à l’étape 1.

Étape 3 : trois tiers égaux

  1. Ajoutez une troisième section avec Add Section Below et donnez-lui la classe Align text center.
  2. Ajoutez une Row, cliquez sur son icône de grille (Column layout), choisissez le préréglage 1/3 + 1/3 + 1/3 et cliquez sur Save.
  3. Ajoutez un élément Text dans chaque colonne : « Paper », « Glass » et « Organic » comme Heading 4 avec une ligne chacun.
  4. Ajoutez le titre « Three equal thirds ».

Étape 4 : quatre quarts égaux

  1. Ajoutez une quatrième section avec un Background gris clair et la classe Align text center.
  2. Ajoutez une Row, cliquez sur son icône de grille (Column layout), choisissez le préréglage 1/4 + 1/4 + 1/4 + 1/4 et cliquez sur Save.
  3. Ajoutez un élément Text dans chaque colonne : le jour comme Heading 4 et ce qui est collecté.
  4. Ajoutez le titre « Four equal quarters ».

Étape 5 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’eye icon) et choisissez Preview.

Sur les écrans plus petits

Les colonnes se tiennent côte à côte à partir de 768 pixels de large : les tablettes affichent donc la même mise en page que les ordinateurs. Sur les téléphones, chaque colonne prend toute la largeur, et les colonnes s’empilent dans leur ordre. Pour une autre mise en page sur tablettes, cliquez sur l’icône de grille de la ligne (Column layout) et choisissez Add screen size.

Aller plus loin

Non montré dans la vidéo :

  • Narrow, wide, narrow : le préréglage 1/4 + 1/2 + 1/4 garde les longs textes lisibles avec des marges vides.
  • Mirror row : activez-le dans les réglages de la ligne pour intervertir les colonnes sur tablettes et ordinateurs. Les téléphones gardent l’ordre d’origine : la première colonne y arrive donc toujours en premier.

Ce que vous voyez

Quatre bandeaux se suivent, chacun avec son titre en haut. L’article et ses liens connexes partagent le premier, deux moitiés sont sur gris, puis trois tiers centrés. Quatre quarts centrés sur gris closent la page.

Si les colonnes ne s’affichent pas comme montré

  • La ligne n’a pas le bon nombre de colonnes. Le préréglage ne s’applique que quand vous cliquez sur Save dans la boîte de dialogue de mise en page. Cliquez à nouveau sur l’icône de grille de la ligne (Column layout), choisissez le préréglage et cliquez sur Save.
  • Un titre se trouve sous sa ligne. Le titre est arrivé avant la ligne, et les nouveaux éléments arrivent en haut de leur section. Glissez le titre au-dessus de la ligne par la poignée de glissement de sa barre de contrôle.
  • Les colonnes s’empilent sur une tablette. La tablette fait moins de 768 pixels de large, comme une petite tablette en portrait. Ajoutez une mise en page pour cette largeur avec Add screen size dans la boîte de dialogue de mise en page de la ligne.
  • Vos modifications ont disparu après un rechargement. Vous avez quitté la page avant de cliquer sur Save dans la barre d’outils du builder. Si Save affiche une erreur, voir Les modifications ne s’enregistrent pas.

Et ensuite ?