WYSIWYG Editor

WYSIWYG Editor
Manual
The Salvation Army Southern Territorial Headquarters
©2015 InterChange University
WYSIWYG Editor LO
Table of Contents
4: WYSIWYG Editor................................................................................................................................................................. 2
What is the WYSIWYG Editor? ........................................................................................................................................... 3
WYSIWYG is used in many LO Modules .................................................................................................................... 4
WYSIWYG Buttons.............................................................................................................................................................. 5
First Row Toolbar .......................................................................................................................................................... 5
Second Row Toolbar ..................................................................................................................................................... 6
Third Row Toolbar.................................................................................................................................................................. 7
Creating a Table................................................................................................................................................................... 8
Editing a Table ..................................................................................................................................................................... 9
Table Row Properties................................................................................................................................................... 9
Table Cell Properties .................................................................................................................................................. 10
Merge Table Cells ......................................................................................................................................................... 10
Split Merged Table Cells ............................................................................................................................................ 10
Inserting/Editing an Image .......................................................................................................................................... 11
The Image Library ....................................................................................................................................................... 12
Inserting/Editing Hyperlinks ...................................................................................................................................... 13
Create a LO Hyperlink ................................................................................................................................................ 13
Create a hyperlink to an external URL ................................................................................................................ 15
Edit a Hyperlink ............................................................................................................................................................ 17
Embedding Components................................................................................................................................................ 18
Creating Personalization ............................................................................................................................................... 20
Setting up Conditionals .................................................................................................................................................. 23
Basic Conditionals ............................................................................................................................................................ 23
Group Conditionals .......................................................................................................................................................... 26
Previewing Conditionals ................................................................................................................................................ 28
HTML and Plain Text ....................................................................................................................................................... 29
Job Aids ...................................................................................................................................................................................... 31
©2015 InterChange University
1
WYSIWYG Editor LO
4: WYSIWYG Editor
Overview:
In this course, you will learn how to use the WYSIWYG Editor so that you can create, edit
and manage HTML content in various modules in Luminate Online.
Assumptions:
-You have taken the prerequisite classes.
-You are familiar with Microsoft Programs and the HTML editing features in these programs.
-You have access to the Luminate Online Training Application.
Lesson Objectives:
After completion of this course, you will be able to:
 Explain what the WYSIWYG Editor is and how it’s used in different
modules in LO.
 Understand all of the buttons of the WYSIWYG Editor and their
respective functions.
 Create and edit tables within the editor.
 Manage images within the editor and within the Image Library.
 Create and edit hyperlinks to both internal and external content.
 Connect hyperlinks to interests.
 Embed components into your content.
 Set up personalization options.
 Define conditionalization options and create both basic and group
conditionals.
 Preview your content before publication.
 Access the HTML and Plain Text functions.
*Some of the images used in this manual are taken from the Blackbaud University curriculum*
©2015 InterChange University
2
WYSIWYG Editor LO
What is the WYSIWYG Editor?
-WYSIWYG stands for, “What You See Is What You Get” meaning that what you create and edit
within the context box is what the content will look like to your recipients.
-The WYSIWYG Editor is pictured above. It is the HTML content editor that is used throughout
Luminate Online.
-The WYSIWYG Editor is used to format text and to add and edit tables, images and links to text. It is
also used to personalize and conditionalize content.
-With the WYSIWYG Editor, one does not need to know html coding to create and edit information
in a program that uses HTML because the HTML ‘codes’ are inputted automatically on the back-end
when you click on the respective icons. For example, if you wanted to make a text bold, you could
do this via HTML coding by typing in: <b>This text is bold</b>. But let’s say that you didn’t know
HTML code. You could, instead, just click the bold button
in the WYSIWYG Editor and this
would bold your highlighted text. So the WYSIWYG editor makes it easier for users to add and
modify content, without requiring knowledge of HTML coding.
Supported Browsers
The WYSIWYG Editor is not fully supported on all browsers/versions of browsers. Concurrently,
the Admin side and the Constituent side of LO vary in regards to supported browsers. If your
WYSIWYG Editor does not look like what’s pictured above, or does not contain the functionality
described in this manual, check blackbaud.com for more information on LO’s supported
browsers. (Generally, Chrome, Internet Explorer and Firefox are supported).
©2015 InterChange University
3
WYSIWYG Editor LO
WYSIWYG is used in many LO Modules
The WYSIWYG Editor is used throughout Luminate Online, in many different modules. Wherever
HTML content needs to be created, edited or managed, you will find this editor. Therefore, learning
its functions will assist you with building the content you need to build in Luminate Online.
Word vs. Notepad
Many times, you may want to take content that you’ve already typed into a Microsoft Word
document and place it into different modules in LO. MS Word documents have additional html
coding on their back ends, which means that if you copy and paste a MS Word document into a
WYSIWYG Editor, you’ll get a bunch of code/symbols in your content. So, a best practice is to
copy and paste content from Word into Notepad (or another plain text program) and save it.
Then you can transfer it over to the WYSSIWYG Editor by copying and pasting it from this
program.
©2015 InterChange University
4
WYSIWYG Editor LO
WYSIWYG Buttons
1
2
3
The WYSIWYG Editor has three rows. The first and second rows contain icons that should be
familiar to you if you use Windows applications. The third row contains icons that are relevant to
creating, personalizing and conditionalizing content in Luminate Online; therefore, this manual will
focus solely on how to use these buttons of the WYSIWYG Editor.
A list of each of these icons and an explanation of what they do is provided below.
First Row Toolbar
©2015 InterChange University
5
WYSIWYG Editor LO
Second Row Toolbar
©2015 InterChange University
6
WYSIWYG Editor LO
Third Row Toolbar
Tool Icon
Name
Image Icon
Create Link Icon
Function
Used to specify the URL of an image file and its properties, and
insert the URL into your content. Also opens the Image Library
where you can select available images to load into your content
or add and upload an image to the library.
Used to create a hyperlink.
Break hyperlink
This ‘breaks’ or undoes any hyperlink that has been previously
created.
Anchor Icon
Used to enable you to place a marker into your content (It’s like
a hyperlink that takes you to another place within the same
content screen)
Used to add content from other LO modules (ie: Email,
Donations, etc. ) into your content.
Used to customize the content displayed to a specific viewer
(such as addressing someone by first name)
Used to display selected content to users based on their status
relative to a given group or feature (ie: Information shown may
differ from a donor to that which is shown to a non-donor)
Used to modify a pre-created conditional
Components Icon
Personalization
Icon
Conditionalization
Icon
Edit Conditional
Icon
Toggle
Conditional Icon
Insert Custom
Character Icon
Insert Table Icon
Table Row
Properties Icon
Table Cell
Properties Icon
Merge Table Cell
Icon
Split Table Cells
Icon
Insert Table Row
Above
Insert Table Row
Below
©2015 InterChange University
Used to switch between values in a conditional (ie: To switch
from one tab to another in a conditional box)
Used to insert symbols such as Greek letters, currency and
extend characters
Used to insert a table into your content. Displays the Table
properties box which allows you to create a table.
Used to set the alignment and other properties of a created table.
Used to set the alignment of cells within a created table.
Used to merge selected cells within a table.
Used to divide a selected cell into another row or column.
Used to insert a new row about the current or selected row.
Used to insert a new row below the current or selected row.
7
WYSIWYG Editor LO
Insert Table
Column Before
Icon
Insert Table
Column After Icon
Delete Table Row
Icon
Delete Table
Column Icon
Used to insert a column before the current or selected column.
Used to insert a new column to the right of the current or
selected column.
Used to delete the selected table rows.
Used to delete the selected columns.
As you can see, the buttons in the third row of the WYSIWYG editor contain functions that allow you
to create and modify tables, insert images and manage the images that are in your Image Library
and create and manage hyperlinks. Icons in this third row of the WYSIWYG editor also allow you to
embed content from Luminate Online modules into your content for purposes of personalization
and customization. Let’s take a look at each function in more detail so that you know how to use
this part of the editor when creating and editing your content in Luminate Online.
Creating a Table
To create a table using the WYSIWYG editor, complete the following:
1. Click the Insert Table Icon
. The Insert/Modify Table box will appear. Notice that there
are two tabs here: General and Advanced. Here is where you can set up your table by
choosing how many columns and rows you’d like it to have. You can also set up its size,
alignment and create a border for your table. You can choose a color for your border or the
background of your table. Once you’ve set up all of your specifications, click Insert.
©2015 InterChange University
8
WYSIWYG Editor LO
Editing a Table
Once you create a table, you’ll notice the table editing functions light up on the WYSIWYG toolbar.
Each of these icons corresponds to a different editing feature for your table. (For an overview of
each icon and what it does, see the table on pages 6-7). Let’s take a look at the more
Table Row Properties
The Table Row Properties Icon opens up a box that also has both a General and an Advanced tab.
Under these tabs, you can choose from various ways to modify the rows within your table. For
example, you can set alignment, height and even the background color of rows in your tables. Pay
special attention to the drop-down menu at the lower left-hand corner of this box. From this dropdown, you choose which row you’d like to modify. Click Update to save the changes to your row(s).
©2015 InterChange University
9
WYSIWYG Editor LO
Table Cell Properties
The Table Cell Properties Icon opens up a box that contains options for modifying the cells (or the
blocks) within your table. This box also has a General and Advanced tab and contains a drop-down
menu that allows you to choose which cells you’d like to modify.
Merge Table Cells
If there are cells within your table that need to be merged together, you can do this by clicking on
the Merge Table Cells Icon. A box will appear asking you which columns and rows you’d like to
merge. When you’re done entering the required information, click Update.
Split Merged Table Cells
The Split Table Cells Icon is designed to be used when you need to split a cell into another row or
column. As of this writing, this button was not functioning.
©2015 InterChange University
10
WYSIWYG Editor LO
Inserting/Editing an Image
a
b
c
d
e
1. To insert an image, first click on the Image Icon. The Insert/Edit Image box will appear.
From this box, you can:
a. Type in an Image URL (if you have one)
b. Browse the Image Library and choose and image that lives in the library (see Image
Library for more information)
c. Set up the image’s alignment
d. Set the size of your image
e. Place some extra space around your image (ie: padding)
2. Click Insert when you’re ready to place the image into your content.
©2015 InterChange University
11
WYSIWYG Editor LO
3. To edit an image, first click on the image you’d like to edit. Then click the Image Icon
button. The box pictured above will appear and you can make changes as needed.
Clicking the Update button will save your changes.
The Image Library
Images in
the library
Most of the time, you will want to either choose an image that is in the Image Library or upload an
image to this library to use in your content. When you click on the Browse Image Library button,
the box pictured above will appear. From here, you can choose an image that already exists in the
library, or you can add an image to the library by clicking on Add New Image.
©2015 InterChange University
12
WYSIWYG Editor LO
Inserting/Editing Hyperlinks
In Luminate Online, you can create hyperlinks that link to other areas in Luminate Online (ie: a
donation form or a survey). You can also create hyperlinks that link to external urls (ie: another
website). The cool thing about the hyperlinks you create in LO is that you can tie Interests to the
links. This means that when a user clicks on a certain hyperlink, the associated interest will then be
placed on his/her constituent record. Here is how you go about creating hyperlinks in your content
with the WYSIWYG editor:
Create a LO Hyperlink
1. First, highlight the text that you’d like to change into a hyperlink. Then click on the Insert
Hyperlink icon.
2. The Insert Link box will then appear. Click Browse Links to find the part of LO which you
need this text to link to.
©2015 InterChange University
13
WYSIWYG Editor LO
3. The Choose Link box will then appear. From here, you can pick which Luminate Online part
you’d like to connect your hyperlink to. Notice that there are four columns in this box: Link
Type (which are categories that house relevant information), Name (which shows you the
names of each piece of information in that particular category), ID number and Description.
Click on the Name of the LO part you’d like to connect.
a
b
4. Now you’ll see additional options appear. From this box, you can:
a. Choose which page to connect the hyperlink to (if applicable)
b. Connect this hyperlink to an Interest. *Make sure, if you’re connecting a hyperlink to an
interest, that you check the automatic log-in box.
©2015 InterChange University
14
WYSIWYG Editor LO
5.
Click Select (at the bottom of the screen) once you’ve set these link options up.
6. Now you’ll see that your text has become a real hyperlink! Because you’ve created a
hyperlink, you will now see the “Break Hyperlink” Icon light up. Clicking this will undo your
hyperlink.
Create a hyperlink to an external URL
1. First, highlight the text that you’d like to change into a hyperlink. Then click on the Insert
Hyperlink icon.
©2015 InterChange University
15
WYSIWYG Editor LO
2. The Insert Link box will appear. Type the external URL address into the Link URL field. Then
click Insert.
©2015 InterChange University
16
WYSIWYG Editor LO
Edit a Hyperlink
This editing process is the same for both internal and external URL’s.
1. To edit a previously-established hyperlink, highlight the hyperlinked text. Click the Insert
Hyperlink icon.
2. The Insert Link box will open up. From this box, you can enter in another link URL.
External URLs ≠ Interests
In Luminate Online, you can use internal hyperlinks only to populate an interest onto a
constituent’s record. External hyperlinks cannot populate interests onto constituent records.
Therefore, when you choose to connect text in a WYSIWYG box to an external hyperlink, you will
not see the “Additional options” appear, as you would when creating an internal hyperlink.
©2015 InterChange University
17
WYSIWYG Editor LO
Embedding Components
In Luminate Online, components are the content that is contained in LO modules. Surveys,
PageBuilder pages and Social Sharing buttons are examples of components. To embed a component,
complete the following steps:
1. Place your cursor in the WYSIWYG Editor where you’d like to place a component. Then,
click the Components Icon.
Available Components
Some components are only available from the WYSIWYG Editor in email; others are only available
when using WYSIWYG in a webpage. Certain components have several additional configuration
options that are not shown in this manual.
©2015 InterChange University
18
WYSIWYG Editor LO
2. The Insert Component box will then appear. From this box, you must first choose the
category of component (From the Component Type column) to display the components
within. Then you can click on the component you want from the Component column.
3. If the component needs further configuration, the Configure Component box will appear.
When you’ve selected the component’s criteria and are ready to insert it into your content,
click Insert.
©2015 InterChange University
19
WYSIWYG Editor LO
4. You will now see your component appear in the WYSIWYG Editor box.
Creating Personalization
Personalization is the process of making something a constituent receives from you (like an email
message) personalized. Some examples of personalization include addressing an eNewsletter to a
constituent using the constituent’s first name, acknowledging the amount of a recent donation or
reminding the constituent of an event for which they’ve registered.
Personalization Back-Ups
If you create something that includes a personalization option (such as including a constituent’s
first name in an email message) and LO does not have that information in its database, you will be
given the option to set a back-up option for the missing field (for example, “Friend.”) That way,
you can avoid awkward empty spaces in your content if LO doesn’t have that particular piece of
information in its database.
©2015 InterChange University
20
WYSIWYG Editor LO
1. To add personalization to your content, put your cursor in the place where you’d like
personalized information to go. Then click the Personalization Icon.
2. The Insert Personalization box will then appear. From the Groups column, you can choose
the category of personalization options which will then appear in the Type column. A best
practice is to also fill out the field, “Text to display when empty” to avoid a black space in your
content if LO doesn’t have that particular piece of information. Click the type of
personalization you need, then click Insert.
©2015 InterChange University
21
WYSIWYG Editor LO
3. You will now see your content with the personalization you’ve created. If you have a lot of
personalizations within your content, the details of the personalization boxes can be
distracting. To view these personalizations in their simple format, click the Toggle button.
4. The Personalizations will now appear in their most basic form. To see them in detailed
form, just click the Toggle button again.
Personalization uses info in Constituent360
Whatever information is in Constituent360 is what will be displayed when you personalize
content. So, for example, if a constituent used only lowercase letters when creating their
constituent record and that’s the data in Constituent360, a name with all lowercase letters will
appear in their content if you use name personalization.
©2015 InterChange University
22
WYSIWYG Editor LO
Setting up Conditionals
Conditionalization is the process of varying the content that a constituent sees. Conditionalization
is created from ‘conditionals’. Conditionals are created based on constituents’ interests on their
profiles and the groups to which they belong in Luminate Online. An example of conditionalization
is displaying one message to constituents who’ve donated a small amount to The Salvation Army
and displaying a different message to constituents who’ve donated a larger amount.
Basic Conditionals
1. To set up a basic conditional, click on the Conditionals Icon.
©2015 InterChange University
23
WYSIWYG Editor LO
2. A box will appear entitled, “Insert Conditional.” You will choose your specific, pre-defined
conditionals from their respective groups. For example, when you click on the group
“Donations” you will see two options: donor and not a donor. Choosing this conditional will
allow you to vary content that donors and non-donors see. Click on the conditional you’d
like for your content.
3. You will then see a conditional box appear in your content. (We’ll continue to use the
example of donor vs. not a donor.) Notice that once you establish a conditional, you will see
the other conditional buttons on the WYSIWYG Editor light up. Also notice that your
conditional box has several tabs.
©2015 InterChange University
24
WYSIWYG Editor LO
4. In the conditional box, you can create and vary the content you’d like your constituents to
see by creating different content under the corresponding tabs. Use the Edit
conditionals/Toggle through conditionals buttons to set up content for each tab.
Notice in the pictures above, we’ve established three different conditionals: We’ve thanked
our Donors for their gifts, ask non-donors for gifts and, if the donation status of a
constituent is unknown, ask them if they’ve heard about the work our organization has
done this past year.
5. To preview the varying content your recipients will see, click the Preview button. (More
information can be found about this process in the Previewing section of this manual).
©2015 InterChange University
25
WYSIWYG Editor LO
Group Conditionals
1. To set up a group conditional (meaning you will vary the content that constituents in
different groups see), click on the Conditionals Icon.
2. When the Insert conditional box appears, choose ‘Groups’ from the Group column and then
click in a group or not in a group.
3. You will now see that you have the option to configure the conditional. Find the group
you’re looking for and click Select (*Do not click on the group name).
©2015 InterChange University
26
WYSIWYG Editor LO
4. Once you see your group’s name populated in the ‘Selected Group’ field, click Insert.
5. Now, you will see a Group conditionals box in your WYSIWYG Editor box. You can vary the
content by toggling through the different tabs and creating different content under each tab.
Use the Edit conditionals/Toggle through conditionals buttons to set up content for
each tab.
6. To preview the varying content your recipients will see, click the Preview button.
©2015 InterChange University
27
WYSIWYG Editor LO
Reminder Box
7.
8.
Remember to always preview your work before you send it out to your constituents!
Previewing Conditionals
Once you’ve set up conditionals, you will be able to preview the varying content that different
constituents will see.
1. Once you click on the preview button, you will then be able to choose from which
perspective to view your content. As you can see from the picture above, you can view your
content from the perspective of individual constituents or from defined groups.
©2015 InterChange University
28
WYSIWYG Editor LO
Personalization vs. Conditionalization
2.
Personalization is the process by which you personalize content to a constituent, such as
adding his/her name to an email message. Conditionalization is the process by which you vary
the content a constituent sees, based on his/her defined interests and group membership.
Personalization is actually a type of conditionalization.
HTML and Plain Text
Some people like to create/edit content by coding it in html or plain text rather than using the
WYSIWYG Editor. To do this, complete the following steps:
1. To view content in html code, just click the HTML button on the WYSIWYG Editor.
2. You can code and edit html in the HTML Source Editor box. Click Update to save your
changes.
©2015 InterChange University
29
WYSIWYG Editor LO
1. To use the Plain Text Editor, just click the “Use Plain Text Editor” hyperlink in the top
right-hand corner of the WYSIWYG Editor.
2. You can modify and edit content in the Plain Text Editor just like you can in the WYSIWYG
Editor. You can also Preview your content here before you publish it.
©2015 InterChange University
30
WYSIWYG Editor LO
Job Aids
How to Create a Table
1. Click the Insert Table Icon.
2. The Insert/Modify Table box will appear. Notice that there are two tabs here: General and
Advanced. Toggle between these two tabs to set up different aspects of your table.
3. Once you’ve set up all of your specifications, click Insert.
How to Edit a Table
1. Once you create a table, you’ll notice the table editing functions light up on the WYSIWYG
toolbar
2. To edit Table Row Properties or Table Cell Properties, click on the respective icon.
3. These tables have both General and Advanced tabs. Toggle between the tabs to edit
different aspects of your table.
4. Click Update when you’re ready to edit your table.
How to Merge Table Cells
1. Click on the Merge Table Cells icon.
2. A box will then appear asking you which columns and rows you’d like to merge.
3. When you’re done entered the required information, click Update.
How to Insert an Image
1. To insert an image, first click on the Image Icon. The Insert/Edit Image box will appear.
From this box, you can:
a. Type in an Image URL (if you have one)
b. Browse the Image Library and choose and image that lives in the library (see Image
Library for more information)
c. Set up the image’s alignment
d. Set the size of your image
e. Place some extra space around your image (ie: padding)
2. Click Insert when you’re ready to place the image into your content.
©2015 InterChange University
31
WYSIWYG Editor LO
How to Edit an Image
1. To edit an image, first click on the image you’d like to edit. Then click the Image Icon
button.
2. The Configure Image box will appear and you can make changes as needed.
3. Clicking the Update button will save your changes.
How to Create a LO Hyperlink
1. First, highlight the text that you’d like to change into a hyperlink. Then click on the
Insert Hyperlink icon.
2. The Insert Link box will then appear. Click Browse Links to find the part of LO which
you need this text to link to.
3. The Choose Link box will then appear. From here, you can pick which Luminate Online
part you’d like to connect your hyperlink to. Notice that there are four columns in this
box: Link Type (which are categories that house relevant information), Name (which
shows you the names of each piece of information in that particular category), ID
number and Description. Click on the Name of the LO part you’d like to connect.
4. Now you’ll see additional options appear. From this box, you can:
a. Choose which page to connect the hyperlink to (if applicable)
b. Connect this hyperlink to an Interest
5. Click Select (at the bottom of the screen) once you’ve set these link options up.
6. Now you’ll see that your text has become a real hyperlink! Because you’ve created a
hyperlink, you will now see the “Break Hyperlink” Icon light up. Clicking this will undo
your hyperlink.
How to create a hyperlink to an external URL
1. First, highlight the text that you’d like to change into a hyperlink. Then click on the Insert
Hyperlink icon.
2. The Insert Link box will appear. Type the external URL address into the Link URL field. Then
click Insert.
©2015 InterChange University
32
WYSIWYG Editor LO
How to edit a hyperlink
1. To edit a previously-established hyperlink, highlight the hyperlinked text. Click the
Insert Hyperlink icon.
2. The Insert Link box will open up. From this box, you can enter in another link URL.
How to embed Components
1. Place your cursor in the WYSIWYG Editor where you’d like to place a component. Then,
click the Components Icon.
2. The Insert Component box will then appear. From this box, you must first choose the
category of component (From the Component Type column) to display the components
within. Then you can click on the component you want from the Component column.
3. If the component needs further configuration, the Configure Component box will
appear. When you’ve selected the component’s criteria and are ready to insert it into
your content, click Insert.
4. You will now see your component appear in the WYSIWYG Editor box.
How to add Personalization
1. To add personalization to your content, put your cursor in the place where you’d like
personalized information to go. Then click the Personalization Icon.
2. The Insert Personalization box will then appear. From the Groups column, you can
choose the category of personalization options which will then appear in the Type
column. A best practice is to also fill out the field, “Text to display when empty” to avoid a
black space in your content if LO doesn’t have that particular piece of information. Click
the type of personalization you need, then click Insert.
3. You will now see your content with the personalization you’ve created. If you have a lot
of personalizations within your content, the details of the personalization boxes can be
distracting. To view these personalizations in their simple format, click the Toggle
button.
4. The Personalizations will now appear in their most basic form. To see them in detailed
form, just click the Toggle button again.
©2015 InterChange University
33
WYSIWYG Editor LO
How to set up Basic Conditionals
1. To set up a basic conditional, click on the Conditionals Icon.
2. A box will appear entitled, “Insert Conditional.” You will choose your specific, predefined conditionals from their respective groups. Click on the conditional you’d like for
your content.
3. You will then see a conditional box appear in your content. Notice that once you
establish a conditional, the other conditional buttons on the WYSIWYG Editor light up.
Also notice that your conditional box has several tabs.
4. In the conditional box, you can create and vary the content you’d like your constituents
to see by creating different content under the corresponding tabs. Use the Edit
conditionals button to set up content for each tab. To preview the varying content
your recipients will see, click the Preview button.
How to set up Group Conditionals
1. To set up a group conditional (meaning you will vary the content that constituent in
different groups see), click on the Conditionals Icon.
2. When the Insert conditional box appears, choose ‘Groups’ from the Group column and
then click in a group or not in a group.
3. You will now that you have the option to configure the conditional. Find the group
you’re looking for and click Select (*do not click on the group name).
4. Once you see your group’s name populated in the ‘Selected Group’ field, click Insert.
5. Now, you will see a Group conditionals box in your WYSIWYG Editor box. You can vary
the content by clicking on the appropriate tabs within the Group conditionals box and
creating different content under each tab. Use the Edit conditionals button to set up
content for each tab.
6. To preview the varying content your recipients will see, click the Preview button.
How to Preview Conditionals
1. Once you click on the preview button, you will be able to choose which constituent view
to preview.
2. Close the Preview window to return to the WYSIWYG Editor if you need to edit content.
©2015 InterChange University
34
WYSIWYG Editor LO
View HTML/Plain Text
1. To view content in html code, just click the HTML button on the WYSIWYG Editor.
2. You can code and edit html in the HTML Source Editor box. Click Update to save your
changes.
3. To use the Plain Text Editor, just click the “Use Plain Text Editor” in the top right-hand
corner of the WYSIWYG Editor.
4. You can modify and edit content in the Plain Text Editor just like you can in the
WYSIWYG Editor. You can also Preview your content here before you publish it.
©2015 InterChange University
35