Hope you’re all well and in the process of getting ready for Black Friday and Cyber Monday sales! We definitely are preparing for sales to succeed; for both you and us.
Visual Composer Black Friday 2020
This year Visual Composer offer discounts from 30% to 40% between 26.11.2020. – 28.11.2020:
[couponplugin id=”3029″ h=”h2″]
[couponplugin id=”3031″ h=”h2″]
[couponplugin id=”3032″ h=”h2″]
Visual Composer Cyber Monday 2020
Shortly after Black Friday, Visual Composer is following up with a strong Cyber Monday deal between 29.11.2020. – 01.12.2020:
[couponplugin id=”3033″ h=”h2″]
What is Visual Composer?
Visual Composer is a WordPress plugin designed to help beginners and professionals build a website using a simple drag and drop editor. It offers a large number of predefined templates and ready-to-use elements which can be used to create a website from scratch as well as working with already existing content. And this complete guide to Visual Composer will help you take advantage of all of its features.
Visual Composer has a user-friendly interface, there is no need for any coding skills to use it, and it is SEO optimized. So, using this excellent WordPress plugin makes it easier to build a professional website, and rank top on Google and other search engines. Moreover, this step-by-step Visual Composer Guide will show you everything you need to know before using the tool to build a website. Enjoy!
Visual Composer Prices and Packages
With other WordPress page builders like Divi or Beaver Builder, you first need to create an account, and only then you can install the plugin on your WordPress website and start using it. But in this case, an account is made for you automatically when you install and activate the free version of Visual Composer Hub or purchase a Premium license. Once your account is made, you can access it through the My Visual Composer dashboard or directly from your WordPress dashboard.
If you are not sure Visual Composer is for you, you can start with the Free version. However, this version comes with limited features, and, to unlock Visual Composers’ full potential, you should consider purchasing one of the Premium versions. Also, as with most other WordPress page builders, Visual Composer provides several Premium packs, based on different company sizes and their needs.
In comparison, the free version only comes with 10 templates and 30 elements. Nevertheless, these features are enough to provide you with everything essential in order to build a simple website. Moreover, you can use the free Visual Composer version on as many sites as you want. So you can use is on several types of sites, like a portfolio, a blog, or a simple landing page for example.
However, if the basic elements are not enough and you want full access to all of the features, you can upgrade to the Premium at any point, risk-free. All Visual Composer Premium versions come with a 15 days money-back guarantee where you get a full refund within that period.
How to add Visual Composer to your WordPress Website
When purchasing a premium version, you will be redirected to a page where you need to fill in your billing information. Then, you will have an option to download a set of required files. But, when you click on a Free version you are automatically redirected to the download page.
After downloading the files, log into your WordPress Admin Dashboard, and click on Plugins. Here, select „Add New“ and upload the file you previously downloaded. This will install and activate the plugin, and Visual Composer should appear in your plugins list as well as in your menu on the left.
How to activate the Visual Composer Hub
Now it’s time to connect your account with the Visual Composer Hub. So, select Visual Composer in the dashboard and then the „Getting Started“ option. From there, you will be presented with a basic overview of the differences between the Free and Premium version and an option to use your license key for the Hub activation.
The process of activating the Free version account is slightly easier. Basically, each free version signup comes with a and activation key. All you need to do is to type in your email to claim the key then copy-paste it into the WordPress Admin dashboard to activate the Visual Composer Hub.
If you have a Premium subscription, go to the My Visual Composer site and log in with the account that created for you when you purchased the license. Then, from the Licenses section simply copy the key and enter it on your Visual Composer account in the WordPress Admin dashboard.
Get Started With Visual Composer
Now that you have installed and activated Visual Composer, it’s time to start building. For this, you can either use the Visual Composer menu or the WordPress “traditional” Page menu. However, when using the Getting Started Visual Composer option, the editor walks you through a step-by-step guide that allows you to select between several layouts. Once you found the one you like, you can start building your page by adding new elements or simply choosing a from-defined template.
You may have already figured out that these elements are going to be your greatest assets when customizing your web page. But before we go deeper into what each element is, it is important to learn how to navigate through Visual Composer and how to use the Visual Composer interface.
1. Frontend editor
The Frontend editor is the first most important part of Visual Compose, as it basically shows you the layout or your page in real-time which is also known as a WYSIWYG or “what you see is what you get” editor. From here, you control and customize your content before publishing. And this feature is possible thanks to Element controls which enables you to customize and edit the content whenever you hover over it.
2. Navigation bar
The second core part of the Frontend editor is the Navigation bar which gives you access to the rest of the features. When opening the Frontend editor, you will notice that the default location of the Navigation bar is on the left side of the screen. However, you can move it around or change its size as you please.
Regardless, the navigation bar is your gateway into all of Visual Composer’s options and tools – at least the ones available with your license choice. Here you find and add elements or templates, open Tree view, check the layout on different devices, open Visual Composer Hub, and more.
3. Drag and drop
The drag and drop feature allows you to quickly and easily edit each page layout and play with the overall structure however you like. So either drag and drop each element on the page or add new ones by dragging them directly from the Add element window and inserting it into a specific place within your layout.
4. Element controls
Each element that you will use while working with Visual Composer has its own set of controls. But generally, they can be divided into 3 categories which are also recognizable through colors:
- Row controls (Blue);
- Column controls (Yellow);
- Element controls (Green).
Hovering over different elements will open their specific quick control options like editing, cloning, or removing which you can use for customization according to your needs.
5. Edit Element window
If you would like to change certain parameters of specific elements, you can easily do so by opening the Edit Element window. Here, you can find a good amount of possibilities of how to make the content fit your vision. You can customize everything from color, shapes, even advanced design options where you can adjust some basic HTML/CSS attributes.
Additionally, you also have an option to rename your custom elements. This makes it a lot easier to find it while working with a Tree view in the future.
6. Tree view
This feature gives you a clear and interactive overview of your layout and all the elements within it. You can see the structure of your content and rearrange the elements if it seems fit. Tree view mode is easily accessible through the Navigation Bar., and every change you make will be automatically saved.
7. Preview, Save, Publish and View a Page with Visual Composer
Changes made on the site are only visible to you until they are saved and published. So before you push your new layouts into the world, click on preview and see what your user will see when the page is made public. If your happy but still have some work to do, click on save and continue customizing. This will ensure your progress is not lost in case of a situation like your internet stopping all of a sudden.
Also, remember to check your mobile responsiveness. Google will penalize those pages that are not optimized for phones and tablets. then, if everything is ready, click on publish so your page becomes public. Don’t worry, you can always return to your Visual Composer Hub and add more value to your page or update your content.
Visual Composer Basic Elements
Now that we learned how to use Visual Composer, let’s see what elements are and which are the most vital elements you will need to build a page from scratch.
1. Basic Visual Composer Elements
Simply put, Visual Composer elements are what your layout is made out of. This includes text blocks, rows, sections, buttons, images, and much more. As mentioned before, the Fre version comes with only 30 basic elements. So, a premium license will come with more and better elements, hence more customization options.
All your available elements are located in the Add element window of the Navigation bar. But you can always get new ones through the Visual Composer Hub. Based on their logic alone, elements are divided into 6 different groups:
- Basic
- Media
- Containers (contains only row/column element)
- Social
- WordPress
- Content
However, elements are often classified into more categories than that.
2. Grid Layout
Another element classification is by layout. The layout separates these elements into two simple categories, structure and content elements. Structure elements consist of rows, columns, and sections, and make up the base of your overall layout structure. On the other hand, Content elements are made out of all the other regular ones and only work if there is a Structure element in place.
This means that before placing content elements like buttons or images, you first have to have a row in place. The row can also be further divided into columns and each empty column can be used to hold a content element.
As you can also see in the video, the row and its layout itself is also a fully customizable element and provides a lot of different combination options for creating a unique structure.
3. Basic Row Options
When adding basic rows, you are able to adjust general properties like the size of a Column Gap, Row and Column width, and Content position in the column. Also, if you want only one row to be visible at a time, you can turn on the Full Height Row option.
4. Sticky Row
But, if you’re looking for a way to make your content more dynamic you can use the Sticky Row option. This element basically allows you to keep a specific content visible while your visitors up and down the page. Not to mention that there are several ways to optimize its parameters and set up a specific behavior of this feature.
5. Adding Content Elements
There are a few different ways to add new elements to the layout. The most common way is to choose one from the Add Element section in the Navigation bar. But there are several less obvious ways to add an element. This includes using the bottom menu which serves as suggestions. But also, hovering over an empty column, or simply using column, or element controls.
Whichever feels more natural to you, that is probably the best way to go with. This is simply because Visual Composer aims at providing you with the best experience and the fastest possible options. So, whatever option you choose, the results are the same.
6. Social Icons and Widgets
Social Media is a large part of our personal everyday life, but it has also become a norm for business strategies as well. So, if you want to connect your site with platforms like Facebook, Instagram, Twitter, or Pinterest, this element will definitely make that easier. Visual Composer Hub essentially divides them into social media elements with incoming (Social Widgets) and outgoing (Social Icons) content. Basically, they are divided by purpose – sharing social media content on your website and sharing your website content on social media.
7. WordPress Default and Custom Widget
These elements allow you to use any WordPress default and custom widgets. All you need to do is to search for the element in the Add Element window, add it, and select a specific widget you would like to use. the Add Element feature will allow you to choose from all available options.
8. WordPress Shortcode Element
WordPress Shortcodes, in laymen terms, are small bits of code that allow you to add some advanced features to your page like for example a video player. WordPress comes with some shortcodes of its own, but some plugins have extra as well. And of course, developers can add even more.
The idea of having shortcodes is to enhance functionality and still keep a simplified process. In other words, have the feature without the plugin which helps with page speed and security. But, on the other hand, there is a possibility that some performance issues will occur when you use too many shortcodes.
9. Gutenberg Element
The Gutenberg element allows you to use the Gutenberg editor which replaces shortcodes with modules. This gives you more design customization options and reduces the chances with the slow loading speed, od other performance hiccups created by shortcodes. But to use it, you will also need to install a separate plugin named Gutenberg into your WordPress and activate it.
10. Compatibility Elements
There are some plugins that are simply too popular to replace or miss out on, like for example Contact Form 7. This is why Visual Composer provides an option to enjoy the best WordPress plugins in the Compatibility Elements list. All of the available extras are found in the Visual Composer Hub and the list is constantly updated.
11. Lightbox
Better user-experience means higher satisfaction and with the Lightbox element, you are definitely going in the right direction. Lighthouse allows visitors to see images from your site in fullscreen mode. This helps to showcase products in higher quality, make storytelling more clear and visible, and create a memorable experience for your users. All you need to do is to enable an OnClick action on the image element. Moreover, there is also a similar element designed for allowing video fullscreen – Video Popup.
12. Custom HTML and JavaScript
And finally. for the more tech-savvy users, there is also an option to insert Custom HTML or JavaScript code to personalize your website even further. In order to start, you will need to use either the Raw HTML or the Raw JS element. From there, you will be able to insert your own code, which will automatically translate into the Frontend editor.
It is important to mention that inserting any custom PHP code via Visual Composer is forbidden due to security issues. So, users who want to use custom PHP code must add it directly into the *.php files on the server.
Conclusion
There are lots of different WordPress plugins that help you to build a website without any required coding skills. And many times, it is difficult to choose the one that will be the best possible fit for you. But what seems to make Visual Composer stand out is its enormous amount of easy-to-learn elements. Whether you’re a beginner or a professional, it’s definitely worth a try to look into what this plugin has to offer.
Even though our Visual Composer guide was fairly comprehensive, there is nothing above some practical knowledge. So, in order to truly appreciate its possibilities, the best option you have is to try it out yourself. Install it on your WordPress website and play around. Remember you can even try out the premium version risk-free with Visual Composer’s 15-day money-back guarantee option. Whichever you choose, you will surely discover element combinations that work for you. and will make your website look like it’s been build by professionals.
Comments are closed.