How do I update my content on WordPress?
There are a few different ways to do this, and it will depend on how your website is built. Every development team is different, but the top two common ways that custom built websites allow to update content is either through a Page Builder, or via Custom Fields.
Method 1: Page Builder – Block Editor
There are a few different Page Builder options out there, but one of the most popular (and one that we use for certain clients) is called Divi. Divi allows you to make changes either via Block Editor or Visual Editor. The Block Editor has a layout closer to a traditional website wireframe, and breaks each part of the website out into Sections, Rows, Columns, and Modules.
For this example, we’re going to edit this section of our example site. This is what it looks like to users:
And this is what is looks like in the Block Editor:
This can look a bit overwhelming at first, but bear with us.
Blue = Section
Green = Row (which is split into Columns)
Grey = Modules
If you compare the two images, you can see where each Module lines up with the live version.
Why all these boxes?
All these containers seem excessive at first glance, right? But each of these serve a purpose in order to provide a responsive layout.
This is your outer-most container. This is where you can decide if you want your background to reach the edge of the screen, or have a Boxed Layout. For the most part, this will be decided by the overall design of your custom theme, so you likely won’t have to mess with this.
This is where we start to provide some structure. Each Row contains your Columns, and allows you to have content placed alongside eachother and/or stacked. Again, most likely your Theme will have default settings to automatically provide consistent spacing. You can change the number of Columns in a row using this button:
This is where the fun stuff happens. Modules are different types of pre-built code that allows you to place simple items such as text and images, as well as more advanced items such as galleries, buttons, video players and more. Each of these Modules will provide you with options to customize your content as needed.
Updating your Content
Now that we’ve covered the basics, here’s how to update your content.
Let’s say we want to change the text of this Module:
We would open up our Page and find the corresponding Module in the Block Editor:
Note: depending on how your site is built, this may be split into an Image Module and a Text Module. In this case this is a Blurb Module that has been renamed to make it easier to identify.
Our first step is to click on the gear icon that looks like this: . This gear icon will open settings for any item (Section, Row, Column, Module etc)
Clicking this icon will bring up your Settings for this Module:
We can see quite clearly where we can edit the text. If we wanted to change out the image, we would expand the Image & Icon section:
If we hover over the image, that gear icon will appear. Click that to open up the Choose an Image screen. This will give us the option to either upload a new image, or choose an image from our Media Library.
Once we’re happy with our selection, we will click the Upload an Image button at the bottom right:
Happy with your changes? Now we click the green check mark on the bottom right of our Settings popup:
Viewing Your Changes
Now at this point, you can choose to either Preview or Update your changes. We generally recommend you Preview your changes to make sure they appear at they should. Clicking Preview will show you an example of the page in a new tab. This version is temporary and only visible to you until you click Update. These buttons are near the top of your page and look like this:
Let’s hit Preview and view our new content. In this example, we’ve only updated the Body Text:
Looking good! If we’re happy with the changes, we’ll hit Update and the changes will be live!
Changing a Background Colour or Image
Let’s say we want to change the background of this section:
Once again we would find the corresponding section in our Block Editor. This time, we’ll click the gear button in the blue bar:
And again, this will bring up our Settings popup, where we’ll expand the Background section:
The Paint Bucket Icon would give us a solid colour, but in this case we want to keep the image background, so we’ll make sure to select this icon:
If we hover over the image, we can click on that gear icon again, which will bring up our Media Upload:
Now we’ll either upload a new image or select an existing image from the Library. In this case we’ll select an existing image and click Upload an Image at the bottom right.
We’ll see a new image now in our Settings popup:
We’ll click the green check mark, and hit Preview to view our changes:
If we’re happy with the changes, we’ll click Update!
This same process also works for changing the background of Rows, Columns and even some Modules.
Method #2: Visual Editor
Our second option is to use the Visual Editor. We would open up our Page and click this button at the top just under the title:
This will open up a page that looks almost identical to our live version, but allows you to hover over each item with an option to edit.
Let’s edit that same module again using the Visual Editor. Hover your mouse over your Module and click the gear icon:
This will bring up that same Settings popup we saw before, where we’ll change the Title text to “Module Title”:
We’ll click that green check mark and we’ll be able to preview our work right away:
If we’re happy with our changes, we’ll click this button at the bottom of your screen to bring up your page options:
Click Save to publish your changes. Again, each Section, Row, Column and module can be edited following the same steps.