# Ajouter un bloc

Une page se compose de blocs : un titre, un texte, une image ou un conteneur qui en range d’autres. Cet article explique comment ajouter un bloc, l’insérer juste avant ou après un autre et le déplacer. Vous saurez aussi ce que devient un contenu copié sur un autre site.

## Ajouter un bloc depuis l’outil d’insertion

1. Dans la page, sélectionnez le bloc après lequel le nouveau bloc doit arriver.
2. Dans la barre du haut, cliquez sur **Outil d’insertion de bloc** (+). La liste s’ouvre à gauche, sur l’onglet **Blocs**.
3. Dans **Rechercher**, tapez le nom du bloc ou un mot-clé. Par exemple, `faq` trouve l’**Accordéon**.
4. Cliquez sur le bloc. Il s’insère et l’inspecteur affiche ses réglages.

![L’outil d’insertion ouvert sur l’onglet Blocs, la recherche faq et son seul résultat, Accordéon.](https://static.lovelyrender.com/uploads/2026/10/935-doc-pages-inserteur.png)

Sans recherche, la liste range les blocs par catégorie, par exemple **Texte** ou **Média**. Chaque bloc répond aussi à des mots-clés, comme `youtube` pour l’**Intégration**.

Dans un paragraphe vide, tapez `/` suivi du nom du bloc pour l’ajouter sans ouvrir la liste.

### Choisir une variante

Certains blocs se posent sous plusieurs variantes. Le conteneur se pose en **Conteneur**, **Flex** ou **Grille** : sa variante se change en haut de l’onglet **Bloc** de l’inspecteur. Le titre se pose de **Titre 1** à **Titre 6** : son niveau se change avec les boutons **H1** à **H6** du haut de l’inspecteur. Le bouton se pose en **Bouton principal**, **Bouton secondaire** ou **Bouton tertiaire** : sa variante se change avec les trois icônes du haut de l’inspecteur.

## Ajouter un bloc dans un autre

Un bloc vide qui en accueille d’autres affiche un bouton +. C’est le cas du panneau d’un accordéon, d’un onglet, d’un sous-menu ou de la piste d’un carrousel. Une fois le bloc rempli, le + apparaît quand vous sélectionnez ce bloc lui-même.

Dans un conteneur, la touche Entrée à la fin d’un paragraphe crée un nouveau paragraphe.

## Ajouter un bloc juste avant ou après un autre

1. Sélectionnez le bloc voisin.
2. Dans sa barre d’outils, ouvrez le menu **Options**, les trois points.
3. Cliquez sur **Ajouter avant** ou **Ajouter après**. Le nouveau bloc se place contre le bloc sélectionné.

Au clavier, **Ajouter avant** se fait avec `Ctrl+Alt+T` et **Ajouter après** avec `Ctrl+Alt+Y`. Le même menu s’ouvre depuis la ligne du bloc dans la vue en liste.

![Le menu Options d’un paragraphe : Copier, Couper, Dupliquer, Ajouter avant et Ajouter après avec leurs raccourcis, puis Grouper, Renommer, Masquer, Créer une composition et Supprimer.](https://static.lovelyrender.com/uploads/2026/10/938-doc-pages-options.png)

Le bloc créé dépend de l’endroit où vous êtes. Là où un seul type de bloc a sa place, c’est lui qui naît.

| Bloc sélectionné | Bloc créé |
| --- | --- |
| Un élément d’[accordéon](https://lovelyrender.com/fr/documentation/bloc-accordeon/) | Un élément d’accordéon. |
| Un panneau d’[onglets](https://lovelyrender.com/fr/documentation/bloc-onglets/) | Un onglet, son panneau et son libellé. |
| Une diapositive de [slider](https://lovelyrender.com/fr/documentation/bloc-slider/) | Une diapositive vide, dont vous choisissez le média. |
| Une ligne de [tableau](https://lovelyrender.com/fr/documentation/bloc-tableau/) | Une ligne, remplie de ses cellules. |
| Une option ou un groupe d’options de [formulaire](https://lovelyrender.com/fr/documentation/bloc-formulaire/) | Une option, ou un groupe. |
| Un champ d’un groupe de champs de formulaire | Un champ texte. |
| Une étape de formulaire | Une étape. Seuls les raccourcis clavier l’ajoutent. |
| Une entrée de [navigation](https://lovelyrender.com/fr/documentation/bloc-navigation/) ou de sous-menu | Un lien de navigation. |
| Un bloc d’une [navigation contextuelle](https://lovelyrender.com/fr/documentation/bloc-navigation-contextuelle/) | Un **Titre de la cible de navigation**. |
| Tout autre bloc | Un paragraphe, là où la zone en accepte un. |

Dans un accordéon ou des onglets, le + de la zone ajoute un élément ou un onglet, sans liste à parcourir. Dans les options d’un champ de formulaire, les boutons **Ajouter une option** et **Ajouter un groupe** remplacent le +.

Par exemple, pour glisser une question au milieu d’une FAQ, sélectionnez la question qui précède et tapez `Ctrl+Alt+Y`. Le nouvel élément se place dessous, prêt à remplir.

**Remarque :** Dans une zone à structure fixe, rien ne s’ajoute à la main. Le titre et le panneau d’un élément d’accordéon, les sections d’un tableau et la barre d’onglets sont gérés par leur bloc parent.

Pour un autre bloc que celui proposé, passez par l’**Outil d’insertion de bloc** ou tapez `/` dans un paragraphe vide.

## Déplacer un bloc

- Les flèches de la barre d’outils du bloc le montent ou le descendent d’un rang.
- La poignée à six points de la barre d’outils le fait glisser dans la page.
- Dans la vue en liste, glissez la ligne du bloc à sa nouvelle place, dans un autre conteneur si besoin. C’est le geste le plus sûr dans une mise en page chargée.

Le menu **Options** propose aussi **Dupliquer** (`Ctrl+Shift+D`) et **Supprimer** (`Shift+Alt+Z`).

## Coller un contenu venu d’ailleurs

Un contenu collé dans l’éditeur devient des blocs de Lovely Render. Le résultat dépend de l’endroit d’où vous copiez.

### Depuis l’éditeur d’un autre site WordPress

Chaque bloc devient son équivalent dans Lovely Render. Une section entière se convertit d’un coup, avec tout son contenu.

| Vous collez | Vous obtenez |
| --- | --- |
| Un titre | Un bloc **Titre**, à son niveau. |
| Le titre d’un article | Un bloc **Titre** qui affiche le titre de l’entrée. |
| Un groupe, des colonnes, une couverture, un bloc « média et texte », une rangée de boutons ou une galerie | Un **Conteneur** avec tout ce qu’il contenait : en grille pour des colonnes ou une galerie et en flex pour une rangée. |
| Un bouton ou un lien « Lire la suite » | Un **Bouton**, avec son texte et son adresse. |
| Une image ou une vidéo | Un bloc **Média** vide. |
| Un séparateur, un embed, le logo du site, un fil d’Ariane, un menu, des onglets ou un accordéon | Leur équivalent de Lovely Render. |
| Une boucle d’articles ou les derniers articles | Une **Liste de contenus**, à régler. |
| La date ou l’auteur d’un article | Un paragraphe qui affiche la date ou l’auteur de l’entrée. |
| La recherche | Le bloc **Recherche** en mode **Classique (page de résultats)** : le visiteur tape, valide et arrive sur la page de résultats. |
| Des liens vers les réseaux sociaux | Un **Conteneur** de **Boutons**, chacun avec l’adresse du profil. Choisissez l’icône de chaque bouton dans son panneau **Icônes**. |
| Un paragraphe, une liste, un tableau, une citation ou un bloc de code | Eux-mêmes. |

Le titre du site, son slogan et le titre d’une archive n’ont pas d’équivalent. Écrivez le nom du site dans un **Titre** ou montrez-le avec le bloc **Logo**. Une archive a son propre gabarit, où vous écrivez son titre une fois.

**Attention :** Copiez un bloc entier. Un élément collé sans son parent ne se convertit pas. Un onglet sans sa barre d’onglets ou un élément d’accordéon seul reste une boîte autour de son contenu.

### Depuis une page Web

Les titres restent des titres, à leur niveau. Les images deviennent des blocs **Média** vides et les traits de séparation des séparateurs. Les paragraphes, les listes, les tableaux, les citations et les extraits de code restent eux-mêmes. Le reste arrive en paragraphes, que vous remettez en forme.

### Relire ce que vous avez collé

- L’habillage de l’autre site ne suit pas. Ses couleurs, son alignement, ses tailles de police et ses classes tombent : votre design system habille les blocs collés.
- Une image arrive vide, avec son texte alternatif. Son fichier reste sur le site d’origine. Déposez votre image dans le bloc.
- Un bloc sans équivalent, comme un widget, un shortcode ou des commentaires, s’affiche comme non pris en charge. Tant qu’il reste dans la page, la page publiée le montre hors de votre design system.
- Les liens pointent encore vers l’ancien site.
- Rien ne signale ce qu’un collage a laissé de côté. Relisez chaque section collée.

**Remarque :** Le collage reprend une page ou une section à la fois. Aucun import ne reprend un site WordPress entier avec ses médias, ses menus et ses liens entre pages.

## Voir aussi

- [Se repérer dans l’éditeur](https://lovelyrender.com/fr/documentation/editeur/)
- [Partir d’une création toute faite](https://lovelyrender.com/fr/documentation/creations/)
- [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/)
- [Espacer vos blocs](https://lovelyrender.com/fr/documentation/espacer-vos-blocs/)