CodeCanyon Visual Elements - WordPress Plugin

Guide to Configuring and Using CodeCanyon Visual Elements in Beaver Builder

CodeCanyon Visual Elements should be viewed not as a standalone page editor, but as a set of additional modules for Beaver Builder. In this guide, we will walk through how to safely prepare a WordPress site, install the add-on, find its modules in the builder panel, assemble a useful page section, test WooCommerce scenarios, and quickly identify the cause if an element does not appear or does not look the way you expected.

Public sources for the add-on itself are limited: the CodeCanyon page and the Beaverhub directory confirm the product's purpose, its developer ThemeVan, its paid distribution model, compatibility with Beaver Builder Lite and Pro, and the list of visual modules. That is why the practical part of this guide relies on the official Beaver Builder and WooCommerce documentation: those sources define where post types are enabled, how modules work, how builder cache is cleared, how responsiveness is tested, and where to look for limitations when working with products.

The core idea of this guide is simple: first make sure Beaver Builder and WordPress are ready for the add-on, then enable only the elements you actually need, build a test section, and check it on a real page. This approach helps avoid cluttering the site with unnecessary blocks and makes it easier to isolate a conflict if one appears after installation.

What the Add-On Actually Adds to Beaver Builder

Visual Elements Addon For Beaver Builder adds a set of visual elements to the builder that you can drag into a layout like regular modules. The published description mentions 18 useful elements, but the public module list includes more names and one duplicate entry for Icon Box. This is a good example of why you should verify the actual module set in the installed version instead of planning a page solely from the product listing.

Based on the confirmed list, the add-on is aimed at three groups of tasks. The first group covers content and navigation blocks: Accordion, Tabs, Heading, Button, Inline Buttons, Animated Typing. The second group includes visual cards and trust-building elements: Icon Box, Flip Box, Interactive Banner, Counter, Member, Price Table. The third group focuses on posts, sliders, and WooCommerce: Blog, Post Slider, Picture Slider, WooCommerce Product Grid, WooCommerce Cart Button, WooCommerce Product Category.

The key takeaway: this is not a replacement for Beaver Builder, but an extension of its module panel. If Beaver Builder is not already installed on the site, or editors are not working inside its interface, Visual Elements will not provide its own standalone building experience. Beaver Builder must be installed and active first, and only then does it make sense to check the module package.

Practical post-install check: open a test page in Beaver Builder, click the + icon, switch to the Modules tab, and look for the Visual Elements group or its individual elements. If the add-on is active but the group is not visible, do not jump straight to reinstalling it - first check the module settings and the builder cache.

Who This Set of Visual Modules Is Best For

CodeCanyon Visual Elements is useful for sites where Beaver Builder is already the main visual builder. It covers common tasks that are not always convenient to assemble from the default blocks alone: icon-based benefit sections, FAQ accordions, comparison tabs, counters, pricing tables, team cards, sliders, and product showcases.

The add-on is especially well suited to smaller commercial projects: services, landing pages, catalogs, product pages, promo pages, event pages, and simple WooCommerce showcases. In these scenarios, you may not need a heavyweight design package with hundreds of templates, but you do need a few expressive elements that can be built quickly inside the familiar Beaver Builder interface.

It is not necessary for every site. If the project has already moved to the WordPress block editor, Elementor, Bricks, Oxygen, or another builder, this add-on will not be a universal solution. If you are building complex WooCommerce archive templates, dynamic product cards, role-based display conditions, or a full design system, Visual Elements alone may not be enough: some tasks are better handled with Beaver Themer, specialized WooCommerce blocks, or a larger add-on suite.

• A good fit if the site already has Beaver Builder running and you want to expand the set of blocks without changing the theme.
• A good fit for an agency or webmaster building similar commercial pages and wanting to reuse proven sections more quickly.
• May be unnecessary if you only use basic pages and do not need tabs, pricing tables, sliders, or WooCommerce showcases.
• May not be the right choice if you need a modern package with public documentation, frequent releases, and a large library of ready-made templates.

What to Check Before Installing It on a WordPress Site

Preparation is not just a formality. Beaver Builder add-ons inject their own styles, scripts, and modules into the builder interface, so an issue may show up not only in the admin area but also on the live page: the editor does not open, styles do not apply, cache does not refresh, or a product grid renders as an empty block.

Beaver Builder Must Be Active and Available to the Right Roles

The Beaverhub directory indicates that Visual Elements can be used with Beaver Builder Lite and Pro, and that Pro is not required for the add-on itself. But that does not remove the need for a basic check: the Beaver Builder editor must open for the relevant post type, and the user must have permission to build the page.

Beaver Builder settings include the Post Types and User Access tabs. The first controls which post types can use the builder. The second lets you restrict access to editing, the content panel, global modules, and admin areas. If the editor is not visible to a content manager, the issue may not be Visual Elements at all - it may simply be role permissions.

Create a Test Page and a Backup

The best way to avoid chaos is not to start with the homepage. Create a draft or private test page, enable Beaver Builder, and test the new add-on there. On a live site, use a staging copy, especially if the project depends on caching, a CDN, JavaScript optimizers, or a custom theme.

Before installation, verify three things: whether you have a fresh backup of both files and database, whether you can quickly disable the new plugin through Plugins, and whether you still have admin access if the editor stops opening after an update. Do not start troubleshooting by editing plugin files: in most cases it is safer to disable the conflicting module, clear cache, or temporarily switch themes.

WooCommerce Is Needed Only for Product Modules

The Visual Elements list includes product-related elements: a product grid, a cart button, and WooCommerce categories. If WooCommerce is not installed, those modules may be missing, unusable, or require separate testing. That is not a problem for standard service pages. For an online store, however, you should prepare products, categories, images, and a test add-to-cart scenario in advance.

Installation and the First Check After Activation

Installation works like any standard WordPress ZIP plugin install. Since the product is distributed through CodeCanyon, the plugin archive is usually already available on the site owner's side. There is no need to connect external services, enter FTP credentials into a page generator, or pass secrets into prompts of any kind. The safe workflow goes through the standard WordPress interface.

1. Open the WordPress admin panel and go to Plugins - Add New.
2. Click Upload Plugin, choose the Visual Elements ZIP archive, and start the installation.
3. After the installation completes successfully, click Activate Plugin.
4. Confirm that Beaver Builder is also active and is not reporting any errors.
5. Open a test page in Beaver Builder and look for the new elements under the Modules tab.

If WordPress prompts you to replace an already installed version with the uploaded ZIP archive, first make sure it is actually an update of the same plugin. On a production site, it is safer to test the update on a copy because Visual Elements does not appear to have an easily accessible public changelog you can use to quickly assess the risk.

Where to Find the Modules in the Editor

In Beaver Builder, modules open through the + icon in the top bar. On the Modules tab, elements may be grouped into subgroups. Beaver Builder documentation explicitly notes that third-party modules can appear as separate groups depending on the installed plugins. So look not only for the exact product name, but also for individual elements such as Accordion, Price Table, or WooCommerce Product Grid.

If the modules you need are missing from the panel, open Settings - Beaver Builder - Modules. This tab controls which modules appear in the builder panel. A disabled module does not disappear from pages where it is already published, but it will no longer be available when adding content to new layouts. For a team, this is a convenient way to leave editors with only the elements they actually use.

Configuring CodeCanyon Visual Elements After Installation

No separate detailed documentation was found in public sources for each Visual Elements tab. Because of that, it is more practical to configure the add-on using a clear Beaver Builder framework: enable the modules you need, verify post types, restrict editor access, define global style rules, and only then build the production page.

Enable Only the Modules You Actually Need

A large module set makes it tempting to switch everything on at once. In practice, it is better to start with 5 to 7 modules for a specific page. For a service landing page, that might be Icon Box, Counter, Accordion, Button, and Price Table. For a store, it could be WooCommerce Product Grid, WooCommerce Product Category, and WooCommerce Cart Button. For a team page, Member, Interactive Banner, and Tabs may be enough.

This approach reduces noise in the builder panel and lowers the chance that an editor accidentally picks the wrong block. If a new need comes up a month later, you can enable that module separately and test it on a draft.

Check the Post Types Where the Builder Is Needed

The Post Types tab in Beaver Builder settings determines where the editor can be launched. In most cases, pages alone are enough by default. If you want to use Visual Elements in blog posts, enable the required post type and test one post. Be careful with WooCommerce products: Beaver Builder documentation warns that enabling the builder for the Products type does not mean full editing of the entire product template. For shop archives and product templates, you may need Beaver Themer or a different approach.

Restrict Editing for the Content Team

If multiple people manage the site, use User Access. A content manager often only needs to update text, images, and links inside existing modules. Access to deleting rows, saving global modules, and adding complex elements is better left to an administrator or designer. The most common team mistake is giving everyone full access to the builder and then spending time figuring out who deleted a row or changed a global block.

Set Visual Parameters at the Section Level

Most Visual Elements modules will inherit styles from the theme and Beaver Builder settings. For consistency, configure the row or column first: spacing, background, width, and responsive behavior. Then add the modules. If every element is styled separately, the page quickly turns into a collection of mismatched cards.

Beaver Builder includes an Advanced tab for rows, columns, and modules. It handles spacing, visibility, animations, HTML elements, as well as CSS and JavaScript for a specific node. Use it carefully: start with the standard settings, then add targeted CSS only if you cannot achieve the desired result without it.

Safe CSS Adjustment for a Single Page

If you need to equalize the height of cards in a benefits section, assign the row or column a clear class such as ve-services-grid through Advanced - HTML Element. Then add CSS only in the current page's Layout CSS/JavaScript area or in the CSS field for that specific node. The example below does not modify theme or plugin files and is easy to roll back by removing the class and the rule.

.ve-services-grid .fl-module-content {
  height: 100%;
}

.ve-services-grid .fl-col-content {
  display: flex;
}

Check the result on the test page: the cards should line up more evenly, but the text should not be cut off. If the grid breaks on mobile screens, remove the rule or replace it with the standard column settings. Do not add JavaScript just to equalize card heights if the problem can be solved with CSS or builder settings.

How to Build a Useful Section with Visual Elements Modules

The real value of the add-on is not that the site gets more buttons, but that you can assemble a clear page section faster. Below is a scenario for a service page: the visitor sees a short offer, three benefits, a trust-building counter, a pricing tier or package, and answers to common questions.

Scenario Goal

You need to build a section that explains a service without turning into a long wall of text: a heading and call to action at the top, three benefit cards underneath, then trust counters and a compact question block. This kind of section works well on a consulting page, web development page, repair service page, training page, or B2B service page.

Preparation

Before building, prepare the copy, icons, counter values, and question list. Do not start with design. If you do not have the wording ready, the builder will only disguise weak content instead of improving the page. Make sure the Beaver Builder panel includes Heading, Button, Icon Box, Counter, and Accordion.

Build Steps

1. Create a row with one column and add a Heading for the section title.
2. Add a short intro using the standard Beaver Builder text module or a suitable Visual Elements module if your version includes one.
3. Below that, create a three-column row and place an Icon Box in each column: one card per benefit.
4. Add a row of counters using Counter, but use only numbers you can verify. Do not insert random metrics just for effect.
5. Add a Button or Inline Buttons leading to a form, pricing block, or contact section.
6. At the end of the section, insert an Accordion with 4 to 5 questions that address real visitor objections.

Checking the Result

After publishing, open the page in a regular browser window, not only in builder mode. Check the column widths, accordion behavior, button clicks, spacing between modules, and readability on a narrow screen. Beaver Builder's Responsive Editor makes it easy to switch preview sizes, but the final check is still best done in a real browser outside edit mode.

Quick takeaway from this scenario: a strong section is not built from the maximum number of modules, but from a clear sequence: promise, proof, action, answers to doubts.

Tabs, Accordions, Sliders, and Counters Without Overloading the Page

Modules like Tabs, Accordion, Picture Slider, and Counter are often misused: people hide important text inside them, add too much motion, or try to make the page feel more dynamic when what the reader really needs is clarity. In Visual Elements, these elements are useful only when each one solves a specific problem.

When to Use Tabs

Tabs work well for compact comparisons of similar information: service packages, pricing tiers, workflow stages, or different product audiences. They are not a good place to hide the main page copy that should be visible right away. Search engines and users both respond better to pages where key points are not buried behind unnecessary clicks.

When an Accordion Is Better Than a List

An accordion is useful for FAQ content, lengthy terms, technical explanations, and secondary details. It helps reduce the page's visual height, but it is not a substitute for solid structure. If a question matters to the decision-making process, provide a short answer in the visible area and place the details inside the expandable block.

Be Careful with Animations and Counters

Animated Typing, Counter, and sliders can draw attention, but they can also be distracting, interfere with reading, and perform poorly on slower devices. Use one accent element per screen. If a counter says "1000 projects" but you have no source for that number, it is better to replace it with a specific benefit or testimonial.

Speed and Stability Check

After adding a slider or several animated elements, test the page in incognito mode with cleared cache. If the first screen noticeably jumps, the button becomes clickable with a delay, or the animation interferes with scrolling, disable the questionable effect. On a commercial page, clarity matters more than decorative motion.

WooCommerce Modules: A Product Showcase Without Replacing the Store

The presence of WooCommerce Product Grid, WooCommerce Cart Button, and WooCommerce Product Category makes Visual Elements useful for store promo pages. But it is important not to confuse a promo section with a full store template. WooCommerce handles products, the cart, notices, and checkout, while Beaver Builder with this add-on helps present selected products inside a page.

For a showcase on a landing page, first prepare the products in WooCommerce: title, price, image, category, stock status, and short description. Then build the block in Beaver Builder. If your version of the grid module supports selecting a category or item count, use a small set: 3 to 6 products is usually easier to scan than a long strip.

What to Check After Adding a Product Grid

• The products actually belong to the selected category and are not hidden from the catalog.
• Images use the same aspect ratio, or at least do not break the grid.
• The cart button leads to the expected action and does not conflict with WooCommerce AJAX settings.
• After adding a product, the user sees a clear message or can proceed to the cart.
• The grid does not replace the required cart, checkout, and account pages.

Official WooCommerce documentation emphasizes that product output now often relies on blocks, while older shortcodes remain for compatibility. So if your task involves a complex catalog, filters, sorting, or store templates, compare the Visual Elements module with native WooCommerce blocks and your theme settings. In some cases, it is simpler to feature 4 selected products on a landing page through the add-on module and leave the full catalog to the standard store.

Responsiveness, Cache, and Access Rights: Settings People Often Forget

Most builder add-on issues look like a problem with the module itself, but the real cause may lie in the environment. Beaver Builder generates CSS and JavaScript for layouts, stores cache in the uploads directory, and includes a built-in cache-clearing tool. On top of that, module visibility depends on settings, roles, and post types.

Do Not Check Responsiveness by Eye Alone

Beaver Builder's Responsive Editor lets you switch preview sizes and change some settings by device. But the documentation warns that changing row order or deleting a module for one screen size does not create a separate independent version of the page. If you remove content in one mode, that change may affect the whole layout. So for mobile adaptation, it is better to adjust spacing, width, visibility, and text size instead of radically rebuilding the page.

Clear Cache in the Right Order

If you changed Visual Elements settings but the live page still shows the old version, start with Beaver Builder cache: Settings - Beaver Builder - Tools - Clear Cache. Then clear the optimization plugin cache, hosting cache, CDN cache, and browser cache. Do not change several settings at once, or you will not know what actually fixed the problem.

Editor Access Affects Tool Visibility

If an editor can see the page but cannot add a module, check User Access. A restricted user may have access only to existing settings, without the content panel and tools. This is useful for protecting the layout, but it can look like "the modules disappeared." For troubleshooting, compare the behavior under an administrator account and under the editor role.

Safe testing rule: change one variable at a time. First the role, then the module, then the cache, then the theme. That will help you find the source of the problem faster and avoid accidental changes to a live page.

Why a Module Does Not Show Up and How to Find the Cause

Troubleshooting Visual Elements almost always starts with one question: is the issue in the add-on, Beaver Builder, the theme, cache, permissions, or a related plugin? Below is a practical map of issues typical for Beaver Builder module extensions.

Typical Symptoms and Safe Actions

Symptom	Likely Cause	What to Check	How to Fix It
Visual Elements modules are not visible in the panel	The add-on is not active, the module is disabled in settings, or the wrong post type is open	Plugins, Settings - Beaver Builder - Modules, and the Post Types tab	Activate the plugin, enable the required modules, and verify that Beaver Builder is allowed on that page
The editor opens, but the page freezes	A conflict with custom HTML, JavaScript, the theme, or a third-party plugin	Opening the page in Beaver Builder safe mode and the most recently added modules	Open the URL with &safemode, remove or fix the problematic block, and save the page
The site shows an old version of the block	Beaver Builder cache, optimization plugin cache, CDN, or browser cache	Tools - Clear Cache, the caching plugin settings, and incognito mode	Clear caches in sequence and check the page outside editing mode
The WooCommerce grid is empty	No products in the selected category, products are hidden, WooCommerce is not active, or the wrong source is selected	Product categories, stock status, publication status, and module settings	Create a test product, assign a category, refresh the module, and test the cart separately
Styles differ from the preview	The theme overrides buttons, headings, or grids; CSS optimization merges files	Testing with minification temporarily disabled, a default theme on a site copy, and the section CSS class	Disable the problematic optimization, add a targeted class, and avoid editing plugin files

When It Is Better to Roll Back a Setting

A rollback makes sense when the change affects not just one module but the entire layout: global CSS, cache settings, role permissions, disabling module groups, or switching themes. If enabling an animation causes the editor to stop opening, first disable the specific module or use safe mode instead of removing the entire add-on. If styles disappear after updating the ZIP archive, restore from backup and compare behavior on a staging copy.

How to Evaluate Page Quality After Configuration

A page built with Visual Elements should do more than look good. It should guide the user toward a clear action without getting in the way of the site's technical side. After building it, run a short audit that works equally well for a landing page or a store page.

Content Check

• Each module answers a specific user question: what this is, why to trust it, what is included, how much it costs, and what to do next.
• Accordions and tabs do not hide critically important information the user needs in order to understand the offer.
• Counters display verifiable data, not random large numbers.
• Buttons lead to a form, the cart, contacts, or another expected action.

Technical Check

• The page opens outside Beaver Builder mode and does not require administrator rights to view.
• Cache has been cleared, and the changes are visible in a regular browser.
• The section is readable on small screens, cards are not cut off, and buttons do not overlap.
• WooCommerce actions have been tested separately: the product is added to the cart, the message is visible, and the redirect works.
• Unused modules are disabled in Beaver Builder settings if editors do not need them.

A good validation result means the page can be handed off to an editor without worrying that one accidental click will break the structure. To support that, use roles, saved sections, and clear row names in the Outline Panel if your Beaver Builder version includes it.

When CodeCanyon Visual Elements Is a Good Choice

CodeCanyon Visual Elements makes sense if Beaver Builder is already running on the site and you need a compact set of additional visual modules: cards, tabs, accordions, counters, pricing tables, sliders, and simple WooCommerce inserts. It is especially useful when you want to improve a landing page quickly without building a custom module.

Before rolling it out, test the add-on on a sample page, enable only the elements you need, build one practical block, and run through the key checks: permissions, post types, cache, responsiveness, and WooCommerce actions. If everything works reliably after that, you can move the solution to the live page and download CodeCanyon Visual Elements for further testing in your project.

If you need a larger template library, active public documentation, deeper WooCommerce configuration, or complex dynamic templates, compare the product with Ultimate Addons, PowerPack, Livemesh, or Xpro. That way, you will choose not the loudest module bundle, but the tool that actually fits the site's real task.