Pages de contenus
Formats des textes
Entêtes
Entête de niveau 1
Utilisée dans les pages d'accueil principales uniquement (Producteur/Productrice et Cytoyen/Citoyenne).
Entête de niveau 2
Utilisée dans les modules d'intro, pour afficher le titre des pages uniquement.
C’est un format donné par défaut.
Entête de niveau 3
Premier niveau de titre pour les contenus de la page. (Titres des modules et des paragraphes.)
Entête de niveau 4
Deuxième niveau de titre pour les contenus de la page.
Entête de niveau 5
Troisième niveau de titre pour les contenus de la page.
Caractères gras
Tout autre sous-titre de niveau inférieur.
Élément de texte simple
C'est ce module qui sera utilisé, en majorité, dans les pages ed contenu. Les modules présentés ci-apres serviront à dynamiser les contenus des pages.
Options d’édition de texte disponibles
Paragraphe
Lorem ipsum dolor sit amet, Gras Italique Indice Exposant elit. Cras congue mauris vitae erat viverra, nec sodales felis porttitor. Proin consectetur felis ut dolor viverra vulputate. Cras metus massa, varius quis euismod vitae, ornare ac tellus. Maecenas rutrum massa purus, quis porttitor libero malesuada et. Proin faucibus nibh semper ex tristique, ac luctus ante tempus. Etiam erat mi, lacinia non porta ac, tincidunt quis leo. Aliquam dictum sollicitudin velit vel molestie. Pellentesque vel rhoncus dolor. Fusce sodales, ligula mattis condimentum pretium, lectus quam accumsan nunc, at congue tellus arcu ut dui. Phasellus convallis ex eget arcu auctor aliquam.
Liste à puce (deux niveaux possibles – utiliser le bouton "augmenter le retrait")
- Lorem ipsum dolor sit amet, consectetur adipiscing elit; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim ligula id lorem posuere laoreet. Ut malesuada rhoncus nisl sit amet rhoncus. Aliquam convallis erat in urna egestas accumsan nec eu risus.
- Lorem ipsum dolor sit amet Ce lien s'ouvrira dans une nouvelle fenêtre, consectetur adipiscing elit;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim ligula id lorem posuere laoreet. Ut malesuada rhoncus nisl sit amet rhoncus. Aliquam convallis erat in urna egestas accumsan nec eu risus.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit;
- Lorem ipsum dolor sit amet, consectetur adipiscing elit; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim ligula id lorem posuere laoreet. Ut malesuada rhoncus nisl sit amet rhoncus. Aliquam convallis erat in urna egestas accumsan nec eu risus.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim ligula id lorem posuere laoreet. Ut malesuada rhoncus nisl sit amet rhoncus. Aliquam convallis erat in urna egestas accumsan nec eu risus.
Liste numérotée (un seul niveau possible)
- Lorem ipsum dolor sit amet, consectetur adipiscing elit; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim ligula id lorem posuere laoreet. Ut malesuada rhoncus nisl sit amet rhoncus. Aliquam convallis erat in urna egestas accumsan nec eu risus.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim ligula id lorem posuere laoreet. Ut malesuada rhoncus nisl sit amet rhoncus. Aliquam convallis erat in urna egestas accumsan nec eu risus.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim ligula id lorem posuere laoreet. Ut malesuada rhoncus nisl sit amet rhoncus. Aliquam convallis erat in urna egestas accumsan nec eu risus.
Citation (utiliser le style de bloc "Mise en valeur")
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue mauris vitae erat viverra, nec sodales felis porttitor. Proin consectetur felis ut dolor viverra vulputate.
Texte aligné à gauche (presque en tout temps)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue mauris vitae erat viverra, nec sodales felis porttitor. Proin consectetur felis ut dolor viverra vulputate. Cras metus massa, varius quis euismod vitae, ornare ac tellus. Maecenas rutrum massa purus, quis porttitor libero malesuada et. Proin faucibus nibh semper ex tristique, ac luctus ante tempus. Etiam erat mi, lacinia non porta ac, tincidunt quis leo. Aliquam dictum sollicitudin velit vel molestie. Pellentesque vel rhoncus dolor. Fusce sodales, ligula mattis condimentum pretium, lectus quam accumsan nunc, at congue tellus arcu ut dui. Phasellus convallis ex eget arcu auctor aliquam.
Texte centré (rarement)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue mauris vitae erat viverra, nec sodales felis porttitor. Proin consectetur felis ut dolor viverra vulputate. Cras metus massa, varius quis euismod vitae, ornare ac tellus. Maecenas rutrum massa purus, quis porttitor libero malesuada et. Proin faucibus nibh semper ex tristique, ac luctus ante tempus. Etiam erat mi, lacinia non porta ac, tincidunt quis leo. Aliquam dictum sollicitudin velit vel molestie. Pellentesque vel rhoncus dolor. Fusce sodales, ligula mattis condimentum pretium, lectus quam accumsan nunc, at congue tellus arcu ut dui. Phasellus convallis ex eget arcu auctor aliquam.
Texte aligné à droite (possiblement jamais)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue mauris vitae erat viverra, nec sodales felis porttitor. Proin consectetur felis ut dolor viverra vulputate. Cras metus massa, varius quis euismod vitae, ornare ac tellus. Maecenas rutrum massa purus, quis porttitor libero malesuada et. Proin faucibus nibh semper ex tristique, ac luctus ante tempus. Etiam erat mi, lacinia non porta ac, tincidunt quis leo. Aliquam dictum sollicitudin velit vel molestie. Pellentesque vel rhoncus dolor. Fusce sodales, ligula mattis condimentum pretium, lectus quam accumsan nunc, at congue tellus arcu ut dui. Phasellus convallis ex eget arcu auctor aliquam.
Le texte ne sera jamais justifié
Texte en français avec portion de texte en anglais (utiliser le bouton "Définir la langue", utile pour les personnes utilisant un appareil de lecture d'écran)
Ce paragraphe contient une portion de texte en anglais for testing the application of the lang attribute sur les éléments présents dans l'éditeur de texte (ck_editor).
Liens
Vers une page externe Ce lien s'ouvrira dans une nouvelle fenêtre (attention d'indiquer l'ouverture dans une nouvelle fenêtre!)
Vers un numéro de téléphone : 418 520-0739
Vers un fichier (3 Ko) (attention d'indiquer l'ouverture dans une nouvelle fenêtre!)
Module deux colonnes texte avec image
On peut inscrire un texte initial, dont on peut lire la suite en cliquant sur le lien "Lire la suite" (ce libellé est ajouté automatiquement lorsqu'on active le bouton à bascule à cet effet. On peut aussi indiquer un autre libellé que celui-ci, au besoin. Par exemple, "En savoir plus"). Dans le cas présent, le titre et le texte initial sont trop longs! Aussi, il pourrait être plus avisé d'utiliser une image verticale.
Module texte et image
Ce module peut être utilisé pour publier un texte juxtaposé à une image. L'emplacement de l'image est au choix, selon un habillage qu'on indique à l'onglet "Image", à la ligne "Configuration de la galerie". On préfère généralement utiliser le module "Deux colonnes texte et image" pour un meilleur alignement des éléments et un style plus cohérent à l'ensemble du site.
Module accordéons
Le module accordéons peut être utilisé pour alléger la lecture d'une page. On y mettra les textes qui servent à donner plus de détails, dont la connaissance n'est pas essentielle à la compréhension du contenu de la page par exemple.
Les accordéons permettent aussi de dynamiser la présentation.
Conteu de l'accordéon. Il est textuel, d'une certaine longueur. On peut en éditer la mise en forme du texte, y inséérer des liens, des images, des tableaux.
Conteu de l'accordéon. Il est textuel, d'une certaine longueur. On peut en éditer la mise en forme du texte, y inséérer des liens, des images, des tableaux.
Module vidéo
Module liste de vidéos
Module hybride. On l'utilise sur fond blanc dans une page de contenu.
(option "Cadre" de l'onglet "Apparence".)
À la découverte de l'agrotourisme québécois - Domaine de Lavoie - Rougemont
Consulter la vidéo Ce lien s'ouvrira dans une nouvelle fenêtre
À la recherche d’un équilibre - L’agriculture au Lac Saint-Pierre
Avec comme objectif de garder ses sols en santé tout en restant productif, Martin Sylvestre, ...
Consulter la vidéo Ce lien s'ouvrira dans une nouvelle fenêtre
Module galerie de photo (carrousel)
Module galerie de photo
Module liste de cartes - 1 colonne
Module liste de cartes 2 colonnes
Module rappel
Module hybride se présentant en trois colonnes. Il sert à présenter des informations brèves, de quelques mots seulement. Il est possible d'insérer un lien pour pointer sur une autre page du site ou sur un site externe.
Une image peut également être insérée. On privilégiera l'utilisation d'images dans les pages de modules, car la largeur disponible y est plus grande. Les visuels utilisés peuvent être sélectionnés parmi les dossiers d'icônes. Si des photos sont utilisées, elles ne doivent pas dépasser 125 x 125 px.
Module étiquettes
Module hybride. Le module étiquettes se présente en 4 colonnes. Il comporte, pour chaque entrée, une image, un libellé et un lien. Rien de plus.
Module témoignage texte
On peut créer une citation avec guillemets, nom et poste de la personne citée.
Ce module peut aussi servir à présenter des informations sur un fond beige, sans que ce soit nécessairement une citation.
Ainsi, les guillements, nom et fonction de la personne sont facultatifs.
Enfin, on peut utiliser ce même module pour en faire un carrousel de plusieurs contenus semblables.
Tableaux insérés dans un élément de texte simple
| Colonne | Colonne | Colonne | Colonne |
|---|---|---|---|
| td | td | td | td |
| td | td | td | td |
| td | td | td | td |
| Colonne | Colonne | Colonne | Colonne | Colonne |
|---|---|---|---|---|
| td | td | td | td | td |
| td | td | td | td | td |
| td | td | td | td | td |
| Colonne | Colonne | Colonne | Colonne | Colonne |
|---|---|---|---|---|
| td | td | td | td | td |
| td | td | td | td | td |
| td | td | td | td | td |
Ajout de contenu HTML (pour intégration de vidéos ou balados, par exemple)
Dans certains cas, on utilisera le module spécial HTML. Mais en règle générale, il est préférable d'utiliser le module vidéo pour intégrer une vidéo. Ceci permettra un style plus cohérent à l'ensemble du site (coins arrondis des images).
Des codes d'intégration html peuvent aussi être insérés directement dans les modules de texte standard, par le biais du code source.
Avantages
Test "en-têtes" tableau dans module texte standard
Sur-titre (titre 5 - non-centré)
Sur titre (normal gras centré)
| Colonne un | Colonne 2 | Colonne 3 | Colonne 4 |
|---|---|---|---|
| Ligne 2 | |||
| Ligne3 |
Texte en P2 pour légende
Tableau dans module tableau
| Colonne un | Colonne 2 | Colonne 3 | Colonne4 |
|---|---|---|---|
| Ligne1 | |||
| Ligne 2 | |||
| Test | Tableau | Contenus | Classiques |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| A | B | C | D |
Tableau créé avec le module standard Tableau - En-tête à gauche
| AAA | BBB | CCC |
|---|---|---|
| 123 | 456 | 789 |
| xxx | yyy | zzz |
Tableau créé avec le module standard Tableau - En-tête en haut
| AAA | BBB | CCC |
|---|---|---|
| 123 | 456 | 789 |
| xxx | yyy | zzz |