https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Note de l'utilisateur: 0 / 5

Donnez une note !
0 sur 5 - 0 votes
Merci d'avoir noté cet article.

Le gestionnaire de mise en page offre la possibilité de créer une mise en page flexible à partir de la collection d'éléments disponibles. 

Une mise en page se compose de sections, de grilles et d’éléments qui peuvent être facilement gérés avec la fonctionnalité de glisser-déposer intégrée. It permet la personnalisation de chaque section avec les paramètres de conception, Paramètres responsives, paramètres d'animation et autres.

 layout manager

Structure de mise en page

  • La mise en page basée sur les positions des modules inclut un système de grille responsive qui s’adapte de manière appropriée jusqu'à 12 colonnes à mesure que la taille du périphérique ou de la fenêtre d'affichage augmente. Vous pouvez sélectionner le nombre de colonnes désiré dans la grille des colonnes prédéfinies ou créer votre propre disposition de grille personnalisée.

  • L'icône avec des flèches vous permet de modifier la position des lignes en les déplaçant vers le haut ou le bas. Utilisez l'icône plus pour ajouter une nouvelle ligne, puis sélectionnez la structure de colonne et insérez les positions de module en conséquence.

  • Les sections, les lignes et les éléments peuvent être ajoutés, modifiés, copiés et supprimés directement dans le gestionnaire de mise en page.

Gérer la mise en page

Dans la mise en page, une section peut être éditée glissée-déposée, copiée, une nouvelle section peut être ajoutée et une nouvelle ligne peut également être ajoutée dans la section. Nous pouvons également éditer, supprimer et copier une colonne en particulier.

  • Glisser déposer: Cliquez sur l'icône Glisser pour glisser-déposer des rangées / colonnes afin d'organiser votre mise en page.

  • Modifier: cliquez sur l'icône en forme de crayon pour modifier les sections et les rangées.

  • Copier: cliquez sur l'icône Copier pour dupliquer une section, une ligne ou un élément.

  • Supprimer: cliquez sur l'icône poubelle pour supprimer une section, une ligne ou un élément.

  • Nouvelle ligne: Cliquez sur Nouvelle ligne pour ajouter une nouvelle ligne.

  • Nouvelle section: Cliquez sur Nouvelle section pour ajouter une nouvelle section en-dessous de la section ciblée.

     options ligne

Element

Vous pouvez créer de nouveaux éléments en cliquant sur l'icône Ajouter qui apparaît en bas au centre lors du survol de l'élément.

Voici les éléments de cette section:

  • Position de module

  • Zone de composant

  • Messages

  • Bannière

Si vous avez déjà ajouté une zone de composant ou de messages auparavant alors vous ne serez pas en mesure de les ajouter à nouveau.
Ajoutez un élément de message pour afficher les erreurs, les avertissements et les avis. Si vous ne l'ajoutez pas, vous ne pourrez pas voir les messages de notification.

Section

Nous pouvons ajouter une nouvelle section en cliquant sur l'option Ajouter une nouvelle section indiquée dans les options au niveau de la ligne ou nous pouvons également ajouter une nouvelle section en cliquant sur le bouton Ajouter une section en bas de la mise en page.

ajout section

Options d'édition de l'élément et de la section

Les éléments et la section ont les mêmes options d'édition, à savoir Paramètres généraux, Paramètres de design et Paramètres responsive.

options section

  • Paramètres généraux: les paramètres généraux disposent d'options permettant de définir la position du module, le titre, la classe personnalisée et l'ID personnalisé d'un élément.

  • Paramètres de design: dans cet onglet nous avons des options d'animation et de fond personnalisé. Pour activer les options d'arrière-plan, nous devons activer l'option d'arrière-plan personnalisé.

Voici les options pour l'arrière-plan dans les paramètres de design:

Option

Par défaut

Description

Couleur d'arrière-plan

Aucune

Définir la couleur d'arrière-plan pour la colonne ciblée

Image d'arrière-plan

Aucune

Définir l'image d'arrière-plan pour la colonne ciblée

Répétition de l'arrière-plan

Héritage

Définir l'image d'arrière-plan de la colonne ciblée

Sélectionnez une taille pour l'arrière-plan

Héritage

Réglez l'affichage de l'image d'arrière-plan. Vous pouvez sélectionner l'une des valeurs suivantes: cover, contain et hériter

Sélectionnez l'attachement d'arrière-plan

Héritage

Définir le style d'attachement d'image d'arrière-plan: Faire défiler – l'image de fond défile avec le contenu , Fixé – l'image de fond est fixe et le contenu défile sur elle

Sélectionnez une position d'arrière-plan

Héritage

Choisissez la position de l'image d'arrière-plan dans la liste Déroulante.

Vidéo d'arrière-plan

Aucune

Définir la vidéo d'arrière-plan pour la colonne ciblée

 

  • Paramètres d'animation: Ici vous obtiendrez différentes options d'animation qui permettent d'animer une colonne, une section et un élément particuliers. Vous pouvez définir le délai d'animation qui indiquera un délai pour le début d'une animation.

  • Paramètres responsive: Cela vous permet de contrôler la visibilité des colonnes. Vous pouvez utiliser des points d'arrêt pour définir des dispositions de contenu différentes en fonction de la largeur du périphérique, vous pouvez définir la taille de la colonne sur la disposition de contenu pour vous assurer que votre mise en page est responsive. Et vous pouvez aussi masquer les composants pour les mises en page de périphériques spécifiques.

Voici les options pour Paramètres responsive:

 

Option

Description

Masquer sur périphériques très petits (Extra-Small)

Activer pour masquer cette section sur les très petits appareils.

Masquer sur de petits périphériques (Small)

Activer pour masquer cette section sur les petits appareils.

Activer pour masquer cette section sur les périphériques de taille moyenne (Medium).

Activer pour masquer cette section sur les périphériques de taille moyenne.

Masquer sur les périphériques larges (Large)

Activer pour masquer cette section sur les larges périphériques.

Cacher sur des périphériques extra-larges (Extra-large)

Activer pour masquer cette section sur les appareils très larges.

 

Ajouter un Commentaire