Utiliser le CMS Odoo : rédiger un article

Comment utiliser l'éditeur de contenu pour un article ou une page web

LEVY Frédéric

Dans cette article, nous allons découvrir ensemble les différentes fonctions de l'éditeur pour écrire une page ou un article de blog dans Odoo.

Mon objectif est de vous expliquer tout le fonctionnement et les mécaniques que vous pouvez utiliser pour rédiger vos articles.

Dans un premier temps nous allons découvrir les différents "snipets" existants qui sont simplement des structures de mise en forme.

Nous verrons par la suite les différentes possibilités de la barre de mise en forme du texte et des images.

Enfin nous introduirons une autre possibilité, celle de modifier directement la page html pour plus de possibilités.


Cet article est rédigé à partir d'une version 10 d'Odoo, les versions 11 et 12 apportent des améliorations esthétiques et des simplifications mais ne révolutionne pas les principes de base que nous allons voir ensemble.


Pour initialiser un article de blog, je vous encourage à lire mon précédent post sur le sujet : Faire un article de blog sous Odoo.

Enfin si il vous manque des informations dans cet article, je vous encourage à nous écrire afin que nous complétions afin d'être exhaustif.

Odoo image et bloc de texte

Les blocs ou 'snipet'

Comme évoqué précédemment les blocs sont des éléments de configuration de mise en forme, afin de vous permettre de facilement mettre en forme votre page ou votre article.

On retrouve plusieurs types de blocs :

  • Les structures : premiers éléments de la construction de page, ce sont ces blocs que vous allez utiliser en priorité.

  • Les fonctionnalités : qui sont également des structures mais qui incluent des fonctions d’interaction avec l'utilisateur.

  • Les effets qui sont des structures qui évoluent quand l'utilisateur fait défiler la page web.

  • Inner content qui sont des structures a inclure dans des structures déjà dans votre page.

A présent nous allons voir les différents blocs en détail, je vous encourage a essayer en parallèle afin de vous faire votre propre avis sur l'utilité de chaque bloc dans votre contexte.

Les blocs de type structure

 

Odoo - Echantillon n°1 pour trois colonnes

Title

Comme son nom l'indique pour afficher un titre et un sous-titre.

Odoo- Echantillon n° 2 pour trois colonnes

Cover

Est très similaire à l'utilisation du précédent bloc toutefois la mise en forme diffère, votre titre sera excentré et non centré sur la page.

Odoo- Echantillon n° 3 pour trois colonnes

Text-image

Un des blocs principaux qui va placer un texte sur la droite et une image à gauche. 

Odoo- Echantillon n° 3 pour trois colonnes

Image-Text

Certainement le plus utilisé, l'image à gauche et le texte à droite.



Odoo- Echantillon n° 3 pour trois colonnes

Big message

Très très proche de la cover, simplement vous avez en plus un bouton action permettant de naviguer dans votre site par exemple.


Odoo- Echantillon n° 3 pour trois colonnes

Text Block

Simple et efficace un titre un sous titre et un paragraphe que vous allez pouvoir modifier à votre convenance.


Odoo- Echantillon n° 3 pour trois colonnes

Features

Permet d'afficher un icône et un texte court juste en dessous. Par défaut trois mais vous pouvez en avoir plus.

Odoo- Echantillon n° 3 pour trois colonnes

Big Picture

Une grande image centré avec un titre et éventuellement une légende en dessous.

Odoo- Echantillon n° 3 pour trois colonnes

Three Columns

Typiquement le bloc utiliser afficher des images et un texte en dessous comme ici.

Odoo- Echantillon n° 3 pour trois colonnes

Banner

Fonctionnement très proche du Cover mais qui inclus un bouton d'action, typiquement utiliser en fin de page.

Les blocs de type fonctionnalité

 

Odoo - Echantillon n°1 pour trois colonnes

Latest Posts List

Une fonction très pratique pour afficher les derniers articles d'un blog sous forme de liste.

Odoo- Echantillon n° 2 pour trois colonnes

Latest Posts

La même fonction que précédemment sous forme d'image sans le résumé de l'article.

Odoo- Echantillon n° 3 pour trois colonnes

Image Gallery

Pour faire une galerie d'images de photos. Différentes option permette de faire varier les effets.

Odoo- Echantillon n° 3 pour trois colonnes

Comparisons

Une structuration pour mettre en avant des produits ou des services. Ce blog est très structuré et supporte mal les modifications, donc attention à son utilisation.


Odoo- Echantillon n° 3 pour trois colonnes

Call to Action

Un bandeau avec un titre et un bouton d'action. très proche de la 'Banner' mais sans l'image en plus.


Odoo- Echantillon n° 3 pour trois colonnes

References

Permet de faire apparaître des logos pour pointer sur d'autres page ou actualité comme des retours d'expérience client par exemple.


Odoo- Echantillon n° 3 pour trois colonnes

Accordion

Un affichage dynamique sous forme d’accordéons, l’utilisateur devra cliquer sur le titre pour faire apparaître le texte. Pratique pour une FAQ par exemple. 

Odoo- Echantillon n° 3 pour trois colonnes

Feature Grid

Pour faire des listes sur plusieurs colonnes et dans chaque colonne un icônes avec un atout ou une spécificité que vous souhaitez mettre en avant.

Les autres blocs

 

Odoo - Echantillon n°1 pour trois colonnes

Parallax

Pour afficher une image dans un bandeau. La visualisation de l'image ne sera que partielle et l'utilisateur en se déplaçant dans la page va faire apparaître l'image.

Odoo- Echantillon n° 2 pour trois colonnes

Parallax Slider

Le même principe que précédemment avec différentes images qui peuvent changer.

Odoo- Echantillon n° 3 pour trois colonnes

Well

Un bloc que vous devez ajouter dans un bloc existant pour mettre en relief un point particulier

Odoo- Echantillon n° 3 pour trois colonnes

Panel

Même fonctionnement que le bloc précédemment mais avec en plus un titre.


Odoo- Echantillon n° 3 pour trois colonnes

Image floating

Pour ajouter une image dans un bloc existant avec si vous le souhaitez un texte explicatif en dessous.


Odoo- Echantillon n° 3 pour trois colonnes

Share

Pour permettre à vos lecteurs de partager votre page ou votre article de blog sur les réseaux sociaux ou via mail.


Les options pour les blocs

 

Odoo image et bloc de texte

Personnalisé un bloc

Tous les blocs ont des options de mise en forme.

Vous retrouver toujours les options suivantes :

  • La croix pour déplacer

  • La duplication du bloc

  • La poubelle permettant de supprimer le bloc

Après les autres options sont variables en fonction du choix de bloc, vous pouvez changer l'image de fond ou faire une animation ou définir les images pour la galerie d'images...

Utiliser les images,pictogramme ou video

Cette fenêtre apparaît lorsque vous cliquer sur une image ou un pictogramme,

il permet d'insérer ou de modifier les éléments suivants :

Une image

Un document

Un pictogramme

Ou encore une vidéo

Texte Odoo et bloc d'image

Les options de mise en forme

 

Odoo image et bloc de texte

La barre d'édition en haut

Dans l'ordre des icônes de gauche à droite vous allez retrouver les options suivantes :

  • La baguette magique pour changer les polices définit précédemment.

  • La mise en forme en gras.

  • La mise en forme en italique.

  • La mise en forme en souligné.

  • Pour supprimer la mise en forme du texte.

  • Pour changer la taille de la police.

  • Pour définir les couleurs de la police ou du fond.

  • Pour ajouter des puces.

  • Pour ajouter une numérotation.

  • Pour justifier le texte.

  • Pour faire un tableau.

  • Pour ajouter un lien.

  • Pour insérer une image.

  • Pour revenir avant votre dernière action.

  • Pour reprendre avant l’annulation de la dernière action.

 

Odoo image et bloc de texte

La barre d'édition pour les images

La barre d'édition est modifiée si nous somme sur une image, on va retrouver les différents icônes de gauche à droite :

  • La zone d'espacement par rapport à l'image.

  • La taille de l'image.

  • 100% de la taille de l'image.

  • 50% de la taille de l'image.

  • 25% de l'image.

  • Justifier l'image à gauche.

  • Centrer l'image.

  • L'image est recadré avec des coins arrondis.

  • L'image est recadré sous forme de cercle.

  • Ajouter une ombre à l'image.

  • Ajouter un cadre à l'image.

  • Transforme l'image en termes de taille et de rotation.

  • Ajouter un lien externe ou interne.

  • Modifier l'image.

  • Pour revenir avant votre dernière action.

  • Pour reprendre avant l’annulation de la dernière action.