{"id":87770,"date":"2022-05-03T08:42:48","date_gmt":"2022-05-03T06:42:48","guid":{"rendered":"https:\/\/rmarketingdigital.com\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress\/"},"modified":"2021-01-11T03:54:03","modified_gmt":"2021-01-11T06:54:03","slug":"ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/","title":{"rendered":"Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Meet-The-Visual-Composer\" >Meet The Visual Composer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Installing-The-Visual-Composer\" >Installing The Visual Composer<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Option-1-Purchase-Your-Own-Copy-To-Use-On-Your-WordPress-Site\" >Option 1: Purchase Your Own Copy To Use On Your WordPress Site<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Option-2-Visual-Composer-Was-Bundled-With-Your-WordPress-Theme\" >Option 2: Visual Composer Was Bundled With Your WordPress Theme<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Getting-Started-With-The-Visual-Composer-Page-Builder\" >Getting Started With The Visual Composer Page Builder<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Page-Builder-Elements\" >Page Builder Elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Visual-Composer-Extensions\" >Visual Composer Extensions<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Backend-Frontend-Editing\" >Backend &amp; Frontend Editing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Adding-Editing-Page-Elements\" >Adding &amp; Editing Page Elements<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Popular-Compatible-Plugins\" >Popular Compatible Plugins<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Advanced-Options-For-The-Visual-Composer\" >Advanced Options For The Visual Composer<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultimate-visual-composer-drag-drop-page-builder-guide-for-wordpress-2\/#Wrapping-Up\" >Wrapping up<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<div class=\"container-med\">\n<div class=\"entry atype\">\n<p>The Visual Composer has become one of the top selling page building plugins for WordPress. Since it&#039;s release in May 2011 the plugin has exploded with more than 150,000+ customers (and that&#039;s not counting the hundreds of thousands of users who received a copy bundled with a theme), 200+ add-ons &amp; extensions and hundreds of positive review across the web.<\/p>\n<p>If you don&#039;t already own your own copy of the plugin, perhaps you&#039;ve seen it bundled with a premium WordPress theme in the past or maybe you&#039;ve come across an old Visual Composer guide somewhere on the web. A lot has changed since the Visual Composer was first released so we wanted to guide you through all of the awesome features that make up this powerful plugin.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Meet-The-Visual-Composer\"><\/span>Meet The Visual Composer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img alt='visual-composer2-1758463' class=\"alignnone size-full wp-image-34344\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/visual-composer2-1758463.jpg' width=\"1200\" height=\"710\"><\/p>\n<p>If you&#039;re not familiar, the Visual Composer is a drag &amp; drop page builder plugin for WordPress. This handy dandy plugin takes the hard part out of creating custom looking WordPress articles and pages. There is not coding knowledge required. Simply install the plugin and you can get to work creating your articles and pages. It&#039;s also compatible with most free themes and many premium ones, plus it&#039;s fully compatible with popular plugins like Contact Form 7, Slider Revolution and many others (which we&#039;ll touch on later).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Installing-The-Visual-Composer\"><\/span>Installing The Visual Composer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before you can build your own pages you&#039;ll need to download and install the Visual Composer. There are two ways to secure a copy of the plugin: either <strong>purchase<\/strong> your own copy <em>or<\/em> purchase a <strong>premium theme<\/strong> with the plugin included. The <span style=\"text-decoration: underline;\">plugin works exactly the same<\/span> no matter which route you choose, the only difference in these two methods is how you install it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Option-1-Purchase-Your-Own-Copy-To-Use-On-Your-WordPress-Site\"><\/span>Option 1: Purchase Your Own Copy To Use On Your WordPress Site<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The first way to get your hands on a copy of the Visual Composer is to purchase the plugin for yourself. Simply go to CodeCanyon, add a copy of the Visual Composer to your basket (we recommend adding the extra support so you&#039;ll have a full year of assistance from the plugin author at your disposal) and complete your purchase.<\/p>\n<p><img alt='purchase-visual-composer-2934775' class=\"alignnone size-full wp-image-37991\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/purchase-visual-composer-2934775.jpg' width=\"1100\" height=\"750\"><\/p>\n<p>Next navigate to your downloads page. Click on the green Download button next to the Visual Composer plugin you just purchased and select the Installable WordPress File Only.<\/p>\n<p><img alt='download-visual-composer-9882071' class=\"alignnone size-full wp-image-37992\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/download-visual-composer-9882071.jpg' width=\"1100\" height=\"630\"><\/p>\n<p>Now, log into your WordPress admin panel and navigate to <em>Plugins&gt; Add new<\/em>. Click on the <em>Upload Plugin<\/em> button at the top of the screen.<\/p>\n<p><img alt='upload-plugin-1926156' class=\"alignnone size-full wp-image-37993\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/upload-plugin-1926156.jpg' width=\"1110\" height=\"540\"><\/p>\n<p>Select the Visual Composer zip file you downloaded from CodeCanyon. Then just click to install and activate the plugin.<\/p>\n<p>Because you purchased the plugin you will also need to add your license code to finish the activation process. Just click on the link at the top of your screen and then on the giant blue button to <em>activate your copy<\/em> of Visual Composer.<\/p>\n<p><img alt='click-to-activate-visual-composer-5879417' class=\"alignnone size-full wp-image-37994\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/click-to-activate-visual-composer-5879417.jpg' width=\"1110\" height=\"510\"><\/p>\n<p>This will open a portal for you to allow WPBakery to verify your purchase. Click the big green <em>Approve<\/em> button. Don&#039;t worry - you&#039;re only giving WPBakery permission to confirm that your username \/ email really did purchase a copy of the Visual Composer.<\/p>\n<p><img alt='activate-via-envato-4690753' class=\"alignnone size-full wp-image-37995\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/activate-via-envato-4690753.jpg' width=\"1200\" height=\"1000\"><\/p>\n<p>Just follow the prompts to complete activation and return to your WordPress admin panel. Now you&#039;re ready to start building!<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Option-2-Visual-Composer-Was-Bundled-With-Your-WordPress-Theme\"><\/span>Option 2: Visual Composer Was Bundled With Your WordPress Theme<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you purchased a theme with the Visual Composer included installation is different, and it can also vary by author. We&#039;ll show you how to install the plugin if you&#039;re using a R Marketing Digital theme like Total (and it should be pretty similar with most other premium themes).<\/p>\n<p>First you will need to download and install your WordPress theme. If you purchased your theme from Themeforest it&#039;s the same process as downloading the Visual Composer. Log into your Themeforest account and go to your downloads page. Then locate your theme, click on the download button and select the installable WordPress file only.<\/p>\n<p><img alt='download-total-theme-4578495' class=\"alignnone size-full wp-image-37997\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/download-total-theme-4578495.jpg' width=\"1100\" height=\"630\"><\/p>\n<p>Next log into your WordPress installation and click on <em>Appearance&gt; Themes&gt; Add New<\/em>. Then click on the <em>Upload Theme <\/em>option at the top of the page. You will have to open the downloaded zip file to locate the installable WordPress file. This is because the Total theme is bundled with added features like premium plugins, sample data and PSD files.<\/p>\n<p><img alt='install-total-8093367' class=\"alignnone size-full wp-image-37998\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/install-total-8093367.png' width=\"850\" height=\"300\"><\/p>\n<p>Once you&#039;ve located the file you can upload, install and activate the theme. After activation Total will prompt you to <em>install recommended plugins<\/em> - including the Visual Composer.<\/p>\n<p><img alt='activate-total-2328449' class=\"alignnone size-full wp-image-38002\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/activate-total-2328449.jpg' width=\"1025\" height=\"650\"><\/p>\n<p>Just click the link to <em>Begin Installing Plugins<\/em>. Select <em>Install<\/em> from the bulk actions dropdown, check all the plugins that you want to install and then click <em>Apply<\/em>.<\/p>\n<p><img alt='install-recommended-plugins-3898279' class=\"alignnone size-full wp-image-38003\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/install-recommended-plugins-3898279.jpg' width=\"1040\" height=\"625\"><\/p>\n<p>That&#039;s all you have to do! No need to activate the Visual Composer via Envato. Because you purchased a theme instead of your own copy of the plugin <span style=\"text-decoration: underline;\">you do not have a license code to verify<\/span> and you will not have access to plugin updates until they are provided to you by the theme author.<\/p>\n<p><img alt='optional-vc-activation-3581623' class=\"alignnone size-full wp-image-38004\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/optional-vc-activation-3581623.jpg' width=\"1000\" height=\"620\"><\/p>\n<p>Of course if you want to purchase your own copy to receive updates faster you certainly may, but it is not required to use the Visual Composer with your theme. With that one, you can move on to actually using the plugin.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Getting-Started-With-The-Visual-Composer-Page-Builder\"><\/span>Getting Started With The Visual Composer Page Builder<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now that you have Visual Composer installed it&#039;s time to get started with your plugin settings. In your WordPress admin panel you should now see a Visual Composer option. Click on it to open your settings page.<\/p>\n<p><img alt='vc-general-settings-7715745' class=\"alignnone size-full wp-image-38011\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/vc-general-settings-7715745.jpg' width=\"1085\" height=\"805\"><\/p>\n<p>The <strong>General Settings<\/strong> tab contains simple options for enabling \/ disabling responsive elements from stacking on small screens (so you can have a standard three column row become three single column rows vs. shrinking the three column row on mobile), selecting a Google font subset and a rest button for turning the Visual Composer guided tours back on.<\/p>\n<p><img alt='vc-role-manager-2201025' class=\"alignnone size-full wp-image-38012\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/vc-role-manager-2201025.jpg' width=\"1090\" height=\"1500\"><\/p>\n<p>If you&#039;re website uses multiple user roles then the Visual Composer <strong>Role Manager<\/strong> will certainly come in handy. This setting page allows your to restrict user access to various Visual Composer features based on role. This way you can allow admins access to all features while limiting editors to only blog pages and contributors to nothing at all.<\/p>\n<p>We mentioned this earlier during installation, but the\u00a0<strong>Product License<\/strong>\u00a0tab is where you can verify your license code if you purchased your own copy of the plugin. If your copy of Visual Composer came bundled with a theme you can ignore this section.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Page-Builder-Elements\"><\/span>Page Builder Elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img alt='visual-composer-elements-4193487' class=\"alignnone size-full wp-image-38005\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/visual-composer-elements-4193487.jpg' width=\"1040\" height=\"570\"><\/p>\n<p>The Visual Composer comes with 34 standard page builder elements for many features you&#039;d want to add to your pages (the screenshot above shows them all, plus the Contact Form 7 element which we talk about later). Many of the elements include added options for colors, borders, padding, margins, custom CSS, animations and more. Here&#039;s a quick rundown of what&#039;s included:<\/p>\n<ul>\n<li><strong>Rows<\/strong> are the page of your pages. You&#039;ll use the row element to create columns and to insert all of your other page elements.<\/li>\n<li><strong>Text Blocks<\/strong> are exactly what they sound like - blocks of text. using the standard WordPress WYSIWYG editor you can add and format text with this module.<\/li>\n<li><strong>Icons<\/strong> include font icons from the following icon libraries: FontAwesome, Open Iconic, Typicons, Entypo, Linecons and Mono Social.<\/li>\n<li><strong>Separator &amp; Separator With Text<\/strong> are ways to create line (and or text) breaks between sections you create on your pages.<\/li>\n<li><strong>Message Boxes<\/strong> are great for adding notes, alerts or other boxed massages.<\/li>\n<li><strong>Facebook, Tweet, Google+ and Pinterest<\/strong> are all simple social sharing buttons you can add for users to share the page you are creating.<\/li>\n<li><strong>FAQs<\/strong> are toggles that can be used for adding hidden content users can reveal as they read through your page.<\/li>\n<li>The<strong> Single Image<\/strong> is just that - a simple image with added options for sizing, animation, link and more.<\/li>\n<li><strong>Tabs, Tours &amp; Accordions<\/strong>\u00a0are similar to the FAQs in that they contain hidden or collapsible content but with the first section open.<\/li>\n<li>TO <strong>Pageable Container<\/strong> is a basic content slider (but you can insert just about any page builder element into each container \u201cpage\u201d).<\/li>\n<li><strong>Custom Headings<\/strong> make it easy to add your own headings to sections using custom fonts, sizing, colors and more.<\/li>\n<li><strong>Buttons<\/strong> allow you to add links to other pages or external websites.<\/li>\n<li>TO <strong>Call to Action<\/strong> is a callout box with an added button that catches users attention and allow you to add a bit of convincing content.<\/li>\n<li>The <strong>Widgetised Sidebar<\/strong> allows you to insert your own custom sidebar anywhere on the page.<\/li>\n<li>The <strong>Video player<\/strong> makes it easy to insert different video formats supported by WordPress.<\/li>\n<li><strong>Google maps<\/strong> is another straightforward option - just paste in your Google Map code to insert a map on your page.<\/li>\n<li><strong>Progress Bars, Pie Charts, Round Charts and Line Charts<\/strong> are all ways to graph or display data or skills.<\/li>\n<li><strong>Empty space<\/strong> makes it simple to add a vertical break between elements.<\/li>\n<li><strong>Article, Media, Article Masonry and Media Masonry Grids<\/strong> are all custom grids you can add to pages (with the option to mix and match article or media types).<\/li>\n<\/ul>\n<p><img alt='widget-elements-9492292' class=\"alignnone size-full wp-image-38007\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/widget-elements-9492292.png' width=\"1040\" height=\"290\"><\/p>\n<p>The plugin also includes 8 <strong>widget elements<\/strong>\u00a0that can be used to build your own sidebar if you choose to do so. These become helpful when creating custom landing pages where your sidebar might not be in a typical page location, or if your entire website is a large network of landing pages with no two using the same sidebar.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Visual-Composer-Extensions\"><\/span>Visual Composer Extensions<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The basic Visual Compose elements are great for getting started, but eventually you&#039;ll want or need more to create your custom page layouts. This is possible via extensions. There are a few different sources for Visual Composer extensions.<\/p>\n<p><img alt='total-elements-7009048' class=\"alignnone size-full wp-image-38006\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/total-elements-7009048.jpg' width=\"1040\" height=\"640\"><\/p>\n<p>The first way to <strong>extend your Visual Composer is via your theme<\/strong>. A great example is our Total WordPress theme which includes 39 added page builder elements. These are included exclusively with Total to work with it&#039;s features, so you must have the theme installed and active to use them. Total includes extensions for custom article types (testimonials, staff, portfolios), custom galleries, simple sliders, social and much more. This makes it easier for you to add the content you want where you want it.<\/p>\n<p><img alt='third-party-vc-addons-1796382' class=\"alignnone size-full wp-image-38015\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/third-party-vc-addons-1796382.png' width=\"1170\" height=\"650\"><\/p>\n<p>If your theme doesn&#039;t include any extensions you can install\u00a0<strong>third party Visual Composer Extensions<\/strong>. These can range from free to $55 and are available from a variety of authors on CodeCanyon and around the web. If you&#039;re looking to add a few extra features like pricing tables and social then the free Symple Shortcodes plugin is the way to go (we created it here at R Marketing Digital after all). If you want to add a boatload more options then a premium plugin such as Ultimate Add-on&#039;s might be right for you. There are literally hundreds of options - you can see a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/vc.wpbakery.com\/addons\/\">full list of compatible add-ons<\/a> on WPBakery.<\/p>\n<p>However you choose to extend your Visual Composer we recommend that you <span style=\"text-decoration: underline;\">don&#039;t use all the theme and plugin extensions at the same time<\/span>. More is not always better - especially in this case. Not only will this create a lot of overlap and duplicate options but it will also significantly slow down your site (a ton of code goes into each page builder element). So pick the extension that works best for you and stick with it.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Backend-Frontend-Editing\"><\/span>Backend &amp; Frontend Editing<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>With the Visual Composer you aren&#039;t limited on how you can build and edit your pages. With this powerful plugin you have the option to makes changes from the modular backend or from the visual frontend.<\/p>\n<div id=\"attachment_38013\" style=\"width: 1060px\" class=\"wp-caption alignnone\"><img alt='vc-back-end-3186386' aria-describedby=\"caption-attachment-38013\" class=\"size-full wp-image-38013\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/vc-back-end-3186386.png' width=\"1050\" height=\"634\"><\/p>\n<p id=\"caption-attachment-38013\" class=\"wp-caption-text\">Visual Composer Backend Editor<\/p>\n<\/div>\n<p>If you choose to use the <strong>backend editor<\/strong> each element is displayed as a modular element that you can insert, drag and drop into place. This method is great if you want to quickly layout a wireframe of what you want your page to look like and can also be faster than the frontend if you have a slower server or internet connection.<\/p>\n<p>The backend editor is fairly easy to use. Simply click on the blue button for the <em>Backend Editor<\/em> to enable the Visual Composer for the page or article you are editing.<\/p>\n<p><img alt='enable-editor-1188980' class=\"alignnone size-full wp-image-38019\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/enable-editor-1188980.png' width=\"763\" height=\"265\"><\/p>\n<p>Then click on the turquoise button to <em>+ Add Elements<\/em>.<\/p>\n<p><img alt='add-elements-8418508' class=\"alignnone size-full wp-image-38020\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/add-elements-8418508.png' width=\"824\" height=\"716\"><\/p>\n<p>From here you can start inserting any and all page elements you wish!<\/p>\n<div id=\"attachment_38014\" style=\"width: 1260px\" class=\"wp-caption alignnone\"><img alt='total-builder-8207673' aria-describedby=\"caption-attachment-38014\" class=\"size-full wp-image-38014\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/total-builder-8207673.jpg' width=\"1250\" height=\"800\"><\/p>\n<p id=\"caption-attachment-38014\" class=\"wp-caption-text\">Visual Composer Frontend Editor<\/p>\n<\/div>\n<p>The <strong>frontend editor<\/strong> offers a much better view of what your final page will look like since it&#039;s essentially a real-time visual editor. It allows you to insert all of the same page builder elements as the backend editor with the added benefit of being able to actually see them instead of a module. You can see how big a 300px image really looks, or if a purple button with a #6e2f93 hex value really pops.<\/p>\n<p>To enable frontend editing click on either of the two\u00a0<em>Frontend Editor<\/em> options for your page or article.<\/p>\n<p><img alt='enable-frontend-editing-1868596' class=\"alignnone size-full wp-image-38021\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/enable-frontend-editing-1868596.png' width=\"824\" height=\"430\"><\/p>\n<p>This will refresh your screen and take you to a live frontend preview of your article or page with all the same page building options as the backend editor.<\/p>\n<p><img alt='vc-frontend-editing-2515888' class=\"alignnone size-full wp-image-38028\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/vc-frontend-editing-2515888.jpg' width=\"1217\" height=\"741\"><\/p>\n<p>Just click to start adding elements. The main difference here is that you can now see elements as you insert them and you can use the <em>preview options<\/em>\u00a0in the top bar to get an idea of how your page will look like on desktops, laptops, tablets and phones.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Adding-Editing-Page-Elements\"><\/span>Adding &amp; Editing Page Elements<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Whether you use the back or front -end editor you&#039;ll have the same options for customizing your various page builder elements. While options do vary between elements there are a few key features to be aware of after inserting your element.<\/p>\n<div id=\"attachment_38023\" style=\"width: 1060px\" class=\"wp-caption alignnone\"><img alt='edit-row-2628342' aria-describedby=\"caption-attachment-38023\" class=\"wp-image-38023 size-full\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/edit-row-2628342.jpg' width=\"1050\" height=\"746\"><\/p>\n<p id=\"caption-attachment-38023\" class=\"wp-caption-text\">Visual Composer Row Options<\/p>\n<\/div>\n<p>No matter what you want to add to your page <em>you must insert a row first<\/em>. Once inserted you can hover on the frontend element to reveal the blue\u00a0<strong>row options<\/strong> (in the backend these are always visible at the top of each row).<\/p>\n<ul>\n<li>The first <strong>Row icon<\/strong> is where you can click to drag &amp; drop the row to a new position on your page.<\/li>\n<li>The <strong>Pencil<\/strong> icon opens options for your row settings. These may vary based on your theme. With the Total theme you will see options for local scroll ID, row stretch (for full-width rows), full height row, minimum height, visibility on mobile, centered content, equal heights columns, animation, typography, max width, column spacing , background video or parallax and design options (margin, border, padding, background color \/ image).<\/li>\n<li><strong>Columns<\/strong> are to set the number of columns in your row. There are default options for up to 6 columns, but you can also set your own custom column layout if you wish.<\/li>\n<li><strong>Plus<\/strong> adds a new row beneath the one you are editing.<\/li>\n<li>The <strong>Duplicate<\/strong> icon will clone your current row and all its contents (aka all the elements you&#039;ve inserted into the row). This is great if you want to reuse a row layout multiple times on the same page.<\/li>\n<li><strong>Trash<\/strong> is simply to delete an entire row and its contents.<\/li>\n<\/ul>\n<div id=\"attachment_38024\" style=\"width: 1060px\" class=\"wp-caption alignnone\"><img alt='edit-column-1461750' aria-describedby=\"caption-attachment-38024\" class=\"wp-image-38024 size-full\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/edit-column-1461750.jpg' width=\"1050\" height=\"746\"><\/p>\n<p id=\"caption-attachment-38024\" class=\"wp-caption-text\">Visual Composer Column Options<\/p>\n<\/div>\n<p>When you hover on a row in the frontend editor you will also see yellow <strong>column options<\/strong> (in the backend you will find the same options &amp; icons displayed above each column).<\/p>\n<ul>\n<li>The first <strong>Column icon<\/strong> is the same as rows - click on it to drag &amp; drop and rearrange columns within their row.<\/li>\n<li>The <strong>Pencil<\/strong> is general column settings. Similarly to rows, column options may vary based on the theme you are using. With Total the following options are available: visibility on mobile, animation, typography, minimum height, design options (margin, border, padding, background), and responsiveness settings (custom offset, width or hidden options based on device).<\/li>\n<li>For columns the <strong>Plus<\/strong> icon will add an element to the top of the column, above any other element already inserted.<\/li>\n<li>Again, the <strong>Trash<\/strong> icon is to delete the entire column plus its contents. After deleting a column the remain columns maintain their dimensions (if you delete 1 of 3 columns, the remaining 2 columns will still be 1\/3 sized columns) so remember to edit your column widths after deleting.<\/li>\n<\/ul>\n<div id=\"attachment_38025\" style=\"width: 1060px\" class=\"wp-caption alignnone\"><img alt='edit-element-5355812' aria-describedby=\"caption-attachment-38025\" class=\"wp-image-38025 size-full\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/edit-element-5355812.jpg' width=\"1050\" height=\"747\"><\/p>\n<p id=\"caption-attachment-38025\" class=\"wp-caption-text\">Visual Composer Page Element Options<\/p>\n<\/div>\n<p>Within your row or columns you will use the plus icon to insert a page element. In the screenshot above we&#039;ve added a <em>Message box<\/em>. When you insert an element the settings will automatically open. To edit an element that you&#039;ve already added simply hover on the element in the front or back -end editor to reveal the following options:<\/p>\n<ul>\n<li>The <strong>Pencil<\/strong> Icon will open the settings (which are described below).<\/li>\n<li>The <strong>Duplicate<\/strong> icon will clone your page element exactly as you have it (settings and all).<\/li>\n<li>Lastly the <strong>Trash<\/strong> will delete only your page builder element. from the row or column where you inserted it, leaving all other elements in tact.<\/li>\n<\/ul>\n<div id=\"attachment_38026\" style=\"width: 1082px\" class=\"wp-caption alignnone\"><img alt='element-general-9385707' aria-describedby=\"caption-attachment-38026\" class=\"size-full wp-image-38026\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/element-general-9385707.jpg' width=\"1072\" height=\"645\"><\/p>\n<p id=\"caption-attachment-38026\" class=\"wp-caption-text\">Page Element General Options<\/p>\n<\/div>\n<p>When you insert a new element or click on the Pencil icon for an element you will open the page builder element <strong>settings<\/strong>. These are (for the most part) split into multiple tabs to make it easier for you to see all the customization options available to you. In addition to the settings tab, there is a <strong>gear<\/strong> icon in the top right corner that you can use to save your selected settings as a <em>preset<\/em> to be reused later or as a <em>default<\/em> to be automatically used each time you insert this specific element.<\/p>\n<p>The <strong>General tab<\/strong> includes general options for your page element. These will vary based on which element you insert (but in every case editing is as simple as using a dropdown, color picker, check or text box). For example the <em>Message Box<\/em> in the screenshot above includes options for a style, shape, color, icon, text and animation. But if you insert a <em>Button<\/em> instead you would find options for text, url, style, shape, color, size, alignment, icon and animation.<\/p>\n<div id=\"attachment_38027\" style=\"width: 1081px\" class=\"wp-caption alignnone\"><img alt='element-design-7631237' aria-describedby=\"caption-attachment-38027\" class=\"size-full wp-image-38027\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/element-design-7631237.jpg' width=\"1071\" height=\"876\"><\/p>\n<p id=\"caption-attachment-38027\" class=\"wp-caption-text\">Page Element Design Options<\/p>\n<\/div>\n<p>The <strong>Design Options tab<\/strong> is the second standard tab you&#039;ll see on just about every page builder element. From here you can add a custom background (color or image), border, padding and margin to your element. The options to Simplify Controls reduce the CSS box options so you can enter one universal value for each options (margin, border and padding). One note to remember: when you apply a background it is contained within your border. SW <em>increasing your padding<\/em> will increase the visible background your added around your element, but if you<em> increase your margin<\/em> you will increase the empty space around your page element (revealing the row \/ page behind it)<\/p>\n<p>Of course depending on the module you insert your page element may have many more tabs. For example the Visual Composer <em>Grid Item<\/em> has added option tabs for Data Settings and Item Design. And if you are using custom page elements via an extension like the <em>Total Staff Grid<\/em> there can be even more options built-in (such as query options, custom image cropping, meta, social links, excerpts, etc.) depending on what the extension author has included.<\/p>\n<div class=\"gray-box\">\n<p><strong>Note:<\/strong>\u00a0You can checkout a comprehensive list of elements in our <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/totaltheme.wpengine.com\/features\/builder-modules\/\">Total Builder Modules Guide<\/a>. However, the best way to learn what every module does is to play around with the Visual Composer. Create a test page and practice inserting and editing elements. You&#039;ll quickly get the hang of it and be building pages like a pro!<\/p>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"Popular-Compatible-Plugins\"><\/span>Popular Compatible Plugins<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In addition to Visual Composer extensions many popular plugins are compatible with the Visual Composer and add their own page building element automatically. Here are a few of the many plugins you&#039;ll be happy to hear will work seamlessly with the Visual Composer plugin for even better page building.<\/p>\n<p><img alt='woocommerce-elements-1949820' class=\"alignnone size-full wp-image-38008\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/woocommerce-elements-1949820.jpg' width=\"1040\" height=\"360\"><\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/woocommerce\/\"><strong>WooCommerce<\/strong><\/a>: If you want to build a store with WordPress then WooCommerce is the way to go. Not only is this plugin free and full of awesome features but it&#039;s fully compatible with Visual Composer. Once installed and activated WooCommerce will not only add it&#039;s own settings &amp; options, but it also adds <strong>17 new page builder elements<\/strong> for your to play with.<\/p>\n<p><img alt='revolution-4964150' class=\"alignnone size-full wp-image-38009\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/revolution-4964150.jpg' width=\"750\" height=\"451\"><\/p>\n<p><strong>Slider Revolution<\/strong>: Sliders are a great way to add an attention grabbing and content packed section to any page and Slider Revolution is a perfect plugin to do just that. With this plugin you can drag and drop elements like text, buttons, images and even videos all with added animations &amp; effects to create impressive sliders. See it in action on many of our <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/total.wpexplorer.com\/\">Total demos<\/a>!<\/p>\n<p><img alt='layer-1178447' class=\"alignnone size-full wp-image-38010\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/layer-1178447.png' width=\"1200\" height=\"670\"><\/p>\n<p><strong>LayerSlider<\/strong>: Another great option for sliders is the LayerSlider plugin. It&#039;s just as awesome as Slider Revolution but with a slightly different interface and options. It even includes a custom transition builder so you can create one of a kind animations. It&#039;s also one of the two premium sliders bundled with our Total WordPress theme so your know it&#039;s pretty great.<\/p>\n<p><img alt='contact-form7-plugin-7175832' class=\"alignnone size-full wp-image-37262\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/contact-form7-plugin-7175832.png' width=\"772\" height=\"250\"><\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/contact-form-7\/\"><strong>Contact Form 7<\/strong><\/a>: Contact forms are an important part of any website - whether you&#039;re a blogger with a form for business inquiries or a dentist with an appointments form. Contact Form 7 is completely free, flexible and with the Visual Composer inserting your contact forms is easy with the custom form element.<\/p>\n<p><img alt='wpml-2-6919102' class=\"alignnone size-full wp-image-37203\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/WPML-2-6919102.png' width=\"900\" height=\"423\"><\/p>\n<p><strong>WPML<\/strong>: If you need to create a multi-lingual website WPML is one of the premier options for translating your articles and pages. Plus WPML is fully compatible with the Visual Composer so it&#039;s possible to translate each and every custom page you build.<\/p>\n<p><img alt='polylang-translation-plugin-9343936' class=\"alignnone\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/polylang-translation-plugin-9343936.jpg' width=\"772\" height=\"250\"><\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/polylang\/\"><strong>Polylang<\/strong><\/a>: If you don&#039;t want to invest in WPML, Polylang is a great free option that is fully compatible with the Visual Composer (it&#039;s one of the free plugins we recommend to make your WordPress site multilingual).<\/p>\n<p><img alt='yoast-seo-free-wordpress-plugin-7758635' class=\"alignnone size-full wp-image-37770\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/yoast-seo-free-wordpress-plugin-7758635.png' width=\"772\" height=\"250\"><\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wordpress.org\/plugins\/wordpress-seo\/\"><strong>Yoast SEO<\/strong><\/a>: Yoast makes it easy for any user to improve onsite SEO. There are many important SEO functions including sitemaps, meta descriptions, breadcrumbs and more. Best of all - Yoast SEO plays nice with Visual Composer so you can worry about creating better pages instead of researching SEO.<\/p>\n<p><img alt='templatera-template-manager-for-visual-composer-wordpress-addon-wpexplorer-9533357' class=\"alignnone size-full wp-image-30373\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/templatera-template-manager-for-visual-composer-wordpress-addon-wpexplorer-9533357.jpg' width=\"750\" height=\"381\"><\/p>\n<p><strong>Templatera<\/strong>: This plugin isn&#039;t just compatible - it was created by WPBakery (the authors of Visual Composer) to extend the functionality of their page builder. Templatera makes it possible to save and reuse templates so building repeat pages is easy. Once installed the plugin adds it&#039;s own option within the Visual Composer settings in your WordPress admin panel so it&#039;s simple to import, export and reuse your templates (which we thought was such an awesome feature that we bundled this plugin with Total too).<\/p>\n<p>And we&#039;re sure there are many more great compatible plugins! If you&#039;re in doubt about a new plugin&#039;s compatibility with the Visual Composer just contact the author of your new plugin and ask.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Advanced-Options-For-The-Visual-Composer\"><\/span>Advanced Options For The Visual Composer<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>For more advanced users there are a couple extra options within the Visual Composer you can use to add custom shortcodes to your page builder and to create custom media grids.<\/p>\n<p><img alt='shortcode-mapper-3318259' class=\"alignnone size-full wp-image-38017\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/shortcode-mapper-3318259.png' width=\"980\" height=\"400\"><\/p>\n<p>First is the\u00a0<strong>Shortcode Mapper<\/strong>. This option is found within the Visual Composer settings and can be used to map your own custom shortcodes to the Visual Composer. This is great if you have a shortcode that you love (like maybe one for a pricing table) that isn&#039;t included with the Visual Composer by default.<\/p>\n<p>The second advanced option is the included <strong>Grid Builder<\/strong>. With this features you can create custom grids (similar to the media and article grids) with your own custom layouts for your content. For example, you can create a custom blog article grid with round images, article author&#039;s name in a bold custom font, custom excerpt length, a read more button and a second button linking to a recommended product. Get the idea? You can build any grid layout you want with tons of options for elements, colors, margins, borders and more.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Wrapping-Up\"><\/span>Wrapping up<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>There is tons you can do with WordPress and the Visual Composer. If you want to see the page builder at work just take a look at any of our <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/total.wpexplorer.com\/\">Total theme<\/a>\u00a0demos where we&#039;ve tried to showcase the variety of styles and layouts that can be created using the Visual Composer.<\/p>\n<p>And if we missed something<strong>\u00a0just ask us<\/strong>. We&#039;d be happy to tell you anything you want to know about the Visual Composer and how it works -<em>\u00a0leave a comment below<\/em>. Thanks for reading!<\/p>\n<\/div>\n<p><script type=\"application\/ld+json\">{\n    \"@context\": \"http:\\\/\\\/schema.org\",\n    \"@type\": \"BlogPosting\",\n    \"mainEntityOfPage\": {\n        \"@type\": \"WebPage\",\n        \"@id\": \"https:\\\/\\\/www.wpexplorer.com\\\/visual-composer-guide-wordpress\\\/\"\n    },\n    \"headline\": \"Ultimate Visual Composer Drag &#038; Drop Page Builder Guide For WordPress\",\n    \"image\": {\n        \"@type\": \"ImageObject\",\n        \"url\": \"https:\\\/\\\/www.wpexplorer.com\\\/wp-content\\\/uploads\\\/visual-composer-guide-for-wordpress.jpg\",\n        \"width\": 900,\n        \"height\": 450\n    },\n    \"datePublished\": \"2016-05-20T12:49:08-06:00\",\n    \"dateModified\": \"2019-11-20T17:55:48-06:00\",\n    \"author\": {\n        \"type\": \"Person\",\n        \"name\": \"Kyla\"\n    },\n    \"publisher\": {\n        \"@type\": \"Organization\",\n        \"name\": \"R Marketing Digital\",\n        \"logo\": {\n            \"@type\": \"ImageObject\",\n            \"url\": \"https:\\\/\\\/www.wpexplorer.com\\\/wp-content\\\/themes\\\/wpexplorer\\\/images\\\/wpexplorer-organization-logo.png\",\n            \"width\": 400,\n            \"height\": 60\n        }\n    },\n    \"description\": \"The ultimate Visual Composer guide. Detailed guide full of tips & tricks on how to use the Visual Composer drag and drop pager builder plugin for WordPress.\"\n}<\/script><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The Visual Composer\u00a0has become\u00a0one of the top selling page building plugins for WordPress. Since it\u2019s release in May 2011 the plugin has exploded with more than 150,000+ customers\u00a0(and that\u2019s not&#8230;<\/p>","protected":false},"author":1,"featured_media":87771,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1351],"tags":[],"class_list":["post-87770","post","type-post","status-publish","format-standard","has-post-thumbnail","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"The Visual Composer\u00a0has become\u00a0one of the top selling page building plugins for WordPress. Since it\u2019s release in May 2011 the plugin has exploded with\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress\" \/>\n<meta property=\"og:description\" content=\"The Visual Composer\u00a0has become\u00a0one of the top selling page building plugins for WordPress. Since it\u2019s release in May 2011 the plugin has exploded with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-03T06:42:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/visual-composer-guide-for-wordpress-7231098.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"450\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress\",\"datePublished\":\"2022-05-03T06:42:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/\"},\"wordCount\":4098,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/visual-composer-guide-for-wordpress-7231098.jpg\",\"articleSection\":[\"Wordpress\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/\",\"name\":\"Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/visual-composer-guide-for-wordpress-7231098.jpg\",\"datePublished\":\"2022-05-03T06:42:48+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"The Visual Composer\u00a0has become\u00a0one of the top selling page building plugins for WordPress. Since it\u2019s release in May 2011 the plugin has exploded with\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/wordpress\\\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/visual-composer-guide-for-wordpress-7231098.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/visual-composer-guide-for-wordpress-7231098.jpg\",\"width\":900,\"height\":450,\"caption\":\"visual-composer-guide-for-wordpress-7231098-6113152-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress - R Marketing Digital","description":"The Visual Composer has become one of the top selling page building plugins for WordPress. Since it&#039;s release in May 2011 the plugin has exploded with","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/","og_locale":"en_US","og_type":"article","og_title":"Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress","og_description":"The Visual Composer\u00a0has become\u00a0one of the top selling page building plugins for WordPress. Since it\u2019s release in May 2011 the plugin has exploded with","og_url":"https:\/\/rmarketingdigital.com\/en\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/","og_site_name":"R Marketing Digital","article_published_time":"2022-05-03T06:42:48+00:00","og_image":[{"width":900,"height":450,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/visual-composer-guide-for-wordpress-7231098.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress","datePublished":"2022-05-03T06:42:48+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/"},"wordCount":4098,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/visual-composer-guide-for-wordpress-7231098.jpg","articleSection":["Wordpress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/","url":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/","name":"Ultimate Visual Composer Drag &amp; Drop Page Builder Guide For WordPress - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/visual-composer-guide-for-wordpress-7231098.jpg","datePublished":"2022-05-03T06:42:48+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"The Visual Composer has become one of the top selling page building plugins for WordPress. Since it&#039;s release in May 2011 the plugin has exploded with","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/fr\/wordpress\/ultime-visual-compositeur-glisser-deposer-guide-de-creation-de-page-pour-wordpress-2\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/visual-composer-guide-for-wordpress-7231098.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/visual-composer-guide-for-wordpress-7231098.jpg","width":900,"height":450,"caption":"visual-composer-guide-for-wordpress-7231098-6113152-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/87770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=87770"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/87770\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/87771"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=87770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=87770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=87770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}