tutoriel du modèle Responsive d'OE |
Répondre | Page 123 8> |
Auteur |
Sujet Recherche Options des sujets
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
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.
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). 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. 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.
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.
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.
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éé. 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. Pour le contrôler, retournez sur la page d’accueil et
sélectionnez la RSection01. La fenêtre du bloc de code visuel s’ouvre. Vous verrez le code ci-dessous : <a id='ax' name='ax'> </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.
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.
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. 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. 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 Pour télécharger le tutoriel, cliquez sur ce lien. Edité par brolysan - 23 Avr 2020 à 12:31 |
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
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.
|
||
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
|
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. |
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
Ajout Made in Dmit... 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.
|
||
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
|
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). ;-) |
||
alexdarcy
Senior Member Depuis le: 19 Oct 2015 Pays: France Status: Inactif Points: 453 |
Options des messages
Thanks(0)
|
|
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
|
||
Maurice306
Senior Member Depuis le: 20 Avr 2008 Pays: France Status: Inactif Points: 2066 |
Options des messages
Thanks(1)
|
|
Respect !
|
||
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 !!!
|
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
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.
|
||
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
|
merci
|
||
alexdarcy
Senior Member Depuis le: 19 Oct 2015 Pays: France Status: Inactif Points: 453 |
Options des messages
Thanks(0)
|
|
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 |
||
Répondre | Page 123 8> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |