Connaitre les différentes fonctionnalités d'affichage des contenus d'un YesWiki


Yeswiki se dote peu à peu d'éléments permettant d'améliorer la présentation de vos contenus.
On connait depuis les 1eres versions les balises ==== qui permettent de définir des niveaux de titre, ou les ** pour le gras , le pour __souligner. Ces possibilités de mise en forme sont d'ailleurs accessibles dans la barre d'édition...
Pour les anciens utilisateurs, vous remarquerez que leur utilisation est plus agréable depuis que l'éditeur Yeswiki bénéficie de la coloration syntaxique. (nouveauté Doryphore)


Nouveauté Doryphore dans la barre d'édition : les composants

Il est désormais facile d'insérer dans une page des éléments de mise en forme tels qu'un bouton, un encadré, un sommaire, une vidéo, une étiquette, des onglets...
Vous pourrez créer des mises en page soignées sans avoir besoin d'insérer du code HTML, et sans passer votre temps à explorer la documentation pour connaitre le nom d'une action et la moindre option d'affichage.

Le nouveau menu deroulant "Composants" qui se trouve dans la barre d'édition.
les composants en image

Voir les exemples sur la page Mise en page avancée installée par défaut dans le menu Exemples
D'autres exemples disponibles dans la page AidE

> faire le tri entre les 2 ?


Des sections (ou bandeau)


Un simple fond de couleur = action {{section}}texte {{end elem="section"}}
Un bandeau avec une image de fond action {{background}} Doc Background

Les options à explorer :
  • les options animation pour mettre en mouvement une partie du contenu
  • Nouveauté une option pour masquer/afficher une section aux utilisateurs non connectés

Autre paramètre (absent de l'assistant ) class="full-width" permet d'afficher la section en pleine largeur
Astuce si le contenu de la section déborde: ajouter paramètre nocontainer="true"

Autres mises en formes possibles

Les étiquettes
Nouveauté Les étiquettes sont disponibles dans les composants. C'est une petite indication qui attire l'oeil. Elle s'adapte bien à un texte court pour donner un qualificatif à une rubrique.

Mon texte accordeon

Ce type d'encadrés ou d'accordéon pour les utilisateurs de bootstrap est maintenant intégré à Yeswiki. Il est disponible sous le nom "Encadré" dans les composants. L'action qui en découle s'appelle panel et se décline sous différentes formes : dépliée ou pas et dans les différentes couleurs de base de votre thème : Primary Secondary-1 ...
Les colonnes
Cette mise en forme n'est pas encore disponible dans les composants. Mais son code est plutot simple et comme il sert beaucop, vous le retiendrez vite !
Voir dans la page Aide la syntaxe pour créer des colonnes.

Illustrez vos pages

Source : Undraw
Texte affiché au survol avec le style izmir
L'insertion d'un fichier image bénéficie de nouvelles options : essayez notamment les effets izmir dans les paramètres avancés...

Quelques ressources libres pour trouvez des illustrations :
  • undraw : des illustrations entièrement libres de droit avec la possibilité de les décliner selon votre couleur principale
  • nounproject beaucoup d'icones disponibles avec la possibilité de choisir la couleur, et la couleur de fond. (nécessite de créer un compte)
  • Freepik grosse banque d'images avec des images gratuites (mais nécessite une attibution) et des images payantes
  • Les icones en svg sont issues du site https://tablericons.com/
  • Creative commons search

  • ...

En cours de développement Les fichiers pdf pourront être affichés sous forme d'apercu...
Mon fichier PDF size=

Utiliser d'autres astuces issues de site extérieurs

wave svg
icones svg
emoji


Suite
Marseille Yeswiki assodev doryphore formation mise en page