---
# System prepended metadata

title: Classe(s) personnalisée(s) - Maradji
tags: [Flow, Documentation, Maradji, Page]

---

# Classe(s) personnalisée(s) - Maradji
###### tags: `Documentation` `Flow` `Page` `Maradji`

## Présentation
Il est possible sur les produits, les pages de blog et les pages CMS d'ajouter une classe personnalisée afin de changer la couleur principale de la page ou de changer la police d'écriture des titres.
![](https://i.imgur.com/oOagGr0.jpg)

---

## I - Ajouter une/des classe(s) personnalisée(s)

* Dans le dashboard de Flow

* Aller dans Système > Listes déroulantes
![](https://i.imgur.com/mRlHMJz.png)

* Chercher `Classe personnalisée`
![](https://i.imgur.com/hwija0X.png)

* Cliquer sur modifier ![](https://i.imgur.com/sAhuGZz.png)

* Dans l'onglet "valeurs" ![](https://i.imgur.com/PeKo2Vw.png)

* Ajouter/Modifier/Supprimer des lignes autant que nécessaire.
![](https://i.imgur.com/L9aoJdX.png)
NB: Pour ajouter une classe de couleur, ajouter `color[nomdelacouleur]`
**IMPORTANT: Si un ligne comporte plusieurs classes, celle pour la couleur doit être renseignée en première (comme sur l'exemple ci-dessus)**

* ![](https://i.imgur.com/9ltqudr.png)

* Une fois terminé retourner dans le dashboard est lancer `Synchronisation des couleurs personnalisées
![](https://i.imgur.com/TgpljXI.png)

---

## II - Activer la configuration

* Dans le dashboard de Flow

* Aller dans Système > Configuration
![](https://i.imgur.com/e5fkJf5.png)

* Dans l'onglet "site" ![](https://i.imgur.com/1A5StzV.png)

* Chercher `site~meta_class_custom` et changer la valeur voulue

* ![](https://i.imgur.com/S9wiR0e.png)

* Une fois terminé retourner dans le dashboard est lancer `Synchronisation des couleurs personnalisées
![](https://i.imgur.com/TgpljXI.png)

---

## III - Attribuer une/des classe(s) personnalisée(s) à un(e) page/post/produit

* Sur un(e) page/post/produit aller dans l'onglet "Autre" ![](https://i.imgur.com/60F3fMb.png)
NB: Sur les posts la liste déroulante de la classe personnalisée se trouve dans la sidebar.

* Choisir la/les classe(s) personnalisée(s) dans la liste déroulante.
![](https://i.imgur.com/cVrsy9l.png)

* ![](https://i.imgur.com/9ltqudr.png)