Guide to Basic Website Maintenance
1
Thank You!
We would like to thank you for working with Creative Sarasota. We enjoyed working on the new Marie Selby Botanical Gardens’ website and hope that it proves to be a valuable asset to your organization’s mission. To that end, we have prepared this exit document that contains information specific to your website’s design, programming, and maintenance.
Document Focus
The intention of this document is to chronicle 3 primary topics: Basic design specifications for design consistency; Tutorials for custom processes that are atypical of standard WordPress functionality; Technical information for premium, 3rd party plugins used for this website. It is assumed that any person tasked with managing the Selby.org WordPress website has a basic understanding of how to operate WordPress. If any person needs information on how to use WordPress’ core features, there are many options to explore. Here are a few: 1) WordPress.com has beginners tutorials here: https://wordpress.com/learn/ 2) WPBeginner.com offers over 500 tutorials here: https://www.wpbeginner.com/category/wp-tutorials/ 3) Creative Sarasota can provide a la carte support for WordPress issues. Contact us for a quote. https://creativesarasota.com/
2
Table of Contents Colors Hex Codes 4 Menus and Navigation Adding Menu items to Main Navigation and Sidebar Navigation 6 Changing “Extra” Content in Menus 10 Editing Items in the Individual, Section-Specific Menus 14 Updating “Extra” Content that is NOT Managed in the Menu Section 18 Home Page Adding Items to Homepage Carousel 20 General Pages Adding Child Pages 24 Ordering Child Pages 27 Global Modules Updating Hours and Locations 32 Global Footer Editing Footer Layers 34 Featured and Promotional Areas Within Menus Updating Footer Banners 36 Updating Featured Exhibits 40 Updating Featured Family Programs 44 Software Maintenance Paid Software Information 48
3
4
Colors Web Hex Codes
All website typography and forms should be assigned one of the following colors. When specifying type, these color options are generally provided within the DiviBulder interface.
#000000
#65826c
#7f8c88
#a9c0aa
#f7f7f7
#542c49
#806177
#bf90ac
5
Menu Maintenance Adding Menu items to Main Navigation and Sidebar Navigation Given the complexity of organization and amount of pages on this site, we created a custom navigation structure that simultaneously updates the items in the main navigation menu and the corresponding section’s sidebar navigation. In short, the Primary menu in the WordPress Dashboard “imports� the menu items from the smaller, section-specific menus. Thus, most menu item changes happen in the smaller, section-specific menus and are reflected in the main navigation on the front end.
Please note: There are some menu items that are managed in the Primary menu section. That information is outlined in this section.
6
Menu Maintenance
Adding Menu items to Main Navigation and Sidebar Navigation
1. From the WordPress Dashboard, mouseover“Appearance”in the leftside navigation and click“Menus”.
2. From the“Select a menu to edit”dropdown box, select the menu for the section you wish to update then click the“Select”button.
3.
Expand the appropriate box of options on the left-side“Add menu items”section and find or create the menu item you want to add. Please note: you will NOT need to use the“UberMenu Advanced Items”for normal menu management.
7
Menu Maintenance
Adding Menu items to Main Navigation and Sidebar Navigation
4. Click the“Add to Menu”button.
5.
In the“Menu Structure”section, expand the new menu item.
6. Add the appropriate“CSS Class”(dsc for Downtown Sarasota campus, hsp for Historic Spanish Point campus, msbg for non-campus specific pages) 7. Add a brief Description of the page.
8
Menu Maintenance
Adding Menu items to Main Navigation and Sidebar Navigation
8. Drag the new menu item to the position you want then click the “Save Menu� button.
9
Menu Maintenance Changing“Extra”Content in Menus
In order to provide visitors with easy and quick access to common information and to create promotional content areas in the mega menu, we added non-link copy to some sections. Most of this content is managed in the individual, section-specific menus. However, a few menu items are managed from the Primary menu. Please note: Many of these items include HTML code. We do not advise editing these items, but if you must It is always a good idea to highlight all the content in the editor, copy and paste it into a notepad BEFORE you edit just in case something goes wrong. That way, you can copy and paste the original content back if something does go wrong.
Information: The “Extra” content in these items only displays in the main navigation because we have specifically excluded it from displaying in the sidebar navigation menus.
10
Menu Maintenance
Changing“Extra”Content Primary Menu
The following“Extra” content is managed in the Primary menu: • Visit > Visit Selby Gardens > Hours • Visit > Visit Selby Gardens > Addresses • Join & Support > Join > Mebership • Join & Support > Join > Volunteer For each of these items, follow these steps to edit: 1. From the WordPress Dashboard, mouseover“Appearance”in the leftside navigation and click“Menus”.
2. From the“Select a menu to edit”dropdown box, select the“Primary” menu for the section you wish to update then click the“Select”button.
11
Menu Maintenance
Changing“Extra”Content Primary Menu
3. Mouseover the appropriate menu item then click the black“Uber” button that appears.
4. In the settings content box, change the content, steering clear of the html code.
5. Click the blue“Save Menu Item”button.
12
13
Menu Maintenance Editing Items in the Individual, Section-Specific Menus
Each of the following items are managed in their individual, section-specific menu. The name of the item’s menu, as well as the name of the item in the menu list, is posted below each. Education & Programs > School & Teacher Programs > Copy under HSP • Menu Name: HSP School & Teacher Programs • Menu Item Name: [Custom] Education & Programs > Adult Programs > Copy under HSP • Menu Name: • Menu Item Name Education & Programs > Youth & Family Programs > Copy under HSP • Menu Name: HSP Youth & Family Programs • Menu Item Name: [Custom] Plants & History > Horticulture > Definition • Menu Name: MSBG Horticulture • Menu Item Name: [Custom] Plants & History > Archaeology > Definition • Menu Name: MSBG Archaeology • Menu Item Name: Definition of Archaelology
14
Menu Maintenance
Editing Items in the Individual, Section-Specific Menus For each of the items listed on previous page, follow these steps to edit: 1. From the WordPress Dashboard, mouseover“Appearance”in the leftside navigation and click“Menus”.
2. From the“Select a menu to edit”dropdown box, select the select the Menu Name (get the menu name from the above list), then click the “Select”button.
3. Under the“Menu structure”section, mouseover the Menu Item (get the menu item name from the above list) then click the black“Uber”button that appears.
15
Menu Maintenance
Editing Items in the Individual, Section-Specific Menus
4. Edit the copy in the Custom Content editor.
5. Click the blue“Save Menu Item�button.
16
17
Menu Maintenance “Extra�Content that is NOT Managed in the Menu Section
18
Menu Maintenance
“Extra�Content that is NOT Managed in the Menu Section
The content for each of the following menu items is managed IN THE PAGE THAT THEY LINK TO. About > Marie Selby Botanical Gardens > Excerpt in menu About > Our Team > Message from President To edit the image or content found in the navigation, simply edit the page and change the Featured Image and/or the Excerpt.
19
Home Page How to Add Carousel Items How to update the homepage image carousel.
20
Home Page
How to Add Carousel Items
1. Go to the Home page on the front end. 2. Click the Enable Visual Builder at the top of the page.
3. Scroll to the Carousel section and click the gray edit cog for the Carousel Module.
Please note: the carousel may look different when rendered in the Divi Builder than it does when viewed naturally.
4. Click the copy icon of the last carousel item.
21
Home Page
How to Add Carousel Items 5. Click the edit cog of the new item you just created.
6. Change the title (20 to 30 characters max).
7. Change the small print section in the Content area–NOT THE SUBTITLE.
22
Home Page
How to Add Carousel Items
8.
Expand the Image Setting line item and choose a new image.
Please note: you must upload an image already in a square shape. The carousel will not re-shape images.
9. Expand the Button Setting section and paste the url of the web page you want to link to.
10. Click the green save check mark twice.
11. Save the page and exit the builder
23
General Page Management How to Add Child Pages How to add the custom library item that lists the child pages of the page you add the item to.
24
General Page Management
How to Add Child Pages
1. View, on the front end, the page you want to modify. 2.
Click the EnableVisual Builder link at the top.
3.
Click the gray Add New Module plus sign in the area you want to add the module.
4. Select the Add From Library tab at the top of the Insert
Module dialogue box.
25
General Page Management
How to Add Child Pages
5. Scroll until you see the lime green Display Child Pages library item and click it.
Please note: When in the Divi Builder, you will see ALL child pages of every page listed until you save and exit the page. Then you will only see the child pages of the page you are working on.
6.
26
Save and exit the page.
General Page Management How to Order Child Pages How to change the order of the child pages listed on a parent page.
27
General Page Management
How to Order Child Pages
1. From the WordPress Dashboard click on Pages in the sidebar navigation.
2. Scroll through the pages and find the group of child pages you wish to order. For each page click the Quick Edit link that appears under the page title when you mouse over it.
4.
28
Change the number in the field titled Order to the order in which you want that page to fall (Lowest to highest, starting with 0).
General Page Management
How to Order Child Pages
5. Click the blue Update button in the lower right of the section.
29
Global Modules How to Update Hours and Locations Information modues which appear in multiple locations on the site are updated in one place. These modules are: • Addresses for both campuses • Admission table for both campuses; • Hours of operation. This section outlines how to edit these sections.
30
Global Modules
How to Update Hours and Locations
1. From the Wordpress Dashboard, mouseover“Divi”and click on “Divi Library”.
2. At the top of the page select“Global Modules”from the dropdown menu and click the“Filter”button. Click the title of the module you want to edit and wait for the divi editor to load.
3. Click the cog icon of the lime green module to edit it.
31
Global Modules
How to Update Hours and Locations
4. Make your changes in the dialogue box that pops up.
5. Click the green check box to save.
6. Click the“Update�button.
7. Click any link to exit the editor.
32
33
Footer Management How to Edit Footer Layers
There are 4 primary layers to the footer: Layer 1 Gray Visit. • Requires template modification except you can edit the addresses and admission copy in the Divi Library. See the Global Library tutorial. Layer 2 White Newsletter. • Requires template modification. Layer 3 Pink Links. • There are 4 link sections in the pink section of the footer. • Each section is controlled by a separate menu. Layer 4 Gray Accreditation. • Requires template modification.
34
Footer Management
How to Edit Footer Layers
To add Links
1. From the WordPress Dashboard mouseover“Appearance”and click on“Menus”.
2. From the“Select a menu to edit”dropdown menu, select the footer menu you wish to edit and then click the“Select” button. The menus are clearly identified: • Footer - About • Footer - Leadership • Footer - Press Room • Footer - Support
7. Add menu items and save as usual.
35
Featured and Promotional Areas How to Edit Footer Banners
36
Featured and Promotional Areas
How to Edit Footer Banners
1. From the WordPress Dashboard, go to the Pages section.
2. Find the page that you want to add to the Footer Banner. 3. Click the title of the page to edit it.
4. Please note: Once the editor has loaded, click on the“Screen Options”tab at the very top right of the editor and make sure that“Excerpt”,“Tags”, and“Featured Image”are selected. 5. Look for the“Tags”box and type in“Footer Banner”and click “Add”button.
37
Featured and Promotional Areas
How to Edit Footer Banners
6. Look for the“Featured Image”box and make sure there is a featured image configured. If not, add one.
Please note: Featured images for pages included in the banner should be landscape oriented and have the focus of the image on the right side, leaving the left side open for copy
7. Look for the“Excerpt”box and type in the copy you would like to display on the banner (1 to 2 sentences). 8. Save and exit the page.
38
39
Featured and Promotional Areas How to Edit Featured Exhibits This puts a featured area with an image, excerpt, and link in the main navigation under the “Exhibits & Events” > “Special Events” area.
40
Featured and Promotional Areas
How to Edit Featured Exhibits
1. From the WordPress Dashboard, go to the Pages section.
2. Find the page that you want to add to the featured area. 3. Click the title of the page to edit it.
4.
Please note: Once the editor has loaded, click on the“Screen Options”tab at the very top right of the editor and make sure that“Excerpt”,“Tags”, and“Featured Image”are selected.
5. Look for the“Tags”box and type in“Featured Special Event”and click“Add”button.
Please note: Only ONE page can have the “Featured Special Event” tag. You must remove the tag from the page that is currently tagged.
41
Featured and Promotional Areas
How to Edit Featured Exhibits
6. Look for the“Featured Image”box and make sure there is a featured image configured. If not, add one.
7. Look for the“Excerpt”box and type in the copy you would like to display on the banner. 1 to 2 sentences. 8. Save and exit the page
42
43
Featured and Promotional Areas How to Edit Featured Family Program This puts a featured area with an image, excerpt, and link in the main navigation under the “Education & Programs” > “Youth & Family Programs” area
44
Featured and Promotional Areas
How to Edit Featured Family Program
1. From the WordPress Dashboard, go to the Pages section.
2. Find the page that you want to add to the featured area. 3. Click the title of the page to edit it.
4.
Please note: Once the editor has loaded, click on the“Screen Options”tab at the very top right of the editor and make sure that“Excerpt”,“Tags”, and“Featured Image”are selected.
5. Look for the“Tags”box and type in“Featured Family Program”and click“Add”button.
Please note: Only ONE page can have the “Featured Family Program” tag. You must remove the tag from the page that is currently tagged.
45
Featured and Promotional Areas
How to Edit Featured Family Program
6. Look for the“Featured Image”box and make sure there is a featured image configured. If not, add one.
7. Look for the“Excerpt”box and type in the copy you would like to display on the banner. 1 to 2 sentences. 8. Save and exit the page.
46
47
Paid Software Information Contents View
• T his plugin manages the function that automatically displays child pages on a parent page. It is also used to display featured events and exhibits, CEO message, and About MSBG content in the navigation mega menu. • $ 39/year for feature upgrades • S ecurity update are free
Divi Carousel by DiviGear
• This plugin manages the carousel on the Home page. • $ 15, lifetime updates. • L icense Key: dgear_1XNY-OKK1-G8OK-E8CG
Modern Events Calendar by Webnus • • • •
T his plugin manages the calendar functions. $ 75, lifetime updates 1 year premium support ending in May, 2021 L icense Key: 3875a07e9b07e8ee669a8ae8ba88c3b9
Smart Slider Pro by Nextend
• T his plugin manages the rotating banner in the footer of pages. • This plugin is premium, but it is under Creative Sarasota’s account. If Selby wants to buy their own license, they can do so for $35 with lifetime updates.
UberMenu by SevenSpark
• T his plugin manages the main navigation mega menu. • $ 25, lifetime updates. • This plugin is premium, but it is under Creative Sarasota’s account.
WP Fastest Cache by Emre Vona
• T his plugin is responsible for functions that increase site speed and performance. • $ 49, lifetime updates. • This plugin is premium but it is under Creative Sarasota’s account.
Wordfence
• T his plugin manages website security. • $ 99/year for upgrades • This plugin is premium and under Creative Sarasota’s account. If Selby wants to buy their own, wait until July of 2021.
48
49
