How to update images

The video demonstrates the best way to update standard images and background images.

Important tips for background images:

1. Choose a large image

You’d like the background image to extend all the way across the page left to right, then you’ll need to select a large image. A good rule of thumb should at least

1600 pixels horizontal

700 pixels vertical

2. Choose an image that does not distract

Most background images will have text on top. Therefore, you’ll want to minimize the details of an image. The image should just project a theme or mood. Keep it simple. Even a bit blurry is good.

 


What’s an anchor tag?

By including an anchor tag within a post or page, you can place links in the body of your post which when clicked allow the reader to jump to another location on the page. Example: Click here and you’ll jump to the last line of this page.

How to use:

The anchor tag will consist of two parts.

Part 1 is the link. First, you need to create the link.

If you are linking to a spot on the same page, highlight the words for the link, then click the link icon in the style bar:

support-anchor-tags-link

 

When the popup window appears, name the anchor tag and include the pound sign just before it, so it looks like this:

#anchorname

When you’re done, click the “Add Link” button in the bottom right of the popup window.

The above anchor link only works when you are jumping to a specified spot on the same webpage. If you want a link to jump to a specific location on a different page (like your About Us page), you’ll need to add the full web address for the page in front of the #anchorname, so it will look like this:

http://yourwebsite.com/about-us#anchorname

Notice there’s no forward slash after the page link: about-us#anchorname

 

Part 2 is the actual anchor . The anchor should be placed at the beginning of the line where you want the reader to jump to.

Place your cursor at the beginning of the line and click the bookmark icon in the style ribbon:

support-anchor-tags-anchor

 

A popup window will appear again. Type in the name of the anchor without the pound sign so it looks like this:

anchorname

Then click OK.

This will insert the a little anchor icon at the beginning of the line and look like this:

support-anchor-tags-anchor-destination

Save your changes, then update the page.

This is the bottom of the page example.


support-shortcode

What’s a shortcode?

A shortcode combines a number of computer commands into one, simple term that can be used in any textbox that looks like the one above.

To use most shortcodes, think bookends. You need them on both sides.

The left side introduces the shortcode in between two straight brackets: [shortcode-here]

The right side ends the shortcode with a forward slash: [/shortcode-here]

Some shortcodes allow you to add additional styling features which are included inside the left-side bracket: [shortcode-here size=medium]

Available Shortcodes

Always place shortcode names inside brackets [shortcode-here]

Adding a button

Words Go Here

Shortcode: [ button size= ]Words Go Here[/shortcode]

(Note, don’t add a space after the bracket as shown above. This was done so you can see the shortcode itself.)

Action: Creates a bold button with the words in the middle.
Options: large, medium, or small
See example above

To link the words, highlight the words in between the brackets, then click the Chain Link icon in the style ribbon above.

Adding Font Awesome Icons
Example icon:  

Font Awesome is a set of 450+ icons you can easily add to your site

Click here to view all icons.

Shortcode: [ icon name=calculator]

(Note, don’t add a space after the bracket as shown above. This was done so you can see the shortcode itself.)

This shortcode doesn’t require a closing bracket on the right.

Dropcaps

D
ropcaps make the letter larger than the rest of the text and “drops” it or extends it into lines of text below. Typically used at beginning of paragraphs.

Shortcode: [ dropcap]L[/dropcap]

(Note, don’t add a space after the bracket as shown above. This was done so you can see the shortcode itself.)


support-paste-in-text

Never paste text directly into editor

The #1 cause of page designs looking bad is due to pasting in code from an external document – like Microsoft Word – directly into the editor.

Microsoft Word is a fine word processor for producing documents to be shared or printed, with a wealth of print-based options for indexing, and producing table of contents. As a web publishing tool, however, it is a little less than ideal and produces very messy HTML because when you copy the text in MS Word, you also copy all the styling features for the print document.

The same applies when using Google Docs, OpenOffice, or other word processors and spreadsheets like Excel.

If you do need to paste content from Microsoft Word, you can do so by selecting your content in your MS Word document BUT DO NOT PASTE IT DIRECTLY INTO the Visual Editor.

Click the paste as Text button as shown above.

Your editor will then be in “plain text mode” so you can paste in your text from Word or another word processor. You will see the following window pop up telling you that you are in this mode until you click on the button again to turn it off:

support-plain-text-mode

Once you’ve enabled the Plain Text option once for a post or page, subsequent clicks on the button will turn it on (evidenced by a box around the button) or off (no box around the button). You will not see the pop up window again unless you reload the page or go to a new post/page, but the toggle option still works.