Using the WYSIWYG Editor - UXi® Websites

What It Is

UXi® utilizes a WYSIWYG, or What You See Is What You Get, editor on the Edit Page and Edit Post dashboard. This allows a large number of advanced styles to be added to the content without the need to write HTML and CSS.

How To Use It

Most options are very straight-forward. The majority of these options are applied by clicking a feature from the menu, then typing the content out that will use it. Another method, especially helpful when editing existing content is to highlight the text first, then clicking the option. Either way, the WYSIWYG editor applies code to selected content. One very effective way to select content to edit is the path menu.

The Path Menu

A very helpful way to navigate the content of WYSIWYG content is to use the Path Navigation at the bottom of the editor window. This menu will show you what element is currently selected in the editor.  The example below notes that the current selection is only one list item (or li) and not the entire ordered list (or ol).  If a style like bold, or italic were applied now, it would only affect that item.

Each element is selectable from the path menu, to select the entire ordered list, just click it from the menu and the path will update.  Selecting the correct element is absolutely necessary when doing applying custom float classes, custom formats, etc.

WYSIWYG Overview

Add Media

Add images or files from the media library. Including the image in the content is only one option though.

• URL: This will display the full URL of the image. Note that all media library assets are stored securely using Cloudfront hosting from Amazon.
• Title: Image title is another attribute that can be added to the image tag in HTML. It is used to provide a title for your image. The text you enter inside the title tag will not be shown to user when a image cannot be displayed. Instead, it is displayed in a popup when a user takes their mouse over to an image.
• Caption: This will display as text below the image.
• Alt Text: Alt (or alternate) text is an attribute added to an image tag in HTML. This text appears inside the image container when the image can not be displayed. It helps search engines understand what an image is about. Alternate text is also very helpful in case images on a page cannot be found.
• Description: This text can be displayed on the attachment page for your image. You can enter as much information as you want in the description field. Like the full description of a photograph.
• Alignment: This feature can be used for image alignment, but UXi has much more sophisticated alignment floating options for images.
• Link To: Select if the image should link to one of the following:
  
  • Media File: Link to the image itself. Will open the image in the browser (rarely needed on UXi)
  • Attachment Page: Link to a page that will display the attachment on the default layout. (rarely needed on UXi)
  • Custom URL: Link the image to a specific URL
  • None: Do not add a link to the image at all (most common for inline page / post images)
• Size: Select from predetermined image sizes:
  • Thumbnail
  • Medium
  • Large
  • Full Size

These image sizes are set in the Settings > General section on the UXi Admin Menu.  If sizes are re-set, Images must be also be regenerated using Tools >  Regenerate Thumbnails feature.

Add Form

Add a Gravity Form into the page / post content. This option will write a short in the content to display a Gravity Form.

From the modal window, first select a form from the drop down list of available Gravity Forms. Next, select whether or not to display the form title and description, both of which are set up on Gravity Forms > Form Settings > Form Basics.

Advanced options will allow for setting a custom tab index, which  specifies the tab order of an element (when the "tab" button is used for navigating)  This option is really only useful when there are more than one form on a particular page.

Basic Text Styles

Bold: Increase the font weight of selected text.

Italic: Apply italic text.
Strikethrough:Apply a strikethrough, noting updates or corrections to text.

Unordered List: Create a bulleted list of information

• lorem
• ipsum
• dolor
• sit amet
• consectetur
• adipiscing elit

Ordered List: Create a numbered list of information.

1. lorem
2. ipsum
3. dolor
4. sit amet
5. consectetur
6. adipiscing elit

Blockquote: This feature is intended to add emphasis to a specific portion of text, However, UXi has a more sophisticated method. Use The custom UXi lead paragraph to increase font size of the text and add padding to add emphasis to a specific paragraph. If blockquote element is in use, custom CSS can be used to style.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Horizontal Line: Insert a horizontal break in the content. This line break will display with a default grey color and span the entire width of it's container. (Example HRs are used throughout this page)

Text Align Left / Center / Right: Adds basic text alignment to text. (for aligning images, see Formats section below)

Justify: Align both left and right edges of text to their container. This option could cause unwanted spacing between words.

Links

Link: Add a hyperlink to highlighted text. After the content is highlighted, the link details are added from the Insert/Edit Link window.

• If the link will take users to a different site, enter the full URL of the site and click ‘Open link in new tab/window’
• If the link will take users to a page on the UXi site, use the Link to existing content feature and search or browse through existing UXi pages.

Remember! Use only relative paths here.

Unlink: Remove an existing link from highlighted content.

Anchor Link: Add a link within a single page. The process for adding anchor links: First set up the anchor target (or where the user will end up when they click), then add the link (or the text that the user will click).

1. Place the cursor to the left of the link target. Do not highlight the word itself.
2. Click the Anchor icon in the toolbar.
3. name the anchor target. The link name should describe the content, as opposed to a generic name like ‘anchor_link’. Do not include spaces, instead use underscores or dashes.
4. Highlight the text that will display as the link itself
5. Click the Insert Link icon from the toolbar
6. Enter the exact name used for the anchor link name, preceded by the pound (#) symbol

Anchor links like the demo above will scroll the user from the link itself to the target. Anchor links on a different page will first load the page and scroll the user to the anchor link. To link a user to an anchor on a different page, use the relative path of the new page and the anchor link. For example, to link a user to the 'map' section of the 'Contact Us' page, use a link href like this : /contact-us/#map/

Advanced Text Styles

• Underline: Underline text
• Superscript: Decrease font size and set higher than the text's baseline. Used for symbols like copyright or trademark.
• Subscript :crease font size and set lower than the text's baseline, Used for things like the 2 in H₂O
• Text color: Select a text unique text color for specific portions of content.
• Text background color: Select a unique background color for specific portions of content.
• Paste as plain text / Paste as text: Turn this option on to paste in plain text mode. While on, contents will be pasted as plain text until you toggle this option off.
• Read More Tag: Customize the post excerpt when it displays on the archive , forcing users to click a Read More link to view the entire post.  UXi has more advanced features within the Blog Archive widget that allow the excerpt length and link text to be customized. *Because there is no excerpt view for a page, this option is available for posts only.  Use this only if a post excerpt needs to display shorter than normal for a single post.

Toolbar Toggle

Use this option to display the full list of WYSIWYG tools.

<p>Lorem ipsum dolor sit amet</p> 

<h2>Lorum Ipsum dolor sit amet</h2>