Blocs avancés
Blocs avancés

Blocs avancés

Ces blocs sont “dynamiques”, ce qui signifie qu’ils affichent dynamiquement un contenu créé ailleurs - là où dans les blocs “simples”, le contenu est statiquement créé sur place. Par exemple pour les articles, vous les créerez dans un onglet spécial appelé “Articles”, puis vous placerez le bloc dans une page et il affichera automatiquement, selon les paramètres que vous lui aurez indiqués, la sélection d’articles souhaitée. Vous n’aurez pas à les recopier plusieurs fois !

Chacun de ces contenus peut ainsi se présenter selon les trois formats suivants :

  • Une “single”, c’est-à-dire la page détaillée d’un événement ou d’un article, avec toutes les informations nécessaires
  • Un “listing” (ou Index), c’est-à-dire une liste de tous les événements ou de tous les articles par exemple, avec un ensemble de filtres en haut de page (date, sujet, …) qui permet de modifier l’affichage de la recherche. Chaque élément est présenté avec les informations que vous souhaitez. Le clic sur un élément du listing mène au détail (la “single”)
  • Un “bloc”, c’est-à-dire une brique de contenu que l’on peut mettre à n’importe quel endroit d’une page pour afficher une liste d’événements ou d’articles (vous pourriez ainsi avoir par exemple sur une page, un bloc “les derniers articles”, puis au dessous “les événements à venir”, etc.)

1 -Articles

  • Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Bloc

Général

  • Sélecteur de variantes → position des texte, image et boutons. Selon l’option choisie, vous définirez l’arrondi su contenant
  • Sélection du type de contenant (de l’ensemble du bloc), et selon, définition de l’épaisseur et de l’arrondi de la bordure du contenant

En-tête

  • Choix de l’alignement du titre
  • Choix de la typographie du titre (parmi celles créées au préalable)
  • Choix de la typographie de la description (parmi celles créées au préalable)

Encadré

  • Choix du type d’encadré (pour chaque article du bloc). Selon, définition de l’arrondi de l’image et/ou de l’épaisseur et de l’arrondi de la bordure de l’encadré
  • Choix du style de typographie du titre et des informations de l’article (auteur, date, etc.)
  • Choix du style de typographie de l’extrait
  • Sélection des informations à afficher dans le bloc (date extrait, catégories)
💡
Le format de la date se définit au niveau du tableau de bord, sous l’onglet Réglages > Général N’oubliez pas d’enregistrer 🙂 Voir plus d’information sur les réglages généraux

Couleurs

  • Choix de la couleur de la bordure et du fond du contenant des informations
  • S’il y a un encadré, choix de la couleur de la bordure et du fond de l’encadré
  • S’il y a un contenant, choix de la couleur de la bordure et du fond du contenant
  • Choix de la couleur de fond du bloc

Boutons

  • Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
  • Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
  • Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
  • Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable
  • Choix du style de bouton pour le “Lire plus” (qui mènera à la single de l’article)
  • Choix du style de bouton pour le “Voir tous les articles” (= bouton archive, qui mènera à la page index listant tous les articles publiés)

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Articles différent à réutiliser à l’envi.

  • Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
  • Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
  • A tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

b - Page

→ ARTICLE

Général

  • Sélecteur de variantes : position des éléments dans la page

Contenu

  • Choix de l’arrondi de l’image
  • Choix de la typographie du titre de l’article
  • Choix de la typographie des informations de l’article (texte, auteur, date, catégories, etc.)
  • Choix des informations à afficher sur la page
💡
Le format de la date se définit au niveau du tableau de bord, sous l’onglet Réglages > Général N’oubliez pas d’enregistrer 🙂 Voir plus d’information sur les réglages généraux

Couleurs

  • Choix de la couleur du fond de la page
  • Selon la variante, choix de la couleur de fond secondaire

→ ARTICLES SIMILAIRES

💡

Le style des encadrés des articles similaires dépend du bloc Article par défaut (s’il y a des compositions, il prend les configurations du bloc par défaut).

Le style des encadrés des articles similaires dépend du bloc Articles par défaut (s’il y a des compositions, il prend les configurations du bloc par défaut)

Général

  • Sélecteur de variantes, et le cas échéant, définition de l’épaisseur et de l’arrondi de la bordure

Contenu

  • Choix du style de typographie des articles listés
  • Saisie du libellé “lire plus” (qui mène à la single / page de ces articles similaires)

Couleurs

  • Choix de la couleur du fond et de la bordure du contenant des articles similaires
  • Choix de la couleur de fond de la section

c - Index

💡

Le style des encadrés des articles dépend du bloc Articles par défaut (s’il y a des compositions, il prend les configurations du bloc par défaut)

→ MISE EN PAGE GENERALE

Général

  • Sélecteur de variantes → présentation et disposition sur la page listant les articles publiés (index). Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure

En-tête

  • Sélecteur de variantes → choix de la position des éléments dans l’entête
  • Saisie du titre de la page index
  • Choix de la typographie du titre de la page index
  • Choix de la typographie des résultats de recherche
  • Filtres :
    • Choix des filtres de recherche affichés sur la page index. Pour chaque filtre, saisie du nom de l’élément et de l’intitulé si aucun n’est trouvé
    • Choix de la typographie des filtres
    • Définition de l’épaisseur et de l’arrondi de la bordure des filtres
    • Choix du style du bouton de réinitialisation des filtres

Contenu

  • Saisir le texte du bouton “lire plus” des articles

Couleurs

  • Filtres : choix de la couleur de bordure et de fond des filtres et de la couleur des filtres actifs (= cochés)
  • Contenant : choix de la couleur de fond et de bordure du contenant s’il y a
  • Choix de la couleur de fond de la page

→ PAGINATION

Général

  • Sélecteur de variantes : choix du style de la pagination. Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure des éléments
  • Sélection du style de police de la pagination

Couleurs

  • Choix de la couleur du texte au survol
  • Choix de la couleur de bordure de la pagination, standard et au survol
  • Choix de la couleur de fond de la pagination, standard et au survol
  • Choix de la couleur de la flèche de la pagination, standard et au survol

2 -Evénements

  • Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Bloc

Général

  • Sélecteur de variantes → position des texte, image et boutons

En-tête

  • Choix de l’alignement du titre
  • Choix de la typographie du titre (parmi celles créées au préalable)
  • Choix de la typographie de la description (parmi celles créées au préalable)

Contenu

  • Sélecteur du type de contenant - et selon, choix de l’épaisseur et de l’arrondi de la bordure
  • Choix du type d’encadré - et selon, choix de l’épaisseur et de l’arrondi de la bordure
  • Choix du style des icônes de prix, lieu, etc.
  • Définition de l’arrondi de l’image de la carte
  • Texte : choix du style de police du titre, de l’extrait, de la date et des informations
💡
Le format de la date et des heures se définit au niveau du tableau de bord, sous l’onglet Réglages > Général N’oubliez pas d’enregistrer 🙂 Voir plus d’information sur les réglages généraux
  • Choix des informations à afficher dans la carte

Couleurs

  • Choix de la couleur des icônes (de lieu, prix, etc.)
  • Choix de la couleur de fond du contenant de la date
  • S’il y a un encadré, choix de la couleur de bordure et de fond de l’encadré
  • S’il y a un contenant, choix de la couleur de bordure et de fond du contenant
  • Choix de la couleur de fond du bloc

Boutons

  • Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
  • Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
  • Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
  • Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable
  • Choix du style de bouton pour le “Lire plus” (qui mènera à la single de l’événement)
  • Choix du style de bouton pour le “Voir tous les événements” (= bouton archive, qui mènera à la page index listant tous les événements publiés)

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Evénement différent à réutiliser à l’envi.

  • Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
  • Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
  • A tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

b - Page

EVENEMENT

Général

  • Sélecteur de variantes : position des éléments dans la page

Contenu

  • Choix de l’arrondi de l’image
  • Choix du type de contenant des informations et selon, de l’épaisseur de la bordure de ce contenant
  • Choix du style des icônes des informations (prix, lieu, …)
  • Choix de la typographie du titre de l’article
  • Choix de la typographie du titre et des informations de l’événement (texte, auteur, date, catégories, etc.)
  • Choix des informations à afficher sur la page
💡
Le format de la date et des heures se définit au niveau du tableau de bord, sous l’onglet Réglages > Général N’oubliez pas d’enregistrer 🙂 Voir plus d’information sur les réglages généraux

Couleurs

  • Choix de la couleur des icônes des informations
  • Selon la variante, choix de la couleur de fond secondaire
  • Choix de la couleur de bordure et de fond du contenant des informations
  • Choix de la couleur du fond de la page

EVENEMENTS SIMILAIRES

💡

Le style des encadrés des événements similaires dépend du bloc Evénements par défaut (s’il y a des compositions, il prend les configurations du bloc par défaut)

Général

  • sélecteur de variantes, et le cas échéant, définition de l’épaisseur et de l’arrondi de la bordure

Contenu

  • Choix du style de typographie des événements listés
  • Saisie du libellé “lire plus” (qui mène à la page de ces événements similaires)

Couleurs

  • Choix de la couleur du fond et de la bordure du contenant des événements similaires
  • Choix de la couleur de fond de la section

c - Index

💡

Le style des encadrés des événements dépend du bloc Evénements par défaut (s’il y a des compositions, il prend les configurations du bloc par défaut)

MISE EN PAGE GENERALE

Général

  • Sélecteur de variantes → présentation et disposition des éléments sur la page listant les événements publiés (index). Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure

En-tête

  • Sélecteur de variantes → choix de la position des éléments dans l’entête
  • Saisie du titre de la page index
  • Choix de la typographie du titre de la page index
  • Choix de la typographie des résultats de recherche
  • Filtres :
    • Choix des filtres de recherche affichés sur la page index. Pour chaque filtre, saisie du nom de l’élément et de l’intitulé si aucun n’est trouvé
    • Choix de la typographie des filtres
    • Définition de l’épaisseur et de l’arrondi de la bordure des filtres
    • Choix du style du bouton de réinitialisation des filtres

Contenu

  • Choix des différentes vues possibles de l’index (calendrier, liste ou les deux)

Couleurs

  • Filtres : choix de la couleur de bordure et de fond des filtres et de la couleur des filtres actifs (= cochés)
  • Contenant : choix de la couleur de fond et de bordure du contenant s’il y a
  • Choix de la couleur de fond de la page

PAGINATION ET REGLAGE DES VUES

Pagination

  • Sélecteur de variantes : choix du style de la pagination. Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure des éléments
  • Sélection du style de police de la pagination

Contenu

  • Saisie du libellé du bouton “lire plus” des différents événements de l’index
    • Calendrier
      • Sélection du style de police des jours de la semaine, de la date, du nom de l’événement dans la carte
      • Définition de l’épaisseur et de l’arrondi de la bordure des cartes du calendrier
        • Date
          • Définition de l’épaisseur et de l’arrondi de la bordure du contenant
        • Modale
          1. 🔥
            Visible lorsque l’on clique sur une carte contenant un événement mais non visible dans la prévisualisation
          2. Sélection du style de police du titre et de l’extrait de l’événement
          3. Définition de l’épaisseur et de l’arrondi de la bordure

Couleurs

  • Pagination
    • Choix de la couleur du texte au survol
    • Choix de la couleur de bordure de la pagination, standard et au survol
    • Choix de la couleur de fond de la pagination, standard et au survol
    • Choix de la couleur de la flèche de la pagination, standard et au survol
  • Calendrier
    • Choix de la couleur de bordure de l’encadré général (sans événement)
    • Choix de la couleur de fond de l’encadré général (sans événement)
    • Date
      • Choix de la couleur de bordure de l’encadré de la date (sans événement)
      • Choix de la couleur de fond de l’encadré de la date (sans événement)
    • Encadré avec événement
      • Date
        • Choix de la couleur du texte
        • Choix de la couleur de fond
      • Choix de la couleur du texte
      • Choix de la couleur de bordure de l’encadré
      • Choix de la couleur de fond de l’encadré
    • Encadré à la date du jour
      1. 💡

        Dans la prévisualisation, à titre d’exemple, la date du jour est fixée au 14 août. Vous pouvez faire une distinction de ce jour par rapport aux autres jours

      2. Date
        • Choix de la couleur du texte
        • Choix de la couleur de fond
      3. Choix de la couleur du texte (s’il y avait en plus un ou des événements à cette date)
      4. Choix de la couleur du fond de l’encadré
      5. Choix de la couleur de bordure
    • Modale
      1. 🔥
        Visible lorsque l’on clique sur une carte contenant un événement mais non visible dans la prévisualisation
      2. Choix de la couleur de bordure
      3. Choix de la couleur de fond

3 - FAQs

  • Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Bloc

Général

  • Sélecteur de variantes → style de séparation des questions
  • Sélecteur du type de contenant - selon le choix, définition de l’épaisseur de la bordure et de l’arrondi du contenant interne
  • Choix de l’épaisseur du trait de séparation des questions
  • Définition de l’épaisseur de la bordure et de l’arrondi du contenant

En-tête

  • Choix de l’alignement du titre
  • Choix de la typographie du titre (parmi celles créées au préalable)
  • Choix de la typographie de la description (parmi celles créées au préalable)

Contenu

  • Choix du style de police du titre, du paragraphe, et des niveaux de titres 1, 2, 3, 4, 5 et 6

Couleurs

  • Choix de la couleur de la séparation des questions
  • Choix de la couleur de fond et de bordure du contenant interne
  • Choix de la couleur de bordure et de fond du contenant
  • Choix de la couleur de fond du bloc

Boutons

  • Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
  • Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
  • Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
  • Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable
  • Choix du style de bouton pour le “Voir toutes les FAQs” (= bouton archive, qui mènera à la page listant toutes les FAQs publiées)

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc FAQs différent à réutiliser à l’envi.

  • Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
  • Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
  • A tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

b - Index

💡

Le style des encadrés des FAQs dépend du bloc FAQs par défaut (s’il y a des compositions, il prend les configurations du bloc par défaut)

MISE EN PAGE GENERALE

Général

  • Sélecteur de variantes → présentation et disposition sur la page listant toutes les FAQs publiées (index)
  • Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure

En-tête

  • Sélecteur de variantes → alignement du titre
  • Saisie du titre de la page index
  • Choix de la typographie du titre de la page index
  • Choix de la typographie des éléments de la page index
  • Choix des filtres affichés
    • Choix des filtres de recherche affichés sur la page index. Pour chaque filtre, saisie du nom de l’élément et de l’intitulé si aucun n’est trouvé
    • Choix de la typographie des filtres
    • Définition de l’épaisseur et de l’arrondi de la bordure des filtres
    • Choix du style du bouton de réinitialisation des filtres

Couleurs

  • Choix de la couleur des filtres actifs, et de la couleur de fond et de bordure des filtres
  • Choix de la couleur de fond et de bordure du contenant
  • Choix de la couleur de fond de la page

PAGINATION

Général

  • Sélecteur de variantes : choix du style de la pagination. Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure des éléments
  • Sélection du style de police de la pagination

Couleurs

  • Choix de la couleur du texte au survol
  • Choix de la couleur de bordure de la pagination, standard et au survol
  • Choix de la couleur de fond de la pagination, standard et au survol
  • Choix de la couleur de la flèche de la pagination, standard et au survol

4 -Equipe

  • Prévisualisation au centre / paramètres à gauche + croix pour fermer

a - Bloc

Général

  • Sélecteur de variantes → position des texte, image et boutons. Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure
  • Sélection du type de contenant. Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure

En-tête

  • Choix de l’alignement du titre
  • Choix de la typographie du titre (parmi celles créées au préalable)
  • Choix de la typographie de la description (parmi celles créées au préalable)

Encadré

  • Choix de la forme de l’image. Selon, définition de son niveau d’arrondi
  • Choix de la taille des icônes associées (ex : réseaux sociaux)
  • Choix de la typographie du titre
  • Choix de la typographie de la position (fonction) des personnes/membres
  • Choix de la typographie de la description des personnes/membres
  • Choix de la typographie des informations des personnes/membres
  • Choix des informations des membres à afficher (rôle, description, mail, etc.)

Couleurs

  • Sélection de la couleur des icônes standard et au survol
  • Sélection de la couleur de bordure et de fond de l’encadré s’il y en a
  • Sélection de la couleur de bordure et de fond du contenant s’il y en a
  • Sélection de la couleur de fond du bloc

Boutons

  • Primaire → choix du style du bouton primaire parmi la liste de ceux créés au préalable
  • Secondaire → choix du style du bouton secondaire parmi la liste de ceux créés au préalable
  • Tertiaire → choix du style du bouton tertiaire parmi la liste de ceux créés au préalable
  • Lien basique → choix du style du lien simple parmi la liste de ceux créés au préalable
  • Choix du style de bouton pour le “Voir tous les membres” (= bouton archive, qui mènera à la page index listant toutes les personnes)

Ajouter une nouvelle composition = refaire le tout pour un nouveau style de bloc, pour avoir un bloc Equipe différent à réutiliser à l’envi.

  • Nommez votre nouvelle composition, et reprenez un à un les éléments ci-dessus !
  • Vous pouvez supprimer ou dupliquer ces nouvelles compositions (pratique pour ne faire que de petites variantes rapidement !)
  • A tout moment, vous pouvez réinitialiser chaque groupe d’éléments : le groupe reprend le réglage de celui du bloc par défaut (si vous avez sauvé entretemps).

b - Page

MEMBRE

Général

  • Sélecteur de variantes : position des éléments dans la page

Contenu

  • Choix de l’arrondi de l’image
  • Choix de la typographie du titre
  • Choix de la typographie du titre et des informations
  • Choix de la typographie de la description
  • Choix des informations à afficher sur la page

Couleurs

  • Choix de la couleur du fond de la page

MEMBRES SIMILAIRES

💡

Le style des encadrés des membres/personnes similaires dépend du bloc Equipe par défaut (s’il y a des compositions, il prend les configurations du bloc par défaut)

Général

  • Sélecteur de variantes, et le cas échéant, définition de l’épaisseur et de l’arrondi de la bordure

Contenu

  • Choix du style de typographie des éléments listés

Couleurs

  • Choix de la couleur de fond et de la bordure du contenant
  • Choix de la couleur de fond de la section

c - Index

💡

Le style des encadrés des membres/personnes dépend du bloc Equipe par défaut (s’il y a des compositions, il prend les configurations du bloc par défaut)

MISE EN PAGE GENERALE

Général

  • Sélecteur de variantes → présentation et disposition des éléments sur la page listant les membres dont la page est publiée (index). Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure

En-tête

  • Sélecteur de variantes → choix de la position des éléments dans l’en-tête
  • Saisie du titre de la page index
  • Choix de la typographie du titre de la page index
  • Choix de la typographie des résultats de recherche
  • Filtres :
    • Choix des filtres de recherche affichés sur la page index. Pour chaque filtre, saisie du nom de l’élément et de l’intitulé si aucun n’est trouvé
    • Choix de la typographie des filtres
    • Définition de l’épaisseur et de l’arrondi de la bordure des filtres
    • Choix du style du bouton de réinitialisation des filtres

Contenu

  • Saisie du libellé du bouton “lire plus”

Couleurs

  • Filtres : choix de la couleur de bordure et de fond des filtres et de la couleur des filtres actifs (= cochés)
  • Contenant : choix de la couleur de fond et de bordure du contenant s’il y a
  • Choix de la couleur de fond de la page

Pagination

Général

  • Sélecteur de variantes : choix du style de la pagination. Selon le choix, définition de l’épaisseur et de l’arrondi de la bordure des éléments
  • Sélection du style de police de la pagination

Couleurs

  • Choix de la couleur du texte au survol
  • Choix de la couleur de bordure de la pagination, standard et au survol
  • Choix de la couleur de fond de la pagination, standard et au survol
  • Choix de la couleur de la flèche de la pagination, standard et au survol

5 - Exemple de configuration en vidéo

Configuration d’un bloc

Configuration de la single / page

Configuration d’un index

Aller sur La mise en page →