W hat
Y ou
S ee
I s
W hat
Y ou
G et
The WYSIWYG editor offers a high degree of flexibility in managing your content. You will find this same editor in several different places
Custom Content
Blog/News
Calendar (Description tab)
Collections (Description for Item)
Some of your custom page parts
The WYSIWYG editor is the most flexible way to manage your website's content (consequently it can be a bit harder to use -- with great power comes great responsibility and all).
WYSIWYG Editor Tool Bar
We’ll go through each icon and discuss what they mean and what they do.
Quick Menu
Basic Formatting of Text - styles, alignment, formatting
Using Your Words and Special Characters - how to use the insert text option, find and replace
Inserting Media - drag and drop images; insert audio, video, creating tables
HTML Editing - using the Source buttons to edit and view HTML and blocks
Basic Formatting of Text
Use Styles
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 the Headings option from the dropdown tab.
Basic Formatting Options
Bold | |
Italicize | |
Underline | |
Remove Format -- 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 Or $₽∈₡¦∀⌊ Characters
Use your words or $₽∈₡¦∀⌊ characters to their best advantage by using our tools designed to make your life easier.
Search for words, or do a find and replace. | |
Add a horizontal line to your content | |
Add a variety of special characters to your content | |
Add a content token |
Inserting Media
Use these options to insert images, video files, audio files, or to create a table.
Insert Images or Media
If you already have an image or media file uploaded to SiteWrench, or if you need to upload a file to SiteWrench, you can use Source to get to your files. Select the "Source" button
that is just to the right of the Source field to open your Files section or to upload images onto your Files section on SiteWrench.
While you're inserting the image or media file, use the tabs on the left to find additional features. These features include sizing adjustment, alignment options, media posters, and embed options.
You can also resize images directly from your Files with the Resizing Tool!
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”
HTML 5 video and audio capability
The WYSIWYG editor can embed media using standard HTML 5 features. This means that now you can insert a video or audio file in the editor and it will play across all modern browsers.
Along with the option to select a media file, you also have the option to select a "poster image" that displays while the video is loading.
While you can embed a video file that you've uploaded to SiteWrench, that may not be the best option for you. Learn more about the best ways to incorporate video into your site.
Inserting Links
Link me baby, one more time.
Links have two primary purposes. A link can either take a user to content on another related topic or it can point a user to a file. The best way to incorporate PDFs and other documents into your website's content is to upload them to Files and then link to them.
This is nit-picky but it is also for your own good...
The words "click here" should never ever be linked text. The web is intended to be semantic, so the content that is "marked up" (or linked) should be about the target of the link.
This is BAD
Click here to read more about the plusses and minuses of the traditional custard dessert, flan.
This is BETTER
This is GOOD:
Flan is a traditional dessert custard dessert loved by some and disliked by others.
Creating Tables
Adding a table will give you a different way to display your content. Simply select how big you want your table using the grid.
Once you have added your table, you will be provided with additional options to expand or decrease its size, and even create table properties.
HTML Editing
We have included a couple of new features to make your life easier.
Check out our Source button, which is where you can go to adjust HTML | |
View your blocks when not in source view. This helps you see the distinction between a paragraph, header 1, block quote, or other. | |
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. |
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.
Need more help?
Want to see some useful tools when it comes to editing? Check out the help button.
This handy button gives you some helpful shortcuts and helpful keyboard navigation tricks to use.
SiteWrench Training Opportunities
As always, if you have any questions or concerns about the editor, please don’t hesitate to ask. Our team would love to help you.
If you feel like you need a SiteWrench refresher or are new to SiteWrench, take a look at our Training Calendar and sign you or your team up today!