How to Edit an Existing Page with WPBakery Page Builder in WordPress

Introduction WPBakery Page Builder (formerly Visual Composer) provides a user-friendly drag-and-drop interface for building and editing pages. In this guide, you’ll learn how to open a page with WPBakery, update text, images, rows, and elements, and save your changes—all with simple steps and screenshot placeholders.

1. Log In to Your WordPress Dashboard

1. Open your browser and go to yourwebsite.com/wp-admin.

2. Enter your Username and Password, then click Log In.

2. Navigate to Your Pages

1. In the left-hand menu, click Pages > All Pages.

2. Locate the page you want to edit.

3. Hover over its title and click Edit to open the WordPress editor.

3. Enable Frontend or Backend Editor

1. On the page edit screen, look for the WPBakery Page Builder buttons above the editor:

   • Frontend Editor (eye icon) for a live, visual edit mode.

   • Backend Editor (cube icon) for a grid-like block interface.

2. Click Frontend Editor to edit on the live page, or Backend Editor for the backend view.

4. Familiarize Yourself with the Interface

• Backend Editor: Shows a tree of rows, columns, and elements. Click any element to open its settings.

• Frontend Editor: Overlays controls on the live page. Hover over any element to reveal the edit (pencil) icon.

• Add Element button: Opens the element library where you can drag in new modules.

• Row/Column handles: Show when hovering near the edges of containers.

5. Edit Text and Headings

1. Frontend Editor: Hover over a text block and click the Edit icon.

2. Backend Editor: Click the text element in the grid, then click the Pencil icon.

3. In the Text Block popup, update your content in the Textarea field.

4. Click Save Changes.

6. Replace or Add Images

1. Click an Single Image element’s Edit icon.

2. In the settings, click + Add Image or Select Image to open the Media Library.

3. Upload or choose your image, then click Set Image.

4. Adjust Image size, Alignment, and Link settings as needed.

5. Click Save Changes.

7. Modify Rows and Columns

1. Hover near the top or side of a row/column to reveal the Move (double arrow) or Edit (pencil) icons.

2. Click Edit on a row to open Row Settings: adjust Width, Height, Padding, Margin, and Background.

3. Click Edit on a column to open Column Settings: change Column width, CSS animations, and Responsive options.

4. Save each panel after making changes.

8. Add New Elements

1. Click the + Add Element button in the toolbar (or backend grid).

2. In the Element Library, search or browse modules (Button, Text Block, Image Gallery, etc.).

3. Click an element to add it to the selected row/column.

4. Configure its Content and Design options, then Save Changes.

9. Use Responsive Design Tools

1. In Row Settings or Column Settings, find the Responsive Options tab.

2. Choose to Hide Element on Desktop, Tablet, or Mobile, or set Different column widths per device.

3. Preview your page on different devices by resizing your browser or using your theme’s preview tool.

10. Save and Update Your Page

1. After finishing edits, click Save Changes in every element’s settings.

2. In the Frontend Editor, click the blue Save button at the bottom.

3. In the Backend Editor or standard editor, click Update on the right sidebar.

4. View the front-end to confirm your changes are live.

Congratulations! You’ve successfully edited a page using WPBakery Page Builder. Explore additional elements, custom CSS, and extensions to further enhance your design. If you need more help, feel free to reach out!