Easily create custom blocks by copying code from Modern Editor designs to the Blocks Editor.
Topics covered in this article:
Take note of these general guidelines if you create your blocks from copying code:
- Creating a custom block from code is an easy way to replicate a design that you've already created in Modern Editor.
- You can always build your custom block using the Blocks Editor drag-and-drop tools.
- This will require working in multiple tabs, which is supported in WordFly editors.
- The fewer styles you add the more flexible your custom block will be in any design as the block will take on the global styles for the block type. For example, a custom footer block would use the global footer styles of the design it is dropped into.
- Adding specific styles to the design will make the design more static. The custom block will use any styles set in the custom block, ignoring global styles for the design it is placed into.
There are a few steps to creating a custom block by copying code. The first step is to prepare your browser by opening your design in Modern Editor and starting a new custom block in the Blocks Editor. The second step will walk you through copying the correct code from Modern Editor. The last step is pasting the code into the Blocks Editor.
First, prepare your browser tabs for building your custom blocks.
1. Open your design in Modern Editor.
This can be an Email or Page design built in Modern Editor. Click on the name of your design, then select View/Edit. Then click on Edit to open the editor.
2. In another browser tab, start your custom block. Go to Design Library > Blocks.
3. Click the button Create a block.
4. Place your browser tabs side by side.
Second, copy your block code from the Modern Editor.
1. In your Modern Editor browser tab, click on the content block from the preview panel (right side).
2. On the edit panel (left side), click STYLES.
3. Copy the container ID.
4. In the lower left corner, select the HTML tab.
5. Click anywhere in the HTML and search for the container ID.
Tip: The keyboard command for search is "ctrl+F"
6. Copy the start and end <div> code for this block.
Tip: Click on the code line number on the left side next to the starting div <div> tag to collapse the code block. This will show you which closing div </div> to copy to.
Third, paste the code in the Blocks editor.
1. In your Blocks Editor browser tab, select the HTML tab in the lower left corner.
2. Place your cursor after the second closing style </style> tag.
3. Paste the copied code.
4. Close the HTML tab by clicking the tab again.
5. Save your updates in the Blocks Editor.
Your custom block is created! Add styles, if needed, or start using the new block in email and page designs.