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

Par défaut, le choix offert dans la configuration du module pour l'affichage mobile est restreinte de 2 à 10, ce qui peut paraître suffisant.

 mobile module colxs1

Mais dans certains cas, vous pourriez avoir besoin de faire appel à col-xs-1, col-xs-11 ou col-xs-12, que cela soit pour laisser de la place ou au contraire tout prendre …

Pour ce faire, allez dans plugins/system/helix3/layout/layout-settings/row-column-settings.php à la ligne 204 et modifiez les lignes :

'values'	=> array(
				'' => "", 
				'col-xs-2' => 'col-xs-2',
				'col-xs-3' => 'col-xs-3',
				'col-xs-4' => 'col-xs-4', 
				'col-xs-5' => 'col-xs-5', 
				'col-xs-6' => 'col-xs-6', 
				'col-xs-7' => 'col-xs-7', 
				'col-xs-8' => 'col-xs-8', 
				'col-xs-9' => 'col-xs-9',
				'col-xs-10' => 'col-xs-10',
				),

pour :

'values'	=> array(
				'' => "", 
				'col-xs-1' => 'col-xs-1',
				'col-xs-2' => 'col-xs-2',
				'col-xs-3' => 'col-xs-3',
				'col-xs-4' => 'col-xs-4', 
				'col-xs-5' => 'col-xs-5', 
				'col-xs-6' => 'col-xs-6', 
				'col-xs-7' => 'col-xs-7', 
				'col-xs-8' => 'col-xs-8', 
				'col-xs-9' => 'col-xs-9',
				'col-xs-10' => 'col-xs-10',
				'col-xs-11' => 'col-xs-11',
				'col-xs-12' => 'col-xs-12',
				),

 

Vous pourrez ainsi accéder après rafraichissement aux options col-xs-1, col-xs-11 ou col-xs-12 comme vous pouvez le constater sur l'image :

mobile module colxs2

Ces options de boostrap pour l'affichage mobile seront alors prises en charge.

Activer la visualisation des modules.

Par défaut vous ne pouvez pas visualiser les positions de vos modules dans votre frontend.

L'activation de cette fonctionnalité se fait par le bouton paramètres en haut à droite dans la gestion des templates.

vue ensemble2

Après l'activation de cette fonctionnalité vous verrez devant le nom de votre template l'icône modifiée vous permettant une prévisualisation des positons de modules.

AVANT

vue ensemble

APRÈS

vue ensemble3
Cela peut vous aider à vous y retrouver même si le framework Helix possède une interface intuitive.

 

Aperçu de la mise en page par défaut Helix

Entrons maintenant dans le gestionnaire de template, onglet mise en page.

Nous partons du principe que vous travaillez avec la version de langue proposée sur web54.

Vous pouvez donc apercevoir des rangées, divisées pour certaines en colonnes.

Ces rangées par défaut sont

  • Top Bar : divisée en deux par défaut cette rangée affiche des informations de contact renseignés dans la partie généralités en top2 et les réseaux sociaux en top1. Vous pouvez évidemment ne pas les afficher ou afficher un autre module dans ces positions.

  • Header : Partie entête du site, destinée à afficher le logo et le menu Helix.Vous pouvez évidemment ne pas les afficher ou afficher un autre module dans ces positions.

  • Page title : Permets l'affichage du Titre de la page ainsi que du fil d'ariane.

  • Mainbody : C'est ici que sera affiché par défaut le composant appelé par votre lien de menu.
    Par défaut, il est configuré en 3 colonnes (left + component + right)

  • Bottom : partie basse du site, réglé par défaut pour afficher 4 modules.Vous pouvez évidemment ne pas les afficher ou afficher un autre module dans ces positions.

  • Footer : Pied de page du site, par défaut vous y retrouverez les différents copyrights

Helix est un framework ultra-souple, en quelques clics vous pouvez ajouter supprimer des colonnes, des rangées, positionner vos éléments à l'endroit que vous désirez.

Ajouter, supprimer une rangée dans Helix

La rangée est la base du framework de template Helix.

Certaines sont là par défaut pour vous aider à la première mise en page mais vous pouvez en ajouter autant que vous le voulez, vous pouvez de la même façon les supprimer.lignes colonnes helix 1

Le bouton ajouter une rangée vous affichera une nouvelle rangée sous la rangée dans laquelle vous faites l'opération.
Le bouton supprimer supprimera de manière définitive la rangée dans laquelle vous faites l'opération.

Au moment de la suppression un message vous demandera de confirmer car vous ne pourrez revenir en arrière.

Vous pouvez de suite donner un titre à votre nouvelle rangée afin de la retrouver aisément via le bouton paramètres.

Ajouter, supprimer une colonne dans helix

Helix est partagé horizontalement en 12 parties égales.

Chaque rangée possède au minimum une position de module, soit une colonne de 12 parts.

Vous pouvez avoir besoin de mettre plusieurs positions de modules côte-à-côte.

Pour cela, veuillez sélectionner le bouton ajouter des colonnes : une petite fenêtre s'ouvrira vous laissant apparaître une sélection de différentes configurations parmi lesquelles vous pourrez choisir.

lignes colonnes helix 2

Vos colonnes ont des noms correspondant à une position de module.

Pour affecter une position de module à cette colonne, vous devez aller dans les paramètres de cette colonne et choisir une position de module dans la liste déroulante.

lignes colonnes helix 3

Pour supprimer la colonne, l'opération est un peu plus délicate.

Il faut re-sélectionnez le bouton ajouter des colonnes et passez au nombre inférieur dans la sélection.
Par exemple, si vous aviez 4 colonnes, sélectionnez 3 colonnes.
HELIX supprimera systématiquement la dernière, il vous faut donc déplacer votre colonne à supprimer en dernière position.

Déplacer des rangées ou des colonnes dans Helix

Une des superbes fonctionnalités d'hélix est son glissé-déposé permettant de déplacer rangées et colonnes.
Dans les rangées, cliquez sur la croix bleue au survol et maintenez appuyé tout en déplaçant votre rangée vers le haut ou le bas.

lignes colonnes helix 4

Relâchez : votre rangée et son contenu ont changé de position.
N'oubliez pas de sauvegarder votre template pour appliquer les modifications.

Pour déplacer une colonne, il suffit de faire la même opération sur la colonne (pas de croix bleue à chercher cette fois-ci).
Votre colonne se déplacera de gauche à droite ou de droite à gauche et ira s'intercaler où vous le désirez tout en gardant ses paramétrages.

Une colonne ne pourra se déplacer qu'à l'intérieur de rangée d'origine.

N'oubliez pas de sauvegarder votre template pour appliquer les modifications.

Comment ajouter une nouvelle position de module ?

1ère méthode : depuis le template

Ce tutoriel nous explique comment ajouter une nouvelle position de module pour les templates Joomla basés sur le framework HelixV3. C'est une procédure facile, il faut environ 3 minutes max à partir du moment où vous allez commencer.

Étape 1: La première étape dans l'ajout d'une nouvelle position du module à votre template par défaut est la modification du fichier templateDetails.xml.
Ce fichier est essentiel, il contient toutes les métadonnées concernant le template.
Ce fichier se trouve dans le dossier de template JoomShaper.
Une fois ouvert pour l'édition du code, localisez les balises <positions></positions>.
L'élément <positions> entoure les véritables positions de module.
Dans <position> vous devez insérer le nom de position désiré, qui sera ensuite listé automatiquement dans le gestionnaire de module dans le back-end Joomla.
Vous pouvez utiliser des noms différents: "example" , "newposition", "contact" etc. Dans notre exemple, nous avons utilisé le code suivant:

<position>exemple</position>
Exemple:nouvelle position helix1

Saviez-vous que Joomla 3.3 / Joomla 3.4 vous permet de modifier le fichier  templateDetails.xml directement à partir du Gestionnaire de Template ?

nouvelle position helix2

Étape 2 : La nouvelle position du module devrait être désormais assignable depuis le configurateur de mise en page. Gestionnaire de template --> JoomShaper template --> Mise en page (onglet). Choisissez l'endroit où vous voulez l'ajouter.
Par exemple, nous voulons utiliser comme nouvelle ligne après les positions Bottom. Dans l'affirmative, dans la barre d'outils de Bottom cliquez sur ajouter une rangée qui vous permet d'ajouter une nouvelle rangée sous la rangée actuelle.

nouvelle position helix3

Une nouvelle ligne vide (boîte) doit apparaître dans la structure de mise en page. 

Étape 3 :  Maintenant, cette nouvelle boîte doit être assignée au nouveau nom de position de module créé et a besoin de certains paramètres de configuration de base.

Cliquez sur la petite roue crantée bleue qui ouvre un popup de Paramètres

Maintenant, attribuez comme nouvelle position à la nouvelle position du module «exemple» et choisissez son style depuis la liste.

nouvelle position helix4

N'oubliez pas d'appliquer les paramètres à chaque fois. À la fin, vous devez ENREGISTRER tout changement de mise en page pour que cela fonctionne.

nouvelle position helix5

Désormais, vous pouvez ajouter des modules depuis le gestionnaire de modules dans cette position « exemple ».

Seconde méthode : depuis le gestionnaire de modules.

Lorsque vous créez un module, vous l'affectez à une position.

Normalement , vous avez l'habitude de choisir parmi une liste de position existante.

Avec Helix, vos habitudes peuvent et vont changer.

Dans tout module, y compris un nouveau, écrivez directement le nom d'une position nouvelle dans la boite vous permettant normalement de choisir votre position.

nouvelle position helix6

SAUVEGARDEZ !!


Retournez dans votre style de template et dans les paramètres de votre colonne.

Vous verrez apparaître votre nouvelle position dans l'onglet de selection de position.

nouvelle position helix7

Cette astuce vous permets de créer d'abord vos modules et vos positions, et d'aller par la suite les positionner dans votre template !

Intelligent, n'est-ce-pas ?