Have you ever tried to edit the content on your WordPress site, saved your changes, previewed it, and realized you just destroyed the entire page and lost all your styles? If not, then you must be using WP Bakery! WP Bakery is a drag and drop page builder plugin that allows you to easily edit and rearrange content without any hard coding. Without plugins like this, it can be complicated for the average user to update their pages. If you aren't familar with HTML, you'll never understand why you just lost the font, size, and color, just from editing a line of text. How frustrating!
In this blog post, I am going to tell you how to edit your pages using the WP Bakery plugin (along with other basic WordPress how-to's if you're new to this CMS).
Note: WP Bakery rebranded in 2018, and was previously known as Visual Composer. If your website was built prior to 2018, you will be running on an older version of the page builder, and it will be referred to as Visual Composer in your CMS. The functionality remains the same for the most part.
Logging In
First, to login to your new website, you will head to www.yourdomain.com/wp-admin. You will then be prompted to enter your username and password which should be provided by your web designer. After logging in, you will be brought to the site’s dashboard where you will see a panel on the left with different options. This area is often referred to as the backend, or admin area, of the website.
If you're logging into your new website for the first time, this is the first thing you'll want to do. Your web designer would have had to use a generic password to set you up, so you will want to change it to something you will remember. To change your password, click on the “Users” tab in the left panel. Click your name, and then click "Generate Password". Here, you can type a new password and click save. Please do not change any username/passwords for Navitas Marketing staff. If you see a username that looks suspicious to you, please do not delete it. Notify your designer instead.
Adding a New User
Hover your mouse over “Users” and click “Add New”. Create a username and add the user’s email address and first and last name. To add a password, click “Show Password”. It will automatically fill in with a long generic password which you can erase and type in whatever you want. It may warn you that your password is weak, meaning not original enough. You can still use the desired password even if it's marked as weak, by checking the box next to “confirm use of weak password”. Always set the “role” as “administrator” if you want the user to have full access to editing the website. If the user is solely a blog writer, you can give them “author” access to limit what they can edit.
First, click "Pages" in the left panel. You will see a list of all the pages on your website. Click the page you want to edit. You will then be brought to a new page that displays all the content on that page within a grid, neatly organized. Select the page you want to edit.
To change any of the content, hover over the area you would like to edit until you see a green bar of icons appear over it. Within these icons is a pencil icon. This is the "edit" icon. Click the pencil to make your changes. A small popup window will appear. If you are editing text, it will be a basic text window. If you are changing a photo, you will see the image at the top of the popup window. You can click the empty box next to the image that has a green "+" sign in the middle of it. A new window will appear with all of your photos on the site. You can either select a photo from this library, or you can add a new photo by clicking "Upload Files" in the top left corner. Click "Select Files" and locate the image on your computer. Click "Set Image". Click "Save Changes" when you arrive back to the small popup window. This will close the popup window.
To delete a text block or an image, hover over the item, and click the "X" symbol (or trashcan symbol in older versions) in the green bar. You can clone an item by clicking the symbol that looks like two squares overlapping. It will duplicate the item, and you can then drag it elsewhere by clicking and holding on the left side of the green band (your cursor will turn into a cross), dragging, and releasing.
You will also notice these same icons appear in the gray area above each row and section. Clicking these icons will make changes to the entire row or section. You can delete and rearrange the same way you would do so with a single element.
You can preview the page before saving to make sure it looks the way you intended it to. When you've approved the changes, click the blue "Update" button in the top right corner of the main page to save.
Adding Content to Your Page
To add a new element (image, text, button, etc.), you will click the large "+" sign that appears just above the content blocks on the page. A window will appear giving you many element options to choose from. You can click the element you want, and a new, smaller popup window will apear (the same one you had seen previously while editing content). From here, you can follow the same instructions from above. When you save and exit the window, you will see the element will automatically be added to the bottom of the page. You can drag and drop it to wherever you'd like.
Adding/Editing Blog Posts
Click "Posts" in the left panel. Here, you will find all your blog posts. Click the blog title to edit the text. Click the blue "Update" button in the top right corner of the page to save your changes. To add a new blog post, click "Add New" at the top of the Posts page. Enter your title. Enter your text in the body area. To add an image, scroll down and click "Set Featured Image" in the right panel. Add the image the same way you would add an image to a page in the previous section. To add a category, either check any of the existing categories in the "category" section in the right panel, or click "add new category" below. You can have as many categories for a post as you'd like. Click the blue "Publish" button in the top right corner of the page when you’re finished.
Additional Plugins
Your website may have other third-party plugins installed because of certain requested features such as a testimonials, an image slider, a portfolio/case studies, etc. If your website includes something extra that was not mentioned above, keep reading!
Strong Testimonial
Strong Testimonial is a plugin used for testimonial pages. Click "Testimonials" in the left panel in your dashboard. Click "add new" at the top left of the page. Enter the person or company name where it says "title". Paste their testimonial in the body text area. Click the blue "publish" button to the right of the page to save.
Slider Revolution
There are a TON of settings within this plugin, but don't let it intimidate you. You can ignore 99% of the stuff in here. Click "Slider Revolution" in the left panel in your dashboard. You will then see your sliders on the page with their captions. Click on the slider you would like to edit. On this page, you will see all your slides within the slider display at the top. Click the slide you would to like to edit. To change the photo, right beneath the row of slides, you will see an area with a bunch of tabs that say "Main Background, General Settings, Thumbnail, etc.". You want to be on the first tab that says "main background", which you should be on automatically. Click the blue "media library" button below the tab. Upload/select your photo here. Click the green "save slide" button with the floppy disk icon in the top right of the page to save your changes.
Tell us what you think!