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)
- Default Property: The default property that users are proposed to set when a new instance of an element is added to the page. Example: "Images" property for a gallery.
- Default Style Preset: The default style preset an element should have when first added to the page. Click … to select an .OESkin file.
- Information for Users: Click … to open a dialog to enter practical information for users about your element (e.g. Name, Author, Description, URL, etc.)
- jQuery Version: Select which version of jQuery is required for proper functioning of the element
- License: Select the licensing for your element. If it is proprietary, choose the terms under which you would like to distribute the element. If it is adapted from someone else’s source code, be sure to give proper credit in the Information for Users and to use the appropriate license.
- Type of Element: PageEdit (visible on the page) or HiddenEdit (hidden from the page - i.e. does not have corresponding HTML code in the page's body - and configurable from the hidden elements bar above the editing pane)
- Unique Element Name: The element’s unique name, as generated when the element is first created.
- Version Number: Version number of element, indicates whether changes have been made, so that users can use the latest version
- Icon: Icon for the element. Click … to select an image file (size 16x16)
- Large Preview: Large preview of your element in action, to be shown to users. Click … to select an image file (size 300x200)
- Medium Preview: Medium preview of your element in action, to be shown to users. Click … to select an image file (size 160x100)
- Small Preview: Small preview of your element in action, to be shown to users. Click … to select an image file (size 90x90)
Add or modify properties (variables) that the user of your element can then modify in the Properties tab of the Elements Menu in openElement.
You will find macros that generate the code for each property you’ve created in:
'HTML' -> 'Properties' e.g: <oe:property:write name="Property1"/>