Tutoriels sur Joomla et la création de site

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.

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 :

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.

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 :

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 :

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

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.

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.

Si vous bougez le cuseur vers la...