You use the WYSIWYG editor to create and add components to a visual experience.
The right-hand panel has four views:
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:
Color - select a solid background color or type in the hex color in the field provided
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
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:
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
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:
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:
SIZE - edit the image's width and height by % or pixel
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.
Qubit's Countdown timer component enables you to create urgency through fear of missing out (FOMO.)
MESSAGING - define the text that displays before any after the timer