User Tutorials – How To’s for the SF Health Network Website

User Tutorials – How To’s for the SF Health Network Website 2018-02-13T17:43:21-08:00

Logging In

For the first time, setting and resetting your password.

Once your account is set up, you’ll receive an email with your user name and password. Make a note of who sent you this information. They will be referred to as your Administrator in these tutorials. If you run into any issues or have questions you can contact your Administrator or submit a Help Desk (628-206-7378) ticket and your Administrator or another member of the IS team will assist you.

Go to the login page for, and enter your username and password, and click Log In.

Once you are logged in you will see the Dashboard. You’ll use the menu on the left to navigate around the back-end of the site.

On the menu click Profile, then scroll down until you see the option to enter a New Password.

Choose Generate New Password if you would like to reset your password.

A strong password will be automatically generated for you. You may type in your own password here, but it must meet the strong criteria.  Click Update Profile to save your new password.

Resetting Your Password

If you forget your password or can’t log in for any reason, submit a Help Desk (628-206-7378) ticket asking to reset your password for Your Administrator or another member of the IS team will be assigned the ticket and assist you.

When you receive your new password, remember that you can copy and paste it into the form on the log in page to avoid typos. Once you have logged in, change your password to something you will remember following the steps above.

Pages and Posts

What are they?

Pages and Posts are different types of content that we use on the site to organize information for the public.

Pages make up most of the site. Pages:

  • are mostly permanent, such as information about a clinic
  • aren’t announcements
  • have many styling options, to create a unique look

Posts are used for announcements or time sensitive materials. Post can be linked to like a regular webpage, but they have some special features too. While Posts are new, they can be displayed on other pages. For instance, posts will be displayed on the “For Patients, Clients, and Families” page if you add the Category “Patients” on and/or on the “For Staff and Providers” if you add the category “Staff”.

If you would like to add a category and display posts on your page, submit a Help Desk (628-206-7378) ticket to make the request to your Administrator.

Next: Finding Pages and Posts assigned to you

Finding the Pages Assigned to You

And a Shortcut if you know what you are looking for.

Log in to the site and click Pages from the menu on the left side of the screen. You should see a table with the heading “Pages”. All of the pages that you created or are assigned to you will be listed in the table.

Hover your mouse over the title of the page that you want to edit. Options will pop-up right below the title.

  • Edit will take you to the Editing screen, discussed in tutorials regarding editing
  • Quick Edit will pull up a form with some options that are useful for making administrative changes
  • Trash will Delete the page
  • View will take you to the page, as it looks to all visitors

The Shortcut

Log in to the site. Then, visit the site and navigate to the page you want to edit. Select Edit Page from the toolbar at the top of the screen. This will take you directly to the edit screen for that page.

Note: This will only work on pages that are assigned to you.

Finding the Posts Assigned to You

This process is similar to finding the Pages assigned to you, although the tables with information about posts are much simpler.

Log in to the site. Then click Posts on the left side menu. All of the Posts assigned to you will be listed.

Creating Pages and Posts

If you would like to create a new Page or or Post, please  submit a Help Desk (628-206-7378) ticket for the request and your Administrator or another member of the IS team will assist you.

Once the Page or Post is created, you or the user you designate will be able to add content to the Page or Post.

Adding and Editing Content

 Once you navigate to the Page or Post that you would like to edit, you will see this screen:
  • Give your page a name by entering it in the Title field.
  • Add content to your page using the text editor or the Fusion Builder.

Text Editor

This option is very similar to a word processing application like Microsoft Word. You can use the buttons along the top of the Visual editor to style your content, add horizontal division lines, links etc.

As you edit, Save often and use the Preview button to see how your page will look once published.

Note: If instead of your content, you see code that looks like the picture to the left, it is likely that you are looking at the Text editor instead of the Visual editor. Switch back by clicking on the tab that says Visual, and you should see the content that you are expecting.

The Text editor is HTML. Using the Text editor can lead to changes that you are not expecting if you do not know HTML. If you do not know HTML, stick to the Visual editor.

Using the Fusion Builder

Using the Fusion Builder to Add Content to Your Page

It’s now easier than ever before to create dynamic page layouts using Fusion Builder. The Fusion Builder allows you to easily build your page layout by adding containers and elements into a page. Click the Use Fusion Builder button to use our Fusion Builder and add Fusion Builder elements to the page. Continue on this page to follow quick steps to building your page with the Fusion Builder or use the buttons below to access additional information on using the Fusion Builder

How The Fusion Builder Works
Watch the ‘Fusion Builder Tour’ Video

Step 1 – Add a Container

 Before you can add any columns or elements on the page, you must first add a Container. This way, the columns and elements stay intact. To do this drag-and-drop the full width container icon onto your page.

 Step 2 – Add Columns

Once you’ve added a Container, drag-and-drop your desired column layout into place. Choose from numerous layouts or single columns.

Step 3 – Add Elements

 After setting up Columns, click the Builder Elements button to bring up the elements window and select the Elements you’d like to add. Drag-and-drop the elements into the column you would like them displayed. To add content to the elements, click the pencil icon at the top right of the element.

The Publish Box on the right allows you to preview your changes by clicking Preview to open a new tab. Click Publish to save your changes to the site.

The permalink will be the URL of your webpage. WordPress will automatically make the title the end of your page’s URL, with spaces replaced with dashed. For example a page with the title “Patient Services” will have URL like

If your page has a long Title, you may want to edit your URL, using the Edit button to the right of the Permalink. After you change the URL name, click the OK button and then Save the draft again and your Permalink will Update.

Note: Changing the Permalink is something you should do before you publish the page. If you do it later, and other pages have already been linked to your page, changing the Permalink will cause those links to take visitors to a non-existent page, and they will see an error message

Adding Pictures

Text Editor

If you are using the Text Editor you can upload images by clicking Add Media from the top left.



Fusion Builder

If you are using the Fusion Builder, you can add images by selecting the Images Frame, for single images or Image Carousel for multiple images by dragging the elements into a container. Then click on the paint brush icon to edit the element. From the menu you can choose custom display option. To add you image click Upload to the right of the image row.

To upload your image click on the Upload Files tab, then select your file or grab it into the Selected Files area shown below. To choose from media files already on the site, click the Media Library tab at the top of the page.

Once the file is uploaded you will see the Media Library screen with your image selected. Before you insert your image on to the page, you need to add some important information in the Attachment Details section.

Make sure you add a brief description of the image in the Alt Text field. It should be one sentence or less, such as “Smiling children at the Hospital.” Do not skip this step, it is a compliance requirement. To learn why, check out the World Wide Web Consortium’s Accessibility page.

You can also use the check boxes in the Categories section to select categories relevant to the image you are uploading. This will make it easier for you to find the image in the future and it will help keep our shared Media Library organized. If you don’t see a category that you need, submit a Help Desk (628-206-7378) ticket and your Administrator or another member of the IS team will assist you.

Scroll to the bottom to the Attachment Display Settings area where you can select the alignment of the image, what the image will link to, and the size of the picture.

Once you make your selections, click Insert into page.

How do I get my images to be clear?

In order to achieve the best quality images and to keep your pages loading quickly, please upload .JPG files and compress large files through a file compressor program before you upload then to the site. To keep your page organized, try to upload images that are the same size.

For more information on how to optimize your images click here.

Editing Your Image Once it is Uploaded

Text Editor

Fusion Builder

If you are using the text editor you can click on your image to edit it once it is on the page. Click on the pencil to edit the image.

If you are using the Fusion Builder, click the paint brush icon on the image builder element to edit the image.

Text Editor

Fusion Builder

First, highlight the text that you would like to link. Then click on the link button:

Using Builder Elements to create links can provide a way to call more attention to your links. Most of the elements provide you with the option to add a link in the edit options.

Useful Builder Elements for creating links:

  • Button
  • Content Boxes
  • Toggles
  • Text Block

Below is a preview of how you would add a link in the image builder element, turning your image into a link.

If the link you are adding is to site outside of San Francisco Health Network, the Link Target should be  _blank.

Adding Videos

Text Editor

Add a Vimeo or YouTube video to you page by adding the videos embed code into the Text tab.

Then Click on the Visual tab to preview your embedded video.

Fusion Builder

To add a videos to you page, drag-and-drop either the Vimeo or YouTube Builder element into a container on your page. Then click on the the paint brush and paste the URL link into the Video ID section.