Tutorial for VCCFA Editors

This page will explain how to update the website content with WordPress and Divi builder.

1. Introduction

1.1. How to log in WordPress

1.2. WordPress Dashboard Overview

2. How to Make Posts

(News, President Letter, Initiatives)

3. How to Update Events

4. How to Update Files

4.1. Upload a File to Divi Library

4.2. Update a File on a Page

4.2.1. Collective Agreement

4.2.2. Seniority List

4.2.3. Professional Development

4.2.4. VCCFA Handbook

5. How to Update Accordions

5.1. About Accordions Menu

5.2. How to Update Accordion Contents

5.2.1. Edit the Header Title and Text

5.2.2. Edit a page link

5.2.3. Edit a PDF Link

5.3. How to Add a New Accordion

5.3.1. Add a New Title Inside an Accordion

5.3.2. Add a New Nested Accordion

6. How to Update Contact Information

7. How to Update Footer Contents

7.1. Edit Quick Links

7.2. Edit Address

8. How to Restore a Page

1. Introduction

1.1 How to log in WordPress

1) Go to vccfa.com/wp-admin
2) Put admin username and password to log in
Username: TBC
Password: TBC
3) If you want to change the password, hover over the account setting icon at the top right, and click ‘Edit My Profile’.
You can update the nickname, contact info, profile picture, and password.

1.2 WordPress Dashboard Overview

  1. Dashboard Menu: The WordPress Dashboard provides a navigation menu that contains some menu options such as posts, media library, pages, comments, appearance options, plugins, users, tools and settings on the left side.
  2. Welcome: Short links for customizing the site. Do not worry about this part.
  3. Events Calendar: This is where you can create events.
  4. Quick Draft: The Quick Draft is a mini post editor which allows writing, saving and publishing a post from the admin dashboard. It includes the title for the draft, some notes about the draft and save it as a Draft. For making new posts, such as President Letters, better create them in the Posts page.
  5. Site Health & WordPress events and news: Do not worry about this part.
  6. At a Glance: This section gives an overview of your blog’s posts, number of published posts and pages, and number of comments. When you click on these links, you will be taken to the respective screen. It displays the current version of running WordPress along with the currently running theme on the site.

2. How to Update Post

(News, President Letter, Initiatives)

1) In the dashboard menu, click ‘Post’ tab, and click ‘Add New’ button to create a new president letter, news, or initiative post.

2) Add the title of the new post, and click ‘Use Default Editor’ to use the simple and easy WordPress default editor.

3) Write the contents by clicking the area under the title.

4) Make sure the visibility is set ‘public’. 
It is very important to check off the relevant category of the post. This category determines where this post will be shown on the website. *Please check off either one of the three categories ‘initiatives’, ‘news’, and ‘president letters’.

5) Make sure the page layout is set ‘no sidebar’.

6) If you want to add some images in the contents, click the + plus button at the top left, and click ‘image’. You can upload images either directly from your computer, from the media library, or by inserting the URL.

7) If you want to remove the image you already have in the content, click the image to activate the setting buttons, and click the last button that has three dots. And then click ‘remove block’ to delete the image.
8) Featured image is used when you want to display the image on the post preview. (See below for an example.) The featured image is not necessary.
Below is an example of how the featured image would be shown.
9) Once everything is ready, click ‘publish’.

3. How to Update Events

1) Go to M.E.Calendar – All Events tab from the dashboard menu. Click ‘Add Event’ button.
2) You will see the step-by-step instruction below. Follow the steps to put event information; event name, time and date, location, organizer (you can choose VCCFA for the organizer from the dropdown menu), event details, etc. 

3) If you don’t see the above instructions, and see below the default editor instead, type in the event title and details there.

4) If you scroll down, there are more setting options such as date, time, location, organizer, etc.
5) Once you set up all the information, make sure the visibility is ‘public’, and then hit ‘Publish’ button.
6) Once you publish the new event, it will automatically create a comment section for the event. (See below for an example.)
To remove the comment feature, please go to All Events tab and check off the event you want to remove the comment from.
And click the dropdown menu that says Bulk Actions, and choose ‘edit’ and hit ‘apply’.
Go down to the dropdown menu for comments setting, and choose ‘Do not allow’, and hit ‘Update’ button.

4. How to Update Files

4.1. Upload a File to Divi Library

Media Library is a tab in your WordPress admin sidebar which is used to manage user uploads (images, audio, video, and other files). Under the Media menu, there are two screens. The first screen Library lists all the files in the media library. These files can be edited and deleted from the library.

Open the WordPress Dashboard and click the ‘Media’ menu in the sidebar.

Media Library list shows up. Click the ‘Add New’ button.

To upload a new file, drop the file to the upload area or click the ‘Select Files’ button, and select the file.

When you upload the new file successfully, the new file will show up in the list.

4.2. Update a File on a Page

To edit a link to the file you uploaded to Divi Library, you need to change the settings under Page editor (Divi Builder). To use the page editor, click the ‘Page’ menu in the sidebar.

The page list will show up and so click the page title that you would like to edit.

4.2.1. Collective Agreement

Click the ‘Collective Agreement’ on the page list page.
The editor page will show up, and then click the ‘Edit With The Divi Builder’ button.
The Divi Visual Editor page will show up. The Visual Editor will allow you to edit the layout, content, and any links. Please be careful not to edit the content unintentionally.
If you click the ‘View Full Document’ button component, a small gray bar will show up, where you can set the PDF link up.
Click the setting icon on the bar.
By clicking the setting icon, the Button Settings menu shows up. Click the ‘Link’ menu.
There is a ‘Button Link URL’ text box, where you can add a link to the button module.
Now you can open the Dashboard page in a different tab. Open Media Library and click the file that you would create a link.
The Attachment Details menu will open. Copy the URL in the ‘Copy Link’ text box.
Return to the Divi Builder page, and paste the URL in the ‘Button Link URL’ box. (Please note that the URL is from the development website and the actual one should be different.) Click the green check button to save it.
Click the ‘Save’ button to publish the new link.

4.2.2. Seniority List

Open the Divi Visual Editor page. Please read 4.2.1. Collective Agreement to see how to open the editor page.
If you click a button, a small gray bar will show up, where you can set the PDF link up.
By clicking the setting icon, the Button Settings menu shows up. Click the ‘Link’ menu.
There is a ‘Button Link URL’ text box, where you can add a link to the button module. Copy the link URL of a new file in ‘Media Library’, and then paste it into the Module Link URL following the same steps as 4.2.1 Collective Agreement. Click the green check button to save it.

4.2.3. Professional Development

Open the Divi Visual Editor page. Please read 4.2.1. Collective Agreement to see how to open the editor page.
If you click a button, a small gray bar will show up, where you can set the PDF link up.
By clicking the setting icon, the Button Settings menu shows up. Click the ‘Link’ menu.
There is a ‘Button Link URL’ text box, where you can add a link to the button module. Go to ‘Media Library’ and copy the link URL of a new file, and then paste it into the Module Link URL following the same steps as 4.2.1 Collective Agreement. Click the green check button to save it.
Click the ‘Save’ button to publish the new link.

4.2.4. VCCFA Handbook

Open the Divi Visual Editor page. Please read 4.2.1. Collective Agreement to see how to open the editor page.
If you click a button, a small gray bar will show up where you can set the PDF link up.
By clicking the setting icon, the Button Settings menu shows up. Click the ‘Link’ menu.
There is a ‘Button Link URL’ text box, where you can add a link to the button module. Go to ‘Media Library’ and copy the link URL of a new file, and then paste it into the Module Link URL following the same steps as 4.2.1 Collective Agreement. Click the green check button to save it.
Click the ‘Save’ button to publish the new link.

5. How to Update Accordions

5.1. About Accordions Menu

To edit the content on accordions, you need to go to the ‘Accordions’ plugin menu. Click ‘Accordions’ menu in the sidebar.
The accordion list will show up. Click the title to edit an accordion. For example, if you would like to edit the Rights & Benefits accordion on the FAQ page, click ‘FAQ-Rights & Benefits’. The FAQ and Forms page have child accordions (the orange ones) inside the one parent accordion (the blue one). You can edit the content under the child accordion menu.
Edit Accordions page will show up. In the ‘Content’ menu in the sidebar, you can edit the content. Open the editor by clicking the header (‘When do I qualify for Benefit coverage?’).

5.2. How to Update Accordion Contents

5.2.1. Edit the Header Title and Text

You can edit the header in the Header text box.
You can edit the text in the Accordion body editor.
Before publishing, you can preview the change. Click the ‘Preview Change’ button.
This is the preview page.
Click the ‘Update’ button to save it. The change will be applied to the existing accordions.

5.2.2. Edit a Page Link

Inside the Accordion body editor, click the word that you would like to edit the link, and then a URL will show up.
Click the pencil icon.
A link editor will show up. You can edit the URL here, or click the setting icon to edit the details.
The Insert/edit link will show up. You can edit the URL, Link text, and tab setting (if you want the link to open in a new tab, please check the box next to ‘Open link in a new tab’). Click the Update button to save the change.

5.2.3. Edit a PDF Link

You can edit the PDF file link on accordions in the same way as page links. Click the file name in the Accordion body editor and open the link settings.
There is the URL text box, where you can put the URL you uploaded the file in ‘Media Library’. Read ‘4.2. Update a File on a Page’ to see how to copy the URL in ‘Media Library’. After editing the URL, click the Update button to save the change.

5.3. How to Add a New Accordion

5.3.1. Add a New Title Inside an Accordion

This section will explain how to add a new title to an existing accordion. Adding a new question under Rights & Benefits accordion will be one example.
To add a new title, click the Add button in the Content menu.
The new title will be in the Accordion content menu.
If you click the title, the editor will show up. Edit the header and accordion body here.

5.3.2. Add a Nested Accordion

This section will explain how to add a new subcategory accordion to FAQ or Forms page. Adding a new category accordion (a blue one) to the FAQ page will be one example.

To create a new accordion, duplicate an existing accordion to take over the style such as colours, font size, icons, etc. Click the ‘Duplicate’ under the accordion title you want to duplicate. For example, if you would add a new FAQ category accordion, duplicate any existing one such as the ‘FAQ – Wage Scale’.

Open the copied accordion, and then edit the accordion title and content.

To add the new category accordion to the FAQ page, you need to use a shortcode. Click the ‘Shortcode’ menu in the sidebar and copy the ‘Accordion shortcode’.

Open the ‘FAQ’ accordion, that connects the child accordions with the shortcodes. Click the ‘Add’ button.
A new title appears. Click the title to open the editor.
Edit the header and paste the shortcode into the Accordion body editor. Now the parent FAQ accordion can have a new category accordion inside it.

6. How to Update Contact Information

From the dashboard, go to the upper left corner and hover over the house icon.

Click “Visit Site”

You will be directed to the site. From here, go to the page which you wish to update.

In this case, we’ll be updating the “Contact” page. Here, click the purple button up top that says “Enable Visual Builder”

This is where the magic happens. As you’ll notice, each section lives within another one. Identify where the text you wish to update is, and as you hover over, click the section that most closely contains it. In this case, the contact info I’m updating here lives in the grey area.

Click over the area you are updating and you will get a set of options. You want to click the gear icon that’s called “Module Settings”.

A window will pop up with the section’s styling. Don’t worry about all the options here, just change the text you need to change and click the check button.

Make sure to click the check button in order to save your changes.

Now in order to finalize, go the purple circle with the three white dots at the bottom middle of the page.

Click it. Now a “Save” button will appear at the bottom right corner. Click “Save”.

Now we are done and we can exit the visual builder. Go to the top of the page and click on “Exit Visual Builder”.

You did it!, now you can click the home button at the top left corner to go back to the dashboard.

7. How to Update Footer Contents

This section will explain how to edit the quick links and address on the footer.

7.1. Edit Quick Links

To edit the quick links, Go to ‘Appearance’ > ‘Menus’ menu, where you can manage the menus on the header and footer.

Select ‘Quick Links’ and click the ‘Select’ button.
In the Menu Structure menu, the page list in the quick links will show up.
When you would like to add a page to the quick links, select the page in the ‘View All’ tab, then click ‘Add to Menus’.
The page you selected will be added to the page list. Click the ‘Save Menu’ button to save it.
If you need to remove a page from the quick links, open the editor tab and click the ‘Remove’ button.

7.2. Edit Address

If you need to change the address in the footer, please go to Appearance > Widgets menu. The ‘Footer Area #4’ is where you can edit the address. Click the ‘Text: Contact VCCFA’ tab.
Edit the text in the text editor.

8. How to Restore a Page

On the Page list, click the ‘Edit’ button on a page you would like to restore.

Click “Revisions” menu on the side menu.

You will see all revisions in the past. Click the ‘Previous’ button and go to the revision you would like to restore.

Click the ‘Restore This Revision’ to restore the page to update it.