Heading 1

For best SEO practices, use an H1 title once in a page – typically in the page banner.

Default Styles and Options

This page is set to private. You must be logged in to see it.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

You can add a colored bar below any title by highlighting the title and selecting an option from the “Formats” field in the visual tab of your content editor. Our main heading above has the “green title bar” format applied.

Screenshot of formatting options

Note there are formatting options for buttons.

A regular link looks like this by default.

To turn a link into a button:

  1. Add a link to relevant text
  2. Highlight the link
  3. Select an option from the Formats field
  4. Check the live or draft view of your page to see format applied

You should see something like this:

Blue Button   Reverse Green Button

And there is an option for bold “icon lists”

  • To make an icon list, add each list item on its own line – and add a small icon to the beginning of the line.
  • Next highlight the lines and click the bullet list icon in the visual editor tab.
  • Finally, with the lines still highlighted, select “icon list” from the formatting field.

Note these lists default to a larger font that is bold and blue. You don’t have to manually add color or bold them.

Let’s talk a bit about font colors.

Most text defaults to a shade of gray – and all headings default to black. You can override these on a case-by-case basis by using the color picker in the visual tab of the content editor. CSG default colors have been pre-loaded in the picker for easier selection.

Adding white text in a content editor can be problematic – white text in a white field is a bit hard to edit! If you’re using a dark background and need to add white text, be sure to check the “White Text” option in the “Background” tab for the page section you are editing.

Paragraphs and other Elements

WordPress assumes everything you enter is a paragraph, unless you tell it otherwise. You don’t have to enter twice after each paragraph – only once. Hitting enter twice just creates unwanted extra space. If you want to break to the next line without creating a new paragraph:
Hold down the shift key as you press enter.

As you add your content, you can go bold with your text, italicize it – or if you really mean it, boldy italicize something! If you want to add non-paragraph text, just enter it, highlight it and choose an option from the editor menu. Here are a few examples:

This is an ordered or numbered list:

  1. Step 1
  2. Step 2
  3. Step 3

This is an unordered or bulleted list:

  • Lorem lorem
  • Ipsum ipsum
  • Lorem ipsum

This is a blockquote:

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”

Images and captions

This is a centered image
This is a right-aligned image

It’s important to pay attention to how you add images.  As you’re selecting the image you want to use, pay attention to its default settings.  You can choose to left-align, right-align or center an image.  You can also choose a smaller version of the image and save on page-load time.  The biggest thing to pay attention to is the link setting.  If you don’t want to link the image to another view of itself, be sure ‘none’ is selected.  If you’d like to add a caption, you have that option as well.

If you decide to add a caption, you may want to add it after embedding it in your post.  If you add a caption in the media library, it will show up each time you decide to re-use the image.

This is a left-aligned image

To edit image settings after adding an image to your post, just hover over it and click the pencil icon. This also provides additional image customization options. You can do things like change sizes, set a custom size, change alignment or set an alt tag. Alt tags are worth mentioning… they are critical for accessibility and provide SEO juice as well!

Sometimes floating images, quotes and other elements causes problems. If you don’t want text below a floated element to wrap or ‘scrunch up’ around it, you need to ‘clear the float.’  To do this, select the paragraph or element you want to fall below, highlight it with your mouse, and select ‘clear’ from the format field in the editor menu.

And that’s a wrap

There are many other options that allow you to customize your content. You can experiment with other items in the editor menu of the visual tab to center text, assign colors, change font-sizes and more. If you have unexpected results, don’t be afraid to click into the text tab and edit tags generated by WordPress.

If you really need to customize something further, there is a CSS field available at the bottom of page and post edit views.