Instructions For Updating the Website
This hidden page contains instructions on how to perform specific website updates that you’ve indicated you want to be able to do on your own. If there are other things you want to do and you can’t figure out how, please ask Erin to add to this page.
- You will be editing the live website, so use my rule of ‘always save’ judiciously. Whatever you save will immediately be in public view.
- I highly recommend you do not try editing on your phone. You can, but it’s quite easy to make mistakes. It’s best to use something (tablet, laptop, desktop) where the pages are larger and the editor works better. If you’re editing the staff page, use a device where you can see the three across page format or it’s really tough to edit correctly. If the page ‘responds’ to the screen size, you can’t easily see where the row ends. You can definitely count staff members, going top to bottom there are three to a row.
- There are always multiple ways of doing whatever. I’m just going to give you one, maybe mention a second. When you get the hang of things, you’ll likely see other ways to do the same things.
This is the Zee’s Salon WordPress Dashboard. It is the basic WordPress Dashboard augmented by theme and plugin options.
To accomplish the above tasks, you only need to pay attention to one menu option – Pages. But you can view images uploaded to the site by clicking on Media. You can also display the website home page by clicking ‘Zee’s Salon & Day Spa’ in the upper left corner.
To update staff information on the website, you need to open the OUR STAFF page for editing. On the Dashboard, click either the Pages option itself or All Pages to open the Pages panel.
The pages of the website are presented home page first, then top-to-bottom in the order they appear left-to-right in the website main menu. When your cursor floats over OUR STAFF, you will be presented with the options – Edit, Quick Edit, Trash, View, and Edit with Divi (highlighted). Click on ‘Edit with Divi’.
The editor view will default to whatever device you are using. Meaning, if you are using a laptop / desktop computer it will open in desktop view. If you are using a tablet it will open in tablet view. I have not tried editing on a tablet. I am going to have to try that and come back here and update this text with any nuances.
The Divi Visual Builder is a WYSIWYG editor. This stands for ‘what you see is what you get’. The editor allows you to edit the page looking as it appears in the browser, bypassing the need to understand web-related scripting languages. When the page opens in the editor, you will see the option “Exit Visual Builder” in the top black bar. If you save your edits and then use the website navigation to change pages, you will notice that the option in the top bar now says “Enable Visual Builder”. Leaving the page exits the editor. You will need to click enable to get back into editing mode.
To use the editor, it is important to know the nomenclature it uses. A web page is constructed in a grid pattern with rows and columns. A page has one or more sections. A section has rows and columns. Inside a row / column are modules. A module is the smallest page element. It may be a number of things, like text or an image or a gallery of images etc. but the intent is that it is a single media / functional block element.
Each staff person has their own, self-contained module – the specific modules used are called ‘person modules’. On a desktop screen, they appear three to a row. On smaller screens, they stack vertically.
Editing controls appear dynamically as you float over parts of the web page. They are color-coded. Sections may be highlighted in orange, blue or purple. There are different types of sections, for your purposes you can ignore this. Rows are highlighted in green. Columns are considered sub-divisions of rows. Modules are highlighted in charcoal gray.
At the bottom, in the center is a purple circle with three horizontal dots. That is the page / display control. If you click it, additional controls are available. The only control you need on this is the green SAVE button at the far right.
NOTE: If you want to re-order staff sections, you will want to use the ‘wireframe view’ rather than the desktop view. It makes it easier to drag blocks of whatever around. This is accessed by clicking the second icon from the left. Click here for instructions.
a. Deleting a staff member
To delete a staff member, you are going to ‘trash’ their module on the web page. Float your cursor over their photo and you’ll see the charcoal gray module controls pop up. The second icon from the right is the trash can. Click it, voila… module deleted.
If for some reason you want to delete an entire row of staff (3 modules), the green row controls will appear when you float over the leftmost staff member in the row.
You will likely need to re-order at least some of the remaining staff members, change to the wireframe view to do this. Click here for instructions.
Open the page bottom purple page / display controls and save your edits.
B. editing a staff member
To upload a new staff member photo, float your cursor over the current photo until the module (charcoal gray) controls appear. The photo is contained within the module, so you want to click the module settings (second icon from the left resembling a gear). This will open a new panel called ‘Image Settings’.
Scroll until you see the image option (you may need to click the down arrow on the right to open the field). Float your cursor over the image and two controls appear, an image settings (gear) and a trash can (delete). Click the image settings. This opens a new panel called ‘Choose an Image’. Just under that title, click on ‘Upload Files’. This allows you to navigate to the spot on your device where the new photo resides, select the new photo and then click ‘Upload an image’ in the bottom right corner. This will upload the image into the Media Library panel where you may see a progress bar on the photo upload. When the photo has completely uploaded, you will see it’s side panel displayed. I recommend you edit the Alt Text and Title (make them both the same) and enter the staff member’s name. As shown below, WordPress fills in the Title with the name of the photo by default. Then click ‘Upload an Image’ (which, I agree, doesn’t make sense since you already uploaded it… but go with it anyway). That will leave you in the Images Settings panel where you can see the new photo displayed.
Click on the green check mark on the bottom right to save the change. Then in the bottom page / display controls, save your page edits by clicking the green save button. If you forget to do this and try to leave, the editor will stop you and ask if you want to discard the changes or save them.
The photo you upload should be the same size as the one you are replacing or it will throw off the look of the page. The staff photos are 800 px (wide) x 835 px (tall). For instructions on how to crop photos on iOS click here.
Photos need to be optimized for the web. Produce and save the photo as described above. Go to Squoosh, upload the photo and download the compressed version. Use the compressed version in the website. The size of the photo file will be smaller, this helps the site page load speed and thus, helps your SEO.
To edit a staff member’s bio text, simply click somewhere in the text and start editing away. You can use most standard editing options, highlight text and hit delete to remove it etc. If you want to italicize or bold some text (or change text color or other things), select the text and a simple edit panel pops up.
Sometimes, the cursor jumps and is not where I thought I clicked. This occurs because the editor is working across the internet – you’re typing and it’s sending data to the website server to make the actual changes and because the edges of modules are a bit touchy. Depending on internet speed this can be noticeable. Just make sure you see the cursor before you start typing. When the cursor jumps, it jumps to the top of the module. Look there for errant characters.
If you have difficulty, there is another way to edit the text that sidesteps this. You need to make sure that you’ve gotten out of the WYSIWYG text editing mode, so click somewhere else on the page (like click the text for another staff member). Then float your cursor over the staff member you’re wanting to edit until the module controls show up, click the second icon from the left which is the module settings (gear). This will open the Person Settings panel. You scroll down until you see the body field. Note that this field has basic text editor features and that the bio text appears in a central area. You can click and edit the text here and it seems to work a bit better. Click the green check mark to save the edits. Click save in the page controls to save the page edits.
To change the staff member, upload a new photo and edit the bio text as described above. In addition, change the staff member’s name in the first (top) field in the person module, change their position (as applicable) and scroll to the bottom of the module fields and change the Admin Label to the staff member’s name (all caps). This helps when editing in wireframe mode. If you need to re-order staff after completing this edit, click here for instructions.
c. Adding a staff member
To add a new staff member photo, you will either add a new module if there is space in the row or you will need to add a new row of modules. You can do this in one of two ways –
1. duplicate an existing staff member (or row of staff members if you need a new row, it’s easy to delete modules you don’t need) and drag that two / module over to the correct spot. Then you can edit away.
2. Both an individual pre-configured person module and a full row (of three) person modules have been stored in the Divi Library for you. You will be able to simply insert whichever is needed and then do your editing. You can do this in the Divi Visual Builder desktop (you’re going to want to do this on a monitor / screen that is wide enough to display the staff modules three across or it will be confusing) or wireframe view.
You can duplicate any structural element (section, row, module) by clicking the stacked rectangle icon towards the center. The duplicate will appear below the element you just duplicated.
If you want to insert a module or row from the stored library, you’re going to click the + icon at the base of the element and the add panel will pop up. There are two tabs, Add Row (or if you’re adding a module… it will be Add Module) and Add From Library. You want to click that latter tab, and you’ll see one module that you can select to insert. These stored library modules are just like duplicating one off the page, you just have a template to edit that’s set up correctly to respond to changes in device screen size. If you were to insert a new module, you have to go thru the advanced settings to match that one to the existing modules. Just editing the image / text is much easier.
D. Re-ordering staff members
To re-order staff members on the web page, you need to be on a large enough monitor / screen that the staff modules are displayed three across and it is likely you will need to use the wireframe view. In desktop view, you can move the person modules fairly easily inside the same row and it may not be too hard for you to drag them one row up or down… but you will run into problems because of the visual size of the modules doing much else. It’s possible, it’s just not easy. Wireframe view reduces all the page elements to nested, colored blocks that are much easier to grab and move around.
In desktop view, to ‘grab’ a staff member’s module float your cursor over the module until you see the charcoal gray module controls come up. The leftmost icon looks like a plus (+) and this is the move module icon. Click and hold on this icon and you can pull the entire module around. Release the mouse button when you have it where you want it. If, for example, you are swapping the position of the left and center staff members in a given row – you can grab the left module, drag it to the center where you will see a gray band appear above the center module. Release the left module there. Then grab the center module, drag it to the left until you see the same gray band appear and release it. The row has three columns in it. The modules will not slide left or right when you move other modules towards them. They only move up or down in the same column. So yes, you could also drop the left module below the module in the center.
E. Using the wireframe view
To edit in wireframe view, you need to use the page controls and click on the icon that looks like stacked boxes. This changes your view from something that looks like the actual web page to a something that looks like stacked and nested boxes (yes, thus the icon). The color coding is the same. In the image below, blue is a section, green is a row, charcoal gray is a module nested within that row. Sometimes a row has a single column (and thus the module appears wider, if you could see the entire page it would be extending across the entire row. Sometimes a row has multiple columns, in the case of your staff page there are three person modules across a row. The text you see is the ‘admin label’. You can click on it and edit it in the wireframe view or by clicking the gear icon in the desktop (or tablet or phone) view. The wireframe view makes it clear why unambiguous labeling is important.
Because it is easy to see nearly the entire page in this view given the compact block representation of the modules, it’s much easier to grab the individual person modules and move them around. The rules are the same, you grab one using the move module icon and move it to the row/column where you want it. You can move it above or below an existing person module in that position. Then you grab the next one you want to move and so forth.
When editing in wireframe view like this, be sure to click back into desktop view to double check that things are as you expected before saving. As noted at the top, you’ll be editing the live website so you don’t want to save if you’ve made an error. Always double check before saving when the site is live. You can always fix whatever, but it’s nice not to put errors out for public view.
2. Updating Service Pricing
The page is comprised of multiple sections, each service type is its own section (marked by a centered paragraph at the top).
For the most part, here you can just click in the text and backspace / select and overwrite / add to it.
There is an issue when you copy and paste colored text. The colored text turns black when you paste it. When this happens, you can select the text and in the pop up editing menu has a paint bucket icon. By clicking that, you will be offered a color selection tool. At the base of a tool, there is a panel of color blocks that are your salon palette colors. You can select whichever one is needed so the correct color is used.