BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Tutoriel sur Senslight
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Tutoriel sur Senslight

 Répondre Répondre Page  12>
Auteur
Message
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Sujet: Tutoriel sur Senslight
    Envoyé : 18 Juin 2017 à 13:17
Bonjour,

Le template sur senslight étant bientôt prêt, je commence à poser les bases pour expliquer certaines nouveautés et la création de la FAQ et tutoriel sur les éléments et autres. Wink

Edit du 18/06/2017 :
Le template est fin prêt, malgré quelques derniers réglages encore en cours (plutôt tomber d'accord avec Dmit sur certaines options laissées libres pour tout le monde). Le temps de régler ça ensemble et le lien pour dl la version free sera communiquée.

Voici déjà ce que vous pouvez savoir comme infos valides :

Lien du template : senslight

Ce que contient les différents templates à venir.

Version free :
- slider sur la home bxslider
- élément Fond d'élément dynamique 100%
- élément Panneau d'éléments responsive
- élément default text
- élément Parallax sûr
- élément tooltipster de MicroVinc
- élément iframe (google map) anti défilement
- élément Font awesome model 1 et 2
- élément slideOpener (voir la partie googlemap pour comprendre son utilisé)
- 2 galeries photos avec des paramétrages spécifiques et l'élément swipebox
- livre d'or de MicroVinc (une correction à venir par la suite normalement)

Version complète :
- l'ensemble de la version free
- élément scrollreveal de MicroVinc
- disqus pour la partie commentaires des articles (pour l'instant 1 langue supportée)
- élément swipebox modifié spécialement pour le template (galerie +)
- l'élément shuffle conterner pour une des galeries photos
- l'élément livre d'or de Nico38 modifié spécifiquement pour le template

version premium :
- support d'un mois pour les nouveaux éléments et leur paramétrage (pas d'ajout par contre) par la team (communication via forum et mail).


Edit 18/06/2017 à 18h00 :

Après une très longue discussion avec Dmit (qui est co-auteur du template au final sur certains éléments), nous sommes arrivés à une conclusion qui nous satisfait.
Nous allons proposer la version free plus complète que prévu :
- élément swipebox modifié spécialement pour le template (galerie +)
- prix abordable pour la version complète et prémium

Pourquoi ?
Tout simplement pour proposer un template avec un élément non bridé comme prévu mais avec toutes ces nouvelles fonctionnalités. Donc un bon point pour tous.
Nous avons aussi décider de baisser le prix du template pour la simple et bonne raison que malgré que 0,001% des intervenants sur le forum soient bénévoles et passent du temps à aider au maximum de leur emploi du temps et compétences sur le forum. Les autres ne venant sur le forum que pour demander de l'aide ou même juste récupérer des infos sans aucune intervention ou remerciements.
Mais nous ne pouvons pas pénaliser les nouveaux visiteurs au vu des derniers chiffres de visite et dl d'OE et du templates ainsi que ceux malgré tout participant à la vie du forum. Donc, nous allons proposer après modification de la galerie (encore du taff Cry un dimanche soir) le template free sur le forum soit ce soir soit demain dans la matinée.

Merci à tous ceux qui sont intervenus au fil du différent topic. En espérant que ce topic permettra d'aborder tous les différents points sur ce nouveau template et éléments.

Edit du 19/06/2017 à 10h13 :

Et voila maintenant le lien pour récupérer la version dite free :
Il y a à l'intérieur une page appelée FAQ. Elle ne contient que peu d'informations encore mais  celle-ci va venir se placer sur le forum.
Le template apparaitra sur le store une fois que la FAQ aura avancé et que vos premières remontées s’avéreront nécessaire pour améliorer le template.

Pour la version complète, elle va être proposé dans la journée au prix de...surprise cet après midi mais le prix sera plus que modique, il sera aussi un "petit" soutien à tous ceux qui ont participé à son développement.

merci à vous tous. 

Edit du 21 juin :
la version payante est maintenant disponible pour ceux désirant une version plus complète et avec un support.
Vous pouvez consulter cette page pour plus d'informations.
merci de votre soutien en tout cas.


Edité par brolysan - 22 Juin 2017 à 16:50
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Juin 2017 à 09:56
Je finalise les pages en anglais pour les emails et une début de faq pour le slider et je mets à dispo d'ici 10mn je pense.

Edit : lien disponible en première partie du topic.
Je commence à rédiger une partie de la FAQ.

Pour ceux qui vont commencer à tester et vouloir de suite une info, essayez dans le mesure du possible de commencer juste un peu à comprendre les nouveaux éléments avant de demander :
comment on déplace un bloc vers le bas...ca serait plus qu'agréable pour ma part. Sleepy


Message posté par Maurice306 Maurice306 a écrit:

Thumbs Up on attend ça avec impatience Wink hi...! hi...! LOL

Message posté par Bridet Bridet a écrit:

Bravo Bro, je ne sais pas comment tu vas présenter tout ça mais je trouve qu'une petite explication de ce que fait chaque élément ne serait pas de trop, je peux aider mais moi-même je ne comprends pas tout ;-)

Message posté par Maurice306 Maurice306 a écrit:

Et l'aventure de la découverte, c'est pas passionnant LOL surtout quand on à cassé la mise en forme et qu'il faut tout recommencer, Ha ...! quel plaisir Wink

j'ai regroupé vos messages pour alléger le début de la page FAQ, merci de vos encouragements en tout cas.


Edité par brolysan - 19 Juin 2017 à 10:22
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 19 Juin 2017 à 10:33
Comme vous pouvez le voir, en prévisualisant la page d'accueil (index), nous avons inclus un slider texte + images.



Pour arriver à ce résultat, faute de développement d'éléments (en cours dans les prochaines semaines), nous avons dû nous servir de plusieurs choses :
- un nouvel élément "panneau d'éléments responsive" (panneau d'éléments responsive ID WE1a8887b1d4)
- un bloc de code visuel contenant du code spécifique (Bloc de code slider ID WE78f76b1c5b)
- un bloc de code source contenant tout le procès nécessaire pour les effets du slider (bloc de code Javascript BXSLIDER_JS)
- des panneaux d'éléments spécifique à chaque partie du slider situés dans le footer de la page (donc descendre en bas de la page pour les modifier)

Le panneau d'éléments responsive

Celui-ci comporte de toutes nouvelles options que nous allons détailler. la chose la plus importante est que vous compreniez son utilité. Cet élément prend l'intégralité de la hauteur et de la largeur de la page de votre navigateur. Donc, quel que soit la taille de celui-ci, vous aurez ce panneau d'éléments responsive en fullpage. Nous y avons inclus différentes options prenant en compte le plus large panel de cas :



Comportement et réglages

Distance minimale :
C'est l'espace minimal entre le bas du Panneau d'éléments Responsive et le contenu interne. Cela correspond à la marge intérieure de Bas de la zone de style Conteneur (allez dans Styles - Personnalisation).
Cet partie peut inclure des unités en pixels, em, vh etc.

Distance haut minimale :
C'est l'espace minimal entre le haut du Panneau d'éléments Responsive et le contenu interne. Cela correspond à la marge intérieure de Bas de la zone de style Conteneur (allez dans Styles -Personnalisation).
Cette partie peut inclure l'unité en pixels, em, vh etc.

Inclure la hauteur du footer :
Il est utile de cocher cette case pour le dernier panneau de la page. Dès que possible, réduire la hauteur pour que le footer (la section Contenu Bas) rentre sur l'écran avec le panneau.

Inclure la hauteur du Header :
Il est utile de cocher cette case pour le premier panneau de la page. Dès que possible, réduire la hauteur pour que le Header (la section Haut si elle est activée dans les Sections de la page - icône Responsive) rentre sur l'écran avec le panneau.

Inclure les hauteurs des éléments :
Vous pouvez ajouter une liste d'IDs séparés par une virgule, des éléments qui doivent s'afficher sur la même page (écran) que le panneau d'éléments responsive. La hauteur du panneau sera réduite en conséquence. C'est ce que nous avons fait avec notre élément WEMENU (un panneau d'éléments). Celui-ci tient compte de la hauteur de cet élément et s'y incruste parfaitement. L'ID indiqué correspondant à l'ID du menu du calque Base.

Une fois cet élément importé sur votre page, si vous voulez un élément centré, vous devez mettre un Panneau d'Eléments (élément standard dans la liste Eléments de droite) à l'intérieur. Celui-ci héritera automatiquement d'une classe spécifique  oerp-inner-content .  

NE PAS LA SUPPRIMER , sinon vous perdrez le centrage horizontal et vertical.

A l'intérieur de ce panneau d'élément, vous pourrez soit vous mettre en relative (ce que nous conseillons pour le développement d'un site web en reponsive) soit en absolute.  
À l'intérieur donc de l'élément Panneau d'éléments responsive, vous avons mis un panneau d'éléments qui contient lui aussi un bloc de code visuel.    

Le bloc de code visuel (bxslider)  
Le code en question est le suivant :



<ul id='bxslider' class="bxslider">
  <li></li>
  <li></li>
  <li></li>
</ul>



Il permet d'utiliser le plugin  BxSlider .
Celui va permettre d'avoir cet effet slider sur un certain nombre d'éléments, en l’occurrence des panneaux d'éléments qui se trouvent dans la partie footer de la page (tout en bas).
Le nombre de <li></li> indique aussi combien de panneau d'éléments sont à gérer par BxSlider.

Par défaut donc, il est régler sur 3 (nous avons donc 3 panneaux d'éléments qui bénéficient de l'effet BxSlider). Vous êtes libre soit d'en rajouter soit en supprimer. Selon votre choix, vous devrez aussi changer les informations contenues dans le bloc de code Source BXSLIDER_JS.  

Le bloc de code source BXSLIDER_JS  
L'ensemble du code n'a pas besoin d'être modifié hormis une seule partie lorsque vous voulez changer le nombre de panneaux qui s'affichent. Il s'agit de la partie suivante :    



// mettre en place les panneaux-pages
//$('.page').css({width: '100%', position: 'relative', left: '0', top: '0'});
$li.eq(0).append($('.page0'));
$li.eq(1).append($('.page1'));
$li.eq(2).append($('.page2'));



Comme vous pouvez le voir, cela indique le nombre de "page" (panneau donc) que doit gérer BXSLIDER. Si vous en voulez plus ou moins, ajouter ou supprimer des panneaux d'éléments contenus dans le footer. En cas de rajout, pensez aussi à ajouter (ou modifier si copier/coller) la classe page1  du panneau d'éléments. 


Edité par brolysan - 16 Mai 2020 à 11:46
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post 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 l’occurrence, 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


Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Juin 2017 à 08:51
Thumbs Up Je crois que j'ai compris, explications très compréhensives Clap
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 21 Juin 2017 à 09:53
Edit du 21 Juin :
Nouvelle version du template apportant quelques corrections mineures.
Pour ceux l'ayant téléchargé mais n'ayant pas encore fait de changements importants, vous pouvez la télécharger sans problème.
Pour les autres, contactez moi en MP.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Juin 2017 à 09:59
projet tutoriel cet après midi (si mes clients me laissent respirer un peu entre midi et 14h) Wink
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 22 Juin 2017 à 13:29
C'est pas l"heure de la sieste de votre côté de l'Atlantique?  Evil Smile
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 23 Juin 2017 à 10:12
Bonjour à tout le monde Handshake

Je vais encore donner un casse tête à Brolysan mais ça pourrait être un petit plus Wink

Dans la fenêtre de Google Maps qui s'affiche pour situer le lieux, serait-il possible que lorsqu'elle s'ouvre que l'on puisse faire apparaître un élément texte (simple ou multi-lignes) pour donner une information de type "c'est la belle voiture de droite que je vous propose"

Cordialement
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 23 Juin 2017 à 10:21
Bon j'ai encore été plus vite dans les pensées que dans les faits. Embarrassed

J'ai positionné un élément texte sous le bloc de code visuel et ! Hourra ça marche, l'info apparaît en bas (ou en haut) de la carte.

Désolé d'apporter la réponse avant d'avoir laissé Brolysan cherché pour nous LOL 

Cordialement
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.