Ajouter un conteneur de calques positionnés.

Apprendre DXPR BuilderCréer des pagesAjouter du contenuMise en page

Utilisez les calques positionnés quand vous voulez faire se chevaucher des éléments ou les placer à un point exact, ce que lignes et colonnes ne peuvent pas faire. Vous obtenez un canevas sur lequel vous glissez chaque élément où vous voulez, comme un titre sur une photo. L’exemple superpose un titre blanc de journée portes ouvertes sur une image. Pour du contenu courant côte à côte, Ajouter une ligne reste plus simple à garder propre sur téléphone.

Un titre blanc de journée portes ouvertes de printemps et sa date, superposés en haut à gauche d’une peinture abstraite orange

Ajouter un conteneur de calques positionnés

  1. Survolez la colonne et cliquez sur + dans sa barre de contrôle, ou sur le + au milieu d’une colonne vide, pour ouvrir le sélecteur d’éléments.
  2. Dans l’onglet Mise en page, cliquez sur Calques positionnés.
  3. Ses réglages s’ouvrent d’abord. Réglez Height pour que votre calque le plus haut tienne, puis cliquez sur Save. Un canevas vide apparaît.
  4. Survolez le canevas et cliquez sur + dans sa barre de contrôle pour ajouter un élément, comme Texte ou une Image. Chaque élément ajouté devient un calque à positionner.

Ce que vous voyez

Le canevas garde la hauteur réglée, et chaque calque reste où vous l’avez placé, au-dessus ou sous les autres. Les visiteurs voient la composition comme dans l’éditeur. Les positions sont stockées comme une part du canevas, donc un calque garde sa place quand le canevas rétrécit. Le texte garde sa taille sauf si vous activez Responsive.

Régler vos calques positionnés

Ouvrez les réglages depuis Plus > Paramètres dans la barre de contrôle Calques positionnés.

Réglage Rôle Défaut
Width Largeur du canevas, comme 100 % ou 600px 100 %
Height Hauteur du canevas en pixels 500
Responsive Met à l’échelle la hauteur du canevas et le texte avec la largeur du canevas, pour que la composition garde ses proportions sur petits écrans Désactivé

Positionner les calques

  • Sélectionner : cliquez sur un calque. Des poignées apparaissent sur ses coins et bords.
  • Déplacer : glissez le calque par son nom dans sa barre de contrôle, comme Texte ou Image. Les calques restent dans le canevas.
  • Redimensionner : glissez une poignée du calque sélectionné.
  • Ajouter à un point : double-cliquez sur une partie vide du canevas. Le sélecteur d’éléments s’ouvre, et le nouvel élément atterrit où vous avez cliqué.

Le menu Plus de chaque calque a quatre éléments supplémentaires. 100% width et 100% height étirent le calque sur le canevas. Bring forward et Send backward le déplacent au-dessus ou sous les autres calques.

Si rien ne s’affiche

  • Un calque ne bouge pas quand vous le glissez. Les calques ne bougent que par la poignée à leur nom dans la barre de contrôle. Survolez le calque et glissez cette poignée.
  • Un calque se cache derrière un autre. Il est plus bas dans la pile. Ouvrez le menu Plus du calque et choisissez Bring forward.
  • Les calques se chevauchent ou débordent sur téléphone. Responsive est désactivé, donc hauteur du canevas et texte gardent leur taille. Activez Responsive dans les réglages Calques positionnés.
  • Calques positionnés manque dans le sélecteur à l’intérieur d’un canevas. Un canevas ne peut pas contenir un autre canevas. Ajoutez plutôt le nouvel élément Calques positionnés à une colonne.
  • Calques positionnés manque partout dans le sélecteur. Votre profil d’utilisateur DXPR Builder l’exclut. Un administrateur coche Layers sous Elements dans votre profil à /admin/dxpr_studio/dxpr_builder/profile.

Et ensuite ?