Aller au contenu
Support de Zwii
Fred

[UPDATE 2] Comment utiliser les barres latérales avec les menus verticaux.

Messages recommandés

Quelques explications me semblent utiles.

 

Qu'est-ce qu'une barre latérale :

La barre latérale est destinée à afficher une information récurrente à gauche ou à droite des pages du site. Elle peut donc servir plusieurs fois, on n'a pas besoin de créer autant de barres que d'instances (nombre de fois où on l'utilise).

La barre latérale évite donc de créer un gabarit de page à copier coller, elle simplifie donc la création du contenu :

La barre peut être appelée à droite ou à gauche et autant de fois que nécessaire.

Une barre est une page qui ne contient pas de module. Son thème est le même qui celui d'une page standard.

 

Exemples d'usages : un menu vertical composé d'imagettes, une barre de pubs, une barre d'affiliation, des infos météo etc...

 

 

Comment déclarer une nouvelle barre :

  1. Créez une page
  2. Dans mise en page, sélectionnez barre latérale

2019-03-30_06h28_48.png.4a3d427492f2ee8d0bc490204c7a6a09.png

 

 

Comment utiliser une barre :

  1. Ouvrez n'importe quelle page (avec un module ou pas)
  2. Sélectionnez l'un des choix :

image.png.59678a3295b62413d4530a72a52caf11.png

 

C'est le cas de cette page contenant un module, le choix barre latérale n'est pas disponible lorsque la page importe un module. Le tout dernier choix permet de sélectionner deux barres.

Ensuite sélectionnez la page déjà définie comme une barre :

 

image.png.122756a004ad8c13e0d2918709866578.png

 

Inclure un menu dans une barre latéral .

Une barre latérale peut contenir une copie du menu principal présenté verticalement en mode texte.

Pour insérer un menu vertical :

  • Editez la page contenant la barre et
  • Cliquez sur l'une des deux options :
    • Menu vertical intégral : c'est la totalité du menu horizontal
    • Sous-menu : affiche uniquement les pages enfants de la page parente sélectionnée, ce qui n' a de sens que si la page sélectionnée contient des enfants.

2019-03-30_06h27_09.png.aabe53762021383f9818e8d4f4a0fdab.png

 

Afficher ou masquer une page dans l'un des deux menus :

Le menu inséré est le même que le menu horizontal, il est cependant possible de déterminer la présence de chaque page (et non des barres) dans l'un ou l'autre des menus.

Cela permet de réserver une partie du menu à une barre latérale et donc à disposer d'un menu vertical qui soit complétement différent du menu horizontal.

 

Pour ce faire, dans les paramètres des pages, dans la boîte menu, cochez la sélection pour masquer la page dans l'un ou l'autre des menus :

 

image.thumb.png.d618740ba909cc971f9b27825ea39aba.png

 

 

En choisissant la première option, les pages enfants d'une page parente ne sont plus affichées dans le menu horizontal. Cette option a du sens dans plusieurs cas de figure de présentation :

  • les pages enfants ont des barres latérales qui contiennent un sous-menu de page parente.
  • les pages enfants sont liées par des liens, la structure hiérarchique permet alors de les lister en ordre.

 

L'un des deux choix de masquage "Masquer cette page" est possible mais pas les deux. Pour masquer une page dans les DEUX menus, à "Position" choisir "ne pas afficher". Cette option permet de disposer de menus principaux différents, une partie des pages sont disponibles dans le menu horizontal, une autre dans le menu vertical.

 

image.png.27971a67fee5700a87b835efd06ffb75.png

Rappel : une page désactivée apparaît dans le menu mais elle n'est pas cliquable. On l'utilisera pour ranger des pages filles dans un menu.

 

 

 

 

 

 

 

 

  • Merci 2

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 10 heures, Xav7800 a dit :

ça, je vais piquer sans vergogne dans un but louable... 😋 Merci @Frédéric

C'est rapide et mal écrit mais au moins tu as la trame 🙂

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 27 minutes, schoune a dit :

est-ce comme une iframe??? serait-il possible d'afficher des photos en vignette???

Non ce ne sont pas des iframes mais mais des divisions <div>. Dans une barre,  tu peux mettre des images avec un effet lightbox.

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

PeterRabbit rectifier. Lui pas codeur — pas fou non plus — et tout petit Manitou même pas "bip bip" quand lui reculer. 😶

 

Modifié par McGregor
  • Haha 2

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 1 heure, roger a dit :

j'ai obtenu un résultat similaire à toi mais en utilisant par contre pas une "barre latérale" mais l'un des templates que propose tinymce..

le tout dans une version officielle v9013

 

template.png.fb6cd6f7ed7887bbe3c8aafe8177261d.png

J'ai ensuite ajouté dans le code source tinymce l'encadrement (bordures)

Puis à l'intérieur copie le code source de ma barre latérale

Sous cette barre latérale j'ai alors inclus une image...

 

🙂

Mais je ne me suis pas arrêté là, sous l'image j'ai mis en prime une vidéo...le tout visible ici:

 

http://www.desforges-roger.fr/ZwiiCMS-9013/test-barre-laterale

 

On fait tout avec l'un des templates fourni avec le tinymce, même y incorporer le code d'une barre latérale.

 

 

 

 

Sans deconné ? C’est génial !

 

Je plaisante, bien sûr qu’on peut faire ainsi depuis quelques mois.  Et c’est justement pour éviter les inconvénients de cette technique rudimentaire que les barres ont été créées. 

Partager ce message


Lien à poster
Partager sur d’autres sites

Depuis ce soir, il y a désormais deux choix de menu :

  • un menu intégral 
  • le sous menu de la page parente

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 48 minutes, roger a dit :

C'est bien pour cela que je me suis amusé à reproduire cet exemple là, il a été donné plus haut par un autre membre et ce qui m'avait fait "tilt à mon vieux zoeuil averti" ce sont les bordures qui encadraient une barre comme tu la conçue + le contenu en dessous d'elle....

Bin vi ta barre latérale son contenu et à l'intérieur de celle ci et po en dessous 🤗

 

On peut le mettre à l'intérieur, si on veut. 😕

C'est d'ailleurs plus joli.

 

bof.png.689cb64a475c222abe7047526fc7a9e3.png

 

PS : Enfin, c'est comme on veut. C'est ça qui est bien chez Zwii.

Modifié par McGregor

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 11 heures, roger a dit :

Donc pour créer une simple barre latérale personnelle il suffit donc à la création de la page comme indiqué plus haut de choisir dans  l'ordre bien précis:

 

1 créer une page

2 mise en page choisir 'barre latérale

3 choisir le gabarit de la page

4 enregistrer la nouvelle page crée qui affichera alors la barre latérale

 

🛠️  donc je veux une barre latérale qui a pour Titre "Mon livre préféré"

🛠️  je veux qu'à l'intérieur il y ait un lien vers l'endroit où on peux télécharger ce livre + une image représentant sa page de couverture

 

A je crée la page (procédure 1 création de la page qui recevra ma future barre latérale)

B je choisis barre latérale (procédure 2 choix du type de barre latérale à utiliser)

C je choisis si ma barre s'affichera à droite ou à gauche de la page (procédure 3 choix du gabarit de la page ) et l'espace qu'elle devra occuper dans celle ci

D j'enregistre ma page OK

 

💡 Donc je suppose ensuite que pour m'y retrouver dans toutes les barres latérales que je peux crée ainsi, il faudra alors que j'édite chaque nouvelle barre crée pour lui donner dans le cadre où est affiché son titre (Balise H4 dans le block de la barre latérale) un nom de titre pour s'y retrouver ensuite dans la barre d'édition en haut à gauche de la barre d'administration où l'on gère toutes les pages crées et toutes les barres latérales utilisé sur notre site Zwii.

 

▶️ Pour cette expérience je précise que j'ai déjà mis une barre latérale "Normale" dans ma page d'accueil et personnalisé son contenu

 

▶️ Je veux donc mettre une autre barre latérale personnalisée avec son propre contenu dans ma page "Blog"

 

1 dans ma page blog je veux mettre une barre latérale "Livre"

2 J'ouvre ma page blog/édition/choix barre latérale/gabarit/

3 enregistrement de ma page

 

Là la barre latérale apparaît bien, c'est exactement la même que celle personnalisée la toute première fois pour ma page d'accueil.

🛠️ Je vais maintenant personnaliser cette barre pour lui donner un nom  dans la description du titre de cette barre puis vais dans l'intérieur de celle ci mettre mon image ainsi que le lien vers la page de téléchargement du livre que j'adore.

 

Donc jusque cette partie là çà va, ma nouvelle barre s'affiche là où je le veux, ne me reste plus qu'à personnaliser son contenu.

accbar1.thumb.png.9fab45893fde01ef857904cf341c0507.png

 

blogb0.thumb.png.3b8d108df60509dafb56d471df39419e.png

 

blog1.png.92717ff66bd49e810f8383049625ad4a.png

 

blogbarX.thumb.png.7e9f33aa3a3eb5b37e0d5179a06e9c9c.png

 

Mais là où ça ne vas plus c'est la suite si je veux vraiment mettre une autre barre personnalisée dans une autre page de mon site Zwii!

edblog0.png.1f256fda5aac07c9e6616d2a120c5eaf.png

 

edblog1.png.b693bca6c4135787854994e0ff22e677.png

 

Résultat final obtenu en suivant à la lettre le tuto expliqué tout en haut

 

F1.png.53ea6a2f2c1af6e3f2148d7ae9ec2387.png

 

F2.png.058fc7e022d3eeb1d472403f76dadc25.png

 

F3.thumb.png.4ad874a9fc3a9b3321da0144176e2455.png

 

* j'aurais pu faire une vidéo de ceci pour faire "plus court" dans le visuel à rapporter mais je sais que ce n'est pas forcément apprécier de tous.

 

 

 

On peut disposer d’autant de barres, il n’y a pas de limitation de nombre.  

  • Merci 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 11 heures, PeterRabbit a dit :

Oui, mais tu peux mettre les iframes des codes d'intégration de vidéos ou de cartes, par exemple, dans une barre latérale. Ou le code d'intégration de documents de Gallica, etc...  😊

Tout à fait. 

Il ne faut pas craindre les iframes, elles sont définies par le consortium www d’html 5. 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 19 heures, roger a dit :

j'ai obtenu un résultat similaire à toi mais en utilisant par contre pas une "barre latérale" mais l'un des templates que propose tinymce..

 

Il y a 17 heures, Frédéric a dit :

Je plaisante, bien sûr qu’on peut faire ainsi depuis quelques mois.  Et c’est justement pour éviter les inconvénients de cette technique rudimentaire que les barres ont été créées.

 

template.png.60004944b923751ab7a244424938a2e1.png

 

 

Pour mettre tout le monde d'accord, puisqu'une barre latérale est (à la base) une page ordinaire, la barre latérale "installée par Zwii" utilise un template fourni d'origine dans TinyMCE.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Il n'y a donc pas de code spécial "barre latérale" et tous les chemins mènent là où on veut.

 

rg.jpg.94f0322ff201b908856f183881c66644.jpg

 

C'est ça qui est bien chez Zwii. 🙄

 

Modifié par McGregor
  • J'aime 1
  • Confus 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Comment chosir l'ordre des barres latérales en mode responsive ?

 

Je voudrais cet ordre en mode responsive ! :

Page

puis barre latérale gauche

et en ensuite barre latérale droite

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a une heure, pduchemin a dit :

Comment chosir l'ordre des barres latérales en mode responsive ?

 

Je voudrais cet ordre en mode responsive ! :

Page

puis barre latérale gauche

et en ensuite barre latérale droite

Un petit bonjour, non ?

Partager ce message


Lien à poster
Partager sur d’autres sites
il y a 13 minutes, pduchemin a dit :

Oui   bien sur .... Mais  a cette c'est  plutot Bonsoir

 

Très humblement

 

En effet...

 

Il faut en passer par une modification de l'ordre au niveau du custom.css et cette question a du sens...

 

 

Partager ce message


Lien à poster
Partager sur d’autres sites
Il y a 19 heures, pduchemin a dit :

Oui   bien sur .... Mais  a cette c'est  plutot Bonsoir

 

Très humblement

 

Bonsoir @pduchemin,

 

Question très intéressante...

 

Dans main.php rechercher la première <div class="row"> après <section>, ligne 166 de la v9.1 et la remplacer par :

<div class="row siteContainer"> 

Dans common.css après la  ligne 40 on dans custom.css

 

@media (max-width: 992px) {
	.siteContainer {
		display: flex;
		flex-direction: column;
	}
	.siteContainer > #contentLeft {
		order: 2;
	}
	.siteContainer > #contentRight {
		order: 3;
	}
	.siteContainer > #contentSite {
		order: 1;
	}
}

Cette modification est intégrée à la 9.1,  merci bien pour la question.

 

 

 

 

 

Modifié par Frédéric

Partager ce message


Lien à poster
Partager sur d’autres sites

Bonjour,

 

J'utilise !!!

 

c'est vraiment très utile : merci !!!!

 

Je viens de découvrir ce fil (bravo d'avoir fait ce tutoriel). Et bravo aussi pour la façon dont c'est présenté dans Zwii : j'ai compris tout seul assez vite comment l'utiliser sans l'explication comme quoi c'est bien foutu 🙂 !!!

  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

J'ai juste fait une barre latérale dans la page d'accueil (le lien vers mon site est sous mon avatar sur la gauche)

 

Pour afficher les rectangles arrondis, j'utilise une div qui fait référence à un bout de css que j'ai ajouté dans le css principal.

c'est très basique !

 

Faudra que je rajoute à mon CSS quelque chose pour sue les images s'éclaircissent au survol de la souris pour indiquer plus clairement qu'il s'agit de liens.

Modifié par Eric
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites

Le bout de CSS est :

 


.monBloc {
border-color: rgba(49, 180, 187, 1);

border-style: solid;

border-width: 10px;

border-radius: 20px;

background-color: rgba(49, 180, 187, 1);
}

 

et dans la barre latérale, je mets mes images avec liens dans

 

<div class="monBloc">

<!-- ici le contenu -->

</div>

 

Je trouve le code css en regardant sur internet et en utilisant le programme Bluefish qui facilite grandement l'écriture de code css

  • J'aime 2

Partager ce message


Lien à poster
Partager sur d’autres sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.


×
×
  • Créer...