Drag and Drop Editor – Content Tab

The content tab includes five kinds of content including button, divider, image, social, text.

content tab page

Button

This editor is used to insert a button.

  1. Click to drag and drop this editor to the area you want to place.beefree button
  2. Click the text to modify button name and use the text font editor displaying below the button to modify text font.button font bar
  3. Click beefree delete button to delete the image, or click beefree copy button to duplicate the button.
  4. Use the button properties editor in the right side to set button properties.
Table 1 : Button Editor Description
button editor table
Table 2: General Properties Editor

Properties editor including “Action” and “Spacing” apply to all editors.

general properties editor

Divider

This editor is used to insert a divider.

  1. Click to drag and drop this editor to the area you want to place.
  2. Click beefree delete button to delete the image, or click beefree copy button to duplicate the button.
  3. Use the divider properties editor in the right side to set divider properties.

Table 3: Divider Editor Descriptiondivider editor

Image

This editor is used to insert an image file.

  1. Click the check box image tick icon in front of an image file to make the following operations.
  2. Click “Browse” button to enter file manager page.
    file manager
  3. Drag and drop the image button to the html page.
    image editor 1
    – Click file manager icon 1 to insert the selected image file.
    – Click file manager icon 2to preview image.
    – Click file manager icon 3 to delete the image.
  4. You can click add new file icon to upload a local file, and the file manager supports all types of files to be uploaded.
  5. You can click import from button to connect supported third party application to add image file.
    import image window
  6. You can input key words of file name in search bar file manager search bar in the upper side corner to search files.
  7. You can click crate folder in file manager beside the search bar to add a new file folder.
  8. You can click cancel icon in file manager to close file manager page and return to html design page.
The storage size of file manager is limited to 100GB.

In html design page, you can select the image to make the following operations.

  • Click beefree delete button to delete the image
  • Click beefree copy button to duplicate the image.
  • You can use the image properties editor at the left side column to modify your image.image editor

For Action and Spacing editor, please refer to Table 2: General Properties Editor.

Social

This editor is used to insert social media share button into the html design page.

  1. Drag and drop the social media share icon to the html page.
  2. Click to delete the image, or click  to duplicate the image.
  3. Use the social media share button properties editor in the right side to set social media share button properties.social media share editor button

For Action and Spacing editor, please refer to Table 2: General Properties Editor.

Text

This editor is used to insert text frame into the html design page.

  1. Drag and drop the text to the html page.
  2. Click beefree delete button to delete the image, or click beefree copy button to duplicate the image.
  3. You can use the quick edit menu to set text properties such as character font, size, color. You can also add links for the text content, or insert merge tag of RiMANGGIS properties into text.
    text quick editor button
  4. You can use the text frame properties editor in the right side to set text properties.text editorFor Action and Spacing editor, please refer to Table 2: General Properties Editor.
If you use the quick edit menu to set color of specific characters, the color will stay unchanged even if you change the whole text color.

 

Tagged:

Leave A Comment?