https://www.facebook.com/tr?id=1475801249377226&ev=PixelInitialized

Note de l'utilisateur: 5 / 5

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

Le panneau Layouts de l'administration d'un template basé sur le framework gantry fournit plusieurs options pour configurer la mise en page du template. Chaque section de modules du template propose 6 positions de modules par défaut

Pour en savoir plus sur Les Mises en page et largeurs de module, consultez ce screencast rapide. Il couvre quelques-uns des concepts nécessaires à la compréhension et à la configuration de la mise en page en mixant des configurations de modules et le contrôle des layouts par Gantry.

 

 

Utilisation des Layouts

Chacune des rangées de modules principaux / sections est représentée avec un curseur permettant un contrôle dynamique de la manière dont les modules sont agencés sur la base du nombre de positions de modules utilisées ou publiées. Par défaut, la mise en page fixera une taille égale pour les modules publiés.

layouts-utility1

Au dessus du curseur, il y a des liens qui representent le nombre entre 1 et 6 de positions que vous souhaitez configurer. Par exemple, si vous configurez la mise en page d'une page ayant 4 positions utilisées, il vous faudra d'abord sélectionner le lien n ° 4 dans la partie supérieure au curseur pour cette position.

Si vous avez des modules dans 4 positions de modules utility-a, utility-b, utility-c, et utility-d cela signifie que les positions actives devraient être réglées sur 4. Le widget de mise en page vous montrera toujours le nombre de positions actives en caractères gras. Au-dessous de ce nombre, vous voyez une représentation sous forme de bloc de la disposition actuelle.

Nous utilisons un système basé sur Twitter's Bootstrap. Les mises en pages sont en base 12, et par défaut les 12 colonnes 3 | 3 | 3 | 3 de la valeur de configuration par défaut se traduit par un bloc de taille égal pour chacune des 4 positions vous avez activée ou publiée.

Une configuration de 12 colonnes avec 4 modules d'une égale largeur publiés, donnera cette présentation en frontend :

layouts-utility-example1

Si vous bougez le curseur ci-dessous pour choisir différentes largeurs pour ces 4 positions, un tooltip sur le côté vous montrera la valeur numérique de la configuration.

layouts-utility2

Dans ce cas, vous pouvez voir que nous avons fait glisser le curseur vers la gauche et que nous avons choisi la mise en page 2 | 3 | 4 | 3, ce qui signifie que la position du module utility-a se voit attribuer 2 grilles (sur les 12 colonnes), utility-b s'en voit attribuer 3, utility-c s'en voit attribuer 4 et utility-d est réglé sur 3 grilles. Après avoir cliqué sur Appliquer (Apply) ou Sauver (Save) cela provoquera le changement de mise en page du site et s'affichera ainsi :

layouts-utility-example2

Vous vous apercevez que les proportions  2 | 3 | 4 | 3 ont été appliquées dans la mise en page. Gantry est si flexible que vous pouvez configurer différentes mises en page avec différents nombre de position de modules. Joomla a la capacité d'afficher différents modules en fonction de différents éléments de menus, vous pouvez donc avoir  4 modules publiés sur la page d'accueil mais seulement 2 dans une page secondaire, par exemple. Pour répondre à cela, vous pouvez simplement cliquer sur 2 dans la liste des positions et choisir une mise en page qui s'adapte à vos besoins :

Utility Positions

Cela se traduira par 8 | 4 ou formulé d'une autre manière, une distribution 2/3 et 1/3 des 2 modules :

layouts-utility-example3

Mainbody Layouts

Les mises en page pour la zone principale mainbody est légèrement différente des autres mises en page de module. La principale différence est que le corps principal est généralement affiché aux côtés barres latérales allant jusqu'à 3. Cela donne à un template basé sur ganty la possibilité de prendre en charge effectivement une disposition en 4 colonnes. Nous avons étudié un grand nombre de sites et avons déterminé que plus de 4 colonnes pour une mise en page est chose très rare et que cela devient vite illisible en raison de la quantité limitée d'espace disponible. En général, 2 ou 3 colonnes est l'agencement privilégié d'un site Web moderne.

layouts-mb-example1

Cette présentation est contrôlée dans les paramètres du template. Comme vous pouvez le voir ci-dessous, le widget comprend qu'il y a 3 colonnes latérales publiées, ainsi quand le mainbody est pris en compte, cela crée une mise en page 4 colonnes. La configuration actuelle est réglée sur 6 | 2 | 2 | 2 ou le mainbody utilise 6 unités de grille, et les 3 sidebars en utilisent chacun 2.

layouts-mb1

Si vous bougez le cuseur vers la gauche, vous verrez les positions se mélanger en donnant différentes options d'affichage ainsi que de grandeurs de chacun. Avec 4 colonnes au total il n'y a pas beaucoup de place pour avoir des largeurs de colonnes très variables,nous allons donc désactiver l'une des colonnes en désactivant les modules dans la position de module sidebar- c à l'aide de notre gestionnaire de module. Ci-dessous, vous apercevez comment la disposition par défaut est actuellement configurée lavec seulement 2 sidebars publiées:

layouts-mb2

Comme vous pouvez le voir, c'est réglé pour que les 2 barres latérales s'affichent sur la droite en prenant chacune 2 unités de grille (sur 12), tandis que le mainbody est sur la gauche occupant 8 unités. Faire glisser le curseur vers la droite fournira un large éventail d'options de mise en page.
Cet exemple montre une disposition de 3 | 6 | 3, où le mainbody est au milieu:

layouts-mb3

Après avoir cliqué sur le bouton Enregistrer (Save) ou sur le bouton Appliquer (Apply) dans la barre d'outils, vous pourrez voir cette mise en page appliquée au site :

layouts-mb-example2