Content Training Part 1: Basic Page Editing

Accessing the Page Editor

Logging In

In your community website’s main menu, click Account and log in with your username/email and password.

Dashboard vs Frontend

When you log in as an Administrator or a Moderator, you will notice the Admin Bar at the top. This bar will appear over the header even when you scroll down.

Find the name of the website at the top-left corner. Click it to go to the Dashboard, an area only accessible for moderators and administrators. When in the Dashboard, click it again to arrive back to the Frontend, the site that will be viewed by the general public.

For this training, we will be using the Frontend.

Page Editing Basics

Accessing the Page Editor

For this training, we will be focusing on editing the homepage. When on the homepage, click Enable Visual Builder on the Admin Bar.

Editing Modules

A Module is an area on a webpage with its own set of rules. A module can be a textbox, a button, an image, a call to action, a header, and more.

Modules are organized into Sections – large groups of Modules; and Rows – small groups of Modules that show side to side.

Here’s an example: There is an image to the left of a text paragraph. The image is a module, and the text paragraph is another module. The image and text paragraph are two modules organized in a Row.

When you move your mouse over a Module, it will show a dark grey Box around its edges, with a small dark grey menu inside the box.

Sections can be blue or puple, and rows are green.

Editing a Text Box

Let’s start by editing the “About Our Community Website” section.

Click the Cog Button, the second one from the left in the dark grey menu.

This will open the Module Settings Window. In this case, it will show “Text Settings” at the top. You can move the window around by clicking “Text Settings” and dragging. You can resize the window by using the dark grey button at the bottom-right corner of the window.

Now you can edit the text. Notice how when you change text in the Module Settings Window, your changes to the Module will show in real time.

However, you’re only seeing what the page will look like when you save your changes. If you try to exit the page editor without saving, the editor will warn you. We will go over saving your changes in a later part of this guide.

When you’re done editing the text box, click the green button at the bottom right of the Module Settings Window, right next to the circular window resize button.

Replacing an Image

Hold your mouse over an image and click the cog icon to open the Module Settings window.

To replace the image, click the image inside the window. From here you can select an existing photo already uploaded to the site, or upload your own.

When you’re done editing the image, click the green button at the bottom right of the Module Settings Window, right next to the circular window resize button.

Changing Mobile Content

Certain modules on the homepage are set to show only when on a mobile phone, while others are set to show only when on a desktop.

You can edit greyed-out modules. The effect is there to show what parts of the site are visable on your current device.

You can preview what the site will look like on mobile. In the bottom center of the page editor, click the purple circle button with three dots. This opens the Page Editor Menu.

The dark grey menu at the bottom-left of the Page Editor.

Click the phone icon to see what the page will look like on a mobile phone. The modules that were greyed-out become opaque, while others become grey that weren’t before.

Click the computer monitor icon in the middle of the bottom right Page Editor to change it back to computer view.

When you edit something on the homepage, make sure to also edit its matching greyed out section.

• The Image Slider: On mobile phones, it is a single photo. The text in front of the image will have to be changed, too.
• The Emergency Banner: There is a mobile version of the emergency information banner that also must be edited.

The Image Slider

To edit the image slider, start by selecting the module and clicking the cog icon, to open the Module Settings Window for the slider.

T Module Settings Window for the slider shows a list of slides, in the order of appearence.

Clicking the cog button next to a slide opens the settings for that slide.

To change the image for that slide:

1. Scroll all the way to the bottom of the slide settings, and find Background.

2. Click the third grey box from the left. It should be the only one filled in with blue.

3. Click on the image to open a window where you can upload a photo to replace it.

4. Once done, scroll down to find the Admin Label. Replace whatever descriptive text there is (ex: “mountain lake with central island”) with text that describes the photo you just uploaded. This will make it much easier to find the image if you need to edit it again in the future.

5. Click the green checkbox at the bottom right of the window to save the settings for that slide. From there you can click the same button again to save your changes on the slider.

Enabling the Emergency Banner

Enabling the emergency banner involves two things: enabling people to view the computer and mobile versions of the banner, and editing the text.

Let’s start with the PC version of the banner. Start by moving your mouse over the greyed out orange banner, then click the cog icon in the green menu that appears.

Go to the Advanced tab in the top purple menu, where Visibility should already show information underneath. Uncheck “Tablet” and “Desktop” so the settings look like in the above image.

Now that it’s enabled, if you need to edit the text it’s as easy as hovering over the text on the banner and clicking the cog icon over the grey box, like any other text area.

Now let’s follow the same instructions with the mobile emergency banner.

Move your mouse over the mobile, greyed out version of the emergency banner, which also has an orange background. Two menus will show close to each other. Make sure the darker blue menu is highlighted, then click the blue cog icon.

Go to the Advanced tab like we did earlier. This time you will need to find Visibility and click it to open the settings. Uncheck “Mobile” so the settings look like the above image.

Like the desktop emergency banner, you can edit the text like normal from here.

Once you save your changes, the banners will be available to provide emergency information to the general public.

To disable them, follow the same exact instructions but instead of unchecking boxes under visibility, check all three boxes.

Finishing Up

To save your changes, first make sure to open the Page Editor Menu, if it isn’t already open. If it isn’t open, click the purple button at the bottom center of the screen.

At the bottom right of the menu, click Save. Wait for it to show a checkmark.

Then, to exit the page editor, find Exit Visual Builder in the Admin Bar and click it.

Congratulations! You’re on your way to becoming a page editing expert!

If you have any further questions, please create a ticket using our support system.