Formatting News & Info Pages

How to Edit and Format News & Information Pages

Digital PTO makes it simple to Edit & Format your website content. The following tutorial will explain the two different options for formatting and walk you through every simple step. Formatting your pages is very similar to formatting an email or a document. In fact, it’s almost exactly the same.

Step 1: Open the Post or Page you wish to Edit

openpage

To view your entire list of News Posts, go to POSTS > ALL POSTS. Then click on the TITLE of the News Post you wish to edit.

To view your entire list of Info Pages, go to PAGES > ALL PAGES. Then click on the TITLE of the Info Page you wish to edit. 

Step 2: Select Your Edit Mode (Visual or Text/HTML)

editmode

Digital PTO offers two different ways to edit your Pages and Posts. Visually or with Text/HTML. The VISUAL view option is the option we suggest you use as it is very similar to the way formatting is performed in Microsoft Word and many email programs.  In most cases you will see the VISUAL tab when you open a page, but if you do not, simply click the tab you wish to use and it will activate.

expalndrow

The VISUAL Editor has a second row of formatting options that can also be opened by clicking on the icon to the right that looks like three rows of squares. This is called the “Kitchen Sink” view. It open some more advanced formatting options

text-based

If you are familiar with HTML and would prefer to use direct coding, you will want to select the TEXT view option. The TEXT view is also the best way to paste information from a Microsoft Word Document as it will strip out all the unwanted code that Microsoft adds to copied text from a document.

Step 3: The Formatting Essentials

formatting-overview

In the image above, you will see some of the most commonly used formatting options highlighted. Bold, Italics, Bullets, Centering text, changing the color, creating links to other pages, etc.

Also highlighted is a Drop down list of Pre-Defined formatting options. These options include  Paragraph (standard text) as well as 6 different Heading (H) options. The Pre-Defined menu allows you to increase font sizes on specific items and call them out. Test it out to see which Heading tag works best for your needs. We offer Heading 1 through Heading 6 options with Heading 1 being the largest.

Note: If you only see one row of formatting options, click the button on the far right of the formatting bar that looks like a mini-color pallet to open the second row of options.

Step 4: How to Format Text

formatting-example

Formatting specific text is easy. Simply highlight the text you want to format, then click the option you want in the formatting menu and you’re all set. Some formatting options will happen immediately, other options (like adding a link) will open a new window to ask you for more information. The image above demonstrates a line of text that has been bolded and then assigned as a Heading 3 to make it a little larger.

How to Make Text Bold or Italics

bold

To make text bold, Highlight the Text you wish to make bold and then click the “B” (Bold) Button. Italics works the same way if you click the “I” (italics) button instead.

How to Make a Bullet (Unordered) List

bullets

Making a Bullet List is also a simple task. First click in the location you wish to add your list. If you need to make space, you can click ENTER or RETURN. Once you have selected your location click the BULLET LIST button that looks like three vertical dots next to three lines. This will create your first bullet. Now click to the right of the bullet and start typing your first list item. When you are ready to add the second bullet, simply click RETURN and it will be automatically created for you. When you are finished with your list, hit RETURN two times and your list will be completed and you will be returned to regular text again. If you wish to make an indented secondary (sub) bullet list, click the icon with the arrow pointing right. To remove the Indent, click the icon with the arrow pointing left. 

How to Make a Numbered (Ordered) List

numbered

Making a Numbered List is also a simple task. First click in the location you wish to add your list. If you need to make space, you can click ENTER or RETURN. Once you have selected your location click the NUMBERED LIST button that looks like three vertical numbers next to three lines. This will create your first number. Now click to the right of the number and start typing your first list item. When you are ready to add the second number, simply click RETURN and it will be automatically created for you. When you are finished with your list, hit RETURN two times and your list will be completed and you will be returned to regular text again.  If you wish to make an indented secondary (sub) numbered list (outline format), click the icon with the arrow pointing right. To remove the Indent, click the icon with the arrow pointing left.

How to Center your Text (and other Alignments)

centered

Centering your text (or aligning it Right or Left) is as easy as Highlighting the text you wish to change and clicking the preferred alignment button in the formatting menu. The above example shows text that has been centered.

How to set Pre-Defined Formatting

pre-defined-formatting

Digital PTO makes it easy to change the formatting with a single click with our Pre-Defined Formatting Options. Simply Highlight the text you want to change and select the formatting option from the drop down menu. The image above displays the Pre-Defined options so you can see the size and font weight differences in each. We highly suggest using pre-defined formatting when you can as is the most efficient way to format a website. This is the best way to highlight text in different sizes, etc. As an example, the section headlines on our tutorials are formatted as HEADING 2.

How to Change the Color of Text

colors

To change the color of some text, Highlight the Text you wish to change, then click the “A” button (with a colored bar under the A) and select the color you wish to use. This will change the color of the highlighted text and you are finished. For more color options, click MORE COLORS. Select the exact color you want with the pointer and color slider on the right and then click APPLY. We Highly Suggest that you use color sparingly as too much color changes to the text makes things look very busy and difficult to read. This is a common “beginner” mistake that we hope you can avoid.

How to Create a Web Link (URL)

link1

If you would like to create a link to another page on your website or to a whole different website, creating a Link is nice and simple. First, highlight the text you want to turn into a link. Then click the button in the formatting bar that looks like a piece of a CHAIN LINK. This will open a window (see example below) for you to enter the URL (website address) you want to link to. Paste that into the LINK URL field and then click INSERT and you’re done!

link2

EXPERT TIP: If you are linking to a different website, you can force that link to open in a new window when it is clicked. This helps bring visitors back to your page after they are done with the link you gave them. To do this, select “Open Link in New Window” from the TARGET Drop Down in the URL window.

How to Create an Email Link

email-link

You may want to create a link that opens a pre-defined email as well. This is done the same way as a URL link with one variation. Instead of pasting in a URL you will type in “mailto:” and then the email address. For example, to have a link open up an email to send to [email protected] you would type in mailto:[email protected]. This is highlighted in the example above.