Page test QUALOPSYS
Page test des composants HTML QUALOPSYS
Hero · CTA · cards · timeline · FAQ · avis · tableaux · images · maillage interne
Textes
Paragraphes, liens internes et texte courant
Ce bloc vérifie le rendu des paragraphes simples, des liens internes en orange gras et des textes de transition.Exemple de paragraphe éditorial
Un texte QUALOPSYS doit rester lisible, aéré et directement utile. Les liens internes doivent ressortir clairement, par exemple vers l’audit interne IFS Food, l’audit blanc IFS, l’audit HACCP ou l’action corrective IFS. Ce format permet de vérifier que les liens sont visibles sans perturber la lecture et que le rendu reste professionnel.Listes
Listes simples et listes à coches
Liste simple
- Premier point de contrôle.
- Deuxième point de contrôle.
- Troisième point de contrôle.
Liste à coches
- Constat formulé clairement.
- Cause racine identifiée.
- Action corrective vérifiable.
Cards standards
Cards en 3 colonnes
Ces cartes valident le rendu des blocs courts avec icône, titre et texte.Audit interne
Bloc standard pour expliquer une prestation ou une étape de méthode.Analyse
Bloc standard pour mettre en avant un diagnostic ou un point de lecture.Objectif
Bloc standard pour présenter un résultat attendu ou un bénéfice client.Cards larges
Cards en 2 colonnes
Bloc long gauche
Ce format sert aux explications plus développées, avec un espace confortable pour un paragraphe plus long.Bloc long droit
Ce format permet de comparer deux situations, deux approches ou deux types d’intervention.Cards avec images
Cards image / contenu
Ce bloc valide les cartes avec visuel, titre, texte et lien.
Audit interne IFS Food
Tester une card avec image et lien interne.
Audit blanc IFS
Tester le rendu d’une seconde card image.
Audit HACCP
Tester l’alignement des cartes avec images.Cards colorées
Cards correction, mise en œuvre et efficacité
Preuves de correction
Cette carte doit afficher un repère orange discret.Preuves de mise en œuvre
Cette carte doit afficher un repère bleu discret.Preuves d’efficacité
Cette carte doit afficher un repère vert discret.Notes
Notes, avertissements et encarts
Note simple
Cette note sert à mettre en avant une précision utile, une méthode ou une explication complémentaire.Point de vigilance
Ce bloc doit ressortir davantage grâce à son fond légèrement orangé et à sa bordure gauche.Note avec liste
- Premier point important.
- Deuxième point important.
- Troisième point important.
Timeline
Timeline dans une seule card
La timeline doit apparaître comme un seul bloc premium, sans cartes imbriquées, avec un trait orange vertical propre.Décrire précisément le constat
Le constat doit être formulé avec les faits observés, l’exigence concernée et les preuves disponibles.Partager le constat
Le site doit comprendre l’écart et se l’approprier avant de construire une réponse utile.Évaluer le risque
L’écart doit être relié à un risque réel : sécurité des aliments, conformité, hygiène, traçabilité ou maîtrise du procédé.Définir une action crédible
L’action doit être applicable, vérifiable et adaptée aux contraintes réelles du terrain.CTA
CTA simples, doubles et finaux
CTA 1 — Besoin d’un regard externe ?
Ce CTA permet de vérifier le fond bleu/gris, le titre H2, le texte et le bouton principal. Me contacterCTA 2 — Préparer un audit IFS Food
Ce CTA permet de tester deux boutons alignés dans un bloc d’appel à l’action.CTA 3 — CTA final de page
Ce CTA final sert à valider le dernier appel à l’action d’une page. Demander un accompagnementTableaux
Tableaux simples et synthétiques
| Composant | Objectif du test | Résultat attendu |
|---|---|---|
| Hero | Vérifier titre, texte, image, boutons et tags. | Lecture claire et image bien alignée. |
| CTA | Vérifier fond bleu/gris et présence du H2. | Bloc lisible, non noir, sans bande sombre. |
| Timeline | Vérifier une seule card et non quatre cards séparées. | Numéros à gauche, texte à droite. |
Images
Images, captions et descriptions longues
Description longue : ce texte permet d’expliquer le contexte de l’image, la situation observée, les éléments importants à regarder et l’intérêt pédagogique du visuel pour la page.
.Description longue associée à une image WordPress. Remplacer l’ID fictif par l’ID réel validé dans le cahier des charges de la page.
Description longue associée à une figure complète. Ce bloc sert à vérifier que les shortcodes image utilisés dans QUALOPSYS sont bien compatibles avec le CSS global.
Avis Google
Avis Google
Bloc avis clients
Ce bloc valide le shortcode d'avis Google, le slider, les étoiles, les réponses QUALOPSYS et le défilement automatique.
FAQ
FAQ de test
La FAQ est encadrée dans une seule card globale. Chaque question reste légère, avec seulement la flèche orange pour le déroulé.Cette page doit-elle être indexée ?
Non. Cette page est une page de test interne. Elle doit rester en noindex si elle est publiée sur le site.Pourquoi tester tous les composants sur une seule page ?
Pour valider le CSS global, les shortcodes, les espacements et les comportements responsive avant de reprendre les pages SEO.Les icônes sont-elles en shortcode ?
Oui. Toutes les icônes de cette page utilisent le shortcode et aucun bloc qs-card-icon ne doit être vide.Maillage interne
Articles liés
Ce bloc permet de vérifier le rendu du shortcode de maillage interne.Références utiles
Cards de liens externes
IFS Food
Exemple de card avec lien externe. Consulter la page officielleDocumentation
Exemple de second lien externe avec icône shortcode. Accéder au site IFSValidation finale des composants QUALOPSYS
Si cette page test est validée, elle devient le modèle de référence pour reprendre les pages HTML du site. Valider le modèlePage test QUALOPSYS
Page test des composants HTML QUALOPSYS
Cette page sert à valider tous les composants HTML et CSS utilisés sur QUALOPSYS avant de reprendre les pages du site.
Elle permet de tester le hero, les boutons, les tags, les liens internes, les cards, les notes, les timelines, les CTA, les tableaux, les images, les avis, la FAQ, le maillage interne et les données structurées.
Hero · CTA · cards · timeline · FAQ · avis · tableaux · images · maillage interne
Textes
Paragraphes, liens internes et texte courant
Ce bloc vérifie le rendu des paragraphes simples, des liens internes en orange gras et des textes de transition.
Exemple de paragraphe éditorial
Un texte QUALOPSYS doit rester lisible, aéré et directement utile. Les liens internes doivent ressortir clairement, par exemple vers l’audit interne IFS Food, l’audit blanc IFS, l’audit HACCP ou l’action corrective IFS.
Ce format permet de vérifier que les liens sont visibles sans perturber la lecture et que le rendu reste professionnel.
Listes
Listes simples et listes à coches
Liste simple
- Premier point de contrôle.
- Deuxième point de contrôle.
- Troisième point de contrôle.
Liste à coches
- Constat formulé clairement.
- Cause racine identifiée.
- Action corrective vérifiable.
Cards standards
Cards en 3 colonnes
Ces cartes valident le rendu des blocs courts avec icône, titre et texte.
Audit interne
Bloc standard pour expliquer une prestation ou une étape de méthode.
Analyse
Bloc standard pour mettre en avant un diagnostic ou un point de lecture.
Objectif
Bloc standard pour présenter un résultat attendu ou un bénéfice client.
Cards larges
Cards en 2 colonnes
Bloc long gauche
Ce format sert aux explications plus développées, avec un espace confortable pour un paragraphe plus long.
Bloc long droit
Ce format permet de comparer deux situations, deux approches ou deux types d’intervention.
Cards avec images
Cards image / contenu
Ce bloc valide les cartes avec visuel, titre, texte et lien.
Cards colorées
Cards correction, mise en œuvre et efficacité
Preuves de correction
Cette carte doit afficher un repère orange discret.
Preuves de mise en œuvre
Cette carte doit afficher un repère bleu discret.
Preuves d’efficacité
Cette carte doit afficher un repère vert discret.
Notes
Notes, avertissements et encarts
Note simple
Cette note sert à mettre en avant une précision utile, une méthode ou une explication complémentaire.
Point de vigilance
Ce bloc doit ressortir davantage grâce à son fond légèrement orangé et à sa bordure gauche.
Note avec liste
- Premier point important.
- Deuxième point important.
- Troisième point important.
Timeline
Timeline dans une seule card
La timeline doit apparaître comme un seul bloc, avec les numéros à gauche et le contenu à droite.
Décrire précisément le constat
Le constat doit être formulé avec les faits observés, l’exigence concernée et les preuves disponibles.
Partager le constat
Le site doit comprendre l’écart et se l’approprier avant de construire une réponse utile.
Évaluer le risque
L’écart doit être relié à un risque réel : sécurité des aliments, conformité, hygiène, traçabilité ou maîtrise du procédé.
Définir une action crédible
L’action doit être applicable, vérifiable et adaptée aux contraintes réelles du terrain.
CTA
CTA simples, doubles et finaux
CTA 1 — Besoin d’un regard externe ?
Ce CTA permet de vérifier le fond bleu/gris, le titre H2, le texte et le bouton principal.
Me contacterCTA 2 — Préparer un audit IFS Food
Ce CTA permet de tester deux boutons alignés dans un bloc d’appel à l’action.
CTA 3 — CTA final de page
Ce CTA final sert à valider le dernier appel à l’action d’une page.
Demander un accompagnementTableaux
Tableaux simples et synthétiques
| Composant | Objectif du test | Résultat attendu |
|---|---|---|
| Hero | Vérifier titre, texte, image, boutons et tags. | Lecture claire et image bien alignée. |
| CTA | Vérifier fond bleu/gris et présence du H2. | Bloc lisible, non noir, sans bande sombre. |
| Timeline | Vérifier une seule card et non quatre cards séparées. | Numéros à gauche, texte à droite. |
Images
Images, figures et légendes
pour tester le rendu d’une image avec légende.
à remplacer par un ID réel lors de la création d’une page.Rappel image
Pour les pages réelles, remplacer les ID fictifs par les ID WordPress validés dans le cahier des charges de la page.
Avis Google
Bloc avis clients
Ce bloc valide les avis, le slider, les cartes, les étoiles et les contrôles.
FAQ
FAQ de test
Cette page doit-elle être indexée ?
Non. Cette page est une page de test interne. Elle doit rester en noindex si elle est publiée sur le site.
Pourquoi tester tous les composants sur une seule page ?
Pour valider le CSS global, les shortcodes, les espacements et les comportements responsive avant de reprendre les pages SEO.
Les icônes sont-elles en shortcode ?
Oui. Toutes les icônes de cette page utilisent le shortcode et aucun bloc qs-card-icon ne doit être vide.
Maillage interne
Articles liés
Ce bloc permet de vérifier le rendu du shortcode de maillage interne.
Références utiles
Cards de liens externes
Validation finale des composants QUALOPSYS
Si cette page test est validée, elle devient le modèle de référence pour reprendre les pages HTML du site.
Valider le modèle