texte normal/paragraphe texte normal/paragraphe texte normal/paragraphe texte normal/paragraphe
Titre 2
Titre 3
Titre 4
Titre 5
Titre 6
Texte réduit (dans Styles)
Liens : interne (page du site), lien externe (nouvelle fenêtre avec picto external-link), lien interne sur texte gras,
+
lien flèche
+lien flèche avec beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup beaucoup de texte, nécessitant de passer sur 2 ou plusieurs lignes
+
Ok le 15/09 : !! remonter l'affichage de la flèche rouge de droite pour l'aligner en hauteur plutôt sur la 1ère ligne de texte (plutôt que centrée verticalement)
texte paragraphe normal
Titre 2 avec gras - entre 2 § de texte normal (espacements avant/après ok)
texte gras, italique, barré, souligné
caractères spéciaux : m3, CO2, ...€, $, ų, ©,®, ™, œ, 🔝, ∉, ...
couleurs de texte + arrière-plan : bleu IFPEN (#003e57), rose accent (#c8375e), texte (#212c35), gris clair (#5d6974), jaune pâle (#fff3d6), ...
Ok le 15/09 : ajout de cyan #CCFFFF, rose #FFDCE5, vert #EDF8CF
Puces 1 - coches (par défaut) :
- puce 1
- puce 1
Puces 2 - rondes noires :
- puce 2
- puce 2
Puces 3 - carrées
- puce 3
- puce 3
Puces sur plusieurs niveaux
- niv 1
- niv 2
- niv 3
- niv 2
- niv 1
- niv 2
- niv 3
- niv 2
(faire Enter puis Tabulation pour passer au niveau intérieur ...Et se positionner sur chaque niveau pour modifier le style)
- ...
- ...
- ...
- ...
- ...
!! alternative aussi : Caractère PUCE en txt (Alt+7) 👉 • ...ou en gras •
Notes de bas de pages (de bloc Texte ici) via bouton " a' ", à côté de exposant/indice:
...Exemple 1 / Exemple 22 ...et 33.
citation texte normal gras lien
+ image à l'intérieurImage
image redimentionnée
Image
...texte après
Upload de document PDF :
fichier uploadé via bouton cKeditor Media > Document (sans possibilité de changer le Nom) :
...du coup apparaît le libellé du fichier PDF initial, sans possibilité directe de mettre "Plan d'accès...", et le document n'est pas catégorisé
(il faut du coup, dans un second temps, aller modifier le contenu BO > Médias > Document : Plan-d-acc__s...pdf )
!! ticket https://jira.factory.digiwin.tech/browse/REF-9
[...] Je résume donc (pour l’info des contributeurs à terme) :
- Je commence par charger mon fichier PDF en BO sur https://preprod-ifpen-v2.alpilink.cloud/admin/gestion-documents
en lui donnant un nom affichable sur le site, et en le catégorisant sur les Thématiques
Dans l’éditeur Wysiwyg, selon le type de lien souhaité :
• Simple lien en fin de texte, avec retour à la ligne : j’utilise le bouton Media du cKeditor > Document > sélection du PDF chargé
(inséré/encapsulé automatiquement …avec le titre/libellé qui reste modifiable en utilisant la Légende – picto de gauche – et s’affichera après Enregistrement )
• Application du lien sur des éléments de texte précis (notamment sur Titres ou styles particuliers) : j’utilise le bouton Lien cKeditor puis recherche le PDF par son titre (autocomplétion)
Boutons LAYOUT (positionné après YouTube tout à droite) :
2 colonnes
2 colonnes
avec séparateur
2 colonnes 30/70
(encadré)
Two column : créée par défaut avec 2 lignes
two
column
2ème ligne (créé par défaut)
nécessité de supprimer le contenu des cellules sur cette 2ème ligne...
Two column bricks : inutile ... Layout à supprimer
100
50
50
100
50
50
100
Three column 25/50/25 : pas définie comme tel... Layout à supprimer
...en fait 2 colums
30 / 70 ?
50 ? (et en 2 ème ligne)
25 ?
25 ?
Three column 33/34/33
3 colums 33
34
33
50 ?
Comme sur Two column : 2ème ligne (créé par défaut)
50?
nécessité de supprimer le contenu des cellules sur cette 2ème ligne...
!! pas de "Propriétés" sur ces Layout (à la différence des Tableaux ci-après)
Encadré info
Encadré attention
Encadré neutre
châpo
Cadre bordé
...séparateur - bouton " _ " :
TABLEAUX (classiques, distincts de Layout)
- Tableau Rayé :
Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
!! grand espacement avant la 1ère ligne : bof... 😕
- Tableau Bordé :
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
- Tableau Compact :
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
Styles de texte 👉 sur liens...
Surlignage (avec lien ou sans...)
FontAwesome :
Texte File Texte
Lucide.dev :
scan dashboard globe-check microscope graduation
landmark expand handshake circle-question-mark
... + Impacts / RSO :
• earth : - Climat
• recycle : - Ressources & circularité
• factory : - Industrie
• chart-no-axes-combined : - Économie
• network : - Filière
• scale : - Normes
• users-round : - Société et usages
• graduation-cap : - Montée en compétences
• shield-check : - Sécurité & qualité de vie
• person-standing : - Accessibilité & inclusion
• landmark : - Engagement collectif
Composant : CARTE DE LIENS
Type Formations
Titre Carte de lien 1
Titre Carte de lien 2
Titre Carte de lien 3
Titre Carte de lien 4
Titre Carte de lien 5 - MAX
Composant : ACTUALITES
Toutes nos actualités (modifiable, de même que l'URL)
Composant Chiffres clés
Composant Collaborer
Utilisable pour d'autres formes type "continuum"
Titre de l'étape 1
Résumé 1
Titre de l'étape 2
Encadré info
Encadré attention
Encadré neutre
châpo
Cadre bordé
...séparateur - bouton " _ " :
TABLEAUX (classiques, distincts de Layout)
- Tableau Rayé :
Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
!! grand espacement avant la 1ère ligne : bof... 😕
- Tableau Bordé :
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
- Tableau Compact :
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
| Tableau | Tableau | Tableau |
Styles de texte 👉 sur liens...
Surlignage (avec lien ou sans...)
Titre 2
Titre 3
Titre 4
Titre 5
Titre 6
texte normal/paragraphe texte normal/paragraphe texte normal/paragraphe texte normal/paragraphe
Liens : interne (page du site), lien externe (nouvelle fenêtre avec picto external-link), lien interne sur texte gras,
Titre 2 avec gras - entre 2 § de texte normal (espacements avant/après ok)
texte gras, italique, barré, souligné
caractères spéciaux : m3, CO2, ...€, $, ų, ©,®, ™, œ, 🔝, ∉, ...
couleurs de texte + arrière-plan : bleu IFPEN (#003e57), rose accent (#c8375e), texte (#212c35), gris clair (#5d6974), jaune pâle (#fff3d6), ...
Ajouter cyan #CFF, rose #FFDCE5, vert #EDF8CF
Puces 1 - coches (par défaut) :
- puce 1
- puce 1
Puces 2 - rondes noires :
- puce 2
- puce 2
Puces 3 - carrées
- puce 3
- puce 3
Puces sur plusieurs niveaux
- niv 1
- niv 2
- niv 3
- niv 2
- ...
!! alternative aussi : Caractère PUCE en txt (Alt+7) 👉 • ...ou en gras •
Notes de bas de pages (de bloc Texte ici) via bouton " a' ", à côté de exposant/indice:
...Exemple 1 / Exemple 22 ...et 33.
citation texte normal gras lien
+ image à l'intérieurImageimage redimentionnée
Image
...texte après
Composant Contact
intro éventuelle...
ci-après : 1 à xxx contacts appelés
Composant GRANDS DÉBATS
description optionnelle
(ci-après : appel d'articles > catégorisés Gds débats ou pas ...5 MAX)
Découvrir plus (uniquement sur les Articles)
Toutes nos actualités
Composant FAQ
intro optionnelle
(ci-après : appel de X contenus "Question")
Qu’est-ce qu’IFP Energies nouvelles ?
Quels sont les principaux domaines d’intervention d’IFPEN ?
Composant "Fil d'actualités" ...AUTOMATIQUE (par défaut, sur articles de la même thématique)
Toutes les actualités
Renouvellement de l'accord cadre IFPEN/EDF
Nouvelles nominations au sein d'IFPEN
Composant "Fil d'actualités" ...ou MANUEL (choix des articles 1 à 9 MAX)
Toutes les actualités
Du déchet à la ressource : l’innovation IFPEN au service du recyclage des plastiques
Toutes les focus (libellé + URL modifiable/supprimable)Composant : OUTILS
intro optionnelle
Sous-titre (groupe)
Description (groupe) - les 2 étant optionnels
Ensuite, on a :
- soit des appels d'articles - Contenu lié : type d'une actu sur un site/outil ou même évoquant un outil...
- soit des blocs à saisir manuellement - LIEN EXTERNE :
-
EAGE Digital 2026 : découvrez les solutions digitales d'IFPEN et de Beicip-Franlab
-
Titre LIEN EXTERNE
Description optionnelle
(image Vignette et lien optionnels aussi) -
Outil 3 - LIEN EXTERNE
(sans vignette ni lien)
Composant : Témoignages
Lien CTADescription optionnelle
(ensuite : Bouton ou lien CTA optionnels + Contenus mis en avant)
Emmanuel HACHE
Économiste-Prospectiviste, département Économie et Évaluation environnementale, Direction Économie et Veille
Mickaele Le Ravalec
Directrice Economie et Veille
Jean KITTEL
Materials & Corrosion Technical Advisor, Chef de projet Docteur en électrochimie
Pascal ALIX
Chef de Projet, Ingénieur de Recherche E-mail professionnel : pascal.alix@ifpen.fr
Composant : Thématiques (1 à 3 MAX,en colonnes)
Transformer les données du sous-sol en connaissances partagées et exploitables.
Anticiper le comportement du sous-sol pour accompagner ses nouveaux usages
Mesurer les impacts des transports pour éclairer les choix de mobilité et de décarbonation.
Composant "Thématiques (colonne de lecture)" [ aussi sur autres pages/tags...]
Composant : Galerie d'images (avec Titre H2 avant...)
Composant : Liste de logos (comme pour la galerie d'image : sélection de visuels Media > images ...au moins 1)
composant : VIDEO ...Titre / légende ici
NB : semble ne pas marcher avec "Vidéo Distante" enregistrée en BO
...à voir suppression du bloc ? (pour privilégier l'embed dans cKeditor ?) ...peut-être dommage pour qu'on capitalise/centralise les vidéos de tout le site...
