HOW TO EDIT YOUR WEBSITE

To view a recording of the training session:

https://childcareforwa.com/wp-content/uploads/2023/04/Training.mp4

To view a page with examples of various elements:

General WordPress info

If an item is in draft mode, only logged-in users can see it, not the general public. You publish an item when it’s ready for the whole world to see it.

When editing an element on a page, e.g. a text block, you need to click Save Changes in that element AND click the Update button as well. The first action saves the change to the element, and the second saves the changes to the page.

Clicking the Preview button in the top right is a good way to preview your changes. Sometimes, though, it’s not 100% accurately, especially when displaying the padding around a text element. The foolproof way to see what a page will look like is to either publish it or save it as a draft, then click the Permalink directly below the title.

To create a copy of a page, click Pages > All pages, hover your mouse over the page title you want to copy, then click New Draft. This creates a copy of the page in Draft mode.

To add a blank paragraph, press the Enter key.

To add a new line, press Shift + Enter. (You can also insert a new line by adding <br>
in the Text tab of the editor. (br means line break.)

When viewing a list of items, i.e Pages:

hold the mouse over the title to show the options available for that item, such as Edit and Quick Edit
use the search bar in the top right corner to quickly find what you’re looking for
clicking on a column heading generally causes the list to be sorted by that column. Clicking the column heading again reverses the sort order.

Using templates

To add content using an existing template:

Click My Templates at the top of the WPBakery Page Builder
Click on the template you’d like to add
NOTE: templates are always added at the bottom of the page

To create a new template:

Create the content that you want to make a template of on a new page
Click My Templates at the top of the WPBakery Page Building
Type the name you want to save the template as in the Template Name box
Click Save Template to the right of the Template name box

NOTES:
— There’s currently not a way to edit an existing template. You’ll need to add the template you want to edit to a new page, save it with a new name then delete the old template.

Managing users

To manage users:

click Users in the left column of the Dashboard
click Edit when hovering over a user to change their password, email address, roles, etc.
click Add New at the top to add a new user

Roles define what level of permission a user has. Editors can manage almost everything on the site, but can’t do things like add/remove plugins. Administrators have complete access. For security reasons, you should try to limit the number of users you have, and give users the role that have the minimum permissions needed. So if a user with a role of Editor finds there are certain things they need to do, but can’t, then add the role of Administrator to that user. Note that the default status of a new user is “subscriber.”

Adding/editing media (images, pdf’s)

For foreground images, you can upload as large an image as you want, since WordPress automatically creates smaller versions to optimize fast page loading times. This is not the case for background images, though, so those should be optimized before uploading.

To add media:

Click Media > Add New
Drop files on the box, or click Select Files to select certain files

Once you’ve added media, you’ll need to edit the metadata associated with the item:

Click Media > Library
Click on the item you want to edit
Add a description in the Alternative Text box. This is what screen readers use for accessibility, and also what search engines index.
Click the X at the top right to close the box, or use the < and > arrows to move through the library

To edit an image:

Click Media > Library
Click on the item you want to edit
Click Edit Image below the thumbnail of the image
To scale an image (resize it proportionally)
- Enter the new size you want in the New Dimensions box of the Scale Image section. You only need to enter one dimension–the other will be determined automatically.
- Click Scale

To crop an image (remove part of it)

Click the Crop tool in the upper left
Drag one or more of the handles of the bounding box. Move the mouse inside the bounding box if you want to drag it.
If you want a certain aspect ratio, or a certain selection size, enter those in the Image Crop section
Click Save

To replace a background image:

Note the size of the image you want to replace
Upload the new image
Crop the image to the same size as the original image
Delete the old image in the container it is in, and select the new background image

NOTE: it’s a good idea to resize the browser window afterwards, and check to see that the image works on a variety of screen sizes, especially mobile.

To replace media:

Click Media > Library
Click on the item you want to replace
Click Upload a new file in the Replace Media section
Click Choose File and choose a replacement file
The defaults (Just replace the file and Replace the date) are typically what you want, so no need to change those
Click Upload
Make any changes needed to the metadata
Click Update to save

NOTE: replacing a media item deletes the old one from the site. This is typically what you want to do when you’re updating a pdf that has staff contact information, for example. If you want to keep the original document, e.g. annual reports for multiple years, you’ll want to add a new media item, not replace one.

Adding a new page does not automatically add it to the menu. To add a page to a menu, choose the menu you want to edit, then click Pages in the Add Menu Items in the left column. Click the Search tab, and type the name of the new page. Check the box next to the page, then click “Add to Menu.” The page appears at the bottom of the menu you’ve selected, and you can drag and drop it where you want it to appear.

SEO

This site uses a tool called Yoast SEO to manage your SEO content. It is a robust tool that you can use to varying levels. The three most critical elements we recommend you address for every page are:

Focus Keyphrase: This field allows you to enter a keyword or keyphrase you’d like the page to rank for in google. Learn more about selecting a keyword.
Meta Description: This field allows you to enter a short snippet of text which will appear as the preview text in search results. The Yoast tool will help you see if your description matches well with your keyphrase and also guide you to the correct length.
Social: Clicking on the social tab at the top of the Yoast box will allow you to enter a custom image, title and description for both Facebook and Twitter.

Row attributes

Rows have the following attributes:

Type: whether the row is In Container (within the content area container), Full Width Content (both the content and the background are the full width of the screen), or Full Width Background (the content is within the content area container but the background is the full width of the screen)
whether the columns are equal height
padding (top and bottom)
custom text color
text alignment
Disable row
Background tab: background (an image or a color)
Shape Divider tab: fancy designs

Type

if a row just contains content that you want in the content area container, choose In Container
if a row has a background color and/or Shape Divider, chose Full Width Background
if a row has content that you want full bleed, choose Full Width Content (you probably won’t use this on your site)

Equal Height Columns

Choose this if you have multiple columns of content that you’d like to be the same height

Padding

You’ll want to be consistent in the use of your padding across the site. Use percentages, not fixed amounts, for a better visual look across multiple devices. I’d recommend 3-5% as a starting point. Only set one (top or bottom) padding, otherwise rows will be twice as far apart as you’d like.

Disable row

Hides the content of the row. Useful if you’re working on new content on a page, and aren’t ready to have it displayed to the public.

Background tab

Click Background Color and select the color you want
Click Background Image and select the image you want

Shape Divider tab

Check Enable Shape Divider
Choose the Shape Type you’d like (Fan works well)
Choose the Shape Divider Color
Choose the Shape Divider Position (usually Top)

Column attributes

All columns are 12 units wide.

To indent a column with content:

create a row with 3 columns
set the width of the columns to 1/12 + 10/12 + 1/12
add the content to the middle column

However, this will add unwanted empty space in the left and right margins on mobile and vertical tablets. To fix this:

click the pencil icon to edit the attributes of the left column
choose Responsive Options
check the boxes in the Hide on Device? columns for mobile and vertical tablet
do the same for the right column

Password protected pages

To add a password to a page:

Click Visibility in the Publish section in the top right column
Click “Password Protected”
Enter a password

If a user enters the correct password, a cookie is set on their computer so they won’t have to enter the password again until the cookie expires in 10 days.

If multiple pages have the same password, a user only has to enter the password for one of those pages to gain access to them all.

If you want different sets of users to have access to different groups of password protected pages, use different passwords for those different groups of pages.

Editing GTranslate translations

Your paid plan includes neural translations, which are supposed to be better than earlier, machine translations. You can also manually edit any of the translations.

Here are instructions on how to do this:
https://docs.gtranslate.io/en/articles/1348921-how-to-edit-translations

The login info to your GTranslate account is:

https://my.gtranslate.io/
User: childcareforwa
Pass: XY6YzkPz

Brand colors

burntorange: #e77450
darkpurple: #733a91
lightpurple: #DBC2FB
pinkish: #EA91DA
brownish: #f0a556
brown: #BC673D
brightblue: #334BF3
lightlightpurple: #FBE9FF
lightorange: #F9DFD7
lightblue: #E5EDF5