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
- Dans la page, sélectionnez le bloc après lequel le nouveau bloc doit arriver.
- Dans la barre du haut, cliquez sur Outil d’insertion de bloc (+). La liste s’ouvre à gauche, sur l’onglet Blocs.
- Dans Rechercher, tapez le nom du bloc ou un mot-clé. Par exemple,
faqtrouve l’Accordéon. - Cliquez sur le bloc. Il s’insère et l’inspecteur affiche ses réglages.
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
- Sélectionnez le bloc voisin.
- Dans sa barre d’outils, ouvrez le menu Options, les trois points.
- 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 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 | Un élément d’accordéon. |
| Un panneau d’onglets | Un onglet, son panneau et son libellé. |
| Une diapositive de slider | Une diapositive vide, dont vous choisissez le média. |
| Une ligne de tableau | Une ligne, remplie de ses cellules. |
| Une option ou un groupe d’options de 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 ou de sous-menu | Un lien de navigation. |
| Un bloc d’une 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.
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.
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.