EDITING MANUAL

[Updated 26/06/2023 – Best Viewed on desktop – Private & Confidential do not share]

Quick Start

Website Login URL: https://naarisamata.org/wp-admin/

Username and Password: For security i wont include here (They will remain the same as before)

Although I could write an extensive guide here, the best place to learn is via Elegant themes, they provid extensive guides how to use the divi builder, although you don’t need to know everything, knowing how to use the basics will be essential if you intend to edit any page content.

You can find the basic guide there https://www.elegantthemes.com/documentation/divi/visual-builder/ 

You have the option either using the WordPress editor or you can use the divi visual builder. (I recommend the divi builder)

I have also moved projects and sponsored girls into posts as the custom post type that adds it to the admin menu was preventing the content displaying properly so for now ive migrated everything under the posts. Once divi gets updated to 5.0 hopefully it will be compatible. 

Important! Do not edit any posts on the front end. If you wish to change any post content please hit the edit post button in the top admin menu.

I will do a quick video below to demonstrate.

Any changes to theme layouts will affect the whole website so please be careful when editing, you may notice the visual builder doesnt always show things correctly so you may need to select the wireframe option in the purple settings in the bottom left icons. I will try to show briefly in a quick video so it makes more sense.

Website Summary

Managing your plugins is slightly more complicated on a multi site. Each of your sites uses identical plugins, however everything is managed under network admin.

Tip: Do not overuse plugins, they bloat your WordPress install and slow down your website, try to build with divi before installing a plugin to add extra functionality. When you install new plugins, make sure its compatible with your current theme and plugins as sometimes it can cause errors. If your not sure how to build something on divi, have a google or use elegant themes blog as they have extensive tutorials.

When you make any changes or install a new plugin, make sure you clear the cache when you’re finished.

To access and manage your theme, you will need to go to my sites >> Network Admin >> themes.

Tip: Do not deactivate the divi theme, if you do your website will break, the WP theme twenty twenty-two is a backup theme if you ever need to troubleshoot the website. Please do not install any other themes as it will only take up space.

Everyday upkeep

I have installed a free plugin called All in One Security, this plugin will keep your website secure and protect it from being hacked. Although it’s never a 100%.

Important! You don’t have to do anything to this plugin but please be aware it is running in the background keeping you safe.

I have installed your hosting companies website optimisation plugin, it makes changes to how your website loads the code, images, text, content etc… it has been configured for best compatibility, sometimes this plugin can break the website if you over optimise the website, so please don’t change the settings. 

Your theme divi also has optimisations built into the theme, which is separate, its important these settings are not changed.

Whenever you update the website, add new content, or the site is acting sluggish, please clear the cache

Uploading media to your website is quite simple, all you need to do is navigate to your WordPress dashboard, then in the side menu go to media, then library and then at the top select add new and then select media from your device.

(Please follow the quick tutorial for more details)

Important! Before you upload images, please make sure to optimise them, (the bigger the image, the longer it takes for your website to load them) below will instruct you how to do this. 

• First you need to reduce the images size by compressing it, navigate to https://compressor.io and upload your images, follow the instructions, and then download them back to your device.
• Next navigate to https://image.online-convert.com/convert-to-webp and upload your newly optimised images, this website will convert your images to the latest image format webp. Once they have been converted and downloaded back to your device you can then upload them to the website without the worry they are too big for the website.

Editing Your Website

Editing text is very simple using divi, however there is a little learning curve to get used to it. This video can be applied to editing text throughout the website.

1. First enable visual builder from the admin menu.
2. Then hover your mouse over a text, a grey box should appear.
3. Click the settings icon and scroll through the tabs to edit the text, styling.
4. Once you have made your changes, click the green tick, then press save in the purple menu at the bottom or press ctrl + s on the keyboard.
5. Now exit the visual builder, don’t forget to clear cache.

(Tip) Swapping out main header images is quite simple however because these sections have the main menu overlapping on top, sometimes the divi visual builder settings may not be clickable. There is a quick workaround.

1. First enable visual builder from the admin menu.
2. Hover your mouse over the image section so the blue border appears.
3. Then right click the blue border for the popup menu, select view modified styles.
4. The settings for this section should now appear, just x the view modified tab.
5. Navigate to background and select the image icon, then click on the image and select from the media library
6. Once done, tap the green tick to exit the builder, Ctrl + S or click the green save button in the right corner and then exit the builder. 
7. Dont forget to clear the cache

To edit the popup is a little tricky so please only attempt this once your confident using the divi builder. 

To edit the popup, you first need to find the divi library.

1. Navigate to WordPress dashboard, in the side menu, tap divi at the bottom then click divi library in the submenu, (the divi library stores saved layouts.)
2. Once the library loads, navigate to the bottom and click on a layout called: important! Main Menu Popup
3. On load the divi builder will start straight away with the popup layout, you can then hover your mouse over the layout.
4. Just like the blog, blue is the section, green is the row inside the section and grey are the content modules.
5. You can change the colours/text/links very easily. Just hover you mouse over the grey modules and tap the settings cog to enter each module and edit the content in each tab.
6. If anything goes wrong, ctrl + z on keyboard will reverse the changes. 
7. Once you have made the changes, tap the green save button and then clear the cache. 
8. The popup on the homepage should then update. 

1. First enable visual builder from the admin menu.
2. Hover over the row (Green) and select the settings icon
3. Now click on the column settings which contains the image
4. Scroll to the background tab and then select the image icon highlighted in blue.
5. Click on the image to enter the media gallery and select the image you wish to swap it with.
6. Click insert then the green tick.
7. Click on the purple circle at the bottom to expand then click on the green save button in the right corner or do the shortcut ctrl + S on the keyboard.
8. Now exit builder by clicking on Exit visual builder from the admin bar.
9. As always clear the cache from the admin menu.

Note: I’ve used the sae page design for Annual reports/Governance/Impact Reports pages so this tutorial can be applied to all three pages.

Make sure you upload the new document to the media section in the WordPress dashboard before following this.

1. 1. Navigate to the either annual reports/governance/impact assessments page and then enable visual builder from the admin menu.
   2. Scroll down to the bottom where the annual reports list is, hover over the last annual report row, a green toolbar should appear, press the duplicate button (two overlapping squares or 3^rd to the left)
   3. Now hover over the text to show the grey toolbar and select settings cog icon, now edit the text, all that needs changing is the date so 2020 – 2021 to 2021 -2022
   4. You can also change the mb text the same way to match.
   5. Next hover over the button to show the grey toolbar, and select the settings cog icon, then scroll down to link tab, to link the file, we need to add something called a dynamic link, which means your connecting one source of data to this location, in the link box, click the little icon of servers in the right corner, in the popup box select media link, in the next media link popup, (you may have to scroll down a little, select the media row, and in the drop down list find your latest annual report, select it, then press the green tick, and then green tick the other box.
   6. Now save via the purple toolbar or a ctrl + s on the keyboard
   7. Now exit builder by clicking on Exit visual builder from the admin bar.
   8. As always clear the cache from the admin menu.

Adding and removing team members should hopefully be a little easier than your old website as you can quickly replicate sections and row and just swap out the images and bio.

1. Navigate to the team page (pcap.org.uk/team) and then enable visual builder from the admin menu.
2. Scroll down the page to the section you’re adding or removing a team member.
3. To add a new team member: hover over one of the existing images, in the popup grey tool bar click on the duplicate icon (two overlapping squares or 3^rd icon to the left) This will replicate the image
4. Next do the same for the tab, hover over the existing tab, wait for the grey toolbar and select the duplicate icon.
5. They should both appear in the row below, if they don’t you can click and drag the modules to where you need them
6. To change the image you hover, click the settings icon (2^nd from left), scroll down to background (not image) and select the image icon, then change the photo. Once done press the green tick
7. To change the bio tab, enter the settings like above.
8. Change the name and bio description, then press the green tick.
9. To remove a team member is even simpler, just hover over the image, press the bin icon in the grey toolbar, and then do the same for the bio tab.
10. If the team member is for instance in the middle of the row, you can click and drag the other team members images and tabs and move them across one.
11. Now you can save, press ctrl + s on the keyboard
12. Now exit the visual builder from the top admin menu, don’t forget to clear cache.

Adding and removing a trustee is a little trickier than the team’s page. I will try to take you step by step so take your time. Please make a backup before editing. You will be duplicating rows and modules. You don’t need to create anything from scratch.

1. Navigate to the trustee’s page (pcap.org.uk/trustees) and then enable visual builder from the admin menu.
2. Scroll down the page to the section you’re adding or removing a trustee.
3. To add a trustee: If there are no free slots in the bottom row like in the video, you first need to first replicate a whole row, don’t create from scratch.
4. Find a row that matches the alternating layout, hover over it so the green toolbox appears, then click the duplicate icon and then drag this whole new row to the bottom of the page (will appear as a green circle when dragging).
5. In your new row you can now hover over the text modules and click the settings icon and then change all the text for the name and bio. To exit settings, press the green tick.
6. To change the profile picture, don’t add a picture module, hover over the row your editing, then in the green toolbar popup click settings, 4 columns should appear, click the settings icon of the column that matches where the image should appear.
7. Now scroll to background, and select the image icon, click the add image icon and select a profile pic from media. Press the green tick and exit, then save and exit the visual builder.
8. To remove a trustee: Hover over the text modules in the bio and select the bin icon in the popup grey toolbar and delete.
9. Next Hover over the row your editing, select the settings icon in the popup green toolbar, then select the column where the profile picture is.
10. Then scroll to the background tab, and select the image icon, the profile pic should appear, hover over it, and select the bin icon to delete.
11. As always select the green tick to exit popups
12. Make sure you save via ctrl + s or use the purple toolbar at the bottom.
13. Then exit the visual builder, and then clear the cache.

1. Enter admin dashboard, then locate divi in the side menu at the bottom and hover, then select theme builder.
2. Here you will find all the templates for your important pages like your header (main menu) footer (bottom of site) blog and all the subpages.
3. Select the global footer edit icon
4. Hover over each area to show the visual builder, Blue is the section, Green is the row inside that section, Grey is for the content. To edit the text just click on the settings icon, then go through the tabs and edit.
5. Click on the purple circle at the bottom to expand then click on the save button or shortcut (ctrl + S on the keyboard)
6. Now exit theme builder by clicking the purple x in the top right corner, then click on all changes saved to make sure everything was saved.
7. As always clear the cache from the admin menu.

Website Visual Guide

There is currently two fonts in use throughout this website:

<H1 to H6 Headings>  Jaldi Font

<Paragraphs>  Roboto Font

Link to Colour scheme:

https://coolors.co/372830-5d3e4f-744050-ce5755-c84554-db4a5a-f7ebe4-ffffff

Important/Tips

Editing the Header (top of the website)

I encourage you not to edit the design of the header unless you have a web designer, your header is very fiddly to edit and if you mess up the layout or change the size, colour or padding it will mess with your site’s responsive design.

If you need to change the main menu links, please goto your WordPress dashboard, locate appearance in the side menu, then goto menus, here you can find all the menus in use on your website, when it loads, click the menu tab and select main menu from the list, a list of all the links in your menu will now be displayed, you can click on each link and either remove it or add new links from the side menu, (it will make more sense when you navigate to the menu area).

Text Content

Although it’s important to have lots of images and visuals, this shouldn’t be the only thing on display, Search engines need text/titles and image tags to read your site, when editing content please keep in mind that too little text content/titles will result in visitors not being able to find your site.

Footer

I know a minimal layout is important to your design, but I do recommend you keep the footer as it is, I have kept it as minimal as possible, but I have had to keep the absolute essentials for search engines and user experience navigating your site.

Adding Plugins

Try not to overuse plugins, they bloat your WordPress install and slow down your website, if it’s a content feature, try to build it with divi before installing a plugin from the library to add extra functionality. If you need to install a plugin, make sure its compatible with your current theme and list of plugins as sometimes it can cause errors. When you make any changes or install a new plugin, make sure you clear the cache when you’re finished.