Using the content editor

Content editor

In various interaction types of BlueConic you can use an editor to edit content. The editor is available in two modes:

  1. The in-line editor
    This mode allows you to directly edit text and graphics within the context of a web-page. This means you can directly view the effect of other elements on the page, such as external stylesheets. It is available in the content and lightbox interaction types.editor.png
  2. The rich text editor
    This mode allows you to edit text and graphics in a separate window. It is available as fallback option, when in-line editing is not possible. It is also used for the e-mail interaction type.wysiwyg.png

If required it is also possible to switch to HTML-mode to directly view or modify the source code.

In this section

Formatting the text
Inserting, editing and replacing images
Inserting and editing hyperlinks
Insert profile property values
Switching edit modes
Viewing/modifying the HTML source code


Formatting the text

You can format the text in rich text editor using standard formatting such as bold, italic, bulleted lists, and so forth. Most of the formatting options in the toolbar are straightforward. If you want to know what a specific button does, hover the mouse over it and a tooltip will appear. For example:

hover.png

You can apply formatting to all text, hyperlinks, and profile properties appearing in the content.

 


Inserting, editing and replacing images

By clicking on the "insert image" button in the toolbar you will open a window where you can select an image or drag an image onto.image.png

After uploading an image you can edit this image.

 

General settings

The following general settings can be made in this window:

Name Name of the selected image file. To change the image click "replace".
Title Title of the image. This is the text that will appear in a tooltip if you hover over the image.
Alt Text The Alt Text is used as an alternative for the image in text oriented browsers.
Link If you add a link, the image becomes clickable and visitors will be forwarded to the entered URL. Here you can also configure profile properties that need to be set when visitors click this image.

 

Width and height

You can select the part of the image that needs to be displayed by changing the crop area in the image preview. The ratio of that crop area will be influenced by the selection you make in the width and height settings:

Width of the position The image will be scaled to fit the width of the position. The crop area can be chosen without limitations.
Dimensions of the position The image will be scaled to fit the dimensions of the position. The ratio of the crop area is fixed and you can only resize this area proportionally.
Dimensions of the previous image This option is only available if the image window is opened to edit an existing image. The image will be scaled to fit the dimensions of the original image. The ratio of the crop area is fixed and you can only resize this area proportionally.
Custom Here you can specify the exact size to which the image need to be scaled. The following situations can occur:
  • Both width and height are specified: The crop area has a fixed ratio and can only be resized proportionally.
  • Only width or height are specified: You can freely select a crop area. The image will be scaled to specified height or width.
  • No width and no height is specified: You can freely select a crop area. The image will not be scaled but displayed in the original resolution of the crop area.

 

 

You can also enter the edit image window by selecting an image in your content and then click the "edit" option below the image:


Inserting and editing hyperlinks

You can insert hyperlinks to the content that leads to the specified URL when a visitor clicks the link. You also have the option to edit existing hyperlinks in the content. You can do this by clicking on the "insert hyperlink" button in the toolbar after highlighting the text that you want to link, or clicking on "edit" when you have selected an existing hyperlink.

link.png

This will open up the edit hyperlink window:

The following settings can be configured:

Link Text The actual text that is shown on the screen and that can be clicked.
Target URL The URL that the visitor should be directed to after clicking.
Profile property rules You have the option to add values to one or more profile properties when a visitor clicks this specific link. Add a rule for every profile property value that you want to add.

 

In the same way you can also add or edit hyperlinks to images in your content. This can be done in the insert or edit image window.

 


Personalize content

Personalize a piece of content by adding profile property values inline with the text in the editor. To do so, follow the steps below.

  1. Click the Select Personalize button:

    personalize.png

    The Select Profile Property dialog box appears:

    property.png

  2. Select the profile property of which you want the value to be displayed.

  3. Click [Apply]. The profile property is added to the item you are working with as a placeholder item (The profile property between accolades) The value of the profile property will appear at the location of the placeholder.

 

 


Additional edit modes

If you are working in the inline view you can open an additional rich text editor window by clicking on the "rich text button". Changes in the rich text editing window are immediately reflected in the inline view.

rich-text.png

As an alternative to the rich text window you can also switch to the html-mode by clicking on the "HTML" button.

html.png


Inserting objects

You can also insert objects into the content via the "Insert object" menu:

object.png

Which objects are visible depends on which toolbar plugins have been installed in BlueConic.

 


Viewing/modifying the HTML source code

When you enter text in the editor, it appears as normal text, however it is actually formatted HTML code. By clicking the "HTML"-button in the toolbar of the editor, an extra window is opened containing the source code of content that you are editing. Here you can add text to the content and modify the HTML markup. Changes that you make in the source code will immediately be reflected in the editing window. You can move the HTML window to any location in your screen that is convenient to you.

Back to top