# Créer une molécule ### Deux approches possibles #### 1 - Vous voulez ajouter un contenu sur votre site mais **vous n’avez pas encore choisi** sur quel type de pages vous souhaitez l’afficher OU vous voulez ajouter une molécules sur **plusieurs types de pages**. La meilleure solution est de passer par le menu Atomic Suite by 202 > Animation de contenu > Créer une nouvelle molécule. Cette option vous permet de créer une molécule en 3 étapes. ![BO > Menu latéral > Atomic Suite By 202 > Animation de Contenu](/files/-Mk2dZmEPmB-PAmHqMvr) #### 2 - Vous souhaitez ajouter une nouvelle molécule sur votre site et vous imaginez déjà son [emplacement **précis** dans le Front Office](/atomic-suite/documentation-atomic/documentation-utilisateur/animation-des-contenus-dans-atomic-suite/afficher-une-molecule/quest-ce-que-cest-emplacement-dans-le-front-office.md). Cette option est idéale si vous avez déjà choisi où afficher votre nouvelle molécule. ![BO > Menu latéral > Atomic Suite By 202 > Configuration](/files/-Mk2dZmFsrVBLNdj1xWi) Sur chaque page se trouve une représentation visuelle et interactive des principaux éléments de cette page. En cliquant sur un élément, l'accordéon du hook correspondant s'ouvre dans la colonne de droite. Vous pouvez alors ajouter une nouvelle molécule sur ce hook. Si certaines molécules existent déjà, elles seront listées ici (et leur nombre est affiché entre parenthèses). {% hint style="info" %} C'est ici que l'on procède à la [modification de l'ordre d'affichage](/atomic-suite/documentation-atomic/documentation-utilisateur/animation-des-contenus-dans-atomic-suite/comment-modifier-lordre-daffichage-des-molecules.md) entre plusieurs molécules principales. {% endhint %} ### **Créer une molécule en 3 étapes** #### Etape 1 : Choisir le type de molécule ([Découvrez toutes les molécules disponibles](/atomic-suite/documentation-atomic/documentation-utilisateur/animation-des-contenus-dans-atomic-suite/liste-de-molecules.md)) Vous pouvez cliquer sur la molécule choisie ou saisir son nom dans le champ de texte et elle sera automatiquement sélectionnée.

Atomic Suite By 202 > Animation de Contenu > Ajouter une nouvelle molécule > Etape 1

#### **Etape 2** : Paramétrer la molécule Les champs obligatoires sont indiqués par une astérisque rouge.

Atomic Suite By 202 > Animation de Contenu > Ajouter une nouvelle molécule > Etape 2

#### **Etape 3** : Choisir le mode et les options d’affichage * Activez l’affichage via un [hook](/atomic-suite/documentation-atomic/documentation-utilisateur/animation-des-contenus-dans-atomic-suite/afficher-une-molecule/quest-ce-que-cest-un-hook.md) (ou via [widget](/atomic-suite/documentation-atomic/documentation-utilisateur/animation-des-contenus-dans-atomic-suite/afficher-une-molecule/quest-ce-que-cest-un-hook/comment-ajouter-une-molecule-dans-un-emplacement-non-disponible-dans-la-liste-de-hooks-utilisateu.md) en désactivant l'option "Brancher sur le hook"). * Sélectionnez un ou plusieurs emplacements dans le Front Office et les hooks correspondants. * Spécifiez les [règles d'affichage conditionnel](/atomic-suite/documentation-atomic/documentation-utilisateur/animation-des-contenus-dans-atomic-suite/afficher-une-molecule/affichage-conditionnel.md) si nécessaire

Atomic Suite By 202 > Animation de Contenu > Ajouter une nouvelle molécule > Etape 3

{% hint style="info" %} À partir d’Atomic 1.3.0 vous **pouvez prévisualiser la molécule dans le Front Office** avant de la publier sur votre site, grâce au bouton “Prévisualisation” présent sur la 3ème étape de création de la molécule. Cette option permet d’ouvrir la page en question avec la molécule affichée sur le hook sélectionné.\ \ Cette fonctionnalité n’est pas disponible pour la page de checkout et de confirmation de commande. {% endhint %} Une fois que toutes les configurations sont ajoutées vous serez redirigé vers une page récapitulative avec la liste des actions possibles : * Modifier la molécule * Accéder à l’emplacement sélectionné pour modifier la position de la molécule * Accéder à toutes les molécules * Créer une molécule enfant (optionnel, ex : ajout des slides dans le carrousel) * Copier le code du widget (présent uniquement si l’affichage via un hook est désactivé) ![Atomic Suite By 202 > Animation de Contenu > Ajouter une nouvelle molécule > Confirmation](/files/-Mk2dZmLe28hStUJQo-5) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://atomic-suite.gitbook.io/atomic-suite/documentation-atomic/documentation-utilisateur/animation-des-contenus-dans-atomic-suite/comment-creer-une-nouvelle-molecule.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.