A page is made of blocks: a heading, a text, an image or a container that holds others. This article explains how to add a block, insert it right before or after another one and move it. You will also learn what happens to content copied from another site.
Add a block from the inserter
- In the page, select the block after which the new block should go.
- In the top bar, click Block inserter (+). The list opens on the left, on the Blocks tab.
- In Search, type the name of the block or a keyword. For example,
faqfinds the Accordion. - Click the block. It is inserted and the inspector shows its settings.
Without a search, the list sorts blocks by category, for example Text or Media. Each block also answers to keywords, such as youtube for the Embed.
In an empty paragraph, type / followed by the name of the block to add it without opening the list.
Choose a variant
Some blocks can be placed in several variants. The container is placed as Container, Flex or Grid: its variant is changed at the top of the Block tab of the inspector. The heading is placed from Heading 1 to Heading 6: its level is changed with the H1 to H6 buttons at the top of the inspector. The button is placed as Primary button, Secondary button or Tertiary button: its variant is changed with the three icons at the top of the inspector.
Add a block inside another
An empty block that holds others shows a + button. This is the case for the panel of an accordion, a tab, a submenu or the track of a carousel. Once the block is filled, the + appears when you select that block itself.
In a container, the Enter key at the end of a paragraph creates a new paragraph.
Add a block right before or after another
- Select the neighboring block.
- In its toolbar, open the Options menu, the three dots.
- Click Add before or Add after. The new block is placed against the selected block.
On the keyboard, Add before is Ctrl+Alt+T and Add after is Ctrl+Alt+Y. The same menu opens from the block’s row in the list view.
The block created depends on where you are. Where only one type of block belongs, that is the one created.
| Selected block | Block created |
|---|---|
| An item of an accordion | An accordion item. |
| A panel of tabs | A tab, its panel and its label. |
| A slide of a slider | An empty slide, for which you choose the media. |
| A row of a table | A row, filled with its cells. |
| An option or a group of options of a form | An option, or a group. |
| A field of a form field group | A text field. |
| A form step | A step. Only the keyboard shortcuts add it. |
| An entry of a navigation or submenu | A navigation link. |
| A block of a contextual navigation | A Navigation target title. |
| Any other block | A paragraph, where the zone accepts one. |
In an accordion or tabs, the + of the zone adds an item or a tab, with no list to browse. In the options of a form field, the Add option and Add group buttons replace the +.
For example, to slip a question into the middle of an FAQ, select the question before it and type Ctrl+Alt+Y. The new item is placed below, ready to fill.
For a block other than the one offered, use the Block inserter or type / in an empty paragraph.
Move a block
- The arrows in the block’s toolbar move it up or down one position.
- The six-dot handle in the toolbar drags it across the page.
- In the list view, drag the block’s row to its new place, into another container if needed. This is the safest gesture in a busy layout.
The Options menu also offers Clone (Ctrl+Shift+D) and Delete (Shift+Alt+Z).
Paste content from elsewhere
Content pasted into the editor becomes Lovely Render blocks. The result depends on where you copy from.
From the editor of another WordPress site
Each block becomes its Lovely Render equivalent. An entire section converts at once, with all its content.
| You paste | You get |
|---|---|
| A heading | A Heading block, at its level. |
| The title of a post | A Heading block that displays the title of the entry. |
| A group, columns, a cover, a “media and text” block, a row of buttons or a gallery | A Container with everything it contained: as a grid for columns or a gallery and as flex for a row. |
| A button or a “Read more” link | A Button, with its text and its address. |
| An image or a video | An empty Media block. |
| A separator, an embed, the site logo, a breadcrumb, a menu, tabs or an accordion | Their Lovely Render equivalent. |
| A post loop or the latest posts | A Content list, to set up. |
| The date or the author of a post | A paragraph that displays the date or the author of the entry. |
| Search | The Search block in Classic (results page) mode: the visitor types, submits and lands on the results page. |
| Links to social networks | A Container of Buttons, each with the address of the profile. Choose the icon of each button in its Icons panel. |
| A paragraph, a list, a table, a quote or a code block | Themselves. |
The site title, its tagline and the title of an archive have no equivalent. Write the site name in a Heading or show it with the Logo block. An archive has its own template, where you write its title once.
From a web page
Headings stay headings, at their level. Images become empty Media blocks and separator lines become separators. Paragraphs, lists, tables, quotes and code snippets stay themselves. The rest arrives as paragraphs, which you restyle.
Review what you pasted
- The other site’s styling does not carry over. Its colors, alignment, font sizes and classes are dropped: your design system styles the pasted blocks.
- An image arrives empty, with its alternative text. Its file stays on the original site. Drop your image in the block.
- A block with no equivalent, such as a widget, a shortcode or comments, is displayed as unsupported. As long as it stays in the page, the published page shows it outside your design system.
- Links still point to the old site.
- Nothing flags what a paste left out. Review each pasted section.