CodeCanyon Composium - WordPress Plugin

CodeCanyon Composium Guide: WPBakery Extensions, Element Setup, and Page Testing

This guide to CodeCanyon Composium will help you prepare your site for the add-on, choose a practical set of elements, build a services page, and check how it looks on desktop and mobile. You’ll go from an active WPBakery Page Builder installation to a page visitors can understand, with separate guidance on images, reusable content, editor settings, and common causes of problems.

It’s easiest to start with a small page. Choose a real task: present a studio’s services, show a workshop’s projects, or introduce a project team. Prepare a few images and short descriptions, then add only the features this content needs. That way, you can see what the add-on contributes and distinguish an issue with a particular element from a limitation in the theme, page builder, or site settings.

Setting names and locations depend on the release you have installed and how the admin area is configured. Some information about Composium dates back to earlier releases. It can help explain what the features are for, but it does not confirm that every feature works in a current environment. The steps below distinguish established WPBakery commands from recommendations for configuring the add-on, and do not treat unverified toggles as required interface options.

Where Composium Helps and When WPBakery Is Enough

Composium extends WPBakery Page Builder with additional elements and design tools. Consider it for pages already built with WPBakery. The old product name Visual Composer in the product URL refers to WPBakery’s former name; it does not mean this add-on works with every other editor that includes the word Composer. First find out which tool actually built the page you want to edit, then choose how to update it.

Choosing a good first use case

A useful place to start is an existing page where a standard text block and image are no longer enough. For example, visitors may need to enlarge project photos or quickly find a specialist among team cards. Describe the desired outcome without naming an effect: "Visitors can open a project photo and return to its description" or "Visitors can tell who is responsible for this service." That gives you a clear way to choose an element while preserving the page’s purpose, even if you later need to use a different design.

A simple information page with a heading, a few paragraphs, and one button may not need a large set of extensions. Try the built-in WPBakery elements first. An add-on makes sense when it addresses a specific need: presenting content more clearly, making an interaction easier to understand, or organizing information that appears in several places. An attractive animation alone does not explain what visitors are meant to do or why it should make the site harder to maintain.

Who should take a closer look at the limitations

If you already have a site, list the pages that use Composium before changing its settings. If you’re a developer or agency, decide who will edit those pages after handoff. Content managers benefit more from clear block names and a focused set of tools than from dozens of similar choices. When an editor has to pick a card, font, and effect from scratch each time, the design gradually becomes inconsistent and even small updates can have unpredictable results.

Don’t treat the add-on as a general replacement for the WordPress block editor or Elementor. Moving a page between builders is a separate project: you’ll need to recreate its layout, text, images, and interactions. For a new project, first decide why WPBakery is the right choice. For an existing site, compare the cost of maintaining the current setup with the cost of rebuilding the pages. The fact that a plugin archive is available does not prove that it suits your current needs.

Preparing WordPress and WPBakery Before Installation

Preparation makes your changes reversible. If something goes wrong after installation, you should know the site’s original state and be able to restore it without losing new content. Back up both the site files and database, then make sure you know how to restore them. A copy of the plugins folder alone does not preserve page content, settings, or media. Saving the text of one page, in turn, is not a substitute for backing up the whole site.

Checking the dependency and identifying the builder

Open Plugins and find WPBakery Page Builder. Make sure it is active and that the page you want to edit actually opens in its editor. If the builder came with your theme, find out whether the theme developer has changed its interface or element set. Theme-bundled add-ons can affect how rows and columns behave. Their presence does not mean something is broken, but you will need to test the entire setup rather than just one separately installed archive.

Record the installed versions of WordPress, PHP, the theme, the page builder, and Composium in your project notes. Don’t judge compatibility by a version number mentioned in an old review. Look for information that applies to your release, and test on a copy of the site if you cannot confirm compatibility. Opening the admin area successfully checks only part of the setup. The add-on also needs to save settings, render content, and perform the expected interaction on the public site.

What to prepare for a meaningful test

• A blank test page and a copy of a representative page with its actual layout.
• A few images for the same purpose, such as project photos without a mix of portraits and panoramas.
• A short heading, a service description, and a working internal link to test navigation.
• An administrator account for installation and a separate editor account for checking day-to-day use.
• Notes on the starting point: how quickly the editor opens, which blocks are already in use, and which effects the theme adds.

Keep the test copy separate from visitors and live workflows. Don’t send real notifications from it or use it to process actual inquiries. For a design add-on, it also helps to save screenshots of representative pages before you start. They make it easier to spot unintended changes to width, spacing, or typography. Choose pages with different layouts, since a global design setting may affect more than the page you’re editing.

Installing the archive and testing your first element

Use the ZIP archive intended for plugin installation. If the package also contains documentation and other files, find the installer archive included with it. Don’t try to upload the whole package as a single plugin. In WordPress, open Plugins → Add New, choose Upload Plugin, select the ZIP file, and install it. After WordPress confirms the installation, activate the add-on and return to your test page.

1. Open the page in WPBakery and make sure the standard editor elements are available.
2. Choose Add Element and look for the add-on’s elements by their displayed names.
3. Add one element with simple content and no complex animation or external services.
4. Save the element’s settings, then save the page itself.
5. Open the page outside the editor and check the text, image, and expected action.

These two saves do different things: saving the element’s settings applies them to the layout, while saving the page commits the updated content. If you close the page after configuring an element without saving the document, your changes may be lost. Reopen the editor to make sure the selected values are still there. This quick test is more useful than adding a large demo page right away because it checks the editing workflow, not just the appearance.

The first test is successful when you can add an element, edit it again, and see it on the regular page. If any step fails, pause the design work and find the cause. Adding more blocks will make troubleshooting harder without fixing the dependency.

Don’t replace the live homepage right away. First test a small layout, then a copy of a real page, and only then move the changes you have verified. If installation disrupts the site, restore the original state on the test copy and investigate the error. Deactivation and deletion are different actions: deactivation is usually enough for an initial troubleshooting step, while deletion may affect plugin data and should not be used as a casual experiment.

Configuring Composium After Activation: Keep Only What You Need

It helps to think about configuration at three levels. The first determines which Composium features are available. The second affects how people use the editor: which elements they can see and how easy it is to configure them. The third determines what appears on a particular page. Keep these levels separate. Changing the color of one card should not require a global site change, and disabling an unused feature should not be judged by looking at just one open page.

Choosing the elements you actually need

Some Composium releases allow you to enable elements and features individually. Check the exact list and the location of these controls in your release. Open the add-on’s settings in the admin area or use the available link under its name in the plugin list. Before disabling anything, list the elements used in existing layouts. On a new test site, you can start with a small set; on an existing site, first find out which pages depend on which components.

For a studio page, you might need to present services, project images, team information, and a way to get in touch. Choose one primary way to present each type of content. If a regular text block with an icon works for services, don’t enable several alternative animated cards just to compare them on the live site. Test experimental options on a separate page so you don’t create dependencies in content that someone may later forget when cleaning up the settings.

Disable features in small groups and keep a list of your changes. After each group, open representative pages and their editors. Include pages with galleries, nested rows, and repeated blocks if you have them. Don’t assume a specific speed improvement: actual requests depend on the release, theme, and other extensions. Judge the practical effect by what you observe, not by how many boxes you uncheck in the settings.

A starter settings map for your first layout

This map suggests an order of work; it is not a list of required Composium tabs. If your release does not include a particular feature, skip it and keep the corresponding check. For example, the absence of an editor preview control does not prevent you from checking how easy the page is to edit. Don’t search for a hidden setting based on an unverified name or enter someone else’s settings manually. That creates an uncertain setup instead of a clear outcome.

Icons: use a consistent set and clear labels

Choose icons that match the meaning of the cards, then check that they look consistent together. For three services, use icons with similar line weights and visual sizes. An icon should not be the only way to identify a service: keep a clear service name next to it. Visitors will still understand the content if the icon font loads slowly or the image is ambiguous. Links also need recognizable text, not just a decorative arrow with no explanation of where it leads.

If the editor noticeably slows down when you open the icon picker, compare its behavior on a page with one element and on a larger layout. Composium’s older interface includes preview controls under General Settings → Basic Settings; check whether those options are present in your installation. Reducing the active icon set and changing the preview are different fixes. First find out which operation is slow, then change the setting that applies to it.

If you enter an icon’s class name as text, use the exact value shown by the current interface or the reference materials for the icon set you selected. Don’t guess the prefix based on a similar plugin. Test one icon, save it as an example, and only then add icons to the remaining cards. If a blank square appears instead of an icon, changing the service label won’t help. Check which icon set you selected and whether its files are available, while keeping a descriptive label for visitors.

Images in the editor and images visitors see

A useful editor preview makes it easier to find the right block, especially on a page with many photos. But editor convenience and the quality of public-facing images are separate concerns. If you turn off editor thumbnails, reopen the page and check that editors can still identify blocks by their text and layout. On the public page, each photo should still suit its purpose, have an appropriate resolution, and open as expected.

Don’t compensate for an inconvenient editing experience by making every source image larger. Prepare an image with the right proportions for a project card, and keep a higher-resolution version for an enlarged view if the element lets you select one. The same image may need different crops for a wide banner and a small card. When you replace a file, check both locations: fixing one crop can make another look worse, which may seem like an add-on problem.

Fonts, width, and spacing without competing systems

Before styling individual elements, decide on the main font, text color, accent color, and content width. On a typical site, it’s simpler to inherit the theme’s typography than to assign a new font to every block. If your chosen font does not support Cyrillic, Russian headings may render in a different typeface. Test real Russian words, numbers, and punctuation rather than relying only on the font’s English sample.

In WPBakery, settings for font families and character sets belong to the page builder. Don’t attribute them to Composium. Avoid loading similar fonts through the theme, page builder, and add-on at the same time unless you know which one is used by the finished block. First compare the browser’s computed styles with what you expect, then keep one manageable way to configure them. This makes it easier to update the site’s branding later and reduces accidental differences.

Set spacing at the level responsible for it. The row controls the space between sections; the card’s content controls its internal spacing; and the grid controls the space between columns. If the same gap is added at every level, the mobile page can become unnecessarily long. Start with one source for each kind of spacing, then check the layout on a narrow screen and with larger text.

Editor access and saving a good example

Use WPBakery Page Builder → Role Manager to manage access to the page builder’s features. Check the content type and the role of the person who will update the page. Don’t enable the builder for every post type automatically: a short review or internal notice may only need standard fields. More permissions won’t fix a poorly organized layout and may let someone change global settings by mistake when they only meant to edit one card.

After your first successful block, save its settings as a reusable example if your setup supports WPBakery’s built-in Element Presets. The builder uses Save as element for this. Give the preset a descriptive name, such as "Icon Service," and test it on another test page. A preset stores settings; it should not be treated as shared content. Before expecting a change to one inserted block to update all similar blocks, check how your setup behaves.

After configuration, you should have a small, repeatable set of elements: the ones you need are available, the design is consistent, editors understand the names, and changes are saved. Record which settings you left as they were and which you deliberately changed. This helps with updates and project handoffs. It also gives you a way to restore a working setup without trying to remember which of many toggles controlled a block that disappeared.

How Rows, Elements, and Data Come Together on a Page

To use the extension confidently, it helps to distinguish the layout framework, the source of the information, and how it is displayed. WPBakery organizes content into rows and columns. Composium adds its own elements and design tools. The theme controls the surrounding page: content width, header, menu, and other site elements. A single thing visitors see may depend on several settings, but change them one at a time, starting at the level responsible for the issue.

The layout sets the position; the element controls the presentation

Imagine a section with three services. A row groups it as one section; three columns position the cards; and elements inside the columns hold their headings, text, and images. Replacing a card with a different element does not necessarily change the column widths. Changing the width of the entire row, in turn, will not fix excessive padding inside a card. Once you understand this hierarchy, you can find the right setting without relying on trial and error.

In WPBakery, add a row with Add Element → Row, then choose the column layout with Change Layout. Start with a simple structure and avoid several nested rows. An inner row makes sense when a specific area needs another grid. If every card contains several nested containers just to add a small gap, it becomes harder to edit, compare with nearby cards, and check on a phone.

What happens when you save and open the page

At a practical level, the workflow is simple: an editor enters content and settings, saves the page, then opens the public page to check it. WPBakery elements use shortcodes, and Composium elements need their corresponding handler to render. This dependency explains why deactivating the plugin can disrupt existing content. It does not necessarily mean the text has been deleted. First check the saved content and whether the required components are active instead of rebuilding the page blindly.

For a static card, the main thing to check is its visible markup and design. An interactive element also needs to perform an action in the browser, such as opening an image, switching content, or responding in another expected way. If the text is there but the action is missing, saving has already been checked; the problem is at the next step. This helps narrow down troubleshooting: check content first, then design, then interaction, followed by caching and loading conditions.

How to identify which part is responsible

On a test page, create two neighboring sections with the same grid: one with a standard WPBakery element and one with a suitable Composium element. Use the same text and images in both. If both sections have the wrong width, first check the row and the theme’s container. If only one element looks different, open its settings. For a fair comparison, temporarily remove animation: movement and delayed appearance can obscure the block’s actual size while the page loads.

Keeping Repeated Team and Testimonial Content Separate from the Layout

Older Composium releases include separate content types for team members, testimonials, and skills. The practical idea is to store information separately from the places where it appears. First check whether your release has the relevant sections and display elements. Don’t confuse a card filled in directly on the page with an element that pulls from a separate entry. They may look alike, but they are edited in different places.

Creating and checking one entry

Start with one team member and the smallest set of details available in your release. Enter a recognizable test name, job title, short description, and portrait if the form includes an image field. Publish the entry, then add the corresponding display element to a test page and select an available content source. Don’t invent fields that aren’t there or enter technical identifiers based on instructions for another extension. The selection mechanism should be visible in your installation.

To confirm where the information comes from, change one easy-to-spot value in the source entry and reopen the page. For example, add a detail to the job title. If the block changes, you’ve confirmed the connection for that element. If it doesn’t, check whether the text was entered directly in the element’s settings, a different entry was selected, or you’re seeing a cached copy of the page. Checking one value shows you how the setup works without requiring a bulk edit.

Reuse is not the same as copying

The same team member may appear on the team page and in a description of a particular service. If both blocks use a shared entry, check the changed details in both places. If the cards were copied, each may contain its own text. Don’t expect them to stay in sync just because they look alike. When handing off the site, tell editors where to update shared details and where the text belongs to a specific page.

For testimonials, also check where they came from and whether they have been approved for publication. Clearly labeled sample content is fine in a tutorial layout; don’t present it as customer feedback on a live site. Use consistent guidelines for text length and author labels. Even a well-designed display element cannot fix content that is too uneven: a two-sentence testimonial next to one that fills several screens can make the layout awkward if the design expects short cards.

What to check when nothing appears

First find the source entry and check its publication status. Then open the element settings and confirm that it uses the right source. If the element has a category filter, temporarily remove it on the test page and compare the output. Don’t change the sort order, item count, and filter at the same time; otherwise, you won’t know what restored the display. A verified example with one entry gives you a starting point for a larger team block.

Image Zoom and Image Swapping: Make Each Interaction Clear

Composium can provide a way to enlarge images and effects that swap one image for another. Which one you choose depends on the task. Zooming helps visitors inspect a project detail; swapping images can show another angle. Don’t combine these actions on the same surface without testing them. Visitors should be able to tell whether an image will open, the card will change, or they’ll go to a detailed page.

Testing image zoom with one photo

Choose one photo that benefits from enlargement, such as an interior, a product, or a project detail. In the available element, select the image and the option that opens it. First test a single image, then a group of images if your release includes that setting. Check field names in the installed interface. Don’t enable both the theme’s image viewer and the add-on’s viewer for the same group until you have tested how they interact.

Open the photo on the public page, close it, and make sure you return to the previous content. Then check the next image if you have set up a group. On a narrow screen, see whether the close control is available and whether the viewer covers important parts of the site. The goal is simple: visitors can inspect the work and continue reading. If that takes several unclear taps, a simpler viewing method may work better than a complex effect.

Why hover should not be the only mobile interaction

A card that swaps images on hover can make it harder to follow a link on a touchscreen, where a tap may trigger the hover behavior. This is one behavior to test, not proof that every Composium release has the same issue. It points to an important check: the first tap should perform an action visitors can understand. Test the behavior on a real phone and on a computer, including links in captions and on the images themselves.

If the effect competes with a link, keep a clear text link to the project and make the image swap an optional way to preview it. You could use a static image with a separate button instead of two competing actions. Don’t duplicate an entire gallery for different devices unless you need to; it increases the work involved in future updates. First find a simple presentation where one source of content and one clear primary action work in both contexts.

Building a Studio Page with Services, Projects, and a Team

Here’s a tutorial example for a small interior design studio. The page needs to explain the studio’s services, show several projects, introduce a team member, and help visitors get in touch. Use Composium for elements that present the content as needed, and build the layout with WPBakery. This example does not require external services, so you can test the main steps without relying on a third-party API.

The goal, source material, and completion checks

Prepare a studio name, a brief description of its approach, three services, four project photos, and information about one team member. For this example, we’ll call the studio Acme Studio. This is sample content, not part of an official product demo. Give the services distinct names, such as "Space Planning," "Materials Selection," and "Project Management." Choose photos with similar purposes so the grid does not mix room plans, portraits, and close-up details without a clear order.

Decide in advance what visitors should be able to do. In this example, they’ll read about the services, open a project photo to see it larger, and follow a text link or button to the contact section. The page is ready when these actions work on wide and narrow screens, and an editor can replace a photo or text without changing the grid. That is more useful than asking whether it looks like an attractive demo: these checks cover both the page’s purpose and its ongoing maintenance.

Keeping text length and image proportions consistent

Keep service descriptions roughly similar in length, but don’t remove important conditions just to make the cards the same height. If one service needs a longer explanation, use a short card with a link to a detailed page. Choose a consistent image shape and decide in advance where cropping is acceptable. A floor plan cannot be cropped as freely as an interior photo: key information must remain readable, even if that makes the grid less symmetrical.

Step 1: Build the content layout without effects

Create a test page and open WPBakery. Add separate rows for the introduction, services, projects, team, and contact information. Don’t put the entire page in one complex row: separate sections are easier to rearrange, compare, and reuse. For the first version, use the theme’s regular content width. Add a full-width background later, once you have confirmed that the text and cards fit within the page on different screens.

1. Add a row with a heading and a short explanation of the service’s value.
2. Create a row with three columns for the services.
3. Set aside a separate area for project images.
4. Add a place for the team member’s details and a short description of their role.
5. Finish with a clear link to the existing contact information.

After this step, save the page and read it without styling the individual cards. Ask whether someone seeing the studio for the first time can follow the order of the sections. If the sections do not explain what the studio offers, an entrance effect won’t fix that. Change the order, remove unnecessary introductory text, and make sure the projects support the services you describe. Choose extended elements only after checking the content flow.

Step 2: Use one service card as a test case

In the first column, add an available Composium element suited to presenting a service. Fill in its heading, description, and available icon or image. Don’t enter made-up settings based on someone else’s interface screenshot. Start with a restrained design: readable text, one accent, and a clear link if needed. First check the card by itself, then compare its typography with the rest of the page and the neighboring sections.

Check how the card handles a longer heading, such as "Project Management" compared with "Space Planning." If the text is cut off, find out whether the card has a fixed height or the font is too large. Don’t fix it with arbitrary line breaks; they may look worse on another device. For the first version, let the card’s height follow its actual content.

Once the card works, create the others in the same way or use a saved settings preset if it works with your chosen element. Change the content and the icon to match each service while keeping the design consistent. Then read all three cards together: a uniform design should not hide identical promises under different names. Each card should explain its own purpose, and the link should take visitors to more details or a way to contact the studio.

Step 3: Make sure photos open the way visitors expect

Add an image or gallery element from the available set. Start with the photos you prepared, without filters or complex transitions. Check their order: the most representative project should come first, with the other photos supporting it. If captions are available, describe what each photo shows instead of repeating "Project" on every card. Captions help visitors find their place after closing the enlarged view and as they read through the page.

Enable image opening only after checking the static grid. Test one photo first: open it, inspect the detail, close it, and return to the page. Then test the whole group if the element supports one. Don’t make the same photo both a link to the project page and a way to open an enlarged view until you know how those actions are distinguished. In this example, the caption can link to the description while the photo opens in the viewer.

Step 4: Add a team member from a separate entry

If your release provides a team content type and a matching display element, create one team member entry and use it in the team section. Choose a role that fits the studio’s work, such as "Project Manager." Check the connection by making a small change to the source entry. If this feature is not available, use a regular card and clearly note that its details are edited on the page. That’s better than imitating a shared entry with an unverified shortcode.

To test whether the entry can be reused, add the same team member to a second test page. Change one value in the source and compare both pages. If both blocks update after you clear any required cache, you can tell the editor where to update the shared details. If one block stays the same, check its settings: you may have created an independent card by mistake. It’s easier to catch this with one team member than after adding an entire team.

Step 5: Check a narrow screen and test real taps

Open the WPBakery column settings and check Width & Responsiveness. Width, offsets, and visibility apply to the column, so test them separately from the card’s design. In this example, services should appear in order on a narrow screen, without horizontal scrolling. Check the order of headings and descriptions: visitors should not see all the headings separated from their descriptions because the content has been split across too many containers.

Test the page on a phone, not just in a reduced editor window. Open and close a photo, follow the link to the contact section, and go back. If an image swaps on tap, test both the first and subsequent taps. Also check the size of interactive areas: an attractive small icon may be hard to tap. Don’t hide important information on phones just because it does not fit well. Fix the presentation and layout first.

Saving the page and handing it off to an editor

Save the working layout and write a short content guide: where to update service text, what image format to use, where the team member’s entry is stored, and what action is assigned to each image. Include an example of a successful replacement. Ask an editor to make the change on a copy of the page. If they have to search through grid settings just to change a caption, simplify the layout or limit the available actions while keeping the editing access they need.

Before moving the page to the live site, check all live links and remove any sample content. Repeat the checks after publishing and while logged out of the admin area. A saved example and clear instructions are part of the finished work along with the page itself: they make the setup easier to reproduce and maintain. The add-on is useful when the content stays consistent through routine edits, not just right after configuration.

Checking the Page: Appearance, Interactions, and Editor Changes

Check the page in several states because the editor, an administrator, and a regular visitor may encounter different loading conditions. Start by opening the public page in a separate window while logged out. Read it from top to bottom, try each main action, and compare it with the saved layout. Then return to the editor, change one value, and check the page again. This tests not just the finished page but also whether the editing workflow holds up.

Content and semantics

Make sure headings describe their sections and appear in a logical order. Don’t choose a heading level just to get a particular font size: design and content hierarchy serve different purposes. A service page usually gets its main heading from the page template, with the next levels used inside its sections. Check the rendered markup or use your browser’s inspection tools. A design element can display large text that is not technically a heading.

Look at the cards without the editor’s familiar context. Is it clear which service is described, what each photo shows, and where a link leads? If an icon conveys important information, include that information in its label. Add meaningful alternative text to images when the element supports it. Don’t repeat the studio name in every description unless needed; describe the project and the useful detail shown in the photo instead.

Interactions, keyboard access, and reading order

Use the keyboard to move through interactive elements in order. Check whether the current focus is visible and whether you can perform the main action without a mouse. For enlarged images, try the available close controls and make sure you can return to the page. One successful key press does not prove that an element is accessible; check the visitor’s full path. If an important action is difficult to perform, use a simpler presentation or a separate text link.

Increase the browser’s text size and check how the content wraps. Service headings should not disappear beyond a card’s edge, and buttons should not cover descriptions. Test longer names, job titles that span several lines, and real Russian words if the site uses them. Demo text is often too short to reveal problems that appear after a site is handed off to its owner. Testing with real content helps you choose settings that hold up before publication.

A compact check across four page states

You don’t need to record dozens of formal checkboxes. For each test, write down what you observed, such as "The link in the project caption opens on the first tap." That makes it easier to repeat the check after an update. If the behavior depends on the device, note which one you used in your project notes. When an issue occurs only in one state, you have already narrowed down where to look and can avoid making unnecessary changes across the whole site.

Page and Editor Speed: Check Them Separately

Slow settings panels in the admin area and a slow public page are different symptoms. For the first, look at the layout size, the number of previews, and the selection controls. For the second, investigate images, fonts, loaded files, and interactions. Don’t assume the same cause explains both. A setting that makes icons easier to choose may do little to improve the visitor’s page load, while optimizing photos may not speed up the settings panel.

Making a useful before-and-after comparison

Compare the same page, content, and conditions. First record the current state, then change one factor: disable an optional effect, replace an overly large photo, or remove an unused font family. Repeat the main visitor action and the editing task. If you change the theme, cache, and element set all at once, even a noticeable speed improvement won’t tell you which change caused it or what to keep.

On a studio page, large source images and numerous decorative effects are often good places to start. For each photo, check whether a small card really needs the full-size image. For each animation, ask whether it helps visitors understand the page or just delays the text. Don’t remove useful features just to get a better number in a measurement: if visitors can no longer inspect a project, reducing the load is not a complete improvement.

Cache and script optimization

After changing settings, clear the relevant cache using the tools already in use on the site. First test the page without changing other optimization settings, then enable them one at a time on a test copy. Combining, minifying, and deferring JavaScript can change when interactive elements start. This is a general check for pages like these, not evidence of a conflict between Composium and any particular caching plugin.

If an interaction stops working after you change an optimization setting, revert that setting and compare the page again. Excluding an individual file is reasonable only after you have identified the file responsible and know how to configure your optimizer. Don’t build an exclusion list from random names found online. Disabling optimization across the whole site may hide the symptom, but it won’t tell you what actually caused the problem.

Small, Safe Improvements Without Editing Add-on Files

For a design add-on, start with its built-in settings. If you need a small adjustment, use documented WPBakery controls and your own CSS classes instead of unknown Composium selectors. The following custom CSS example is for a tutorial services section. It uses the option to assign an extra class to a container and add CSS to a page; it is not a special Composium feature or an official recipe.

Visible focus for links in a services section

The goal is to make links easier to see during keyboard navigation without changing what they do. In the WPBakery row or column settings, find the extra CSS class field labeled Extra CSS Class name. Enter composium-service-demo without a period or CSS. Then open the current page’s CSS area and add the short snippet below. The custom class limits the rule to the tutorial section you selected.

/* Show focus only on links in the selected section. */
.composium-service-demo a:focus-visible {
  outline: 3px solid #245c8a;
  outline-offset: 4px;
}

The color is an example; choose one that stands out against the card background. Save the page, open the public version, and move through its links with the Tab key. The rule should highlight the focused link without changing the regular appearance of nearby elements. Check whether the container clips the outline. If it is not visible, first confirm the custom class and the actual link element instead of continually increasing the outline width.

This change does not automatically make every interactive element accessible; it only makes keyboard focus visible on matching links. To undo it, remove the CSS snippet and, if it is no longer needed, the class from the container. Don’t edit the add-on’s files, add JavaScript to imitate clicks, or assign unknown handlers. For a small need, use a small, reversible change that the next person can understand.

A layout template and a separate content source

WPBakery’s built-in Templates can save a useful layout for several similar service pages. But a layout template, an element settings preset, and a shared team entry serve different purposes. The first helps you build a page, the second reuses design settings, and the third stores information. Before using them across several pages, run a simple test: change one instance and see what updates. Don’t assume changes sync until you have checked.

When updating the setup, repeat the workflow you have tested: open the editor, change a card, view a photo, and check the page on a phone. Record changes by component and save the tested layout before updating. If you need to switch to another page-building method, rebuild one representative page first and compare how it works. Disable the add-on across the site only after checking which pages depend on it, not as a way to start migration from scratch.

Why Elements Disappear or Behave Differently After a Change

Start troubleshooting with a reproducible symptom, not an assumption about which plugin is responsible. Record the page, the action, what you expected, and what actually happened. Then create a minimal example with one problem element on a test copy. If it works there, investigate the larger layout and its environment; if it does not, check the dependency, element availability, and loading conditions. Make changes on a copy of the site and keep a list of the settings you change.

An element is missing from the Add Element window

Check that WPBakery and Composium are active, then confirm that you opened the page in the right editor. Next, check Composium’s available elements and the current user’s permissions in Role Manager. Compare the admin and editor accounts. If neither can see the element, giving the editor more permissions is unlikely to help. Check whether the element is enabled, available in your release, and affected by any changes the theme has made to the builder.

Shortcodes appear on the page or part of a block is missing

Don’t delete the text before finding out why it is there. Check which component is supposed to handle the element and whether it was disabled when you changed the working set. Revert the last change on a test copy and reopen the page. If the block returns, you have found a dependency. If not, compare the saved content with its earlier version and with a minimal example. Don’t replace a technical token with a similar name from another plugin: shortcodes are not interchangeable just because they look alike.

Settings open slowly or changes are not saved

First separate the symptoms. A large layout or editor previews may delay opening the settings; a value that disappears when you reopen them points to an issue saving the element or page. Test one block on a new page. If it saves correctly, add content gradually until you find what changes the behavior. If a browser error appears, record its text and when it occurs. Don’t add old JavaScript libraries at random to try to fix a modern setup.

Text appears, but the image does not open

Check the action assigned to the image and confirm that the image file is available. Then temporarily disable optional script optimization settings on a test copy and compare the behavior. If the viewer opens twice or two layers appear, check whether the theme’s viewer or another gallery is also involved. Leave one clear way to open the image in the test element. After it works, test the whole group, close the viewer, and return to the page rather than stopping after the first successful click.

Image swapping interferes with navigation on a phone

Repeat the test on a real device and check the caption link separately. If the first tap changes the image when visitors expect to follow a link, simplify the main action: keep a clear button or use a static card. Don’t call this a universal Composium bug; behavior depends on the selected element, its settings, and the rest of the site. Undo the problematic interaction combination while keeping the content and a working link to more details.

Columns overflow or a section disappears

Check Width & Responsiveness, the column offsets, and its visibility settings. Then compare the row width with the theme’s container. If content disappears, temporarily disable the entrance effect on a test page; the content may be saved but remain hidden because of its styling or loading conditions. Don’t try to fix this by forcing every block on the site to be visible. Find the setting responsible and restore the affected section’s normal behavior.

A PHP error appears after an update

Restore the last tested setup on a copy of the site and save the error text from the log, including the file it refers to. If the admin area is unavailable, use the restoration method provided by your host and get help from a specialist. Troubleshooting calls for details about the environment and the last change, not public display of detailed errors to visitors. Don’t edit WordPress core or add-on files just to hide the message temporarily; that makes future updates harder and may leave the real cause unresolved.

What to include when asking for help

In your support message, include component versions, the name of the affected element, the shortest steps that reproduce the issue, and how the test page differs from the live one. Include the error text without secrets or personal information. Note which changes you have already tested and what happened after you reverted them. The fact that Composium is installed on someone else’s site does not prove it caused an unrelated issue there; useful reports describe observations from your own reproducible case.

Stop safely by restoring the last verified setup and preserving the content. If you have not identified the cause, don’t copy a series of random fixes to the live site. A clear minimal example and the exact error message are more useful than dozens of settings changed at once.

When Composium Is a Good Fit for Your Page

CodeCanyon Composium can be useful when your site already uses WPBakery, the release you have includes the content elements you need, and your team can maintain them. Make the decision based on a page you have tested: it saves correctly, displays as expected, and lets visitors complete the main task. If standard blocks are enough, choose a simpler layout. If the current setup requires fixes that have not been verified, resolve the support question first.

Once you have prepared the content and a test copy, you can download CodeCanyon Composium and try the short workflow in this guide. Save the working set, design preset, and test notes. Then move the changes you have verified to the pages that need them and give the editor clear instructions for updating the content. A reliable page and an easy way to revert changes matter more than the number of effects you enable.