Element Editor

From Wiki openElement
(Difference between revisions)
Jump to: navigation, search
Line 33: Line 33:
Responsive Social Media Share Bar: [https://users.izisoftware.com/openElement/Store/Download/1/EGe823c8d0.dll Download Element (.dll)]
Responsive Social Media Share Bar: [https://users.izisoftware.com/openElement/Store/Download/1/EGe823c8d0.dll Download Element (.dll)]
==Element Info==

Revision as of 20:44, 5 February 2014

The Element Editor enables you to create or modify elements that are compatible with openElement.

The premise is simple: Create or adapt a script (HTML, JS, PHP, etc.) in the form of an element so that it may be easily used and configured by a user without writing code.


  • The editor generates a dll file that contains everything the element needs to function (code, images, etc). Place the dll file in the '\Common\Elements\' subfolder of an openElement project folder to add the element to the list of elements available.
  • The 'Element Info' tab is used to configure the information that users of the element will be presented with.
  • The 'Properties' tab allows you to configure variables that the user will be able to modify. You may then use these values in scripts or in the HTML to affect behavior.
  • The 'HTML' tab is for writing the actual HTML (as it will appear in the source of the published page and in the editor). The code may contain special tags - see below for details.
  • The 'Scripts' tab is for all the scripts (JS, PHP, css) that the element needs to use. Just like the 'HTML' tab, this section provides options to insert special code snippets, such as the code that obtains a property's value - see below for details.
  • There may be multiple instances of an element on the same page, so your scripts must be able to manage that. A basic model is available by going to 'Scripts' -> 'Design' -> 'Main loop for the samples of this element'; sometimes this code is added automatically on creation of a new script.
  • Scripts should not be enabled in editor mode to avoid possible conflicts with openElement.

To better understand the basics of elements and the Element Editor, you may download these examples:

Dynamic 100%-width background: Download Element (.dll)

Info Panel: Download Element (.dll)

Owl Responsive Carousel: Download Element (.dll)

Modal Pop-Up Window: Download Element (.dll)

Floating Container: Download Element (.dll)

Simple Responsive Left Menu: Download Element (.dll)

Responsive Social Media Share Bar: Download Element (.dll)

Element Info

Personal tools