![](/uploads/1/2/5/4/125499831/266899865.jpg)
Please note: this guide only applies to webpages which use the WPBakery Page Builder.
WPBakery Page Builder screens look like this:
A button of Default color has its color derived from the Theme Color set in the plugin options. You can choose to display an icon along with the button text. The icon can be a icon font or an image. Choose from over 30 animations to create an animated button. 1 From the WPBakery Page Builder screen, click on the Add Element button. 2 In the Add Element pop-up screen, search for Blog and click on it to be added to the page. 3 When the shortcode is added, a new pop-up screen called Blog Settings opens.
If your editing screen looks like this below, then this guide doesn’t apply to you. Instead, see our separate guide adding images using the classic editor:
Adding a single image with WPBakery Page Builder:
- Firstly, if you have a large image, resize it on your computer, before it’s uploaded to your website. Large image files (e.g. straight from a digital camera) may be several megabytes in size and can increase the loading time of your webpages for visitors.
- Next, ensure WPBakery Page Builder is activated on your page. If it’s not, you’ll see a button like this:
- If necessary, setup rows and columns on your page, so you can create your desired page layout.
- Click on the + icon to add a new element.
- Add the “Single Image” block.
- On the popup screen, add your image into the box indicated below in red:
- Ensure the “Upload Files” tab is displayed, then either drag and drop the image file from your computer into the screen, or click the “Select Files” button.
- Your image will upload within a few seconds.
- Alternatively, if you want to use an image file that’s already been uploaded to your website in the past, click on “Media Library” instead.
- Generally using the “full” image size should be fine (indicated above in green), as long as your image file is suitable for web use. Or you can type “medium” into here to display your image smaller.
- Choose your image alignment (highlighted above in purple). In most cases, it looks best to centrally-align your pictures, rather than left or right.
- Then, click “Save changes“.
- You can now preview your page:
Adding links to your images:
- In the image editing dialog, under “On click action“, choose “Open custom link” (in red below):
- Add a URL into the “Image link” box (indicated in green above). This can be a file link, such as a link to a PDF or Word file.
Editing your block:
If you need to edit an existing image block:
- Hover your mouse over the block.
- Click on the “Edit” icon, as indicated in red below:
- You’ll then see the editing screen.
If you’re using text blocks:
Within WPBakery Page Builder, if you’re using text blocks, you can insert images straight into these paragraphs, rather than using a separate image block. This may be ok for simple layouts. To do this, follow our separate guide on using the “classic editor”.
Adding image galleries:
If you want to display multiple images, then use the Image Gallery block:
- Ensure WPBakery Page Builder is activated on your page. If it’s not, you’ll see a button like this:
- If necessary, setup rows and columns on your page, so you can create your desired page layout.
- Click on the + icon to add a new element:
- Click on “Image Gallery“:
- In the popup screen, under “Gallery type“, choose “Image grid“:
- Next, choose your gallery images by clicking on the area indicated in green above.
- Ensure the “Upload Files” tab is displayed, then either drag and drop the image file from your computer into the screen, or click the “Select Files” button.
- When uploading lots of images, please be patient as this may take a while to upload and process.
- Alternatively, if you want to use image files that have already been uploaded to your website in the past, click on “Media Library” instead.
- For the pictures you want to use in your gallery, ensure the images have a tick next to them, as indicated in the sample below (where four images have been ticked). Simply click on images to tick / untick them:
- Next, click on the “Add Images” button.
- If necessary, you can change the order of your images by simply dragging them into a different order:
- Choose how many columns to use for your image gallery. Typically, we recommend using two to four columns, but you may want to experiment to find out what works best for your scenario:
- Click on the “Save changes” button at the bottom of the dialog.
- You should now preview your page:
Adding links to your image galleries:
If you need each image, within your image gallery, to have its own clickable link, then change the “On click action” to “Open custom link“. Then add your custom links, one line at a time, in the box below:
Related Articles
- How do I apply new settings to a large number of posts, pages, etc?
- How do I add / edit testimonials on my website?
- How do I add a use columns within the WPBakery Page Builder?
- How do I manage the sidebars on my website?
- How can I quickly find the edit screen for a particular page?
Want a more flexible, powerful visual editor for your pages, without the need for coding? With WPBakery Page Builder, you can create complex layouts using a drag-and-drop editor, from the front or back end of your site. Find out how it all works in our WPBakery Page Builder review.
About WPBakery Page Builder (Formerly Visual Composer)
WPBakery Page Builder, formerly known as Visual Composer, is one of the original WordPress page builders. Ever since WPBakery Page Builder was released, it’s been the most popular page builder plugin for WordPress in the CodeCanyon marketplace and now has 300k+ direct sales.
In October 2017, the original Visual Composer was rebranded to WPBakery Page Builder.The Visual Composer trademark has since been used for a completely different project: a full-fledged website builder – Visual Composer Website Builder.
While the original page builder is still available to purchase from CodeCanyon as WPBakery Page Builder, the brand new Visual Composer, which was rewritten from scratch, is being sold on their own website.
You might be wondering, why would someone rename a popular plugin, especially when is has such a huge market share? Why do the folks behind WPBakery sell their brand new version of Visual Composer as a separate product?
To shed some light on these questions, we’ll inspect them in-depth below.
The Original Visual Composer Rebranded to WPBakery Page Builder – Why?
The original Visual Composer plugin was first released in May 2011 on CodeCanyon. Since then, the page builder market, and WordPress itself, has evolved a lot. However, the original Visual Composer has remained almost the same in terms of UX.
Since it’s a widely-adopted plugin and comes bundled with most Themeforest themes, revamping the plugin from the ground up was sure to create a lot of backlash.
So, rather than revamping the original WordPress plugin from the ground up, the WPBakery team decided to release a brand new product on their own site and name it Visual Composer Website Builder, while maintaining and selling the original product as WPBakery Page Builder.
WPBakery Page Builder vs. Visual Composer Website Builder
In a nutshell, WPBakery is a page builder whereas the new Visual Composer is a website builder.
WPBakery lets you create WordPress pages the way you want with its easy-to-use drag and drop builder. It comes with frontend and backend editors, works seamlessly with any theme, and has tons of other useful features to create a beautiful page without hiring a developer.
On the other hand, Visual Composer comes with all the cool features you’ll need to create a beautiful website. You can customize your sidebar, headers and footers, tweak mobile editing options, and utilize multiple page layouts.
The pricing for WPBakery Page Builder starts at $49 for regular license; whereas, for Visual Composer, it starts at $59.
WPBakery Page Builder Review: Do You Really Need It?
Have you ever wanted to create more complex page layouts than’s possible with WordPress’s built-in editor?
While the TinyMCE editor is handy for writing blog posts with a few pictures, it won’t help you:
- organize your content in rows and columns
- create animated buttons and calls to action
- add eye-catching charts and maps in the middle of your page
If you want to build responsive and complex page layouts in WordPress, without hiring a web designer or learning to code, then WPBakery Page Builder can help.
WPBakery Page Builder is a drag and drop page building tool that allows you to create fully responsive, complex pages in mere minutes.
![Css Css](/uploads/1/2/5/4/125499831/133537013.jpg)
How to Build a Page With WPBakery Page Builder
After installing and activating the plugin, you can get started by creating a new page.
At the top of the editor, you’ll see a couple of new buttons:
You can choose to start editing your page from the backend, where you are now, or you can save the page and click the Frontend Editor button to edit the live version of the page.
We’ll click on the Backend Editor button to start with.
You’ll see a few options appear in the visual editor.
You can choose to add an element or a text box, or choose a template for your page.
![How To Customize Button In Wpbakery How To Customize Button In Wpbakery](/uploads/1/2/5/4/125499831/793751968.png)
There are dozens of default templates available, or you can create and save your own templates.
If you want to design your page yourself, there’re a variety of elements available to place on your page, including:
- images
- icons
- Google maps
- FAQs
- video players
- charts and graphs
- buttons and CTAs
- WordPress widgets
- …and many more.
The list might look a bit overwhelming, but you can sort them by category or search for a particular element using the search box in the top right-hand corner.
Get started by choosing your first element. It will automatically be inserted into a row.
You can add another row of elements to your page by clicking the plus sign at the bottom.
If you hover your cursor over the icon with lines above any row, you can choose to add columns to your row. With columns, different elements can sit side-by-side on the page.
All of the elements available have tons of options for customization, including CSS animations. You can even add extra class names so you can customize the CSS styles more easily.
You can also edit any page from the front end.
Just click the Edit with WPBakery Page Builder link in the toolbar while viewing any page.
In the top right corner menu, you can change your page settings, preview the page in different screen sizes, switch to the backend editor, and click Update to save any changes. Go back to viewing the page by clicking the X.
By default, WPBakery Page Builder is only available for editing pages. But if you navigate to WPBakery Page Builder » Role Manager, you can choose to enable the editor on posts as well.
Build More With WPBakery Page Builder Add-ons
WPBakery, the developers behind WPBakery Page Builder, also have many add-on plugins available.
Here are just a few examples:
- Templatera Template Manager: Create, manage, and set control access to your templates based on user roles or page post types.
- Easy Tables: Create and manage tables with a drag and drop interface.
- Parallax Image and Video Background: Add parallax background images and videos to any page.
- CSS Animator Addon: Add over 40 animations to available CSS effects for each element.
- Woo Products: Add elements to show off your WooCommerce products.
- Team Showcase: Display and manage your team and clients as a responsive grid or as a dynamic slider.
- Easy Form for WPBakery Page Builder: Create and manage easy responsive forms.
There are 200+ add-ons available, so you’ll definitely find the exact function you need.
Many premium themes on CodeCanyon also come with WPBakery Page Builder integration, or even have WPBakery Page Builder packaged with the theme.
Documentation and Support
The official WPBakery Page Builder site has extensive documentation available for every feature of the plugin, plus articles for developers who want to customize their sites even further.
Your purchase of WPBakery Page Builder includes 6 months of support, with options to extend support for another 6 months. Support is provided via a ticket system, where you’ll be required to verify your license.
Our Verdict
WPBakery Page Builder is one of the most popular and highly rated plugins on CodeCanyon, and is the most well-known drag and drop page building plugin on the market.
If you want to create complex page layouts without having to code, WPBakery Page Builder is the best choice.
While there’s a bit of a learning curve to get used to how it works, WPBakery Page Builder is relatively easy to use, and will save you a lot of time. And there are a huge number of add-on plugins available if it doesn’t include the options you need out of the box.
We give WPBakery Page Builder 5 out of 5 stars. Here’s the breakdown of our review scores:
Get WPBakery Page Builder Now »![](/uploads/1/2/5/4/125499831/266899865.jpg)