Using The WYSIWYG Editor To Add Components

You use the WYSIWYG editor to create and add components to a visual experience.

The right-hand panel has four views:

• INSERT - from where you drag and drop components onto a page
• EDIT - to change the attributes for page components
• OVERVIEW - which shows a list of changes
• SETTINGS - where you can configure each experience by defining targeted segments, triggers, and primary goals

Select and drag and drop the component onto the page in the desired position.

Once you have added a component, you can edit its attributes to customize it. Which attributes you can edit depends on the component added. See Basic Components for more information.

Select a page element and then the small gear icon in the top-left hand corner of the page element border

Select either Hide or Replace as shown in the following example:

In this section, we will look at the three basic components that can be added to a page.

You can drop the block element anywhere onto a page. The block element is a container into which you add other elements such as images, text, or add-ons such as a stock message.

Importantly, any content added to the block will automatically resize depending on the device and screen dimensions.

Once added, you can define the block attributes including background, size, and margin. Let's take a look of each of these attributes:

• BACKGROUND

  • Color - select a solid background color or type in the hex color in the field provided

    

  • Image - you can upload an image as the block background and then adjust the image size, anchor, and postion offset

• SIZE - edit the block element's width and height by % or pixel

• MARGIN - edit the block element's margins

• PADDING - edit the block element's padding

• GRID - divide the block into sub-blocks, which you can then drop other elements or components into

Once added, you can define the text attributes, including formatting, what interactions occur onclick, size, margin, and padding. Let's take a look at each of these attributes:

• TEXT FORMATTING

  • Font size - select a pre-defined font size or enter your own
  • Font family - choose from a list of 10 commonly used fonts
  • Color - select a solid background color or type in the hex color in the field provided
  • Font styles - embolden and/or italicize text

• INTERACTION - define a URL to be opened when a visitor selects the text element

• SIZE - edit the text element's width and height by % or pixel

• MARGIN - edit the text element's margins

• PADDING - edit the text element's padding

Once added to a page, you can define the image properties, what interactions occur onclick, size, and margins. Let's take a look at each one of these attributes:

• IMAGE PROPERTIES

  • Source - change the uploaded image
  • Alternative text - specifies an alternate text for an image, if the image cannot be displayed

• INTERACTION - define a URL to be opened when a visitor selects the image. You can define whether all of the image or part of the image can be interacted with:

  • Link entire image - make the entire image a selectable link
  • Link image regions - make one or more image regions selectable links. You can position and re-size each region as desired and add new regions by selecting + Add clickable region

• SIZE - edit the image's width and height by % or pixel

• MARGIN - edit the image's margins

Qubit offers several add-ons that you can drag and drop onto a page. In this section, we will take a look at two of these, the toggle slider and countdown timer.

Qubit's toggle slider is a small panel that you can use to display images, text, or other page elements and add-ons. The panel is collapsed by default and displays when the visitor selects it. Once added, you can drag and drop other elements such as text, images, or other add-ons. You can also change the background color and size. Refer to the attributes for block components for details of what toggle slider attributes you can define.

• TOGGLE WIDTH - define how much of the slider, in pixels or as a percentage of its width, should display when selected

Qubit's Countdown timer component enables you to create urgency through fear of missing out (FOMO.)

• TIMER

  • Date - define the end date for the timer using the format dd/mm/yyyy
  • Time - define the end time for the timer date
  • Format - define the format of the date as shown to the visitor, examples:
    • Standard - 02 hours 15 minutes 25 seconds
    • Condensed - 02 hrs 15 minutes 25 secs
    • Extra condensed - 02 15 25
  • Show - define what parts of the countdown to display to the user, All, Days and Hours, Hours and Minutes, Days, Hours

• MESSAGING - define the text that displays before any after the timer

• STYLING - Refer to the attributes for text components for details of what text formatting you can apply to the countdown text