Updating Pages
The Dashboard
First, before we talk about how to modify our content, let's discuss the Dashboard. Really, this is just WordPress name for the interface by which you can access the back end of your site. The Dashboard is where you build your site including adding posts, menus, pages, users,events and more.
Logging in
Before you can do anything - you need to login! There are two ways to do this:
- On your site, click on the login link in the top right corner.
- You can also access it directly by adding "/wp-admin" to your URL like this : https://jacksonreedhs.org/wp-admin/
Accessing the Dashboard
After you login, the homepage will be refreshed and there will be a few changes. The first one is a small but critical change. At the top of the screen you'll see a black toolbar. Let's talk about the various parts of this toolbar.
Menu Options
Jackson-Reed High School
if you hover over this - you'll see four options. The primary one you will use - is Dashboard. The other three options are contained within the Dashboard so you can access them either by clicking on Dashboard and then finding the appropriate menu or by going directly to them here.
- Dashboard: gives you access to the main back end of WordPress
- Themes: access to setting and changing the theme
- Widgets: allows you to move widgets around - widgets are small elements that can be placed in different parts of the layout of your website. For example in the graphic above, both the "Search this website..." box and the Admin menu are widgets which are placed in the Header Right section of the page.
- Menus: This allows you to access the menus that are used in the website. From here, you can change menu items, add menu items, remove menu items or even create or add whole new menus. Currently the website has only one menu which is displayed at the bottom of the screen.
Other Menus:
- Customize: Allows you to customize the theme. Essentially just a shortcut for Appearance -> Customize from the Dashboard.
- New: As shown in the image below - this creates a drop down menu which allows you to create a new post, media, page, and more. Generally speaking, you will use this the most to create a new post or new page.
- Edit Page: allows you to directly edit the web page that you are viewing. This opens up the editor for this page without having to go through the Dashboard.
- Beaver Builder:
If a page was created using BeaverBuilder - you can click this link to edit it directly via Beaver Builder. Note: you can tell if a page was create using Beaver Builder if there is a small green dot next to the Beaver Builder menu item as in the graphic to the right.
If the page was created using the normal editor - there will be a small gray dot as shown below. In that case, simply click on Edit Page to edit.
- Gravity View & Gravity Forms: if you are on a page that has a Gravity View or Form - these options will be available to edit them.
- Duplicate Post: this allows you to copy the current posts or page to a new post or page to work on. However, you should only use this if you are pretty comfortable with WordPress!
- Howdy,username - let's you know that you are logged in! You can also click on this to edit your profile
Accessing the Page to Edit
There are two ways to access the page you wish to edit.
- One: from the website, navigate to the page you wish to edit. There is a top black menu bar. It is shown below. You'll notice there are two options. Edit Page is what you would click if it was built the normal way. But, do you see how there is a green dot next to Beaver Builder? This means this page was built using that so to edit it - click the Beaver Builder option.
- Two: or access the back end by hovering over Jackson-Reed High School in the black administrative menu at the top of the screen and click on Dashboard. Click on Pages to see a list of All Pages. Select the page you wish to edit.
Editing the Page
- The page will be displayed. All of your pages have been created using a tool called PageBuilder by Beaver Builder which allows us to create more complicated webpages that still allow those who do not know HTML/CSS to update.
- If the page is displayed in the standard form such as when you edit a post and the Text Editor tab is the selected tab (see below) you can edit just as you would with a post.
- If however, the Page Builder tab is the default along with the message below you must click on the blue Launch Page Builder button.
- Note: if you need to edit a page in Beaver Builder - but accidentally click on the Text Editor tab and attempt to do it the normal way - the layout will get all wonky. If this does happen - don't freak out - it is easy to fix: simply reopen the page with Beaver Builder and save!
The Beaver Builder Dropdown Menu
When you hover over the Beaver Builder menu, you will see a pop-up menu similar to this:
- The page that you want to edit is the first line - here it is Home - and the word PAGE is next to it to show it is a normal page.
- This site uses Beaver Themer with it which allows us to easily theme headers, footers or special types of pages.
- In the image above, you can edit the Header New or the FooterNew - which are designated as the type of HEADER and FOOTER respectively. The little gear lets you know this is a template that is used across the website. So, if you updated either of these here - it will update it for the entire site. Which is handy but dangerous!
Using Beaver Builder
So, click on the Launch Beaver Builder button. You will see the page with a top menu displayed like
Hover!
Next, hover your mouse over the various areas of the page and you will see boxes appear around the content areas with a menu of icons for various tools in the upper right corner.
In the example above, you will see a dark gray toolbar - that is the row that contains various elements.
- This one contains a content slider element inside the row
- The blue toolbar inside it is for the text box element.
- Rows can have multiple columns inside of them and those columns can contain multiple elements like headings, images, text boxes, posts, and other fun things.
- You can edit rows or columns or elements by clicking on the Wrench icon.
Let's cover a few of the basics below. But first, one last thing. When you are done editing the page - you can click the Done button in the upper right corner. This will give you options to save or discard your changes.
Editing Text
It is relatively easy to change the basic text on the website. Simply go into Beaver Builder mode and then hover over the element you want to change. Hover over the wrench icon and you will see a menu like this.
To edit the module - click on Text Editor Settings. You will see a popup window appear like below:
You can directly edit the text in the box and add styling using the toolbar. Click the Save button when you are done!
You can also do more advanced editing using the other two tabs. The Style tab, shown below allows you to set the color of the text as well as font type and other fun things.
The Advanced tab, show below, allows you to set the margins around the text. The other features are more advanced so that should be the only one you are changing.
Important!!! Don't forget when you are done working click the blue Done button in the top corner and select the appropriate action:
- Publish : to send changes to live website
- Save Draft : save the changes but don't push them to the live website yet. Note - while these changes won't show on the website they will show up next time you click on Beaver Builder to edit the page.
- Discard: ugh - messed up - ignore what I just did and go back to the original.
The Beaver Builder documentation is very solid so most of these will have a link to that documentation. But, given that there are many, many modules - let's highlight the ones we commonly use. The module name is linked to the official Beaver Builder documentation on each one.
Primary
- Posts: allows you to display all Posts for a given category or tag. You have the option of four types of layout: list, gallery, columns and masonry. Read more about how to set this up and style it. There are also Post Carousels and Post Sliders modules which do what you think - rotate or slide through posts.
- Text Editor: use this a lot - basically allows you to put text in. It has toolbars to help style and you can add images & videos to it. If you click on the Text tab - you can modify the HTML of the content.
Other Useful
- Accordion: allows you to display information that can be displayed when the title is clicked on. These are great for displaying a lot of information without having to have super long pages. Work well on mobile devices. Read more and see examples.
- Button: Create a button that performs an action when the user clicks on it. Easy way to make a cool looking button. Note, that lots of other modules have buttons built into them such as Callouts and Call to Actions. Sometimes, though you just need a button.
- Callout & Call to Action: these are very similar - they basically let you combine an image, heading, text, a button and an optional icon to create a section of code that gets the user to do something or highlights some info. I use Callouts more but I'm really not sure why. You can read the documentation to see more details about how to use them and how they differ.
- Content Slider: allows you to create sliders of information with photos, buttons, text and more. Right now the front page has one. The Slideshow module is similar to this one but I use it less often.
- Gallery: allows you to display a collection of photos in varies ways.
- Heading: though you can have a heading in text boxes or other modules like callouts - this allows you to just pop one in wherever you want. The advantage of using this module is that it is easier to move things around in the future if the heading is separate.
- Map: pop in a Google Map. Who doesn't love that!
- Menu: put in a menu. Right now - we use this in the Header New and Footer New templates. Note, this isn't how you create them it just allows you to put them in easily wherever you want.
- Photo: just like with buttons and headings - you can insert these in other modules - but sometimes you just want a photo!
- Tabs: let's you display content using a tab format - I tend to favor accordions over these as they are more mobile friendly and work better for a large number of items. But tabs work well for 2-4 items.
- Video: I'm not a huge video fan but I'm old! This allows you to embed videos directly from the media library - if they are small. Otherwise, upload them to Vimeo or YouTube and then embed them.
Everything Else with Beaver Builder
Rather than recreate the wheel - because this can get complicated - take a look at some of the excellent help pages from the folks at Beaver Builder.