Category: WordPress & Theme Customisation
Audience: Clients of Thomas McKee Website Design & SEO Solutions with websites built using WPBakery Page Builder or the Classic Editor.
Goal: Teach clients how to make safe content edits, understand layout structures, and avoid damaging page formatting or performance.
Some of our client websites are built with WPBakery Page Builder (formerly called Visual Composer).
Although newer sites often use Elementor, WPBakery remains a powerful and reliable tool — especially for established websites that predate the block editor.
If your site uses WPBakery, this guide explains how to safely update text, images, buttons, and layouts.
We’ll also cover working with Classic Editor pages, understanding WPBakery’s visual structure, and knowing when to contact our team for support.
WPBakery is a drag-and-drop content builder that allows you to edit pages visually — either from the WordPress dashboard (Backend Editor) or the live page (Frontend Editor).
It organizes content into rows, columns, and elements (such as text blocks, buttons, and images).
Each block can be moved, duplicated, or edited without writing code.
When you log into WordPress and open a page, you’ll see one of two buttons:
“Backend Editor” – the WPBakery grid view inside the dashboard
“Frontend Editor” – opens the page visually on the front end
You may also see the Classic Editor if WPBakery isn’t active on that page.
If you see multiple shortcodes like [vc_row][vc_column][vc_column_text], that’s WPBakery content displayed in raw shortcode form.
In that case, click Backend Editor to switch to the visual grid view.
| Level | Description | Example |
|---|---|---|
| Rows | Horizontal bands that divide your page vertically | Full-width banners or sections |
| Columns | Divide rows into sections | Two-column layout with text on one side and image on the other |
| Elements | Content modules placed inside columns | Text block, button, image, icon, or spacer |
Each level has its own Edit, Duplicate, and Delete icons.
Hover your mouse to reveal them before making changes.
Click the Pencil icon on a Text Block.
The editor window appears — similar to WordPress’s classic text editor.
Make your text changes directly.
Use simple formatting (bold, italic, lists).
Avoid changing font family, size, or color — these are globally styled for consistency.
Click Save Changes, then Update the page.
Tip: If your site uses shortcodes or icons within text, avoid deleting them. They provide special styling or functionality.
Hover over the image element and click the Pencil icon.
Click the + sign or Replace Image.
Upload a new file or select from your Media Library.
Add ALT text for accessibility and SEO.
Click Save Changes → Update.
Click the + Add Element button.
Choose Single Image.
Select your image and size (e.g., Medium, Large, Full).
Use alignment and margin settings for proper spacing.
Hover over the Row handle and click the Duplicate icon.
This makes a copy of the section, preserving design and spacing.
Edit the duplicate to create new content quickly.
Click + Add Element → Row.
Choose the column layout (e.g., 1/1, 1/2 + 1/2, 1/3 + 2/3).
Drag elements into each column.
Drag elements using the Move (crosshair) icon to rearrange layout order.
Be cautious — improper placement can affect spacing or design flow.
Click the Pencil icon to open Button settings.
Change the text, link, and alignment.
Avoid changing button color or style classes — these follow your brand’s global styling.
Choose from the icon library (Font Awesome or WPBakery icons).
Keep consistent sizing across sections.
These maintain spacing between rows. Avoid deleting them; use smaller heights instead.
The Frontend Editor lets you edit live on the page.
You’ll see real-time changes but should still preview before updating.
Edit one element at a time.
Save frequently.
Use the Preview button before publishing.
Avoid resizing columns manually — margins and padding are preset for design balance.
Some sites mix WPBakery and Classic Editor pages.
Open a page without WPBakery elements.
Use the standard text area for content changes.
Apply headings (H2, H3) via the formatting dropdown.
Insert images using the Add Media button.
Preview before updating.
Important: Don’t paste text directly from Microsoft Word — use Paste as Text or a plain-text editor to remove extra formatting.
Login → Dashboard → Pages → Edit.
Click Backend Editor to access WPBakery.
Edit elements carefully.
Save Changes on each block.
Click Preview to check layout.
If everything looks correct, click Update.
Use Revision History under the page editor to restore older versions.
Or contact us — we maintain daily backups and can restore instantly.
When editing WPBakery pages:
Keep original page URLs.
Maintain H1 and H2 heading structure.
Use keyword-rich but natural text.
Add ALT text to images.
Avoid duplicating entire pages without proper redirects.
If your site uses Yoast SEO or Rank Math, verify your SEO and readability indicators before saving.
WPBakery sites rely on several theme integrations.
To keep them healthy:
Don’t install new builder addons or layout packs.
Update WPBakery only through our maintenance service (to avoid license conflicts).
Compress images before upload.
Limit use of animation-heavy elements.
Clear cache if edits don’t appear immediately.
| Issue | Likely Cause | Fix |
|---|---|---|
| Page loads with shortcodes visible | WPBakery deactivated | Reactivate plugin or contact support |
| Layout spacing looks broken | Missing spacer/divider element | Add “Empty Space” element with proper height |
| Can’t access Frontend Editor | Browser cache or permissions | Try another browser or use Backend Editor |
| Buttons lost color styling | Global CSS overridden | Contact support to reapply button class |
| Image appears distorted | Incorrect image size | Reupload optimized image or adjust “Image Size” setting |
Use the same heading styles (don’t manually change font size).
Keep button styles and colors uniform.
Match spacing between sections (e.g., 80px padding top/bottom).
Reuse existing content elements whenever possible.
When adding new pages, duplicate an existing one as a template.
Contact Thomas McKee Website Design & SEO Solutions if:
You want to add new layouts or columns not in the existing theme.
You see PHP errors or shortcode conflicts.
The editor fails to load or content disappears.
You need help updating WPBakery to the latest secure version.
You’re planning a redesign or migration to Elementor.
We can quickly diagnose layout issues, restore older versions, or migrate your content safely.
Q: Can I switch from WPBakery to Elementor myself?
No — it requires manual migration. Contact us to ensure your design and content transfer correctly.
Q: Why do I see both Backend and Classic editors?
Some themes keep both for compatibility. Use whichever your page was originally built with.
Q: My changes don’t appear after updating.
Try clearing your browser cache or server cache. If still missing, contact support.
Q: Will editing WPBakery affect mobile design?
Not if you stay within the existing layout grid. Avoid manual width settings.
Q: Can I add custom CSS?
Yes, but only within the WPBakery “Custom CSS” field or Appearance → Customize → Additional CSS. We recommend letting us handle global CSS edits.
WPBakery Page Builder remains a stable and powerful editor for WordPress.
By following these guidelines, you can confidently edit your website’s content while keeping layouts clean, consistent, and secure.
When in doubt, don’t guess — our support team can guide or train you on specific tasks.
At Thomas McKee Website Design & SEO Solutions, we’re here to help you maintain professional design integrity while giving you full control over your content.