Element duplication
Duplicating existing elements can be quite useful when you are working on a few of them and want copies with similar functionality. There are two ways to go about it.
Method 1
Install the Yoast Duplicate Post plugin and activate it. The plugin can be used to clone all available post types and is not restricted to Elements only. Once installed, go to Settings –> Duplicate Post, hit the Permissions tab and activate the checkbox next to Elements. Don’t forget to Save Changes.
Hovering over an element in the admin will reveal a couple of new options, Clone and New Draft. Clone will duplicate the element on the spot as Draft whilst New Draft will duplicate the element as Draft and take you inside the new element for further editing.
You can also copy to a new draft from the admin bar while editing an existing element.
Method 2
Install the GP Elements Admin Link plugin and activate it. The plugin can be used to clone GeneratePress Elements only. It also adds a top admin bar where you can add all three types of Elements or duplicate existing ones, so it’s quite handy.
FInally, you get a new option to duplicate an existing element while you are on the Elements admin page.
IMPORANT NOTE! Duplicating an element also duplicates all block IDs. As a result, if you were to modify a block color on the cloned element you would not see the changes in the front end. Also, If you were to modify a block color on the original element, you would probably see that change happen in both elements! You best best is to always duplicate any elements or the container that all elements reside and delete the original ones in the cloned element. That way, a new block ID would get generated for the blocks making them unique and ready for edit.
A big thanks to Dwayne for the comment below!
Need help on customizing GeneratePress or GenerateBlocks?
Helpful info
Keep up to date with newly released articles
Sign up to the Knowledge Base newsletter
Do note that if you’re duplicating template elements, it will copy the specific CSS generated for the original template elements (eg containers).
So, if you’re trying to modify the colour etc of the new block, it will inherit that which was applied to the parent (before cloning).
Yeah, good point, that is correct. Basically, you would need to duplicate any elements or the container that all elements reside and delete the original ones in the cloned element. That way, a new block ID would get generated for the blocks making them unique and ready for edit.
Thanks for the comment, I’ve also added a note at the end of the article!