How This Editor Works? (Click here to drag me away so you can test the functions)

Use these buttons to add a new element:

- Add a new Text element to your design.
- Add a new Hyperlink element to your design.
- Add a new Icon element to your design. We use Fontawesome icon. If you are familiar with it, you can enter the icon class directly.
- Add a new Background element to your design. You can style the background with color, gradient or image.
- Add a new Image element to your design.
- Add a new Line element to your design.
- Add a Custom Code to your design. It includes video, social network plugins, iframe, hidden element etc.
- Add a Button element. You can set the function of this button to submit the form, to close the widget, or to navigate to another website.
- Add a new Input field so that you can collect more data from the subscriber.

You'll see these editing icons in every element editor:

- Hide/unhide the element.
- Duplicate the element, so that you don't have to style a similar element all over again.
- Sort the stack order of the html elements. To bring an element in front of another element, sort its editor lower than the editor of the other element, vice versa.
- Delete the element.
- Lock several elements together so that you can move them at the same time. You can set up to 9 different lock groups.

How do I....

Know which editor is for which html element Simply mouseover the html element and its editor will also be highlighted, vice versa.
Open an element editor 1) Click on the element editor itself, or
2) Click on the html element.
Move an element in front of / behind another element To bring an element in front of another element, sort its editor lower than the editor of the other element, vice versa.
Move an element 1) Simply Drag and move the element, or
2) Change the Top Offset and Left Offset parameters in the element editor, or
3) Click on the element and mouseover it, then use the up/down/left/right buttons on the keyboard to move. (The mouse MUST be over the element all the time while moving.)
Group move elements Lock the elements together by clicking the button. Then move any of the elements using method 1 or 3 above. The other elements in the same group will move at the same time.

(Note: Changing the Top Offset and Left Offset parameters will only affect the position of that element, even if it is group locked.)
Cancel a group move Unlock the element by clicking the button before moving it.
Resize an element 1) Change the Width and Height parameters in the element editor, or
2) Resize the element by dragging the corners.
Group resize elements Not possible.
Adjust color transparency In the color palette, scroll the transparency bar.

Add New Element:
Base Dimensions

px

px
Opt-in Form Settings
Form Settings
   

ID & Class
(for form tag)
(for form tag)
Tip 1: Sort editor to move element to front / back.
Tip 2. Click and drag across locks to lock/unlock elements.
ScreenFill Background


Processing...
Initializing...
Undo Redo Confirm Changes
Instruction
  • You can undo or redo up to 50 steps.
  • When done, click 'Confirm Changes'
    to re-intiate the editor.
Updating Editor...