Want to start editing some of your own pages on WordPress? Here's your guide for getting started with or without a visual builder plugin (like Divi or Visual Composer.)
Whether you hire professionals to manage your site or choose to take the DIY method, it's good to know a thing or two about updating your old site.That way, simple fixes like correcting a typo don't have to be identified, emailed about, scheduled, and then finally finished once your webmaster has the free time.Instead, you can quickly institute the change yourself with absolutely no hassle.Please take note of the fact that, in this tutorial, we'll be demonstrating how to edit pages on sites powered by either the Divi theme and Divi Builder or Visual Composer and the Total theme. You will want to be aware of the fact that every single theme and website building plugin is different, so making updates could look different on your site, depending on which theme is installed.That said, most of what you'll learn in this article is universal to all WordPress websites. The two sites we've chosen to edit use two of the most common website builder plugins out there as well as a couple of the most popular themes. If your site was built by a professional, it's likely that you have one of these plugins installed.Either way, by reading this, you should be able to learn most of what you need to know to make changes to your site.
Before you even begin to update your site, ensure that your webmaster has given you the login information that will be necessary.Unlike many website builders, logging in to WordPress is done directly through your own website. Unless your administrator has changed the link, you can typically login by visiting yoursitedomainname.com/wp-admin or yoursitedomainname.com/wp-login.If neither of these destinations bring up a login page, contact your web administrator to get the correct one.Once you do have the correct link, you should see a page that looks like this.
Again, note that login information for your site is created by whoever you have administering the site. You may need to ask that person to create a login for you if one doesn't already exist.Once you type in your credentials and login, you'll be re-directed to the WordPress dashboard on your site. From there, you can navigate towards the page or post that you want to update.
From the WordPress dashboard - the first page you see when you login - you'll notice a large, black sidebar on the lefthand side of your screen.Depending on which plugins have been installed into your site, this could look a little bit different for you than the example below. That said, many of these options are universal and are on almost every site.
Right now, only two of the buttons on this side of the screen should matter, the pages button and the posts button.Upon navigating to each page, you'll see that there are few differences between how the two are laid out. The difference is in the classification. On WordPress, a page refers to...a page. The "Home" or "About" pages on your site should be found here, for instance. You'll also be likely to find the one page that houses all (or most of) the "posts" on your site.
Posts, unlike pages, refer to blogging. They're pages too, but they aren't usually the ones you'll find working as the home or about page. Instead, they can all typically be found on your site's blog - if there is one.As you go to make edits, try to consider whether the page you're looking for really is a page or if it would actually be classified as a post. Once you've found it, go ahead and click "Edit."
Once you've clicked to edit a page, you could see a variety of different looks. All of this depends on what kind of page builder your site is set up with (if any.)If you don't have a website builder installed, you'll see this (or something close to it):
This empty white box is called the WYSIWYG editor. This stands for "what you see is what you get".If you type text into this box, add an image, or link to something and then save those changes, you'll see what you created in a way that look essentially the exact same way on your site as it did in the builder.If this box isn't empty and has content in it, that means that this WYSIWYG editor is the one that's defining the content layout for that page. If you need to edit your page, it doesn't get much simpler than this, simply correct what you need to from right here, click save, and then be done!If you do have a website builder installed:Then first know that it's not advised to make any changes from the WYSIWYG editor as it could mess up the content that already exists on your site. Instead, click the buttons you see that allow you to "enable" or "launch" your builder.In fact, if the builder's been launched once before for the page you're on, then you might not even have to do that. You'll probably just find yourself looking at a screen like this one that Divi shows.
If you have another website builder, you might see something more like the WP Bakery Builder (Visual Composer) edit page:
Whatever, the case, don't get intimidated. No matter what your builder's edit screen looks like, they all serve the same purpose: allowing you to easily edit your site's pages.Making Backend ChangesIn many (but not all) website builders, there's a way to edit your work from the backend (without looking at the changes as they're actually appearing.)It might sound like more fun to edit on the frontend, and, to be honest, it is. If you're not extremely comfortable with your website builder, it can be a whole lot easier too.That said, backend editing is good to know. Sometimes, frontend editing fails or becomes glitchy and unreliable. In those cases, editing on the backend is much easier.Most website builders make the backend editor fairly easy to understand. If you use the Divi Builder or aren't sure which website building plugin you have, read this next section. If you use Visual Composer, skip the Divi section and read that next.
In Divi's builder, each and every module is labeled with what it actually is. You can even click those three parallel bars on the left side of the module to open it up and see what's inside.
As you can see, the site's general layout is indicated here. Those blue labels are sections - they're used to divide content into groups. The green label indicates a row - rows hold modules like images, text, etc. Like sections, they're an organizational necessity that can be used to separate things.It's even possible to see columns here. In the image above, the blue section on the top is a one-column portion of the site while the bottom section is a two-column portion.But now that you understand the layout, how do you make edits?The first step is to identify exactly where you want to make an edit. If you're editing an existing button, image, link, text block, etc. then editing's as easy as clicking the three parallel bars on the lefthand side of each module that you need to edit.If you're editing text, that's extremely simple - simply delete or add words right into the text box. If you're editing design elements, you might have to click around more until you find the option you want.
To move something to a different location on your page, simply drag the elements around by clicking and holding down your mouse while hovering over the thing you want to move.
To create a new module, simply click "Insert Module". You'll have a wide variety of options to pick from.
Once you've made it this far, you're pretty much set. Simply select the module you want to add it to your page and then open it up to follow the editing process.The Backend Visual Composer BuilderOne of the benefits of using the Visual Composer (WP Bakery) builder is that the backend user experience is very easy to follow. Like Divi, everything is laid out or more or less in the way that it will appear on the page.
That makes editing as easy as selecting the element you want to edit and working with it from the popup that greets you once you've clicked to do that.
Editing text, links, colors, and more is easy from this "Settings" pop up - everything's categorized into a logical place so that the things you want to edit are easy to find.The only potential difficulty of editing within Visual Composer's backend is that it can be hard to tell where things on the page lie in relation to one another.Like in Divi, content can be organized into rows and columns, but knowing the distance between two different elements within those rows and columns can be difficult to learn.In these cases, it might best to switch over to the frontend builder to fine tune the page you're creating.
For beginners and professionals alike, frontend or "visual" builders are some of the best to use when developing a web page. For instance, this entire page was designed with the visual builder that Divi offers.Popular WordPress plugins for page building include Beaver Builder, Divi, and Visual Composer.In this guide, we'll show you a thing or two about building on the frontend in either Divi or Visual Composer. Many of the same principles are relevant to Beaver Builder as well as other top plugins.
In Divi's Visual Builder, all of the same principles from the backend building experience carry over. However, in this mode, you'll be seeing the page as it will actually appear once you click publish.Unless you're hovering over one of the elements on the page, you won't see any editing tools outside of the purple buttons on the toolbar that appears at the top or bottom of the page.That said, when you do hover over elements, you should see black, green, or blue labels. Like when building on the backend, these colors stand for modules, rows, and sections respectively.[/et_pb_text][et_pb_image src="https://feedbackwrench.com/wp-content/uploads/2018/05/Screen-Shot-2018-05-25-at-3.46.35-PM.png" _builder_version="3.3.1"][/et_pb_image][et_pb_text _builder_version="3.3.1"]To edit one, just click the gear icon. Otherwise, text can usually be edited straight from the page. Simply click around the text like you would in a text editor and you should find it easy to edit.
Once again, Visual Composer shows similarities to Divi in the way that the frontend builder very similarly reflects the backend builder. You'll see rows, columns, and elements.To edit an element, you do have to press the "pencil" icon, and you'll find that changes aren't made "live". Instead, the changes will be made after you save what you've done within the element's editor popup.
After you've finished building a page to your liking, ensure that you save it before exiting. It might sound like common sense, but these days with so many programs offering auto-save functionality, it should definitely be noted that changes are rarely auto-published by page builders. After all, sometimes it's nice to be able to build without publishing.