Skip to Main Content

How to cut and export a Visual Composer layout

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Many of you have already heard of Visual Composer. This is a premium WordPress plugin that allows you to create professional layouts without having to use code (or almost).

Many WordPress themes these days are compatible with this plugin and you will often notice that in the demos of these themes, there are sections that interest you and that you will want to copy to your page again.

Only, at the time of writing this tutorial, Visual Composer does not allow you to copy a section (line) and paste it on an existing page.

In this tutorial, I would explain to you how I did to achieve this result.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

Make a copy of the relevant pages

We are going to make changes that may invalidate a layout. You must therefore necessarily make a copy of your current page. The page on which you want the changes to apply.

You can read this tutorial on WordPress page duplication.

What you need to know about Visual Composer before you begin

If Visual composer makes your job easier, it is certainly because it does the dirty work in the background, that of adding WordPress tags (shortcode). The work it does is to organize your layout which is inspired a lot by bootstrap (HTML5 Framework). 

This is the reason why when you activate the classic mode, the content of the editor will be almost unreadable for you.

Why export a section from one page to another

Typically WordPress theme writers offer demos with different features (section), and sometimes it can happen that you only need one section on a page, so how to copy only this section on another page?

An easy solution would have been to delete the elements from this page one by one and copy the final content, but this method is a bit long.

Also discover our tutorial on How to Create a Pro Web Page

Here, I will show you how to export a section from one page to another using the shortcode generated by Visual Composer.

How to use Visual Composer shortcodes

Visual Composer uses paired shortcodes, as opposed to the single shortcode. Here is an example of a paired shortcode:

[Example] ... [/ instance]

In this case, the content between [example] and [/ example] will be controlled by the shortcode. So to copy a section, we will use it.

Step one: Locate the section you want to copy

We'll start by locating the section we want to copy. Take this page so the section we want to copy is called " BUSINESSES SUPPORTED ».

Section to copy visual composer

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

What we are going to do is modify this page and locate the element on the mode " Publisher Of visual composer.

Section to copy visual composer editor

We will then add an identifier to this section by clicking on the “  change From the section.

Edit tab visual composer editor

From there, scroll down until you find the " Row Id "Who should be with you" Line id And add "section-to-copy".

Section to copy visual composer identifier field

Once done, click on " Save Change ". You should see text at the very top of this section like in the following image:

Visual composer identifier

Step Two: How to Copy Localized Content

We're going to go into editor mode " Fashion " or " Classic mode Which should display the WordPress visual editor. From there, do a search for the expression we added as a section identifier. On Windows you will use " CTRL-F "On mac is" COMMAND + F ».

You will need to have a result similar to this.

Copy section visual editor

Remark : For better compatibility, I invite you to switch to text editor mode before making this copy.

Now that we have found this code, we will read the text from there in reverse to find the following shortcode "

" You can even search on " vc_row This will highlight the opening and closing shortcode that wraps the section we want to copy.

Copy visual content content

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

We will start with the first shortcode that contains our identifier to the next shortcode. This is the section we will add to our new page.

Copy code wordpress visual composer

You can repeat the procedure with the other items you want to add.

Discover also some themes and premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Advert Flap Pro

Advert Flap Pro is a premium WordPress animated ad management plugin. This is one of the most effective ways if you want to get an ad or advertisement to your website visitors without however using popups.Wordpress advert flap pro plugin

Creating ads is as simple as choosing your style, entering your text, and previewing your ad. Once you are satisfied, choose the pages on which you want to display or hide them and click publish. As simple as that!

Discover How to change the layout of your WordPress blog

It works on all modern browsers (including iPads and iPhones). It's perfect for specials, sales notices, item promotions, cookie notices, important news, new products, and more ...

Download | Demo | Web hosting

2. Social Wall Addon for UserPro

UserPro can be a lot more fun with a social wall. This is what its Social Wall extension brings. With the Social Wall plugin, you can create a wall on your website and provide your members with a refreshing way to interact with the community.

Social wall addon for userpro

The WordPress Social Wall plugin allows your users to: share messages with each other, share images, comment on other people's publications, users can like or dislike a post, they can choose to display the wall only for logged in users or for all users, administrators can delete user posts or comments, etc.

Download | Demo | Web hosting

3. Driver

Chauffeur is a powerful premium WordPress limo reservation plugin for businesses of all sizes. It can be used by limousine and shuttle operators. With this plugin, you can easily take reservations for any defined route. It will help you improve customer service and manage your limousine rental business online.

Driver

It offers a simple, step-by-step booking process with support for multiple payment gateways, email and sms notifications, WooCommerce plugin, Google Calendar and an intuitive control panel.

As features we will have among others: the ability to create, modify or delete reservation forms, the support of the shortcodes, the specification of the types of service offered, the precision of the minimum and maximum rental time of the limousine, the specification of the reservation period, the precision of the time interval between reservations of the same vehicle, the physical geolocation of your company, specification of routes available in the reservation system, and much more.

Discover also these 10 WordPress plugins to improve search on your blog

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Download Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

Here ! That's all for this tutorial, I hope it will help you easily copy certain sections on your pages. Do not hesitate to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

And if you have any suggestions or remarks, leave them in our section Comments.

... 

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
13 shares
Share10
tweet
Save3