Editing Website Content

Overview

If you have requested to edit your own website, you will receive an invitation from PMI Pros to edit your site so that you can set up your login credentials. Give it time to load, as sometimes the bar on the bottom takes a few moments to pop up so you can create your login credentials. Once you have your login set up, you can access the editor by visiting your website and adding /?edit to the end of your website’s URL example: webaddress.com/?edit to access the editor. You may want to bookmark your /?edit URL so that you can easily access it. You can add /?edit to the end of any page's URL on your website to access the editor such as http://example.com/deals/?edit to access the editor when you are on the deals page. 

Once you have logged in, you should see a bar on the bottom of the screen that looks like this: 


These links are how you will navigate to different parts of the editor: Pages will help you navigate to the different pages on the site, Forms will allow you to see form submissions to the site (you should be receiving them to your email, but if you are not, this is where you will see them), and Collections are the website’s databases. On a mall website for example, the databases include the stores, the sales and events, and the job listings.

Help & Support

PMI Pros is always here to help. Some questions can be answered by clicking the Help & Support button on the bottom navigation that looks like this:

button

However, not all the answers to your questions can be found there, which is why we made this document. If you read through this document and still need help, please submit a support ticket by visiting https://pmipay.com/billing and logging in at the top if you have a login to our billing and support system already or click “Get Support” and then choose “Work Orders."


Collections

Adding a new collection item is simple. Click on Collections in the bar at the bottom of your page. Then select which collection you will be adding a new item to. In this example, we are adding a new deal: 


Click the green button on the top right that says + New Deal to create a new item. It will say whatever the collection is called in that button, so in the deals collection it says “New Deal,” but if you are adding a job opening it would say something like “New Job.”

It should look something like this after you click the button: 


Long-form description fields are called rich text areas. If you highlight text in a rich text area, this will appear:

  • Use the B button to bold selected text. Use the I Button to italicize. Use the link button to link that text to a URL. Read about linking text by clicking the "Creating Links" tab on this page.
  • The H1 - H6 buttons are available for you to change regular text into headings. We set the heading styles when we built the site, so you can select one of those options to create a heading in your description. Keep in mind you will not see how it appears until after you have saved the collection item and checked the page, so use headings inside collection items thoughtfully. Make sure you check the page on your website after saving the item, and select a different heading option or remove the option if it is not to your liking. In most instances, we discourage using headings because they are typically not needed on the collection items. Instead, try to bold text and use that as a heading inside the collection items.
  • The quotation marks will offset the text to designate a quote. You will most likely not need to use this feature. 

Add an event image by dragging and dropping a photo from your computer to this box:

Or click on the box and an image browser will appear (this may look different on computers with different operating systems):


When you are done, click Create Deal on the top left of your screen, as shown below. If you are not done, and want to come back to edit the collection item later, check the Draft box to the left of the green button. This will save your work without publishing it to the live website. When you come back to edit your draft and are ready to create the new deal, uncheck Draft and click the Create Deal button.

Editing Existing Collection Items

If you would like to view your collection items in the list view based on a certain field, say the end date, simply click the title of the field when you are in the collection. 


In the view above, the items are sorted by end date. You can tell because the arrow button next to End Date. If you hover over the field title as I did in the photo above, it will tell you how it was ordered. In this case, it is showing items with the latest end dates at the top. You can click End Date again to reverse the order, or click a different field title such as “Name” to change how you view the items. This will not affect the ordering of these items on the website. It is only to make looking through collection items easier for you. If you do not see a field that you want to sort by, click the thumbtack button on the far right and this dropdown will appear:

 

Check the items you want to be visible in the list view and uncheck the items you don’t want to see. I often uncheck “modified” as I rarely sort items based on this field. 

If you want to edit an existing item, go to the collection and select your item. If you select the wrong item, click the arrow button next to the title of the collection item. Do not hit your browser’s previous page button. 

The back arrow button is show below, Next to the event title (“Old Navy Super Cash”).

 


Once you have the correct collection item selected, you can edit the fields as needed. On the bottom of the collection item (this will not appear when you create a brand new collection item; it only appears after it has been saved once), you will see this: 

If you would like to make that collection item no longer visible to website visitors, click archive. Archived items are still accessible by editors and website administrators (PMI Pros), but not visible by website visitors. 

If you would like to completely delete an item, you can hit Delete. We recommend that you archive rather than delete items that might be published again at a later date. For example, your store is hosting an event. The event is cancelled but you have been told it might be rescheduled for sometime later this year. You can archive the event until you hear back about the new event date. Then you don’t have to re-enter all the information; only the date needs to be updated. 

Duplicate will make a copy of the item you are currently editing. You can then edit the information in the duplicate event. This might be helpful if you are having two similar events at different dates and only need to edit the date. For example, a blood drive with multiple dates spaced throughout the year. 

If you do duplicate a collection item, be sure to remove the word "copy" from the title.

Editing the Slug

Do you see under the name where it says the URL in the photo below?

You can click and edit the portion of the URL after deals/ which is called the "slug."

The URL is automatically generated from the Name field. Try to update the name of the event before saving so that the slug will update with the name change.

You can edit the collection item URL any time, but usually is not necessary unless you have a very long collection item name or if you have duplicated a collection item and saved it with the word copy in the name such as in the photo above.

Editing Other Content

As you may have noticed, many of the pages have content that do not draw from collections. Editing text on the page is fairly simple. Simply select the page you would like to visit by clicking pages on the navigation at the bottom of your screen, then select which page you would like to visit. 


When you hover over text throughout the site, a little box will appear around the text with a pencil icon. Click inside the box or click the pencil icon to edit the text.

If you highlight text, this will appear:

 

You can bold the highlighted text, italicize it, or set it to be a link with these buttons. 

You might want to add line breaks or extra spacing, but do not use the tab key or many spaces to make it look the way you want. The reason being that when the browser window is resized, the website is opened on a computer with different screen dimensions, or it is opened on a mobile device, all of the spacing and tabs will be in different places. If you want to see your changes on different sized windows, make your editor window smaller to see how it looks on a smaller view. Always make sure to bring it back to full width when you get back to editing.

Creating Text Links

If you highlight some text that you would like to link, hit the button on the right that looks like two chain links. This will appear:

 

Click the checkmark to save or the x to cancel. 

Click the chain icon on the left of the URL field and this will appear:


Select the type of link from this menu. The first button with a chain link icon is for external URLs (pages that are not on your mall website). The second button is to link to a page on your website. Use this option if you are linking to a page on your website in case the URL ever changes. When you select the second button you can select a page from this dropdown menu:

 

If you use the external link option and link to a page on your website, it will not update the link if you ever change the URL. For example, say you simply copy and paste http://shoplycomingmall.com/deals into the link field instead of clicking the second button and choosing the “Sales & Events” page. If we ever change the URL to http://shoplycomingmall.com/sales the link you made will not work. If you choose the second link type button and then select the Sales & Events page, when the URL is changed, the link will still work. 

Back to the link types. The third option (it looks like an arrow pointing to a page) is to link to a section of the page. You will not be able to create new page sections without help from the website designer and therefore will not need to use this link option. 

The fourth button has an envelope icon, and will link to an email address. Say you add a link that says “Contact Us” and you want people to send an email to your mall email address. You paste in your email (something like info@example.com) to that field and when website visitors click your link, a new email is created from their email account addressed to info@example.com. 

The last button is the phone icon. This button will only work for devices that make make phone calls such as smartphones and some tablets. By using this link option, people can simply click your link and they can call the phone number you specify in the link field. Do not use parentheses or spaces in the phone number. You can use dashes or no dashes for the URL. 

Choose the checkmark after setting your link destination and your link will be created. Click the X button and it will cancel the link creation. 

If you want to go back to the URL editor for any reason, click the arrow to the left of “Link Type”

 

And you will be taken back to the URL window. 


You can click the gear icon (to the left of your checkmark) and this will appear:

Check this box if your link is to a website outside of the mall website. That way, even if people navigate to a link outside of the mall website, the mall website will still be open in a different tab. 


Changing Photos

If you would like to switch out a photo on the website, simply hover over the photo and this icon should appear to the top right of the photo:

 

It may be further to the right or the top than you think. For example, this mall map image is larger than it seems, so the icon is far to the top right. 


When you click this button, a browser box will appear and allow you to select a photo from your computer. You must have the photo saved somewhere on your computer to switch it out on the website. So if it is a photo found elsewhere on the website, you will have to save it to your desktop before attempting this. 

You can edit slideshow background photos as well, though we do not recommend it as it typically requires some specialized design work to get the positioning right on different mobile device sizes. If you have trouble clicking the icon, it may be because the arrow button on the right is too tall. In the event that this happens, send us a support ticket and we will edit the arrow button so that it does not prevent you from clicking the change photo icon. In some pages, you can just double click the photo and the photo browser will appear (such as the mall map photo). However, this does not usually work with the slideshow photos. If you would rather PMI continue to find and replace the slideshow photos, just notify us when you want a change or we will change some of them with each season. 


Forms

In the footer editor navigation, you can select “Forms.” You can see all the form submissions on the website here.

You can download a .CSV of the submissions to see them in their entirety by scrolling past the form submissions at the bottom of the window.

If you are not receiving emails when a form is submitted by a website visitor, please submit a support ticket to us and we will get your form set up and ready to go.

Publishing Changes

When you are happy with the changes you have made, hit Publish to the right of your editor navigation: 

Now your changes will be visible on the site! 

If you just want to publish one collection item to the live site, you can do that too. On the top right of the collections, instead of hitting the “save” button on that new collection item, click the down arrow on the blue button and click publish. 


If you made a change but think you made an error and do not want the changes to appear on the site, do not publish. If you make a mistake and have not left the page yet, you can hold down Command⌘ + Z on a Mac or CTRL + Z on a windows to undo the change. You can keep pushing those buttons to undo more times as needed. You cannot use this function after you have saved the change already, and this may only work on the collection items. 

We can also revert the site to a previously saved state as a last resort, but you might lose some changes you wanted to keep if they were made in the same session as the change you wanted to undo and those changes will have to be made again.


Did we miss anything? Let us know!