Duplicating Contents Within A Row
Duplicating layout means creating an exact replica of an existing layout. This method is useful when you want to create another layout in your website and you are uncertain on how it would look like in the front-end. Rather than creating one from scratch, WordPress has a feature that allows user to duplicate their content and even its layout. From there, you can decide and edit the layout as much as you want.
This article will guide you on how to duplicate layouts and content within a row and adding on links. To start with, follow the instructions below
Make sure you are log-in on your website's back-end.
Go to the specific back-end page where you want a layout to be duplicated.
In the example below, I will duplicate all the contents inside the red box and have them place on the columns with "Empty Space" element on it.
To do this,
Hover your mouse on the element (image) and click on the duplicate tool. Clicking the duplicate tool will clone the element and would be place right beneath the original image.
Drag and drop the cloned image to the area where you want them to be place. In my example below, I want to create an exact replica on the 2nd column so I'll drag and drop it on the left side, right on top of the "Empty Space" element.
Do the same process on the other elements and make sure to delete the empty space element.
Now, what's next after duplicating the elements?
If your goal is just simply duplicating the layout without any additional functionality you can click on Update button to save all the changes you made. However, if you want to change the image, text and even add links on the elements, then continue reading the article.
How to Change Image?
To change the image of an element, hover it on top of the element and click on the "**pencil**" icon tool. This will open Single Image Settings dialog box.
Under Single Image Settings, click on the "**x**" icon to delete the existing image. When done, click on the "**+**" icon. This will allow you to change the image either by a uploading a new file to the Media Gallery or by choosing one of the existing image file.
Extra Takeaway: It would be best to check on the image sizes before uploading them in the media gallery to ensure the consistency of the image sizes and avoid having a slow loading website speed. For this reason we normally upload medial files not more than 200KB in the gallery.
You can also do a bunch of stuff in Single Image Settings dialog box. You can adjust where you want the image to be align, apply some animation, gives styles on your image and even add links on the image. When done editing the image, do not forget to click on Save Changes button.
How to Add Links on Elements?
Click on the Select URL button and paste the domain where you want the element to be redirected in the URL input box. You can also tick "**Open link in a new tab**" if you want the redirection to be open to a new tab. Once done adding the link, click on the Set link button at the very bottom of the dialog box.
When you are satisfied with all the changes, click on Update button.
Is this tutorial unclear? If you do not find the training you are looking for, please send us a detailed email to hello@lightningsites.com.
This article will guide you on how to duplicate layouts and content within a row and adding on links. To start with, follow the instructions below
Make sure you are log-in on your website's back-end.
Go to the specific back-end page where you want a layout to be duplicated.
In the example below, I will duplicate all the contents inside the red box and have them place on the columns with "Empty Space" element on it.
To do this,
Hover your mouse on the element (image) and click on the duplicate tool. Clicking the duplicate tool will clone the element and would be place right beneath the original image.
Drag and drop the cloned image to the area where you want them to be place. In my example below, I want to create an exact replica on the 2nd column so I'll drag and drop it on the left side, right on top of the "Empty Space" element.
Do the same process on the other elements and make sure to delete the empty space element.
Now, what's next after duplicating the elements?
If your goal is just simply duplicating the layout without any additional functionality you can click on Update button to save all the changes you made. However, if you want to change the image, text and even add links on the elements, then continue reading the article.
How to Change Image?
To change the image of an element, hover it on top of the element and click on the "**pencil**" icon tool. This will open Single Image Settings dialog box.
Under Single Image Settings, click on the "**x**" icon to delete the existing image. When done, click on the "**+**" icon. This will allow you to change the image either by a uploading a new file to the Media Gallery or by choosing one of the existing image file.
Extra Takeaway: It would be best to check on the image sizes before uploading them in the media gallery to ensure the consistency of the image sizes and avoid having a slow loading website speed. For this reason we normally upload medial files not more than 200KB in the gallery.
You can also do a bunch of stuff in Single Image Settings dialog box. You can adjust where you want the image to be align, apply some animation, gives styles on your image and even add links on the image. When done editing the image, do not forget to click on Save Changes button.
How to Add Links on Elements?
Click on the Select URL button and paste the domain where you want the element to be redirected in the URL input box. You can also tick "**Open link in a new tab**" if you want the redirection to be open to a new tab. Once done adding the link, click on the Set link button at the very bottom of the dialog box.
When you are satisfied with all the changes, click on Update button.
Is this tutorial unclear? If you do not find the training you are looking for, please send us a detailed email to hello@lightningsites.com.
Updated on: 02/02/2022
Thank you!