How to add a page and add content directly into the editor; things to watch out for when pasting from common text editors; how to use the text editor buttons and features


VIDEO TRANSCRIPT: 


In this video, we'll focus on text content on our site using the page editor. Here we will be focusing on the commonly used tools and techniques for working with text. Information on other media, images, videos, and common modules can be found in other videos in this series.

We'll start with an empty page. 

On the first line, type the title of the page and choose Heading 1 in the formatting drop-down menu. 

Formatting the first line as an H1 is recommended, and it is the best practice for accessibility and search engine optimization.

A standard method of creating text content is through external word processors, like Microsoft Word, Google Documents, or Apple Pages.

To transfer content from these programs, highlight the text you want to transfer into the SiteExecutive text editor, copy it, and then paste it into the place you'd like for the content to go within the text editor.

Note that there are three methods for pasting text. 

  • The basic paste button will add the content with no extra processing
  • Pasting as plain text will strip out all text formatting such as italics and bold text.

  • Pasting from Word will carry over formatting. However, depending on the browser and version of Microsoft Word that you are using, this method may include extra code related to styling. Feel free to delete this code.

We advise you to try them all and decide on the best method that works for you. 

The Site Executive editor also includes helpful functions that you can use without switching back to your word processing program. Including "spell check," and "find and replace."

As you work through your page, note that there are a few different ways to save your page. 

These methods include Save, Close, and Save-and-Close. 

Regularly saving the page will allow you to continue working on your page without data loss.

Close is an excellent way to start over from your last save state if you ever make a drastic mistake. 

Save-and-Close works well when you have finished your page, or if you need to continue making edits later. 

Adding tabular data in tables is a common request for editors. You can insert tables using the Insert Table button. 

In the window that opens, make sure you edit the width of the table to 100 percent.

Once a table is inserted into the editor, right-clicking will give you additional commands for the Cell, the Row, and Column, as well as the ability to revisit the table properties popup window. 

Additionally, in this same group of buttons, you can insert a horizontal line to break up your information, and if need be, you can add special characters that might not be easy to type with your keyboard.  

We will now save our progress.

These are styling buttons. Clicking them toggles the styling on and off for bold, italic, underline and strikethrough. 

You can also create subscript and superscript text. Clicking them again will revert them back to normal. 

Next, we will talk about working with lists.

For list items, you can start with text and click these two buttons for a numbered or bulleted list. 

If you'd like to create line breaks from inside a bulleted list item without creating a new bullet, all you have to do is hold down the Shift key when pressing Enter at the end of the line. Doing so creates a "soft-break" at the end of the line.

This is very helpful when listing names and titles, or events and descriptions.

We're adding one more paragraph at the end of this section by copying and pasting. 

This formatting tool is for indentation. Indenting text is rarely needed, and as a general rule, should not be used.

You can also change the text into a blockquote. For more information on block quotes, refer to the style guide.

Now we're going to save our progress. We'll close it out and see where we are in terms of output. 

We have basic paragraphs, tables with basic styling, an empty paragraph, a horizontal line, a bulleted list, and blockquote.

Now we will create some links. 

This group of buttons will allow you to link, unlink, or create an anchor on the page.

First, we'll create a link to a local page. You can highlight some text, create a link, and look for a page that exists in Site Executive. 

For demo purposes, we'll link to the JHSPH home page.

This process works differently for external links.

For example, we've highlighted the word "paragraph," and we're going to create a link to Google.com. 

Since Google.com is an external link destination, the link will open in a new browser window. Make sure to check "Display the Toolbar" so the browser tools show up on the subsequent window.

Now, we'll delete the link using this button next to the link button.

Sometimes the pages run long where you'll have many paragraphs with different sections. When this happens, anchor links become very useful. These are also known as jump links.

Using anchor links provides users with a better page navigation experience.

To create an Anchor, move your cursor to the section of the page you want to link to. Let’s choose a header that we already have on the page.  

Click on the flag button here. Create an anchor name — in this case, "header dash 1."  You can create a link to this anchor anywhere on the page by first typing in the phrase that will serve as the link. Next, highlight it, and click the Link button. 

In the Link Properties popup window, click the dropdown beside “Type” and choose Local Anchor. Site Executive will detect any Anchors available on the page and add them to the dropdown list beside the word, “Anchor.” Choose header dash 1, and click OK.

Now, when someone wants to send a visitor to this header immediately, they must append the name of this anchor to that link. 

Now, we'll click Save on our progress.

We have some drop-down styles available in this Styles list; most of these are for internal use with other tools and modules and should not be used with text. 

Instead use the format styles option to the left, Normal paragraphs and six levels of Headings. 

We'll close this out for now. 

Sometimes it is easier to wipe all of the stylings and start fresh than it is to correct the styling carried over from other sources. This button strips all text styling.

And now we'll delete this paragraph since we don't need it.

To see the true structure of a page, click this button called Show Blocks. 

Show blocks will reveal outlines around each major block-level element. This can be very helpful to find mistakes in formatting.

We see that there was an empty space between the table and this empty line. 

The spacing between the horizontal line isn't too broad between this part and the list, and we'll delete this space right here. 

Let's turn off show blocks for now. 

Now save and close again, and we'll preview the content of this page.

Always close the "edit page" before closing the browser window or navigating away from SiteExecutive while editing a page. Failure to do so can lock you out of the page. If you become locked out of a page, you will need to submit a ticket to regain access. 

In this video, we covered the standard tools used in day to day content editing, including paragraphs, tables with basic styling, rules, lists, blockquotes, and links.

Certain complex pages will have additional content added through either inclusions or modules. Common uses are addressed in a separate video in this series.