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.
Pasting Text
When pasting text into the admin text editor that was copied from someplace else like from a different website or text document, you may occasionally run into weird results - like perhaps every line gets pasted as a separate paragraph. If something like this happens, the solution is to create a new paragraph block in the admin editor, click the block menu tab on the left side, click "Edit Code", then paste your text in the code box that shows there. This ensures that the text is pasted as plain text without any new lines or paragraphs.
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 title, caption, alt tag, and print links.
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 "IImage" button from the toolbar. Once you choose an image to insert or upload, it will be placed within the text.
To edit the image's caption you can simply click on the caption and re-type there, or you can click the image then click the "Image" button again which will pull up and info panel where you can change the image alt tag or link.
Resizing and Positioning Inserted Images
Once an image has been inserted or uploaded into the text, you can click on it, click the block tab menu on the left side, then click "Wrap Image". There you can choose to wrap 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 tab at the right side of the image to resize it smaller or larger 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.
For YouTube or Vimeo videos, you should also click the "Responsive Video" checkbox, which ensures that the video's sizing is optimized for any variety of screen size.
Embedding Script Code
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, a Google map, or a calendar app. Usually these are javascript codes that are surrounded by "script" or "iframe" tags.
To do this, click the "Video or Embedded Code" button again, and paste the code there. In this case, leave the "Responsive Video" checkbox unchecked.