We have upgraded our editor to give you the latest and greatest tools to manage your content. This change affects several major page parts and thereby improves your content experience across the whole platform. You will see the new editor on these page parts:
- Custom Content
- Calendar (Description tab)
- Collections (Description for Item)
- News Archive
- Online Donations (Form Response)
- Online Registration (Form Response)
Watch our training video for the full experience!
WYSIWYG Editor Tool Bar
We’ll go through each icon and discuss in-depth what they mean.
- Basic Formatting of Text - styles, alignment, formatting
- Using Your Words - how to use the insert text option, find and replace, and spelling check
- Inserting Media - drag and drop images; insert audio, video, special characters
- HTML Editing - using the Source buttons to edit and view HTML and blocks
Basic Formatting of Text
Styles vary from site to site; some sites have no specific styles, where others might have several different kinds of buttons. This is determined in your design process when we build your site.
Applying your styles is simple! You simply type the word you want to style, highlight it and select your Style from the dropdown tab. If you need to break away from your Style and start typing normally, select the red dotted line to break the style and it will go back to normal. Check it out!
Format Your Text
Format your text font with your pre-selected styles. Type the word you want to format, highlight it and select your Format header options from the dropdown tab.
Basic Formatting Options
|Text formatting -- highlight your text to strip all the existing formatting and clean it up|
|Align your text Left, Center, Right, or Justify|
|Bullet points and number listings|
|Indent your content left or right|
|Use block quotes to call attention to specific passages of text|
Using Your Words
Use your words to their best advantage by using our tools designed to make your life easier.
|Use this tool by inserting copy from Microsoft Word and other formatted text to strip your formatting and keep your content clean and easily editable on the web.|
|Undo and Redo buttons. Made a mistake? Go back a step, or go forward a step.|
|Search for words, or do a find and replace.|
|Use our Spell Checker tool. If you Enable SCAYT, that means “Spell Check As You Type,” so it will give you a red underline under your words if they are misspelled or unusual. Alternatively, you can “Check Spelling” and it will pull up a window for you to see alternate spellings of your words.|
If you need to insert video files, audio files, or other, check out our Insert dropdown tab.
If you already have an image uploaded to SiteWrench, or if you need to upload a file to SiteWrench, you can use the Insert Image option. Select "Choose" to look at your Files section or to upload images onto your Files section on SiteWrench.
While you're inserting the image, you can adjust the size of the image, the spacing around the image, and the border. You can even set an alignment to make the image float left or right. Use the tabs at the top for more advanced features.
Special Feature - Drop and Paste Images
What’s even better than that, you ask? Now you can drop and paste images directly into your content area, and it will upload and save it for you! Need to find that photo in your Files section later? Look for your photo name with this at the beginning of the file so that it’s set apart: “pasted_photoname”
Check out how easy it is to drag and drop your images and past them directly into your editor!
New Feature - HTML 5 video and audio capability
Let’s say you want to insert a video or audio file onto your site. Previously, you would have had to go through the Media Archive page part or embed an iFrame from YouTube or Vimeo. Now we have upgraded our Editor so that it can handle HTML 5. This is good news for you -- this means that now you can insert a video or audio file directly into your editor and it will play across all browsers.
Now you have the option to select a video, but you also have the option to select a "poster image" to appear publicly where the video file is embedded. The poster image shows before the video is clicked to be viewed. Take a look to see the difference between just inserting the video versus inserting a poster image along with the video.
Wondering where to insert links and files (PDFs)? Keep reading.
Link me baby, one more time.
Linking your content works just as easily as ever, but there are a few upgrades to make note of. Now when you copy in a URL from a browser, the editor will automatically adjust whether or not it is http:// or https://, and it will remove any existing occurrence of this for you. One less step for you to deal with. Use the tabs to get as technical as you want with the Target and Advanced modes with your links.
If you want to include a file, like a PDF, in your content -- you will select the linking option. Use the "Choose" button to search for a file in your SiteWrench files section. You can browse for a document, upload it to Files, and select it.
Insert Anchored Text
Use the flag button next to the linking icons to anchor your text. First you create your anchor, then you insert links which will go to the anchor you specify.
We have included a couple of new features to make your life easier.
|Check out our Source button, which is where you will go to adjust HTML now.|
|Use this to format your HTML.|
|This button will automatically close whatever HTML tags you begin. For example, if you start off with a <h2> it will add the </h2> automatically at the bottom. This way the header 2 font does not carry throughout the rest of the content.|
|If you want more space to view your content, expand your editor view to full screen by selecting the X shape once to expand, and again to put back the way it was.|
|View your blocks when not in source view. This helps you see the distinction between a paragraph, header 1, block quote, or other.|
New Feature - Block View
Block View is a newer feature that will come in handy. It shows you how HTML is incorporated throughout your content, even without viewing the Source HTML. Here is an example to show you how it can be useful to you.
SiteWrench Training Opportunities
As always, if you have any questions or concerns about the new editor, please don’t hesitate to ask. Our team would love to help you in this transition.
For a limited time, we are offering free training sessions specifically about the upgraded Editor. Please view training times on our Training Calendar and sign you or your team up today. If these times don't work for you, take a look at our 18 minute training video at the top of this page or submit a support ticket and we'll be glad to help.