Deleting Elements from the Page with the Visual Composer

Deleting Elements from the Page with the Visual Composer

Get a copy of the transcript of this guide (pdf)

deleting-elements-from-the-page-with-visual-composer

Use the front-end editor of the Visual Composer

deleting-elements-from-the-page-with-visual-composer-1

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

deleting-elements-from-the-page-with-visual-composer-2

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

deleting-elements-from-the-page-with-visual-composer-3

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 Elements and Rows in Visual Composer

Cloning Elements and Rows in Visual Composer

Get a copy of the transcript of this guide (pdf)

cloning-elements-and-rows-in-visual-composer

Clone the Single Image element

cloning-elements-and-rows-in-visual-composer-1

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

cloning-elements-and-rows-in-visual-composer-2

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

cloning-elements-and-rows-in-visual-composer-3

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

cloning-elements-and-rows-in-visual-composer-4

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.

Image changed

cloning-elements-and-rows-in-visual-composer-5

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

cloning-elements-and-rows-in-visual-composer-6

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

cloning-elements-and-rows-in-visual-composer-7

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.

Add a Block to Columns with the Frontend Editor of Visual Composer

Add a Block to Columns with the Front-End Editor of Visual Composer

Get a copy of the transcript of this guide (pdf)

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer

Use front-end editor of Visual Composer

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

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-2

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

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-3

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

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-4

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

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-5

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

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-6

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

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-7

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

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-8

Once done with the changes, click on Save Changes and close to close the video player settings.

Video Player was successfully added

append-an-element-to-a-column-with-the-front-end-editor-of-visual-composer-9

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.

Frontend Editor for Visual Composer

Front-End Editor for Visual Composer

Get a copy of the transcript of this guide (pdf)

drop-down-menu-configuration front-end-editor-for-visual-composer

Edit the page using Visual Composer

front-end-editor-for-visual-composer-1

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

front-end-editor-for-visual-composer-2

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

front-end-editor-for-visual-composer-3

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

front-end-editor-for-visual-composer-4

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

front-end-editor-for-visual-composer-5

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

front-end-editor-for-visual-composer-6

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

front-end-editor-for-visual-composer-7

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

front-end-editor-for-visual-composer-8

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

front-end-editor-for-visual-composer-9

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.

Open a Page for Editing

Open a Page for Editing

Get a copy of the transcript of this guide (pdf)

open-a-page-for-editing

 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.