Knowledgebase

TRANSCRIPT

The biggest piece of your organization's web presence is your website, so it's important to keep it up to date. This training covers all of the basics for adding pages, editing pages, and putting together your organization's newsletter. Let's get started.

When I’m working on page content, I like to have the front end of my site open in one tab, and my admin area open in another tab. That way I can toggle back and forth to review the updates I’m making.

We can access our pages by going to Content > Page Manager > Page Content. There are a few different types of pages, which can be identified by looking at the Type column.

A System page is a page that was automatically generated for you within the system. For example, most chapters have an About Us page or a Board of Directors page. In some cases, system pages are dynamic, which means they’ll automatically display information from different areas of the admin side of the system. For example, the Board of Directors page will display the members assigned to the Board of Directors group in the Membership > Group Manager area. Another popular system page is the Newsletter page, which will display your current newsletter that’s set up in the Community > Newsletter area.

A Custom page is a page that is specific to your chapter. Either it was created during the implementation process of your project, or it’s a page that you created yourself.

Finally, you’ll see Forms in this area as well. Every form has an associated page, but form updates will be made in the Form Builder.

When you’re looking at your list of pages, you might see some draft copies of pages appearing. Whenever you make edits to a page, the system will automatically open a draft version. Drafts allow you to make changes to the page without it being published on the front end. The draft version of the page will remain until you either publish or delete the draft . You can only have one draft per page.

Within this area we also have access to the Recycle Bin. If you delete a custom page and realize that this was a mistake, you can recover deleted pages by clicking the Recycle Bin button.

To create a new page, we’re going to click the +Add a Page button towards the top of the screen. The first thing we’ll do is give our page a name. The URL will automatically generate based off the page name, but this can be edited if needed.

Our next step is to make sure our page is linked to the website, so people have a way to access it. Within the Navigation section, we’ll click the +Add to a Menu button and select a menu from the drop down. If we want this page to appear as a top-level link on the main navigation menu, we’ll select the Main Nav option.

The Display Name field is what will display as the link name. You need to be mindful of the length of your Display Name, particularly if this is a top-level link on your main navigation. You have a limited amount of space for links on your main navigation, so you don’t want the Display Name to be too long. For this example, we’re going to use a long display name, which will break the main navigation. That way we can walk through how to fix this problem if this ever happens to you. Click the Add button once complete.

Within the Page Restrictions section, we can click the Restrict Access button if we need to add visibility restrictions to our page. These member and non-member groups are set up in your Membership > Group Manager area, so your groups may look different than mine.

In order to restrict the page to members only, we’ll click the All Members drop down, and then click the Add button for the All Members group. This means that only logged in members will be able to view the content on the page. In order to remove restrictions on a page, we’ll scroll down to the Group area, check the box next to the group I want to remove, and then click the Remove button. Be sure to click the Save button once complete. We want this page to be public, so we’ll make sure there are no restrictions added to the page.

Click on the Next button, which will take us into the Content & Layout area of the page.

When we look at the Content & Layout area, we’ll get a sense of what the page looks like. We have a small column on the left and a large column on the right. There are some default sections that are listed in black text. Default content will appear on every page throughout your site. This is helpful if you have information, such as a disclaimer or affiliate logo, that should appear on every page. To edit default content, you need to edit the Default page found within the Page Manager > Page Content area. You can always hide default content on a page by clicking the “Hide” link for that specific content section.

To add a new content section, we’ll click the blue + button in the column where we want that content to be placed. A window will appear that lists the content sections available for us to use. Most of these content sections are dynamic, which means they’re designed to pull information from different areas of the admin side of the system. For example, the Member Spotlight will display the photo and biography of your selected member. Another popular option is the Sponsor Image Rotator, which will rotate through the sponsor logos that are set up in the Ad Manager > Sponsors & Advertisers area. If we’re just adding text to a page, the Blank content section will work fine. So that’s what we’re going to select for this section.

When adding a blank content section, we’ll want to edit the Title field. This is not front facing, but it’s helpful to add something a bit more descriptive so if we have multiple content sections on a page, we know where to find things if we need to make edits in the future.

Our next step is to add the page content to WYSIWYG Editor, so we’re going to copy some text from a Word document, and I’m using the CTRL + V keyboard shortcut to paste the information in the content section.

You’ll notice that some of the original formatting came over. In order to remove that formatting, we can highlight the text and then select the Clear Formatting icon from the task bar, it looks like an upper case “T” and a lower case “x.” Formatting that comes from a Word or PDF document isn’t always web friendly and can lead to unexpected display issues.

If we want to add headers to our text, instead of using the font size and color options in the task bar, go to Formats > Headers, and select a header from this area. These headers were set up during the design process, so they match the design elements of your site. This is a great way to ensure everything looks consistent on all our pages, and it saves us time because we don’t have to remember the exact font size or color we are using.

In order to add a bulleted or numbered list, we can highlight the text, and then select the icon from the task bar. It’s always a good idea to add some spacing between your bullets, so highlight the text again and select the Formats > Blocks > p option, which stands for “paragraph”. This will add some additional spacing.

We also might want to add a link on our page. To add a link, simply highlight the text that needs to be linked, and then select the chain link icon from the task bar. In the URL field, we’ll enter the URL to the page, document, or email address. If we want to link this to our certification chair’s email address, we’ll just enter the email into the URL field. Then we’ll click OK to save our changes. If we enter an email address, we’ll see a notification appear asking if we want to enter the mailto: prefix, so just click OK.

Another helpful tip is how to add a single line break. When I click the Enter key on my keyboard, you’ll notice that the cursor jumps to a new paragraph. If we want to add text that does not have that additional spacing, use the Shift + Enter key on your keyboard. If you’re a Mac user, you’ll use Command + Enter. When I click Shift + Enter, you’ll see that my cursor lands right below the previous line without that additional space.

If we want to add an image to a page, select the Insert/edit image icon from the task bar. Click on the icon that looks like a magnifying glass and a folder, and then click the Upload button in the upper left corner if we’re uploading the image file that’s saved on our computer. We can also select an image that’s already saved in my Moxie Manager. Click the Insert button.

We have the ability to edit the dimensions of the image, so since this image is quite large, we’re going to reduce the size from 900px to 250px. The system will proportionally resize the image if the Constrain proportions box is checked.
If we’re wrapping text around an image, it’s a good idea to add some extra padding around the photo. Click on the Advanced tab, and then add some vertical and horizontal space. The style field will automatically update for me. Click OK once complete.

While the image is still highlighted, we can select the Align Left or Align Right icons in the task bar in order to anchor the image to one side of the page. The text will wrap around the image, and since we added that extra padding the text doesn’t butt up right against it.

Before we save our changes, I want to point out the Content Section Restrictions area. We do have the ability to restrict content sections, but I don’t recommend doing that. This is because only a logged in person of that group will be able to see the restricted content, so unless the page itself is restricted, it’s not going to be apparent that there is hidden information on the page. For that reason, I’d recommend skipping this option and restricting information on the page level only.

Once we’re finished making edits in the content section, we’ll click the Add button in the bottom right corner of the screen.

We’re going to add one more content section, and we’ll add it to the left column this time. We’ll click the blue + button in the left column and select the Meeting List Module content section.

With Meeting List Modules, we have the ability to only display events that are tied to a certain category. We can also select the number of events to display at a time, so if we want to display three meetings, we can select that number from the drop down.

Within the Content section, there is a PHP code that is wrapped in dollar signs. This is something you’ll see in dynamic content sections, so this code is telling the system where to pull the information from. With Meeting List Modules, I do like to add a header above the PHP code, so we’ll add some text that says, “Upcoming Certification Courses”, and then add a Header 2 to that.

Once we’re finished making our edits, we’ll go ahead and click the Add button.

If we need to re-arrange the content sections, we can just click on the content section we want to move and drag it to a different location.

The Preview button in the upper right corner is a helpful tool, because you’re able to take a look at the page before we publish it. When we click on the Preview button, a pop-up window appears so we can review the updates we’ve made.

We’re finished with our updates, so we’re going to click the Next button. The All Done Screen will show me all the sections we just worked on to create the page. We have the ability to edit any of these sections if needed.

When we get to this step, there are two options. We can either save the page as a draft by clicking the Save as Draft button. This means the page will not be public on the front end my site yet, so maybe we’re still working on it and want to make additional edits before it’s published.

If we click the Save and Publish button, that means the page will be published on the front end of our site. We’re ready for this page to appear on the front end, so that’s the option we’re going to choose.

When we tab back over to the front end of the site and we click on the Refresh button, we’ll notice that our new page is linked to the main navigation. However, since that display name is so long, my navigation bar has dropped down below the logo, so there is some extra white space appearing. Depending on your layout, this might look different if this ever happens to you. Sometimes the main navigation will split onto two separate lines.

Let’s walk through how fix this issue with the main navigation, and also how to make edits to a page that’s already published. First, let’s review how to make changes to this page. Maybe we want to delete the meeting list module from the left column.

We’re going to go back into the admin area, and within the Page Manager > Page Content section, we’ll use the search box to find the page we want to edit. When the page appears in our list, we’ll click on the “Content & Layout” action button on the right-hand side, which is a short cut to get into the content area of the page.

If we want to delete a content section entirely, we’re going to find the content section that needs to be removed, and then click on the Edit link. To delete the section, click on the red Delete link towards the bottom of the page. A pop-up window will ask us to confirm you want to delete the section. Click OK to proceed. Once we’re finished making our page edits, click the Publish button.

When we refresh the front end of the site, we can see that the updates we made are automatically reflected.

Now, let’s fix the main navigation. To update the display name of the link, we’re going to go to Content > Page Manager > Navigation Manager. Within this area, we can see a list of navigation menus. To update the links on the main navigation, we’ll find the Main Nav menu, and then click the Add Links action button.

From here we can see a list of the top-level links and the sub-links on our main navigation. We’ll find the “Get Your ABC Certification Today” link, and then click on the link name to make edits. The Display Name field is what we want to update, so we’ll shorten this to say “Certification” instead. Click the Save button once complete.

If we want to change the order of the links, we can use the Sort Links button at the bottom of the list. When we click on this button, a window will appear, and we can drag and drop the links in the desired order. If we want the Certification link to be placed after the Meetings link, we can drag and drop the link in the correct spot. We’ll click the Close button once we’re finished making our changes.

Now, when we refresh the front end of the site, we can see that the main navigation is back where it’s supposed to be, and the Certification link is located next to the Meetings link.

Throughout our site we’ll also notice some side menus. The About Us page will have an About Us side menu, the Join page will have a Join side menu, and there is the Quick Links menu that may appear on multiple pages throughout our site.

Sometimes the links in these side menus will match the sub-links on our main navigation, but we can add additional links if needed. To make updates to these menus, we’ll go to the Navigation Manager, find the menu from the list, and click the Add Links action button.

To add a link, we’ll click the +Add a Link button towards the top of the list. There are two different types of links we can add:
An Internal Link will let us search for and select a page from our Page Content area. We can also start typing the name of a page within the Page field, and then select it. The URL will automatically populate based off the page we selected. We can update the Display Name if needed.

An External Link could be a page outside of our chapter’s website, or it’s a document we uploaded within the Media Manager > Documents area. For external links, we’ll enter the full URL address into the URL field, and enter a Display Name for the link. For external links, we’ll usually want to select the option to open the link in a new window, that way someone is not directed away from our site.

We also have the ability to add a sub-link, which will appear below a top-level link. To add a sub-link, click the Add Sub Link action button next to the top-level link. We’ll follow the same steps to either add an internal link, or an external link.

One area that people frequently want to learn more about is the Newsletter tool within the system. This is a great way to easily organize and post regular publications to the built-in Newsletter system page .

We’re going to go to Content > Community > Newsletter, and we’ll see a page that lists all of the newsletters we’ve created in the past. To create a newsletter, we have a couple options. You can click the Copy button to make a copy of an existing newsletter, which can be helpful if your newsletters include a lot of the same content from month to month.

The other option is to create a newsletter from scratch, which is what we’re going to walk through today. To do that, we’ll click on the Add a Newsletter button at the top of the screen .

We’ll enter a name for our Newsletter, and adjust the Publish Date. If our Newsletter should auto-publish on the date specified, we can check the box for “Publish Automatically on Publish Date?” Then we’ll click Next.

When we get to the Content section of the wizard, we’ll see a list of default content sections or ones we’ve used in the past. These section labels are headlines that we can add content under. To add content to a section, we’ll click on the Add Content link for the section.

If you have a Newsletter Article List content section on your home page and want to make sure this section is displayed, the box for “Include in Newsletter Article List” should be checked. This means that the headline, icon and short excerpt will appear in the Newsletter section on your home page. If you’re not utilizing a Newsletter Article List content section, or you don’t want this section to appear, then leave this box unchecked.

We’ll enter the information for this section in the Content area, and then Save our changes.

If we want to add a section that’s not already displayed, we can click the Add a Section button and either choose a section from the drop down list, or create a new one by selecting Create New, Reusable Section. If we choose that option, we’ll enter a Section Name.

If we want to make sure this section appears in the Newsletter Sections list every time we add a Newsletter, then we can check the Default box.

Another option is the “Show this section in the sidebar” box. This means any content in this section will display in the left sidebar of the page instead of the main body of the newsletter. So if you have a list of board members or the dates and names of a few upcoming events, you can select that option. We’re going to leave this box unchecked for this particular section.

Finally, we can add the information we want to include in this section in the Content area, and then click the Add button.

If we want to re-arrange the sections of our Newsletter, we can drag and drop them in the correct order.

The Preview button is available in the upper right corner, so we can take a look at what our Newsletter looks like before publishing.

Any sections that do not have content added will not display on your Newsletter page, so it’s not necessary to delete unused newsletter sections.

We’re all finished adding information to our sections, so we’ll click the Next button to get to the All Done screen.

If we are ready to publish the newsletter, we’ll click on the Make Current button.

Once a newsletter is marked as current, it will automatically display on our /news.php page. So if we go back to the front end of our site and view that page, we can see our Newsletter appear. Any past newsletters will be auto-archived on the Newsletter Archives page, which is linked in the left navigation menu.

And that's it for this session! For more videos and other resources, please be sure to visit our Knowledgebase.