Auteur: brolysanSubject: Tutoriel sur Senslight
Envoyé : 20 Juin 2017 à 09:47
Comment modifier le menu :
Il existe sur le template 3 calques mais pour ce tutoriel, nous allons aborder que les calques Base et Base_2. Le calque Base_2_scrolling ne servant qu'à avoir le menu fixe en haut (d'ailleurs ceux ayant du mal à fixer le calque de la page index, je donnerai la solution en fin de tutoriel).
Le calque Base
Ouvrez le calque
Comme vous pouvez le voir et sélectionner les différents éléments, voici comment se compose le menu :
- un panneau d'éléments MENU (ID WEb2da86c755) central avec une largeur de 100%
- à l'intérieur un autre panneau d'éléments Panneau central menu (ID WE191de100e0) avec lui aussi une largeur de 100% mais avec une largeur maximum de 1024px).
- à l'intérieur se trouve les principaux boutons du boutons. Il s'agit de l'élément Bouton scroll modifié pour le template. Nous y avons rajouté la possibilité de mettre un lien externe en plus des ID.
Si vous cliquez sur l'un de ces boutons, vous verrez dans Propriétés que certains renvoient soit vers un ID (se qui déclenchera un scroll en douceur vers l'ID de la page) et d'autres vers un lien en local (donc une autre page du template).
Pour changer le texte, il faut rester dans Propriétés et modifier la partie TEXTE.
L'ensemble des boutons sont pré réglés pour chaque média édition.
Sur le bouton PAGES? nous avons ajouté un menu pop-up :
Cliquez sur Configuration pour modifier le paramétrage
Par défaut, le bouton lié au menu pop-up est PAGES mais vous pouvez le changer si besoin est.
Dans la section suivante, vous y verrez l'ensemble du menu pop-up avec les noms et liens externes (lien en local).
Double cliquez sur l'un des liens pour modifier le nom et/ou son lien.
![]()
Une fois vos modifications faites, cliquez sur Terminer.
Si vous avez fait attention, vous avez du remarquer qu'il y a un autre menu pop-up appelé Menu_mobile.
Il s'agit de la partie complète du menu mobile.
regardons d'un peu plus prêt comment il s'articule.
![]()
Le menu pop-up est lié à Font Awesome (WEMENUMOBILE). Nous y reviendrons un peu plus tard pour savoir où il se trouve, ne vous inquiétez pas.
Cliquez sur suivant.
![]()
Comme vous pouvez le voir, ce menu reprend l'intégralité des noms du menu (boutons et sous menu).
Si vous faîtes bien attention aussi, vous pouvez voir que certaines lignes sont plus "hautes" que d'autres (par exemple ARTICLE EXTERNE).
Pour bien comprendre pourquoi et l'importance de cette astuce, il suffit de regarder le site en version tablette ou mobile.
Voici un exemple en version iphone 6 du calque.
Un simple clic sur le menu "hamburger" déclenche l'ouverture du menu.
![]()
Vous pouvez voir l'intégralité du menu donc, avec le nom des pages et du sous menu PAGES.
Mais nous avons spécifier que les liens ARTICLE INTERNE et les autres en dessous (sauf CONTACT) sont un sous menu.
Pour ce fait, pour générer un espace à gauche supplémentaire, nous avons insérer....une image transparente (un petit bloc au format png).
revenons donc au paramétrage du menu pop-up mobile.
Double cliquez sur le lien ARTICLE INTERNE.
![]()
Comme vous pouvez le voir, dans la partie icône du lien, nous avons indiqué le lien de l'image BLOC-TRANSPARENT.png, pour simuler ce retrait à la ligne.
Rien de plus simple donc.
Lorsque vous modifiez la partie menu principal, pensez aussi à modifier la partie pop-up Mobile.
Maintenant que cette partie est acquise, revenons au calque.
Nous allons nous pencher sur le deuxième menu dédié aux tablettes et mobiles.
Comme vous le savez, Openelement gère différents média éditions (format de prévisualisation).
Ils sont disponibles sur le haut du calque.
![]()
Nous avons rajouté 2 nouveaux média éditions, portable et tablette 800. Vous pouvez cliquez dessus et voir les changements qui s'opèrent dans OE.
Mais ce qui nous intéresse c'est la partie tablette/mobile.
Cliquez sur le média édition "certaines tablettes (portrait), smartphones".
Comme vous pouvez le voir, le menu a totalement changé.
Il n'y a rien de magique en fait, nous nous sommes servi des fonctionnalités d'Openelement pour jouer sur l'affichage et le masquage d'éléments.
Revenez au média édition par défaut.
Cliquez sur le panneau d'éléments principal MENU.
Regardez bien dans l'explorateur d'éléments situé en bas à gauche.
![]()
Qu'est-ce que cela veut dire ?
Tout simplement que selon le média édition, nous avons masqué certains nombre d'éléments.
En loccurrence, l'élément MENU_MOBILE est marqué dès le départ.
Revenez à l'autre média édition "certaines tablettes (portrait), smartphones".
Cette fois-ci, c'est l'élément MENU qui est masqué tandis que MENU_MOBILE ne l'est plus.
Voici donc comment modifier les boutons et logo selon les média éditions.
Gardez le bien en mémoire, le template repose principalement sur ce genre de réglages pour vous proposer un menu entièrement responsive.
En espérant que cette partie du tutoriel vous aidera à mieux comprendre Openelement et le template Senslight.
![Wink]( "Wink")
Maurice306 a écrit:
