1. Accueil  
  2. À propos de Québec.ca  
  3. Orientations de Québec.ca  
  4. Créer une page d'atterrissage de campagne

Créer une page d'atterrissage de campagne

Cet aide-mémoire vous accompagnera dans la conception de votre page d’atterrissage qui rappelle, sur Québec.ca, le visuel d’une campagne en cours sur d’autres canaux. Il est possible d’avoir un rappel visuel de campagne sur certains types de page : navigation, terminales et de campagne.

Rédaction

Québec.ca est un site Web informationnel. Une page d'atterrissage de campagne contient du contenu standard, mais permet l'ajout d'éléments visuels. Comme les contenus doivent rester pertinents même lorsque la campagne est terminée, il est important de respecter les orientations du guide de rédaction et porter une attention particulière :

  • aux titres ;
  • au ton (les phrases promotionnelles sont à éviter);
  • à la simplicité et à la concision.

Page de navigation

Quand l’utiliser

Vous pouvez utiliser le visuel promotionnel sur une page de navigation lorsque votre campagne touche un regroupement de pages existantes.

Comment l’utiliser

Les éléments promotionnels s'ajoutent dans l'ordre suivant. 

OrdreÉlémentÉtat
1

Entête PIV

Par défaut

2

Bandeau de visuel promotionnel

Facultatif
Personnalisable
3Fil d'ArianePar défaut
4TitrePar défaut
5Bloc En demandeFacultatif
6Zone Contenu

Peut contenir uniquement des blocs de navigation

7Bas de pagePar défaut

Page terminale

Quand l’utiliser

Vous pouvez ajouter le visuel promotionnel lorsque votre campagne touche le contenu d’une page existante.

Comment l’utiliser

Vous pouvez ajouter les éléments promotionnels dans la page terminale en suivant l'ordre suivant. Cette page peut utiliser le gabarit « Page de contenu avec menu de gauche » ou « Page de contenu sans menu de gauche ». 

OrdreÉlémentÉtat
1

Entête PIV

Par défaut

2

Bandeau de visuel promotionnel

Facultatif
Personnalisable
3Fil d'ArianePar défaut
4Menu liste (à gauche)Facultatif
5TitrePar défaut
6Bloc En demandeFacultatif
7

Avis ou Bloc Coordonnées

Facultatif
Les Avis et le bloc Coordonnées peut être placé n’importe où dans la zone de contenu.

8Menu-ancres

Facultatif
Il s’agit du menu« Dans cette page ».

9Zone Contenu

Peut contenir tout type de contenu : texte, listes à puces, vidéos, vidéo intégrée, etc. Les citations peuvent être ajoutées n’importe où dans les zones de contenu.

10À consulter aussi

Facultatif
Se retrouve à la fin pour les formats mobile et bureau.

11Bas de pagePar défaut

Page d’atterrissage de campagne

Quand l’utiliser

Vous pouvez utiliser ce type de page lorsque votre campagne a besoin d’un contenu temporaire, créé spécialement pour le temps de la campagne.

Vous pouvez aussi l’utiliser cette solution sur une page de contenu pérenne, mais les ajouts promotionnels doivent être retirés une fois la période terminée.

Comment l’utiliser

Le gabarit d’atterrissage de campagne offre plusieurs possibilités, mais l’ordre d’apparition des éléments doit être respecté. 

OrdreÉlémentÉtat
1

Entête PIV

Par défaut

2

Bandeau de visuel promotionnel

Facultatif
Personnalisable
3Fil d'ArianePar défaut
L'arrière-plan du bloc titre est personnalisable (même couleur que l'élément #4)
4Titre (bloc titre personnalisable)

L'arrière-plan est personnalisable (le même que #3)

5Tuiles cliquables directement sous le bloc titre personnalisableFacultatif
Personnalisable
6Bloc En demandeFacultatif
7

Avis ou Bloc Coordonnées

Facultatif
Les Avis et le bloc Coordonnées peut être placé n’importe où dans la zone de contenu.

8Menu-ancres

Facultatif
Il s’agit du menu « Dans cette page ». Il est important de ne pas répéter l’information des tuiles cliquables dans ce menu. 

9Zone Contenu

Peut contenir tout type de contenu : texte, listes à puces, vidéos, vidéo intégrée, etc. Les citations peuvent être ajoutées n’importe où dans les zones de contenu.

10Module vidéo

Facultatif
Personnalisable

11Zone contenu

Peut contenir tout type de contenu : texte, listes à puces, vidéos, vidéo intégrée, etc. Les citations peuvent être ajoutées n’importe où dans les zones de contenu.

12Tuiles cliquables au sein des contenusFacultatif
Personnalisable
Peuvent être utilisées plus d'une fois dans la page
13À consulter aussi

Facultatif
Se retrouve à la fin pour les formats mobile et bureau.

14Bas de pagePar défaut

Assurance-qualité

La liste des éléments personnalisables doit être envoyée à contenu@quebec.ca au moins 48 heures avant le début de la campagne. Dans le message, veuillez préciser le numéro de la page (UID). Assurez-vous d'avoir tous ces éléments. 

  • Deux formats pour les bandeaux promotionnels (bureau et mobile) qui respectent les zones de sécurité.
  • Code hexadécimal de la couleur en dessous du bandeau de visuel promotionnel (pour les écrans larges).
  • Code hexadécimal de la couleur d'arrière-plan du bloc titre personnalisable (Ariane et H1).
  • Code hexadécimal de la couleur des polices dans le bloc titre (#FFFFFF ou #223654).
  • Code hexadécimal de la couleur d'arrière-plan des tuiles directement sous le bloc titre personnalisable.
  • Code hexadécimal de la couleur sous les modules vidéos.
  • Code hexadécimal de la couleur d'arrière-plan des tuiles au sein des contenus.
  • Icônes pour chaque tuile cliquable, si applicable :
    • Fichiers d’icônes en SVG ou PNG transparents;
    • Le style d’icône doit correspondre aux icônes du Système de design gouvernemental (icônes linéaires);
    • Couleur des icônes : bleu foncé #223654.

Bandeaux promotionnels

Le bandeau de visuel promotionnel est utilisé pour faire un rappel avec le visuel d’une campagne en cours sur d’autres canaux. Il s’ajoute sur 1 page seulement (1 page habillée par visuel campagne). Le bandeau de visuel promotionnel n’est jamais décliné sur l’ensemble d’une section.

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales
Présence d’un bandeau de visuel promotionnelOUIOUIOUI
Positionnement du bandeau de visuel promotionnelSous le bandeau PIVSous le bandeau PIVSous le bandeau PIV
Personnalisation de la couleur de l’arrière-plan du bandeau (pour les écrans larges)NONNONNON

Dimensions

Deux formats sont à produire pour que le bandeau soit ajouté à votre page sur Québec.ca : le format bureau et tablette et le format mobile.

SpécificationsDimensions de l’imageDimensions de la zone de sécurité (centrale)

Format bureau et tablette

2 000 px (largeur)
260 px (hauteur)

745 px (largeur)
260 px (hauteur)

Format mobile

700 px (largeur)
110 px (hauteur)

315 px (largeur)
110 px (hauteur)

Bloc titre personnalisable

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales
Présence du bloc titre personnalisableOUINONNON
Positionnement du bloc titre personnalisableSous le bandeau de visuel promotionnelN/AN/A
Personnalisation de la couleur de l’arrière-plan du bloc titre personnalisableOUIN/AN/A
Personnalisation de la couleur du texte du fil d’Ariane et du titre H1 (#FFFFFF ou #223654)OUIN/AN/A

À prévoir

  • Code hexadécimal de la couleur d’arrière-plan du fil d’Ariane et du titre de niveau 1.
  • Couleur du texte du fil d’Ariane et du titre de niveau 1 : blanc #FFFFFF ou bleu foncé #223654. Si votre fond d’arrière-plan est foncé, priorisez le blanc. S’il est plutôt pâle, privilégiez le bleu foncé.

Le fil d’Ariane et le titre doivent utiliser la même couleur.

Le contraste de couleurs entre l’arrière-plan et le texte doit être de 4.5:1 au minimum. Pour vérifier, vous pouvez utiliser cet outil d’analyse des contrastes de couleurs Cet hyperlien s'ouvrira dans une nouvelle fenêtre..

Accessibilité

Il faut s’assurer de respecter le Standard sur l’accessibilité des sites Web du gouvernement du Québec Cet hyperlien s'ouvrira dans une nouvelle fenêtre., notamment en ce qui concerne les contrastes de couleur.

Avis

Un avis est présenté sous forme d’encadré lorsqu’une information doit absolument attirer l’attention du public.

Elle peut être ajoutée n’importe où dans la zone de contenu, mais idéalement en haut de la page. Les avis doivent être utilisés avec modération. On limite leur utilisation à 1 par page, idéalement.

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales

Ajout d’avis

OUINONOUI
Positionnement des avisN’importe où dans le contenu, généralement en haut de page. Voir la fiche Avis du système de design pour plus de détails.N/AN’importe où dans le contenu, généralement en haut de page. Voir la fiche Avis du système de design pour plus de détails.
Positionnement par rapport au menu-ancres

Idéalement, sous le menu-ancres (qui se trouve le plus haut possible dans la page). Peut exceptionnellement être au-dessus du menu-ancres.

N/A

Idéalement, sous le menu-ancres (qui se trouve le plus haut possible dans la page). Peut exceptionnellement être au-dessus du menu-ancres.

Consulter la fiche Avis du système de design Cet hyperlien s'ouvrira dans une nouvelle fenêtre.

Tuiles cliquables

Les tuiles cliquables sont disponibles en 2 variations :

Les tuiles peuvent inclure ou non une icône.

Directement sous le bloc titre

Les tuiles cliquables directement sous le bloc titre personnalisable doivent uniquement être des liens vers des ancres dans la page ou encore des contenus connexes (on évite les liens externes). Le gabarit permet d’ajouter deux ou trois tuiles.

Sans titre et sans description

Les tuiles cliquables directement sous le bloc titre personnalisable ne doivent pas avoir de titre et de description au-dessus des tuiles ni de description à l’intérieur de la tuile cliquable. Voir un exemple Cet hyperlien s'ouvrira dans une nouvelle fenêtre.

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales

Ajout de tuiles cliquables (directement sous le bloc titre personnalisable)

OUINON NON
Positionnement du bandeau de tuiles cliquablesDirectement sous le bloc titre personnalisable.N/AN/A
Positionnement par rapport au menu-ancresLe plus proches possible (le menu-ancres devrait être le plus haut possible dans la page).N/AN/A
Nombre de tuiles pouvant être ajoutées

2 ou 3

N/AN/A
Type de liens pouvant être ajoutésAncres dans la page, liens internes ou liens externesN/AN/A
Disposition des tuiles dans le bloc (dans le format bureau)En 3 colonnesN/AN/A
Personnalisation de la couleur de l’arrière-plan des tuiles cliquablesOUIN/AN/A
Personnalisation de la couleur de la surface des tuiles cliquablesNON
(n’existe plus)
N/AN/A
Personnalisation de la couleur de la bordure des tuiles cliquablesNON
(n’existe plus)
N/AN/A
Personnalisation de la couleur des polices de caractère sur les tuiles cliquablesNON
(n’existe plus)
N/AN/A
Utilisation d'une icôneOUIN/AN/A
Titre et description au-dessus des tuiles cliquablesNONN/AN/A
Avoir une description en plus d’un titre à l’intérieur de la tuile cliquableNONN/AN/A

Dans le contenu

Les tuiles cliquables au sein de contenus peuvent être des liens vers des ancres dans la page, vers des contenus connexes ou des liens externes. Le gabarit permet d’ajouter plusieurs tuiles, disposées en 3 ou 4 colonnes (dans le format bureau).

Titre et description

Les tuiles cliquables au sein des contenus doivent avoir un titre et une description au-dessus des tuiles ainsi qu’une description à l’intérieur de la tuile cliquable. Voir un exemple Cet hyperlien s'ouvrira dans une nouvelle fenêtre..

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales

Ajout de tuiles cliquables (au sein du contenu)

OUINON NON
Positionnement de la zone de tuiles cliquablesN’importe où dans le contenuN/AN/A
Positionnement par rapport au menu-ancres

Sous le menu-ancres (le menu-ancres devrait être le plus haut possible dans la page). 

 

Si couleur d’arrière-plan personnalisée: ne pas le placer directement sous le menu-ancres.

N/AN/A
Nombre de tuiles pouvant être ajoutées

2 à 8

N/AN/A
Type de liens pouvant être ajoutésAncres dans la page, liens internes ou liens externesN/AN/A
Disposition des tuiles dans le bloc (dans le format bureau)En 3 ou 4 colonnesN/AN/A
Personnalisation de la couleur de l’arrière-plan des tuiles cliquablesOUIN/AN/A
Personnalisation de la couleur de la surface des tuiles cliquablesNON
(n’existe plus)
N/AN/A
Personnalisation de la couleur de la bordure des tuiles cliquablesNON
(n’existe plus)
N/AN/A
Personnalisation de la couleur des polices de caractère sur les tuiles cliquablesNON
(n’existe plus)
N/AN/A
Utilisation d'une icôneOUIN/AN/A
Titre et description au-dessus des tuiles cliquablesOUIN/AN/A
Avoir une description en plus d’un titre à l’intérieur de la tuile cliquableOUIN/AN/A

Icônes

Si votre campagne requiert des tuiles, vous pouvez y ajouter des icônes. Si tel est le cas, vous devrez fournir les fichiers. Pour obtenir les accès à la banque d’icônes, veuillez écrire à design@quebec.ca.

Consulter cette procédure pour la préparation d'icônes en vue d'une utilisation dans les tuiles Cet hyperlien s'ouvrira dans une nouvelle fenêtre.

À prévoir

  • Code hexadécimal de la couleur d’arrière-plan des tuiles cliquables.
  • Icônes pour chaque tuile, si applicable :
    • Fichiers d’icônes en SVG ou PNG transparents.
    • Le style d’icône doit correspondre aux icônes du Système de design gouvernemental Cet hyperlien s'ouvrira dans une nouvelle fenêtre. (icônes linéaires).
    • Couleur des icônes : bleu foncé #223654.

Module vidéo

Il est possible d’insérer une ou plusieurs vidéos dans le contenu.

Le module vidéo peut être ajouté plusieurs fois dans la page. Il occupe la largeur entière du gabarit. Ainsi, le contenu peut se trouver au-dessus ou en dessous de lui.

Seules les vidéos de type informationnelles et complémentaires à votre contenu peuvent être ajoutées. Ajouter les publicités qui circulent dans les autres médias est proscrit. 

ÉlémentGabarit d’atterrissage de campagnePages de navigation

Pages terminales

Ajout de modules vidéoOUINONNON
Positionnement du module vidéoN’importe où dans le contenuN/AN/A
Personnalisation de la couleur de l’arrière-plan de la zone vidéoOUIN/AN/A
Personnalisation de la couleur des titres des vidéos (#FFFFFF ou #223654)OUIN/AN/A

Il faut prévoir le code hexadécimal de la couleur d’arrière-plan du module vidéo.

Citations

La citation est un style typographique utilisé pour mettre en évidence le discours d’une personne ou citer la source d’un texte.

Elle peut être ajoutée n’importe où dans la zone de contenu.

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales
Ajout de citationsOUINONOUI
Positionnement des citationsN’importe où dans le contenuN/AN’importe où dans le contenu
Personnalisation de la couleur du guillemet des citationsNON
(n’est plus personnalisable)
N/ANON

À prévoir

  • Texte de la citation
    • La taille de caractères peut être de grande taille si la citation contient moins de 140 caractères ;
    • La taille de caractères doit être de taille normale si la citation contient plus de 140 caractères.
  • Nom de la personne ou l’entité citée (obligatoire).
  • Titre de la personne citée (facultatif).

Bloc Coordonnées

Le bloc de coordonnées sert à présenter le numéro de téléphone, l’adresse, le courriel et les heures d’ouverture d’un lieu ou d’un service.

Elle peut être ajoutée n’importe où dans la zone de contenu et autant de fois que nécessaire.

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales
Ajout de blocs CoordonnéesOUINONOUI
Positionnement du bloc CoordonnéesN’importe où dans le contenuN/AN’importe où dans le contenu

Positionnement par rapport au menu-ancres

Idéalement, sous le menu-ancres (le menu-ancres devrait être le plus haut possible dans la page). Peut exceptionnellement être au-dessus du menu-ancres.

N/A

Idéalement, sous le menu-ancres (le menu-ancres devrait être le plus haut possible dans la page). Peut exceptionnellement être au-dessus du menu-ancres.

Bloc En demande

Le bloc En demande permet d’ajouter des liens vers des pages afin d’attirer l’attention et rendre la navigation plus rapide.

Il peut être ajouté une fois dans la page, idéalement en haut de la page.

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales
Ajout de blocs En demandeOUIOUIOUI
Positionnement du bloc En demandeN’importe où dans le contenu, généralement en haut de page.N’importe où dans le contenu, généralement en haut de page.N’importe où dans le contenu, généralement en haut de page.

Blocs de navigation

Les blocs de navigation sont composés du titre et d’une courte description d’une page. Ils servent à présenter les pages présentes dans le sujet actuellement consulté et à poursuivre sa navigation vers le bon contenu.

Outre le bloc En demande, il est le seul contenu pouvant être ajouté dans les pages de navigation.

ÉlémentGabarit d’atterrissage de campagnePages de navigationPages terminales
Ajout de blocs de navigation

NON (utiliser des tuiles cliquables)

OUINON
Positionnement des blocs de navigationN/AÀ part le bloc En demande, les blocs de navigation sont les seuls contenus de la page de navigationN/A

Personnalisation des blocs de navigation (ajout de couleurs, d’icônes, de boutons, etc.)

N/A

NON

 

N/A

Exergues

Composante obsolète

Il n’est plus possible d’utiliser ce type de bloc.

Bloc Médias sociaux

Composante obsolète

Il n’est plus possible d’utiliser ce type de bloc.

Dernière mise à jour : 1er juin 2022

Évaluation de page

L’information sur cette page vous a-t-elle été utile?

Des questions ou besoin de renseignements?

Communiquez avec Services Québec