openElement

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 :

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 : http://www.sensode.com/" rel="nofollow - www.sensode.com
Dmit : http://www.openelement.fr/index.fr.htm" rel="nofollow - OpenElement

Pour télécharger le tutoriel, http://sensode.com/Template_Modele_Responsive_01.pdf" rel="nofollow - cliquez sur ce lien .

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.

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

http://www.alexdarcy.fr" rel="nofollow - http://www.alexdarcy.fr

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.

merci 

 

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

http://www.alexdarcy.fr" rel="nofollow - www.alexdarcy.fr

 

mets la en dimension 1280 de largeur, pour commencer, puis sers toi d'OE pour alléger son poids.

 

Ok

http://www.alexdarcy.fr" rel="nofollow - www.alexdarcy.fr

 

Je te conseille d'ouvrir un topic à part.

Comme ca, je peux enlever les éléments qui n'ont pas (trop) lieu d'être dans le tuto. 

C'est en cours, mais en pause volontairement. J'attends les dernières améliorations pour les éléments intérieurs qui seront inclus dans la prochaine mise à jour d'OE.

j'essaye de comprendre ta demande....2s 

en fait, c'est simple.

Dans le lien du menu, toujours en local, tu indiques : auvents.htm#a1

c'est pour aller à la page auvents section a1

Je vais t'aider comme tu me l'as demandé  pas de souci. Pour faire comme mon site (ce que tu souhaites faire), le modèle Responsive01 n'est pas adapté tel quel.

Une des solutions pouvant générer un effet "similaire" est comme je l'ai indiqué, est de "fixer" l'image de fond.

Une fois ton image de fond choisie dans la Rsection, vas dans le menu de droite, onglet Styles puis Personnalisation.

Dans les différentes options, ouvres Arrière plan et spécifies les options suivantes :

Image Mobilité : Fixe

Image Position / Prédéfinie : Milieu

Taille (CSS3) / Prédéfinie : cover (couvrir)

Fais le par exemple au deux premières et tu devrais avoir déjà un bon aperçu de l'effet. 

http://sensode.com/responsive/" rel="nofollow - Voilà un exemple pour que tu rendes bien compte .

sans lien, c'est "presque" impossible de t'aider car je ne peux pas voir ce que tu as pu faire ou ne pas faire correctement...

A la rigueur, exporter ton projet, le compresser et nous l'envoyer par MP.

Bonjour à tous,

Chouette ce site  une petite indiscrétion,  les effets des images en fondu-enchaîne c'est avec le style de OE ou un script particulier ?

Perso je me suis mis à faire le site mobile et tablettes avec, et ma fois je ne suis pas trop déçu  bon je ne suis pas un pro ni très féru, je fais avec ce que j'ai.  http://m.location-vacances-labellisees.com" rel="nofollow - http://m.location-vacances-labellisees.com

J'ai gardé l'autre modèle pour mon second site  http://forum.openelement.com/fr/forum_posts.asp?TID=19960&PN=1&title=cration-dun-site-en-version-mobile" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=19960&PN=1&title=cration-dun-site-en-version-mobile

Cordialement

Pas évident de faire à la fois la technique et le design...pas évident surtout pour ceux dont ce n'est pas le métier. Bon courage 

Ce serait tout de même super si les effets pouvaient être incorporés dans le style,  notamment comme ceux que tu utilise avec les images sur le modèle de ton lien !

Mais bon les techniciens s'y retrouvent, les autres bavent 

Mais bon, pour le moment j'ai déjà réussi à rendre le modèle Responsive01 friendly et garde le site PC avec renvoi par htaccees vers le mobile.

Le tout me convient comme ça pour le moment

Un site responsive permet de s'adapter sur petits écrans, ce qui convient parfaitement pour les sites que je qualifierais de commerce de petits objet ou services tels que chaussures, fleurs, restaurants et autres dans ce style.

Il me semble en voyant votre site qu'il ne présente pas ce genre de choses pour tout public, qu'il a une spécificité très technique.

Par conséquence, vous devriez vos poser la question "A qui s'adresse ce site" à n'importe quel quidam qui se balade avec son Smarphone à la recherche d'un service ou à un public averti technique qui travaille dans un bureau ou installation plus adaptés au PC. Là vous aurez la réponse à votre question.

Parallèlement rient ne vous empêche de créer un site pour petits écrans épuré qui exposerait votre activité avec les diverses adresses.

Bonjour,

 

Je suis assez d'accord avec Maurice306.

Dans la classification du Genre 'Homo sites', j'irai même plus loin :

 

- d'un coté, la grande majorité j'en ai l'impression, les sites orientés commerce ("j'ai quelque chose à vendre") qui pourraient se subdiviser en 2 parties:

        + le grand commerce avec les grandes enseignes (grande distribution, banques, entreprises du CAC 40, ...). Là tous les moyens sont bons.

        + le 'petit commerce' (typiquement le tissu de PME), avec ses innombrables déclinaisons : hébergements, artisans, services de toutes sortes, ...

Pour ceux-là, surtout les seconds, effectivement nous pouvons imaginer l'intérêt de la fonction Responsive, qui devient presque une fonction de 'proximité', avec un contenu très succinct. [A noter : besoins en partie créés aussi pour relancer la vente de composants électroniques sur nouveaux supports suite à l'abandon de la loi de Moore],

 

- de l'autre les sites orientés aide ou information (Associations, sites perso, techniques pointues, articles de journaux..), et dont la lecture demande un peu d'attention, de réflexion. Là il est bon de s'asseoir, de prendre le temps de lire, d'analyser... c'est mieux sur un écran. Plutôt déconseillés aux iPhone et autres instruments du même genre utilisés n'importe [où, quand, comment]. Donc pas vraiment de réel besoin Responsive.

 

Effectivement question d'adéquation entre le sujet et son public.

".mon-classe" est un selecteur qui signifie tous les balises ayant la classe "mon-classe"), puis comment utiliser Inspecter l'element dans un navigateur pour trouver la balise qui vous interesse et voir ce qu'il faut comme selecteur, puis ajouter un Bloc de Code CSS avec le bon code, du genre

.mon-tableau td { font-size: 64px !important; }

Si vous pouvez publier votre site quelque part et donner le lien et indiquer ou regarder exactement, ca peut devenir beaucoup plus clair.

Dans ce template, le menu mobile est auto-rempli a partir du menu horizontale - le contenu de chaque lien est mis dans le lien mobile correspondant. Or, pour les liens du menu horizontal, vous avez probablement applique la taille de police directement sur le texte, et non sur l'element-lien.

Pour ne pas chercher plus loin, ajoutez un Bloc de Code Source type CSS avec le code:

.autoMenu a span {

    font-size: 22px !important;

}

Les fleches viennent de l'image de fond 

Je crois qu'il suffit de regarder dans les proprietes de l'element-section pour indiquer votre menu en tant qu'element a prendre en compte pour le calcul de la hauteur. Mais je ne suis pas sur.