If you’ve been working with the Visual Composer for a while, you’ll definitely have had to remove something. Now, this is very simple.
Let’s try to remove an element using the front-end editor of the Visual Composer. It works as well with the back-end editor. To remove an element, hover your mouse over the specific element and click on the trash bin inside the green bar.
Verification to delete an element
After you’ve clicked the trash bin icon, you’ll be prompted with a warning to verify and continue the deletion of the element. This is done to prevent the elements from accidental deletion. To continue, click OK.
Element successfully deleted
Now, the button that we deleted disappears. You can also delete the whole row and its content. And that’s how we delete an element using the Visual Composer.
Cloning an element in the Visual Composer is a great time saver. Let’s try to clone a single image element. To do that, hover your mouse over the image and a green bar will appear. Click on the button inside the green bar with a label Clone Single Image.
Single Image cloned
So now, we’ve got two identical single image element. The beauty of this is it saves you from reconfiguring the whole element. Now, the only thing that we need to do with the cloned element is to change the image. There’s no need for us to change the element’s whole property because we have already configured the element with our first image.
To edit the image of the cloned element, hover your mouse over the picture and a green bar will appear. Click on the pencil icon to edit the element.
Single Image Settings box will pop-up
To change the image of the single image element, click on the + icon beside the thumbnail of the current image.
Set image – Media Library box will pop-up
So, to change the image, select the images available in your Media Library. If you still need to upload the image that you want to use, you can go to the Upload Files tab and upload the image that you want. After selecting the image, click on Set Image.
Once you’re back to the Single Image Settings box, just click on Save Changes then Close to close the settings.
So now, we have successfully changed the image of our cloned element. This is very helpful when you want to do stacks of pictures with the same properties because all you need to do is to configure the first image and clone it. Then, you can now change the image of the cloned element.
Cloning images from different columns
We can easily clone any elements that we want with the use of the Visual Composer. It works exactly the same with buttons, text blocks, and all the other elements of the page.
Cloning a row
You can even clone a row. When you hover your mouse over the row, expand the row selection settings then click on the button with a label Clone Row. This can save you a lot of time if you want to reuse the settings that are on that row without having to reconfigure it.
It is really easy to add another element to a column in the front-end editor of the Visual Composer. Let’s try to add an element. To do that, hover your mouse over a column and you can see an orange button at the top.
Add a Text Block element
Select the Text Block element. If you’re having a hard time finding the Text Block element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.
Text Block Settings box will pop-up
As you can see, our text block element is already added above the image. Once done with the changes, click Save Changes and close the text block settings.
Add a Separator element
Let’s try to add a separator element. To do that, select the separator element. If you’re having a hard time finding the Separator element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.
Separator Settings box will pop-up
As you can see, the separator that we have added is already below the text that we’ve added a while ago. Once done with the changes, click on Save Changes and close to close the separator settings.
Add a Video Player element
Let’s try to add a video player element under the image. To do that, click on the orange button.
Select the Video Player element
Let’s try to add a video player element. To do that, select the video player element. If you’re having a hard time finding the video player element, you can either search it at the textbox located at the top-right side of the box or you can go to the Content tab to filter out some elements.
Video Player Settings will pop-up
Once done with the changes, click on Save Changes and close to close the video player settings.
Video Player was successfully added
As you can see, we’ve got our video player added under the image. It’s very easy to add elements. One important thing to remember is that to be careful and make sure that you have selected the right section when you add an element.
The front-end editor for Visual Composer makes it very easy to edit a page then see the changes instantly without even clicking the Preview button.
To edit using Visual Composer, click on Edit with Visual Composer instead of clicking Edit.
Let’s try to edit a text in Visual Composer
After clicking on Edit with Visual Composer, this will give us the in-situ layout of the page we’re going to edit.
So, rather than having to imagine which image is not aligned, it’s all here, pretty much as you see it normally. You don’t see the rows and columns structures so much, but you can see all the elements.
Let’s try to edit the text highlighted in a red box. To edit a text block, hover your mouse to the text block and a green bar will appear. Afterward, click on the pencil icon.
Text Block Settings will pop-up
A Text Block Settings will pop-up after you’ve clicked the pencil icon in the green bar. Let’s have this highlighted text deleted. If you have nothing else to edit, click on Save Changes. Afterward, click on Close to close the Text Block Settings.
Text Block successfully edited
There we go, after clicking on Save Changes, we can instantly see the changes we’ve committed. Like what I’ve said earlier, you don’t have to preview it or guess what you’re website is going to look right now.
Next, let’s try to change an image. To do that, hover your mouse over the image that you want to edit. A green bar will appear then click on the pencil icon.
Single Image Settings will pop-up
To select a new image, click on the box located on the right side of the thumbnail of the current image. This will take us the Media Library of our WordPress.
Set an image
After clicking the box, a Set Image box will appear. We are currently on the Media Library tab wherein we need to select a new image. If you haven’t uploaded your desired image yet, go to Upload Files tab to upload your image. After selecting the image that you want, click on Set Image.
Image is now ready to be changed
After setting an image, the thumbnail inside the red box will change to the image that we have set. Now, we’re one click away in changing an image. To finally change the image, click on Save Changes followed by Close.
Image successfully changed
Now that we have successfully changed our image. Let’s try to commit these changes to the database. To commit, click on Update.
Changes successfully updated
A message at the top of the page will appear to tell us that the page was successfully updated.
Now that our changes have been successfully updated and if you’ve got nothing else to edit the page, click X to close the Visual Composer.
Reminder: If we instantly click X without clicking on Update, our changes will not be saved in the database. If we’re already sure with our changes, update the page right away.
Login as administrator then click edit page from the top toolbar
Let’s edit a page!
If we’re on the page we want to edit and we’re logged in as administrator, we can click Edit Page.
You will now be on the backend editor view
After clicking the Edit Page, it will take us to the back-end view. In the image above, we can now see the page editing area. We’ve also got our visual composer editor here because this is a page which is set up in the visual composer.
To go back to the page we were on before, click on the permalink.
Or click Edit with Visual Composer
We can also see Edit with Visual Composer. So let’s click Edit with Visual Composer.
Now you are on the frontend editor
The Edit with Visual Composer is the front-end editor.
So, we still got all the features of visual composer but we can see our changes more real-time as we do them. If we’re finished, we can press update then close it. The update and close button can be seen at the top-right corner of the editor.
Or from the dashboard click pages
The other way you can get to edit a page, assuming that you were already in your dashboard, the back-end view of your website, is to go to Pages.
Click the name of page you want to edit
After clicking Pages, or if you’re already in Pages, we can see the list of pages we’ve already created. To edit the page we want, click on the title of the specific page or you can also click the Edit link below the title.