Reconnaissance des éléments de page

Le formulaire de commande est divisé en éléments de page sous forme de sections, lignes et composants que vous pouvez reconnaître par le cadre coloré :

• Sections sont vert menthe

• Lignes sont bleu royal et peuvent contenir colonnes

• Composants sont jaune sable

• Sections

  Les sections forment la structure de base du formulaire de commande. Vous pouvez les utiliser pour diviser la page en zones, par exemple, en-tête, corps et pied de page. Vous pouvez définir la largeur de la page et une image de fond pour chaque section.

• Lignes et colonnes

  En insérant une ligne, vous choisissez combien de colonnes elle a. Les colonnes ne peuvent pas être ajoutées individuellement ou complétées plus tard.

  • Les lignes divisent la page en zones horizontales. Vous pouvez insérer plusieurs lignes les unes en dessous des autres et les déplacer vers le haut ou vers le bas avec tous les contenus. De cette façon, vous pouvez concevoir les lignes de manière thématique, par exemple, une ligne pour les données du produit, une ligne pour les champs de saisie, etc.

  • Les colonnes vous permettent d'afficher le contenu côte à côte dans les lignes. Par exemple, vous pouvez placer des données d'adresse à côté des données de paiement.

• Composants

  Les composants vous permettent d'ajouter un contenu spécifique. Chaque composant a ses propres propriétés et options de configuration.

Lors de la sélection d'un cadre, les éléments de cadre sont affichés, qui incluent des boutons d'icône pour diverses actions :

Afficher et masquer les éléments de page

Pour chaque section, ligne ou composant, vous pouvez définir la visibilité dans les paramètres respectifs :

• Tous : L'élément de page est affiché sur tous les écrans.

• Mobile uniquement ou Desktop uniquement : L'élément de page n'est affiché que sur les écrans respectifs et masqué sur les autres. Par exemple, vous pouvez afficher une image de produit de manière proéminente sur les écrans stationnaires mais la masquer sur les smartphones pour faciliter la navigation. Dans ces cas, le contenu de l'élément de page est entouré de rouge et étiqueté :

  

• Masquer : L'élément de page n'est pas affiché du tout. Cela vous permet d'ajouter un contenu qui n'est pas encore destiné à être utilisé. Par exemple, vous pouvez ajouter un composant pour une image qui attend encore l'approbation.

Vous ne pouvez masquer que les éléments de page qui ne contiennent pas des composants obligatoires. Les éléments de page masqués peuvent être à nouveau rendus visibles comme suit :

1. Appuyez sur l'un des boutons sections, lignes ou composants dans la barre supérieure puis cliquez sur gérer. Une barre latérale pour naviguer dans les éléments de page respectifs sera affichée.

2. Les éléments de page avec un symbole d'œil barré sont masqués. Appuyez dessus pour rendre immédiatement l'élément de page visible dans le formulaire de commande. (Le changement ne sera visible qu'après publication.)

   

Configurer la section

• Les éléments de cadre de la section apparaissent sur les bords.

• Appuyez sur l'icône enregistrer pour enregistrer la section comme un modèle.

• Appuyez sur l'icône plus pour ajouter de nouvelles sections ou sections de modèles enregistrées.

• Appuyez sur les icônes flèche pour déplacer les sections.

• Appuyez sur l'icône copie pour insérer immédiatement une copie de la section avec tous les réglages et lignes contenues en dessous. Les composants ne sont pas copiés.

• Appuyez sur l'icône engrenage pour faire des réglages. La barre latérale de la section apparaîtra.

Paramètres

• Marge supérieure

  Ajoute une marge transparente au bord supérieur de la page ou à la section au-dessus. La marge est ajoutée au contenu de la section mais n'élargit pas le contenu lui-même (contrairement au rembourrage, voir ci-dessous).

• Image

  • Image de fond : Définir une image de fond pour la section. Ceci remplace l'image de fond de la page.

  • Position de l'image : Positionner l'image de fond dans la section.

  • Couleur de superposition : Superpose la arrière-plan avec une couleur. Utilisez un curseur dans la fenêtre de sélection de couleur pour déterminer la transparence de la couleur. Par exemple, vous pouvez superposer l'image sélectionnée avec un voile blanc afin qu'elle soit toujours visible mais pas trop distrayante.

• Taille & position

  • Largeur de section : Définir une largeur pour élargir ou rétrécir le bord de la page, par exemple.

  • Collant : Définir si la section doit rester dans une position fixe lors du défilement vers le haut ou vers le bas. Cela est utile si la section a seulement un contenu minimal, comme le bouton d'achat. Vous pouvez le définir pour que le contenu de la section soit toujours visible de manière proéminente.

• Taille de ligne & position

  Ici, vous pouvez faire des réglages centraux pour toutes les lignes contenues dans cette section. Ceci prend le pas sur les réglages des lignes individuelles.

• Couleurs / couleur d'arrière-plan

  Remplit le fond avec une couleur. Par exemple, vous pouvez intégrer une image de fond qui ne couvre pas totalement la section dans une couleur d'arrière-plan et la superposer avec une couleur de superposition (transparent).

• Rembourrage

  Le rembourrage signifie ajouter des distances à l'intérieur du contenu de la section. Cela vous permet d'ajuster les bordures entre le contenu et le cadre de la section. Contrairement à la marge supérieure (voir ci-dessus), le rembourrage affecte également l'image de fond ou la couleur d'arrière-plan car la zone d'affichage elle-même grandit.

Paramètres (avancés)

• Rayon des coins

  Définir si la section doit avoir des coins arrondis. Ceci est particulièrement efficace lors de l'utilisation d'une image de fond ou d'une couleur de fond.

• Bordure

  Définir si la section doit avoir une bordure. La valeur par défaut est sans bordure. Lors de la sélection d'une autre option, des champs supplémentaires sont affichés. Les changements seront visibles une fois tous les champs remplis avec des valeurs.

• Ombre

  Ajoute une ombre à la section, rendant celle-ci plus tridimensionnelle et proéminente.

Configurer des lignes et des colonnes

• La ligne est complètement dessinée.

• Les colonnes sont séparées par un curseur.

• Appuyez sur l'icône enregistrer pour enregistrer la ligne comme un modèle.

• Appuyez sur l'icône plus pour ajouter de nouvelles lignes ou lignes de modèles enregistrées. Une barre latérale apparaîtra.

  • Choisissez le nombre de colonnes que la ligne doit avoir sous Mise en page.

  • Alternativement, sélectionnez un modèle que vous avez enregistré sous Mes lignes.

• Appuyez sur les icônes flèche pour déplacer les lignes.

• Appuyez sur l'icône copie pour insérer immédiatement une copie de la ligne avec tous les réglages et colonnes ci-dessous. Les composants ne sont pas copiés.

• Appuyez sur l'icône engrenage pour faire des réglages.

Paramètres

Les paramètres de la ligne sont les mêmes que ceux de la section (voir ci-dessus).