Using the Admin Text Editors

The WideRange admin control panel features advanced text editors that enable you to easily insert links, create heading lines, add various formatting, insert/upload images, and more. While the text editors should be pretty straightforward for the most part, I'd still recommend reading this page and watching these screencasts which will offer some tips and tricks, as well as pointing out some common pitfalls to avoid.

The Text Editors are not WYSIWYG!

Keep in mind that as you're writing your content in the admin text editors, they are not what-you-see-is-what-you-get preview editors! The admin will not necessarily be showing you the same fonts, font colors, font sizes, link colors, or paragraph alignments as will appear on your website. Do not try to force the text in the admin to look how you want it to on the website. If in doubt, as you write and save your text in the admin, you can refresh the corresponding page on your website to see how it's looking there.

Avoid Excessive Embedded Formatting

When you're writing your text in the admin it's best to think of it strictly as data entry. The front-end website will handle all the styling of the text, so the text you enter into the admin should be as close to pure data as possible, with a bare minimum of embedded formatting only when necessary.

For some specific examples:

  • Do not bold entire blocks of text - only use bold for certain words or phrases you want to emphasize. If you want your website text to appear thicker, let me know and I can update the site for you.
  • Do not align all your paragraphs manually - the website will handle this automatically for you. If you want the website text alignments to be different, let me know and I can program it this way for you. You should only use alignments for certain sentences that you want to change from the default.
  • Do not change the color of entire blocks of text. The text color picker is only meant for changing the color of one word or sentence that you may want to highlight (like I've just done in this list). If you want to change the default font color of the text on your website, just let me know and I can do this for you.

If you find yourself constantly adjusting the paragraph alignments or the text colors, you should probably stop! In that case you should ask me and I can adjust the text color, alignment, etc. for you on the website.

There are two big reasons why it's important to avoid embedded formatting in your data: 1) Embedded formatting quickly leads to inconsistencies and visual clutter on your site. 2) Embedded formatting is very difficult to update - if in the future you want to update the design and colors of your site, each bit of embedded formatting would need to be updated manually throughout your data, which could become incredibly tedious.

Be Careful When Pasting Text

The admin text editors don't always place nice with pasted text - particularly text that you've copied and pasted from other websites or from a Word document. What can happen is that sometimes a whole bunch of unwanted embedded formatting gets copied and pasted along with the text (and we just learned above why embedded formatting is no good).

The safest way to paste large chunks of text is to first switch the text editor to HTML mode (the first button in the toolbar), then pasted your text, then switch back out of HTML mode. What this does is it pastes the text as plain text, meaning that no embedded formatting hitchhikes along with it.

Inserting or Uploading Images into the Text

With the WideRange admin text editors you have two options for putting images into the text: you can insert an existing gallery image, or you can upload a new image.

If you've already added an image into a gallery previously, then it's best to insert that image into the text. In that case the image has already been uploaded so there's no need to upload it again. Plus, by inserting an existing gallery image, the image will automatically be inserted with its caption and alt tag.

On the other hand, if you just want to include a miscellaneous photo solely for the page that you're writing, then you can upload the image directly into the text. Note that images that are uploaded into the text are not added to the photo database, therefore they won't show up in any photo search results on the site.

To insert or upload an image into the text, place the cursor where you want to add the image, then click the "Insert Image" or "Upload Image" buttons from the toolbar. Once you choose an image to insert or upload, it will be placed within the text. If you want, you can drag the image to reposition it elsewhere in the text.

Adding Image Captions and Links

Once an image has been inserted or uploaded into the text, you can click on it and click Edit. There you can enter an alt tag and a caption for the image.

You can also enter a link if you want the image to be linked to another page. The link you enter should be a full website page address. You also have the option for the link to open in a new window. (Typically, you would only open external website links in new windows; it's best to keep your own site links in the same window).

Resizing and Positioning Inserted Images

Once an image has been inserted or uploaded into the text, you can click on it and click Edit. There you can choose to Position the image to the left or right side of the text, in which case the image will automatically scale down to 50% size and the text will flow around it.

You can also click on the image and drag the little blue box at the bottom right corner of the image to resize it smaller if you'd like.

Embedding Videos

The text editor makes it very easy to embed videos on your pages, in any text area. Just click the Video button in the toolbar, and there you will paste the YouTube or Vimeo video page address* into that box.

* Note that you need to paste just the video page address - NOT the "embed code" for the video. So when you're on your video's page on YouTube or Vimeo, copy the page's URL address from your browser's address bar, and that's what you'll paste into the admin.

Embedding Script Code

For advanced users, occasionally you might have a reason to insert some special third party code into one of your pages. These could be things like perhaps a newsletter signup form code or a calendar app. Usually these are javascript codes that are surrounded by "script" tags.

Whenever you paste code into a page, you must first click the "Embed Code" button (furthest right button in the toolbar) and paste your code into that container.

What this does is that it isolates and contains the code intact, so that it can actually run instead of just getting displayed on the page as text. It also preserves the code from being mangled by the text editor's auto-formatting features.