Tutoriels sur Framework de Template Helix pour Joomla

Parmis les prestations proposées par les templates modernes pour la création de votre site internet, la fonctionnalité de sous-titres dans les mega-menus est un atout.
La version de base d'helix ne comprends pas cette fonction. Nous allons aborder ici comment l'ajouter. Procédons par étape.

Helix est livré avec un menu incorporé, vous évitant d'installer un module de menu externe.

Sauf besoins particuliers, ce menu devrait convenir à vos attentes, et même apporter certains petits bonus.

Sélectionner un menu et l'afficher

Pour choisir un menu, il suffit d'aller dans l'onglet menu du style de template, et de choisir un menu existant dans la liste déroulante.

Sauvegardez.

Par défaut, l'affichage du menu Helix dans une position se fait par le gestionnaire de mise en page.

Il existe une position MENU qui va chercher le menu Helix et qui ne devrait servir qu'à cela, sauf cas particuliers.

Si vous voulez afficher un autre type de menu, il vous suffit de selecionner une autre position de module afin d'appeler un autre menu (maximenu ck, par exemple).

Choisir le type de menu

Le menu helix est un megamenu par défaut, mais vous pouvez afficher dans la position menu soit le megamenu, soit le menu off_canvas soit les deux côte-à-côte.

L'option off_canvas fait s'afficher une petite icône dans la position menu :

Celle-ci appelle le contenu de la positon offcanvas dans un slider qui arrive par la droite.

Vous pouvez mettre ce que vous voulez dans cette position, par défaut le module search et le module off canvas menu y sont affectés.

Vous pouvez ainsi avoir un contenu différent de votre menu dans la position off canvas.

Gardez toutefois toujours en tête que c'est la position off canvas qui sera appelé dans las affichages mobiles et tablettes !

Les options de menu

Largeur du menu déroulant

Cette option (1) permets de modifier la largeur par défaut du megamenu (240px)

Vous pouvez l'augmenter soit par le sélecteur (2) soit en inscrivant directement la valeur dans le champ (3).

Animation du menu déroulant

Par cette option, déterminez le comportement de l'ouverture de votre megamenu helix.

Le mieux est d'expérimenter les différentes options et de choisir celle qui vous convient.

Le megamenu Helix incorpore des options supplémentaires à votre gestionnaire de menu lors de la création ou l'édition de votre élément de menu.

Selon que vous serez dans un élément de menu parent ou enfant, les options vous apparaitront différemment.

Gardez donc en tête cette différence afin de ne pas vous sentir perdu.

Titre de page Helix

Vous trouverez dans la gestion de vos éléments de menu un onglet titre de page qui gère … le titre de la page (bravo!)

Vous pouvez

1. activer le titre de la page

2. modifier le titre de la page ( Par défaut cela prendra le titre de l'élément de menu)

3. Ajouter un sous-titre

4. Ajouter une couleur de fond

5. Choisir une image de fond préalablement chargée sur votre serveur.

Voilà le résultat :

Options de MEGAMENU HELIX ( élément de menu parent)

Cette option n’apparaîtra que lors de la création d'un élément parent c'est à dire qui se trouve à la racine du megamenu.

Un onglet vous affiche différents réglages et caractéristiques de ce qui sera le sous menu déroulant de cet élément parent :

1. un sélecteur pour régler la largeur du sous-menu

2. des boutons pour choisir la position de ce sous-menu

3. un bouton ouvrant le gestionnaire de mise en page

4. Un espace affichant la disposition des différents éléments.

5. Et finalement un bouton de réinitialisation ( en cas d'erreur )

La mise en page des sous-menu Helix (dans éléments de menu parents)

En cliquant sur le bouton « Gérer la mise en page » Une fenêtre popup s'ouvre ou vous pouvez choisir un modèle de mise en page pour ce qui va être affiché dans le menu déroulant sous l'élément de menu dans lequel vous êtes.

Choisissez une disposition qui vous convient !

Vous voyez désormais, des emplacements vides pour caser vos modules préalablement créés.

Faites glisser vos modules depuis la liste de gauche vers les blocs à droite.

Vous pouvez insérer plusieurs modules dans chaque position, voir même le même module dans plusieurs positions.

Il ne vous reste plus qu'à donner libre cours à votre imagination …

Options du menu déroulant ( dans les éléments enfants)

Au risque de me répéter, cette option n’apparaîtra que lors de la création d'un élément enfant c'est à dire qui se trouve dans le menu déroulant et n'est pas à la racine du menu lors de sa création.

Par cette option vous allez gérer à la fois l'afficher de cet élément de menu , mais également l'apparition de ses sous-menus.

Vous pouvez choisir :

1. la position du menu déroulant (sous-menu)

2. d'afficher le titre du menu ou pas ( ce qui n'a de sens qu'avec l'activation de l'option suivante)

3. une icône de menu

4. l'ajout d'une classe css personnalisée ( pour coloriser cet élément en particulier, par exemple)

   

En voici le résultat sur un site test :

Le sous menu apparaît à gauche de l'élément de menu, dans lequel une icône a remplacé le texte.

Petite GROSSE Astuce :

On a vu que les options étaient différentes selon le statut de l'élément au moment de la création.

Parents-enfants n'ont pas le même comportement et les mêmes options.

Si vous voulez les options du parent lors de la création d'un enfant, par exemple mettre un module dans un sous-menu d'un élément enfant, il vous suffit au moment de la création de le mettre à la racine du site, de sauvegarder, puis de le placer en tant qu'enfant, il gardera les propriétés acquises à la création.

Comme nous le savons tous, Joomla 3.8.10 a été publié officiellement le 27 juin 2018, et nous avons constaté que certains de nos clients avaient des problèmes avec le menu si le plugin Helix est implémenté après cette mise à jour. L'équipe de Agetheme a procédé à des tests et créé le patch de mise à jour pour leplugin système Helix , vous pouvez le télécharger ici.

Ensuite, installez le patch en allant à Admin > Extension > Gérer > Installation et vérifiez à nouveau si cela fonctionne.

En outre, le problème peut aussi être résolu par l'ouverture de ce fichier

, sur la ligne 49, il y a une ligne de code PHP :

JForm::addFormPath(JPATH_PLUGINS.’/system/helix3/params’);

quand vous le trouvez, veuillez le changer ainsi:

JForm::addFormPath(JPATH_PLUGINS.’/system/helix3/params’);
if (is_object($data)) {
$data = (array)$data;
}

Enregistrez cette modification et vérifiez à nouveau.

Après avoir essayé les solutions ci-dessus, si votre problème n'est toujours pas résolu, faites le nous savoir en faisant une demande de contact ou laissez un commentaire ci-dessous, nous vous répondrons dès que possible.