[Apprenti] E-monsite : organiser et remplir son site

Bonjour,

Suite à une demande d'aide relatif à la création d'un site pour un legacy, j'ai expérimenté l'utilisation de E-monsite.

Le but étant d'organiser la navigation latérale et horizontale. Egalement l'occasion de voir comment ajouter des modules et les possibilités de mise en page.

C'est tout ceci que je vous propose dans ce tutoriel. Si des questions étaient posées (dans la salle question), ce tutoriel sera complété.

Avant toute chose le site pour découvrir et s'inscrire : http://www.e-monsite.com/

1. Créer un menu dans le cadre latéral vers des liens extérieur :

On va aller dans le menu configuration > menu
On arrive sur le module qui donne une représentation visuel du site avec ses différentes parties.

On va s’intéresser au Menu vertical.
Et on va donc opter pour ajouter un widget

On va donc opter pour un module de type Gadgets

On va avoir toute une liste de gadget et nous allons choisir
Je conseille celui-ci car c'est un bon compromis pour les débutants car on peut se servir de l'éditeur visuel sans avoir à saisir du code.

On arrive donc sur cela

Dans la partie Titre affiché sur le site
Donc on laisse la check box coché pour avoir le titre qui s'affiche. Donc saisir le titre que l'on souhaite donner au module.
Attention si on saisie quelque chose dans le champ de l'image, l'image s'affichera à la place du titre.
si l'on saisie quelque chose dans le champ URL de destination alors quand on clique sur le lien ou le titre cela menera au lien indiqué.

Dans la partie Texte

On va cliquer sur le bouton image que j'ai encadré en rouge. Ce qui va nous permettre d'insérer une image. J'insiste sur le fait d'enregistrer l'image ou préalable, et non pas utiliser un lien vers une image sur un autre site.

Tu peux aller directement chercher l'image dans ton espace de stockage, si tu as mis les boutons au préalable, ce n'est pas mon cas donc on clic sur Parcourir

Une fois que c'est fait on a directement l'image au niveau de l'éditeur visuel. Il nous faut donc à présent transformer cette image en tant que lien

On sélectionne l'image et on clic sur le premier bouton des liens. je les ai encadré en rouge. On va s'occuper de modifier les informations et d'indiquer ce qui se passe au clic

- url du lien : le lien vers lequel pointe l'image
- cible : on sélectionne (_blank) car on veut que le lien s'ouvre dans un nouvel ongle
- titre : c'est optionnel mais c'est une bonne habitude à prendre

Une fois que c'est fait on clic sur Mettre à jour

On revient sur l'écran d'avant et on clic sur Enregistrer

Ce qui nous ramène encore à l'écran d'avant et là on doit encore ABSOLUMENT penser à Enregistrer

Et voilà ce que ça donne :

2. Ajouter des modules :

E-mon site propose une série de modules prêt à l'emploi dont une gaelerie d'image, des vidéos, agenda, livre dor etc...

Nous allons voir comment ajouter ces modules et décider de l'endroit où ils apparaissent. La démarche est la même pour l'installation des différents modules donc on va prendre l'exemple de la galerie

Donc dans le menu Module > Gérer les modules

On a ici u aperç de tous les modules. En haut ceux qui sont installé. Vous pourrez ultérieurement les désinstaller en cliquant sur un lien qui apparait en dessous. ici on ne le voit pas car Page est le module de base de e-monsite et ne peut en aucun cas être supprimé.

Nous ce qui nous intéresse le plus ce sont les modules que l'on peut installer.

Je vais donc cliquer au niveau de l'album photo sur activer

Me voici donc dans les options du modules. On va me demander de choisir l'endroit où je veux que les choses s'affichent


J'ai mis des petites pastilles pour délimiter les espaces.
1. On demande si on veut que le lien apparaissent au niveau de la barre de navigation haute. c'est mon cas donc je coche.

2. on demande ce que je veux faire au niveau des widgets.
Il est important de savoir que les possibilités varient d'un module à l'autre, prenez le temps de lire ce qui vous est proposé.
Les widgets ce sont des fonctionnalités qui vont s'installer au niveau de la barre latérale; elle permettent de montrer par exemple la dernière photo ou alors les catégories etc...

ATTENTION : une fois que vous avez décidé de mettre en place les widgets, vous ne pouvez pas les ajouter parès coup (ce que je trouve très très nul ou alors e suis bigleuse). Vous devrez désactiver et ensuite à nouveau activer le module pour faire ces modifs

Donc faites des essais de visualisation des widgets avant de mettre des trucs dedans au cas où...
Vous êtes à présent sûr ? c'est votre dernier mot ? Vous pouvez cliquer sur Activer

Procédez ainsi pour tous les modules qui vous intéressent.

Ensuite quand vous voudrez ajouter ou modifier ces éléments vous les trouverez ici dans Module :

3. Changé l'intitulé des menu sur la navigation haute :

Bien nous avons rajouté des modules qui sont allés directement s'installer sua la navigation horizontale, situé en haut du site. A côté de l'usuelle Page d'accueil.

En y repensant accueil ça serait amplement suffisant, c'est d'ailleurs ce que j'ai fait en la renommant, et on va voir cela ensemble pour l'album photo !

Donc au niveau du menu Configuration > Menu

On arrive sur le visuel de votre site qui vous permet de voir comment son agencées les parties. ce coup ci ce qui nous intéresse c'est le Menu horizontal du haut


Une fois que l'on a cliqué sur modifier on a ceci qui s'affiche, je vous ai mis des pastilles pour voir un peu plus en détail


1. Un lien direct pour ajouter un nouveau lien (on verra cela plus tard)
2. Le nom de la page
3. Vous pouvez modifier l'ordre des lien en cliquant directement sur les flèches
4. Les boutons pour modifier ou supprimer
5. Mode avancé : pour modifier votre menu en saisissant directement du code en HTML. Si vous commencez, vous devrez continuer ainsi pour ajouter des menus par la suite !

Nous ce qui nous intéresse c'est de modifier, donc on clic sur le bouton !


Pour ce point on ne va que modifier le titre, on verra le reste par la suite. Donc si j'essai de taper du texte dans la partie titre du lien rien ne se passe. C'est parce que le champ est verrouillé, donc on clic sur le cadenas que je vous ai encadré en rouge.

Fyladel a écrit:

Par contre, il faut préciser de ne pas re-cliquer sur le cadenas après avoir modifié le titre. Je pensais que ça le bloquerais comme tel, mais non ! Cela remet le titre automatique

A présent vous pouvez le nommer comme vous le voulez !

Une fois que c'est fait vous devez enregistrer ce que vous avez fait à chaque fenêtre donc :
- la fenêtre où vous avez changé le titre
- la fenêtre ou vous pouvez modifier le menu du haut
- la fenêtre ou vous modifier la structure du site

Oui je sais cela en fait des validation, ils doivent être parano chez e-monsite...

4. Catégorie et option d'affichage :

On va à présent s'occuper de créer des catégories. Les catégories ce sont les dossiers qui vont ensuite contenir nos pages.
E-monsite n'est pas très clair dans sa manière de nommer les choses. Donc les catégories se gèrent depuis le menu Page > Gérer les pages


Voyons à présent la structure de cette page qui va nous servir à gérer les catégories mais aussi les pages.


1. Bouton pour ajouter une page
2. Bouton pour ajouter une catégorie
3. Modification de l'affichage ici on voit en liste mais vous pouvez mettre en forme d'icône. Seule l'affichage en liste vous permet d'avoir le détail des infos.
4. Visualisation de l'arborescence de votre site
5. Visualisation des informations des pages. Dans la partie supérieur s'affiche également les catégories (là on ne voit rien forcement je n'en ai pas encore créer...). Pour modifier un élément vous devez au préalable cocher la case; Dans les actions vous avez des fonctions de partage sur les réseaux sociaux.
A droite d'action une icône qui vous permet de modifier l'ordre des éléments en les faisant glisser.
6. récapitulatif du nombre de pages et catégories
7. Bouton d'action, ici on n'a que modifier mais c'est également là qu’apparaît le bouton pour supprimer

Ce qui nous intéresse c'est de créer des catégories. Pour l'exemple j'ai créé 3 catégories qui se nomment génération 1, Génération 2 et Génération 3.
Voici ce que cela donne au niveau de ma navigation latérale :


Vous l'avez remarqué :
- Génération 1 n’apparaît que dans la partie Menu.
- Génération 2 apparaît dans la aprtie Menu et en plus un menu qui porte son intitulé a été créé.
- Génération 3 n’apparaît nul part.

Voyons à présent ce qui pilote ces différents résultats au moment de la création de la catégorie !

- Nom de la catégorie : le nom que je lui donne
- Masquer la catégorie : si je coche alors la catégorie n’apparaîtra pas dans la partie Menu
- Ajouter dans le menu vertical du site : si je coche alors cela créera un menu en son nom comme pour génération 2.

Autant pour le fait de masquer la catégorie on peut revenir en arrière quand on modifie la catégorie. autant on ne peut pas décocher le fait qu'il y ait un menu dans la aprtie latéral, encore une oncohérence de e-monsite.
mais pas de panique vous pourrez toujours le supprimer via le menu Configuration > Menu

Quel est donc l'intérêt de masquer une catégorie dans le menu latéral. C'est tout simplement eviter qu'un menu n'apparaissent à X endroit ce qui a tendance à perdre l'internaute. On va pouvoir ainsi décider de faire apparaître la catégorie génération 3 dans le menu du haut !
C'est aussi masquer une catégorie et la rendre accessible uniquement via un lien que vous pouvez mettre dans votre texte.

Et voici à quoi ressemble à présent l'interface avec les catégories :


En sélectionnant une catégorie j'ai le bouton supprimer qui s'affiche. j'ai aussi des détails sur la date de création.

5. Page et mise en forme du texte :

Bon voici un élément qui m'a agréablement surpris, faut dire ils avaient des points de retards.

Au niveau du menu on est au même endroit que pour les catégories et attention tenez vous bien, on clic sur le bouton Ajouter une page

Voici ce sur quoi on arrive et en avant les pastilles


1. Le titre de la page tel qu'il apparaîtra au niveau de l'URL. ces termes sont important pour le référencement sur les moteurs de recherche. Quand vous allez saisir du texte ici, cela va se mettre automatiquement dans la ligne du dessous; mais vous pouvez changer après coup.
2. Le titre tel qu'il est affiché au niveau de la navigation
3. La catégorie dans laquelle la page doit être rangé
4. Un bouton pour rajouter une catégorie au cas où vous ne seriez pas satisfait de celles que vous avez crées et qu'il vous en manque une.
5. Ajouter un raccourci vers votre page depuis une autre catégorie sans pour autant que la page ne soient associées à cette dernière.
6. Etat de la page : publié ou non publié
7. le titre de la ligne. Comprendre ligne au sens de section de votre page. Comme cous allez le voir on peut la structurer avec différentes sections qui auront leur mises en page spécifique.
Pour l'instant c'est un peu obscur mais on av voir les choses en image
8. La barre d'outil de l'éditeur visuelle. elle apparait lorsque vous cliquez dans la prtie dédiée à la rédaction
9. justement la partie reservée à la rédaction de votre contenu. Par defaut c'est une colonne pour contenir du texte
10. Ajouter une colonne va vous permettre de modifier la mise en page de votre section
11. Ajouter une ligne : donc ajouter une section, optez directement via les boutons sur le nombre de colonnes désirées.

Bien ce qu'il apellent ligne est en fait une section; Qui est coposé d'un titre (titre de section) et de contenu qui dépend de ce que vous mettez dans les colonnes.

Pour que ce soit plus clair j'ai fait un essai que je vous montre de suite.
Voilà j'ai donc cliqué sur ajouter une colonne.


Tadam une colonne est apparu (cadre vert) où l'on vous propose tout un choix de widgets pour composer votre colonne de droite. dans mon cas ce sera une image.
Afin de modifier la dimension des colonne, vous pouvez placer votre souris au niveau de la séparation.J'ai mis un cadre bleu, attention c'est sensible cette petite chose.
Au niveau du cadre rouge, vous pouvez changer d'avis en supprimant la colonne avec la croix. Ou inverser en la passant d'un côté à l'autre avec les flèches et pour finnir saisir à la main le pourcentage de l'espace occupé.

Je vais ensuite créer une nouvelle section en utilisant Ajouter une ligne et en cliquant directement sur deux colonnes.
cette fois ci pour les deux widget j'ai choisi Editeur visuel qui me permet d'ajouter du texte.
Voici ce que cela donne :

Je vais ensuite pouvoir changer l'ordre de mes sections. En revanche ce qui manque cruellement c'est de visualiser le rendu. Donc pas d'autre choix que de visueliser sur votre site et modifier la page pour ajouter les dimensions des colonnes

Et afin que vous vous rendiez compte en live une capture sur le site :


Donc le gros titre 'Article et section" c'est ce qui correspond au titre de la ligne quand vous en créez une et en dessous la mise en page choisie pour chaque section ajoutée.

6. Placer ses catégories dans la navigation haute :

après avoir créé nos catégories qui se sont placés dans la navigation latérale si on n'a pas spécifié qu'on ne le voulait pas, voilà ce qu'il advient quand on met la souris dessus :


Le site créé ce menu quand on met la souris sur la catégorie automatiquement. C'est le bon point. Nous ce que l'on veut c'est que cela fasse cela mais que ce soit dans la barre de navigation du haut. Pour l'exemple je vais utiliser ma catégorie génération 3 que j'ai caché lors de la création

Alors vous connaissez déjà l'endroit : configuration > Menu


et ce qui nous intéresse est la navigation haute, on l'a vous lors de la modification de l'intitulé des onglets :


A présent on commence l'inédit car on va créer notre propre lien :


Alors cette même fenêtre va changer selon les choix que l'on fait.
La première chose est le type de lien:


Comme c'est indiqué un lien externe est un lien vers un autre site, alors qu'un lien interne mène à une des pages de votre site. On choisi donc lien interne

7. Où mettre du CSS pour personnaliser le design


Au niveau des menus Configuration > Apparence

Une fois sur la page tu va dans l'onglet Personnaliser et tu restes dans le mode simple


Il va falloir que tu scrolles jusqu'en bas de la page, juste avant le bouton enregistrer tu as ceci :


Tu cliques dessus pour agrandir l'option et là tu vas avoir ceci :

j'insiste sur le fait qu'en changeant de thème toutes ces modifications seront perdues. Donc à sauvegarder au cas où quand tu veux changer.

Alors au niveau de la fenêtre de texte c'est là que l'on saisi le CSS.
Pour mémo cette petite explication sur ce que c'est : http://www.sims-artists.com/t3446-info-et-dev-html-css-fiche-html-et-css-qu-est-ce-que-c-est

La notion de chronologie est importante dans le CSS. le dernier ordre donné prends le pas sur ce qui a été écrit avant. C'est grâce à cela que l'on va pouvoir faire des modifications. Car ce que l'on ecrit dans cette fenêtre sera la dernière chose que prendra en compte le navigateur pour l'affichage. on donne donc des contre ordre.

Le tout est donc de savoir ce que l'on modifie et le nom de la structure. en cela firebug est capital car il nous permet de connaitre le nom de la division que l'on modifie.
Sans oublier d'enregistrer

Tous les thèmes n'ayant pas la même organisation, je ne peux pas vous mettre de code tout prêt pour changer quelque chose. Par contre il vous faut connaitre du CSS pour savoir quoi indiquer !!!

Merci Fu !

Merci !

Merci beaucoup Fu pour tout ce travail!

Merci beaucoup Fu !

Merci encore Fu' pour ton aide !