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

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - tutoriel du modèle Responsive d'OE
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

tutoriel du modèle Responsive d'OE

 Répondre Répondre Page  123 8>
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 du modèle Responsive d'OE
    Envoyé : 27 Oct 2015 à 08:54
Bonjour à tous.

Voici la première partie du tutoriel concernant le template que propose Open Element.
Vous pourrez télécharger le tutoriel à la fin du topic, pour l'exploiter chez vous.

Tutoriel :

Sélectionner le template Modèle Responsive 01 lors de la création d’un nouveau projet.






Vous aurez la page d’accueil d’ouverte par défaut. L’essentiel du site est composé d’une seule et unique page, mais avec plusieurs calques dédiés au menu et autres fonctionnalités.


Nous aborderons cette partie au fur et à mesure.

La première chose à comprendre est comment se compose la page d’accueil.

Elle se décompose en différentes sections appelé RSection (il s’agit de panneaux d’éléments en fait).
Chaque section correspondant à une nouvelle page plein écran de votre futur site (et navigateur donc).

Commençons par la section RSection1 :



Sélectionnez-la en faisant un clic gauche sur la page (autre part que sur un élément bien entendu). 

Vous verrez alors son nom se griser dans l’explorateur d’éléments situé en bas à gauche.

Comme indiqué par le texte au-dessus, l’image de fond est ici à titre d’exemple.
Pour la modifier, il suffit simplement de cliquer sur l’icône du menu du haut Image de fond.



Cliquez sur Modifier pour indiquer quelle nouvelle image vous souhaiter mettre. Ne toucher à rien d’autre, le Template gérant parfaitement le redimensionnement automatique du fond d’écran. Pensez bien entendu à ne pas mettre une image trop lourde (ou bien passer par l’optimisateur d’images inclus dans OE -).

Effectuez cette manipulation sur chacune des RSection nécessitant une image (sinon, supprimez l'image par le bouton Supprimer et/ou modifiez la couleur de fond).

 

Pour ajouter une RSection, il faudra agrandir pour commencer la hauteur de la page index puis sélectionnez la dernière RSection du Template – la RSEction06.

Pour agrandir la page index, glissez le trait gris de bas du corps de la page: descendez en bas de la page, puis cliquez dans la partie noire. Vous verrez alors les bords de la page index apparaître.

 

Déplacez votre souris juste au-dessus du texte du footer (Lorem Ipsum, 2010-2013) jusqu'à avoir une flèche à pointe double.

Une fois cette flèche à pointe double apparaît, gardez le bouton gauche de votre souris appuyé et descendez vers le bas pour agrandir le bas de la page index. Descendez d’une hauteur permettant l’ajout d’une RSection.

Une fois votre page index descendue, sélectionnez la RSEction06


Faites un clic droit, et dans le menu qui apparaît, faites un copier.



Mettez-vous en dessous de la RSEction06, sélectionnez de nouveau la page index (en cliquant dans le fond noir), puis faites un clic droit puis coller (ou à l'endroit où vous voulez ajouter la section pour ceux maîtrisant OE).

La nouvelle RSection sera copié. Déplacer là correctement pour qu’elle soit dans le même alignement que les autres.

Il est impératif de la renommer. Pour cela, Allez sur le menu de droite, Propriétés.

Dans la partie Nom, changer RSection06 (2) par RSection07.

Une fois cette nouvelle section ajoutée, si vous souhaitez y accéder par le menu, il va falloir l’ajouter à calque contenant le menu.

Pour y accéder, remonter en haut de la page, jusqu'en haut.

Si vous cliquez sur le menu, vous verrez en bas à gauche de celui une page avec une flèche verte dirigée vers haut.



Cliquez dessus. Cela va vous ouvrir le calque correspondant au menu.

Pas de panique. Ce calque contient beaucoup d’éléments et la moindre erreur détruira le bon fonctionnement du Template. Pensez à faire régulièrement des copies réserves de votre projet, par exemple en utilisant Projet->Autre->Sauvegarde (copie réserve) du projet.


N’oubliez jamais de visualiser votre travail en cliquant sur la touche F12 de votre clavier. Cela ouvrira votre navigateur et vous permettra de contrôler si tout fonctionne parfaitement. En cas de mauvaise manipulation de votre part, vous avez la flèche de retour en arrière situé en haut du menu, à côté des deux disquettes (“annulation”, correspond à Ctrl+Z).



Pour ajouter un nouveau lien vers la nouvelle RSection que vous avez créé ainsi que pour changer les textes des liens du menu, il faut falloir comprendre fonctionne le menu du Template.


L’ensemble des blocs de texte renvoyant vers la RSection correspondante est mis dans un Panneau d’éléments (type WEpanel) avec une classe perso TopMenuSub.



Cet élément est verrouillé volontairement pour éviter que vous puissiez modifier les dimensions, autres fonctionnalités et pour faciliter certaines manipulations avec les liens à l'intérieur. Vous pouvez bien entendu le déverrouiller sans problème, sous réserve de perdre certains aspects du responsive. Nous aborderons dans un prochain tutoriel comment augmenter celui-ci.

Ce qui nous intéresse est d’ajouter un bloc de texte supplémentaire renvoyant vers la nouvelle RSection07 que nous avons créé.
Commencez par sélectionner un premier bloc de texte du menu.



Comme vous pouvez le voir, par défaut, Open Elément indique la redirection correspondante. C’est-à-dire #a1. Cette redirection renvoie en fait vers la RSection01.

Pour en être sur et pour comprendre comment la reproduire, cliquez sur l’icône en bas à gauche du bloc de texte (représentant 2 maillons de chaine).



Notez donc que l’adresse indiqué est en Local (pour utiliser la valeur telle quelle) et se compose des symboles #a1.

Ces symboles indiquent en fait la redirection vers la section correspondante. 
A1 étant le code pour indiquer l’ID contenu dans la RSection correspondante.

Pour le contrôler, retournez sur la page d’accueil et sélectionnez la RSection01.
En haut à gauche de la RSection01, vous verrez un bloc de code visuel.
Cliquez dessus et cliquez ensuite sur l’icône en bas à gauche (représentant une clé à molette).



La fenêtre du bloc de code visuel s’ouvre. Vous verrez le code ci-dessous :

<a id='ax' name='ax'>&nbsp;&nbsp;</a>

Bien entendu, vous ne verrez pas de a1 mais ax. Le x symbolisant le numéro de la RSection classé par ordre d’apparition.

Ne modifiez pas le bloc de code visuel par contre. Vous abimeriez l’ensemble du site. L’essentiel est de vous simplifier au maximum les fonctionnalités d’OE et non de vous décrire en détail le code CSS et JS contenu dans les différents calques.

Si vous avez bien renommé la RSection07 comme indiqué en début de tuto, vous n’aurez aucun mal à comprendre et à effectuer la suite. Si ce n’est pas le cas, pensez donc à bien renommer la RSection.

Nous allons maintenant ajouter un nouveau bloc de texte pour notre nouvelle RSection07 créée.

Comme vous l’avez remarqué, les différents blocs de texte remplissent quasiment l’ensemble du panneau d’éléments du menu.
Nous allons donc les réduire pour ajouter notre nouveau bloc.

En cliquant sur le panneau d’éléments contenant les blocs de texte, vous pouvez voir sa largeur en bas de la page.



Comme cet élément est verrouillé, nous ne pouvons le modifier. L’important est de connaitre la dimension de cet élément, c’est-à-dire 980 pixels de largeur.

Maintenant, sélectionnez le premier bloc de texte du menu.

Vous verrez alors que sa Largeur fait 160 pixels et que vous pouvez la modifier. Nous avons 6 blocs de texte de 160 pixels de largeur chacun. Soit un Largeur totale de 960 pixels (160 x 6). Si nous voulons rajouter un menu pour notre nouvelle RSection, il va falloir réduire l’ensemble des blocs de texte.

Soit vous sortez vos calculettes pour effectuer vos propres calculs, soit vous changez l’ensemble des Largeurs de chaque bloc de texte par une Largeur de 135 pixels.



Maintenant que l’ensemble de nos blocs de texte sont réduit, il va falloir rajouter notre nouveau bloc de texte.

La solution la plus simple est de copier / coller le dernier bloc de texte. Une fois sélectionné, appuyez sur les touches Ctrl + c de votre clavier. Ensuite, appuyez sur les touches Ctrl + v.



Vous verrez que nous avons dupliqué le dernier bloc de texte. Il s’est positionné légèrement en dessous.

Sélectionnez-le en cliquant dessus et remontez-le à l’aide des flèches de direction de votre clavier pour l’aligner à la même hauteur (soit changez directement sa hauteur par rapport au haut du panneau d’éléments en modifiant la valeur Top 20 par la valeur 12).



Maintenant que nous avons replacé le bloc de texte à la même hauteur que les autres, nous allons tous les caler pour qu’ils soient tous à la même distance les uns des autres.

Pour cela, cliquez sur le premier bloc de texte, puis gardez le doigt appuyé sur la touche Ctrl de votre clavier et sélectionnez les autres blocs de texte, y compris le dernier.



Sur le menu du haut, vous verrez différents icônes vous permettant de centrer automatiquement les différents blocs de texte. Celui qui nous intéresse est celui pour les répartir en Largeur.

[URL=https://www.casimages.com/i/200423124130894824.jpg.html

Cliquez dessus. Vos blocs de textes se sont alignés correctement.

Nous n’avons plus maintenant qu’à modifier le lien du dernier bloc de texte que nous avons créé et rajouté.

Sélectionnez-le et cliquez sur l’icône en bas à gauche du bloc de texte.
Au lieu de laisser #a6, changez-le par #a7.
Cliquez sur Valider.
Enregistrez la page en cliquant sur l’icône Enregistrer.

Retournez sur la page d’accueil et Prévisualiser maintenant votre page en appuyant sur la touche F12 de votre clavier.

Vous verrez maintenant que votre menu à rajouter ce nouveau lien et qu’il renvoie parfaitement vers la bonne RSection.

Nous aborderons dans un prochain tutoriel comment modifier les éléments contenus dans les RSections qui sont tous en mode relative, c’est-à-dire qu’ils s’adaptent en fonction de la taille de votre navigateur (version desktop ou mobile).

Si vous êtes pressé pour expérimenter vous-même plus de fonctionnalités du Template, respectez la règle principale :

Tous les éléments du contenu doivent se trouver dans le sous-panneau (celui qui a respSectContent dans Propriétés->Classes Perso) et non dans le panneau extérieur.

En espérant que ce tutorial permettra au débutant d’avancer sur ce Template.

Auteur :

Brolysan : www.sensode.com
Dmit : OpenElement

Pour télécharger le tutoriel, cliquez sur ce lien.



Edité par brolysan - 23 Avr 2020 à 12:31
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é : 27 Oct 2015 à 10:33
Pour ceux et celles (Bridet) qui voudraient ajouter d'autres choses pouvant compléter le tutoriel, ou éventuellement des demandes particulières, n'hésitez pas à poster. Wink
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 27 Oct 2015 à 15:52
Pfiou! Ca c'est du tuto détaillé, je ne me rendais pas compte que j'avais fait tout ça!
Il y a un truc que je ne comprends pas :

Une fois votre page index descendue, sélectionnez la RSEction06 (dans la prochaine version vous pourrez choisir une autre section, sur la page d'accueil ou la page SAMPLES, qui se rapproche le plus à ce que vous voulez ajouter).

On peut déjà choisir une autre section... Cette phrase n'est pas très claire.

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é : 27 Oct 2015 à 15:54
Message posté par Bridet Bridet a écrit:

Pfiou! Ca c'est du tuto détaillé, je ne me rendais pas compte que j'avais fait tout ça!
Il y a un truc que je ne comprends pas :

Une fois votre page index descendue, sélectionnez la RSEction06 (dans la prochaine version vous pourrez choisir une autre section, sur la page d'accueil ou la page SAMPLES, qui se rapproche le plus à ce que vous voulez ajouter).

On peut déjà choisir une autre section... Cette phrase n'est pas très claire.


Ajout Made in Dmit... Big smile

En gros, secret...mais je crois que je ne sais pas si je peux divulguer trop de chose...je vais peut être la barrer le temps que Dmit me donne l'accord.
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 27 Oct 2015 à 15:58
Mais ça sous-entend qu'on ne peut que rajouter la section 06, ce n'est pas le cas, j'ai rajouté une section qui me convenait juste avant contact.
Enfin, si on m'explique en MP, je pourrais rendre cette phrase plus littéraire (sans trop en faire). ;-)
Haut de la page
alexdarcy allez vers le bas
Senior Member
Senior Member


Depuis le: 19 Oct 2015
Pays: France
Status: Inactif
Points: 453
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer alexdarcy Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 27 Oct 2015 à 16:50
Merci Bro... Le tuto est parfaitement bien fait. Les manipulations très bien expliquées... Bravo...
En un mot j'y suis arrivé. J'ai crée une section07 qui complète la page "Exposition", donc pas besoin de créer un lien vers cette nouvelle section.
Si tu pouvais donner tes critiques sur mes pages se serait bien.
Alex
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é : 27 Oct 2015 à 16:55
Respect ! Thumbs Up Clap 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é : 27 Oct 2015 à 17:29
Message posté par alexdarcy alexdarcy a écrit:

Merci Bro... Le tuto est parfaitement bien fait. Les manipulations très bien expliquées... Bravo...
En un mot j'y suis arrivé. J'ai crée une section07 qui complète la page "Exposition", donc pas besoin de créer un lien vers cette nouvelle section.
Si tu pouvais donner tes critiques sur mes pages se serait bien.
Alex

Tu sais, donner mes "critiques", j'évite de le faire, car travaillant avec OE (et WP et Prestashop) en tant que "pro", je serai mal placé de le faire.

Après, certains aspects de ton site mériteraient d'un peu de plus de travail, avec un peu de bon sens et de maîtrise d'OE.

La home par exemple.
Ton image de fond est "flou", est ce normal? L'aurais tu en une bonne dimension et nette?
Ton texte est vraiment petit et limite indigeste...dés la home, il y a un pavé à lire.
Peut être prévoir 1 ou 2 lignes, puis un lien avec "en savoir plus", qui renvoie sur une autre page plus bas avec un peu de texte. Du fait du template responsive, ton texte se positionne mal et du coup, sur mobile, c'est "compliqué" à lire.
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é : 27 Oct 2015 à 17:30
Message posté par Maurice306 Maurice306 a écrit:

Respect ! Thumbs Up Clap Clap

merci Wink
Haut de la page
alexdarcy allez vers le bas
Senior Member
Senior Member


Depuis le: 19 Oct 2015
Pays: France
Status: Inactif
Points: 453
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer alexdarcy Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 27 Oct 2015 à 17:56
Message posté par brolysan brolysan a écrit:

Message posté par alexdarcy alexdarcy a écrit:

Merci Bro... Le tuto est parfaitement bien fait. Les manipulations très bien expliquées... Bravo...
En un mot j'y suis arrivé. J'ai crée une section07 qui complète la page "Exposition", donc pas besoin de créer un lien vers cette nouvelle section.
Si tu pouvais donner tes critiques sur mes pages se serait bien.
Alex

Tu sais, donner mes "critiques", j'évite de le faire, car travaillant avec OE (et WP et Prestashop) en tant que "pro", je serai mal placé de le faire.

Après, certains aspects de ton site mériteraient d'un peu de plus de travail, avec un peu de bon sens et de maîtrise d'OE.

La home par exemple.
Ton image de fond est "flou", est ce normal? L'aurais tu en une bonne dimension et nette?
Ton texte est vraiment petit et limite indigeste...dés la home, il y a un pavé à lire.
Peut être prévoir 1 ou 2 lignes, puis un lien avec "en savoir plus", qui renvoie sur une autre page plus bas avec un peu de texte. Du fait du template responsive, ton texte se positionne mal et du coup, sur mobile, c'est "compliqué" à lire.
 
Oui j'ai changé mon image de fond... N'est-elle pas trop lourde: 11Mb ?
Sinon oui tu as raison, ce texte me pose problème... Je crois que je vais faire un bandeau "Bienvenue", sur fond noir pis c'est tout !! Seuls les pros ont droit de critiquer les "novices"...
Merci à toi. Merci à vous.
Alex
 
Haut de la page
 Répondre Répondre Page  123 8>
  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.078 secondes.