This section is a more detailed look at Category:Interface
The main menu, located by default above the editing pane, consists of four different tabs. The two last tabs (Selection and Element Style Zone) are only displayed if an element is selected on the page being edited is selected.
Default position of Main Menu in the general interface.
New project: Create a new openElement project
Open project: Open an openElement project
Close project: Close the current project
Import a project: (starting with version 1.29) Recover a project from an automatic backup on the web server
New Page: Create a new page for the project, opening it in the editing pane. This page will only be included in the project's Site Explorer once it is saved
Save All: Save all pages open in the page editor (editing pane)
Close All: Close all pages currently open in the page editor
Preferences: Opens the project preferences menu. This menu allows users to configure the global settings of the project, web publishing (FTP) settings, website languages, website maintenance, and more...
Resources: Opens the project's resources manager. From this menu, users can add images, videos, audio files, flash animations, and other documents to their project. These resources can then be selected using the appropriate elements.
Htaccess: Allows users to secure the website, or only certain pages of it. This feature is only accessible if a publishing/FTP connection has been entered.
FavIcon: Allows users to select a 'favicon', a small image/icon that serves as a symbol for the website, displaying alongside the URL in the browser address bar, title bar, tabs, bookmarks, and other shortcuts.
Recycle Bin: Opens the project's Recycle Bin. When a page or folder is deleted, it is sent to the bin. Items can then be permanently deleted if the user chooses, from the option within the Recycle Bin.
Publish to Web: Publishes the website to the web. Publishing a website is only possible if connection settings have been entered in Preferences.
Export to Folder: Exports the entire website to a local folder. All necessary files for the website to work (or uploaded to web server) will be copied to a folder on the computer, which will then be opened in a new Explorer/Finder window.
Save: Saves the current page
Convert to Layer: Converts the current page into a Layer page. (This option is only available for non-layer 'web' pages).
Refresh: Refreshes the current page. This reloads the page as well as the elements that it contains.
Zoom: Allows users to zoom in and out on the current page. Note: This is the browser's zoom and may cause layout issues compared to normal zoom (100%).
SEO Info: Opens the SEO menu, allowing users to enter information for search engine optimization (helps search engines' robots to find your site online). Note: This information is specific to each page of the website.
Styles: A list of available style zones for the current page. If a style zone is selected from the drop-down list, the "Element Style Zone" tab will automatically open for the selected zone.
Current Language: Allows users to select the language in which the current page is being edited. This allows one to easily pass from one version (e.g. English) of the page to another (e.g. French). The list of available languages can be found and customized under Preferences in the Project tab.
Server Scripts: Allows users to select the type of web page to generate when the site is published (PHP, ASP, etc.). Users can then execute a server script directly on the page. If none is selected, only plain html files will be generated.
Secure: Allows users to secure the page. If your page is already secure, the icon will change and allow you to either modify the secure settings or remove the security all together:
Preview: Launches a live preview of the current page in the selected web browser. Clicking the arrow allows users to choose a web browser, and clicking the icon alone launches the default browser. Note: Only web browsers installed on the computer appear in the list of browsers.
Publish to Web: Publishes (uploads) the website to the web. Publishing is only possible if hosting connection settings have been entered in Preferences.
This tab is only available if an element on the page (or the page itself) is selected (the name of the element will appear in the tab's title).
Multiple elements can be selected at the same time: at this point, the Alignment section will become active.
Copy: Copies the selected element to the clipboard. It can then be pasted into the same page, or any other open page.
Paste: Pastes the most recently copied item to the page.
Cut: Cuts the selected element from the page to the clipboard, and allows users to paste it to the same or a different page.
Lock: Locks the selected element in place. While an element is locked, no action can be performed on it; it cannot be deleted, modified, or moved. It can however be copied. The element can also be unlocked by clicking the same button.
Duplicate: Quick action performs a copy-and-paste of the selected element on the current page.
Delete: Quick action deletes the selected element or elements.
'Overlay Position' Section
Customize the overlay of elements in relation to one another (foreground, background, and everything in between). In the case of page layers, they will always be in the 'back' of the page.
Foreground: Moves the selected element to the foreground, in front of all the others.
Background: Moves the selected element to the background, behind all the others.
Forward: Moves the selected element forward in the overlay hierarchy, i.e. closer to the foreground.
Backward: Moves the selected element backward in the overlay hierarchy, i.e. closer to the background.
Only available if two or more elements are selected.
Align Left: Aligns all selected elements with the position of the left-most element.
Align Right: Aligns all selected elements with the position of the right-most element.
Align Top: Aligns all selected elements with the position of the top-most element.
Align Bottom: Aligns all selected elements with the position of the bottom-most element.
Align Vertical Center: Aligns all selected elements centrally on a vertical axis.
Align Horizontal Center: Aligns all selected elements centrally on a horizontal axis.
Spread Height-Wise: Vertically spreads out all selected elements so that the distance between each is equal.
Spread Width-Wise: Horizontally spreads out all selected elements so that the distance between each is equal.
'Element Style Zone' Tab
This tab is only available if an element on the page (or the page itself) is selected. Settings will appear specific to the selected style zone (the name of the zone will appear in the tab's title).
If a different style zone is selected from the list of available zones, the tab will automatically update accordingly.
'Current Element Zone' Section
- Style Preset: Displays the current style preset for the selected element and options for saving changes to the current style as a new or existing preset.
- Style Zone: Displays the element's currently active style zone, and allows users to select a different zone to which style changes will be applied. From this, users can change the styles of just one zone (i.e. text area, image, etc.) or a parent zone (i.e. main frame) and change the element's style globally. The cascading principle of CSS is respected, so it is possible to override styles.
- Element State: For each style zone, there is also the current state (i.e. normal, hover/mouseover, on click, active link). Switching between cursor states allows users to customize the style and behavior of an element as the user interacts with the page.
'Style Zone' and 'Element State' Drop-Down
This drop-down allows users to select the zone to which style changes will be applied. Users can apply individual styles to each zone and for different states.
The cascading principle of CSS is respected, so it is possible to override styles.
Style Zones: The list of available zones depends entirely on which element is selected. In the upper menu (drop-down), this list is restricted to the element's main style zones. There is an exhaustive list of zones in the 'Style' tab in the Elements and Styles Menu on the right of the editing pane. All elements contain the zone "main frame." This is the default zone of each element.
- Normal: Default state in which the page/element is displayed.
- Mouseover: Style is applied when the mouse hovers (passes over) the element in question.
- Mouse Click: Style is applied when the element is clicked with the mouse. The Mouse Click style remains active as long as the mouse button is pressed down.
- Active Link: Style is applied to an element/link when the visitor is on a specific page. Click through to Page Association to specify which page you want the element's style to be applied to.
'Text Styles' Section
This section contains the main actions available to modify the text styles (font, style, color, size, etc) of the element.
Note: If the element selected is the page itself, whichever text style is chosen will be applied to all the text on the page, except for elements with an "overriding" text style.
- (a) Font: Select or import a font. The list of available fonts consists of the fonts installed on the machine being used. There are several free web fonts included, and users may also import purchased or royalty-free .ttf fonts.
- (b) Size: Change the font size
- (c) Color: Select color of text
- (d) Emphasis: Apply Bold, Italics, or Underline formatting to text
- (e) Align: Align text right, center, left, or justified
- (f) List: Create a numbered (ordered) or bulleted (unordered) list
- (g) Indent: Increase or decrease indentation of text
- (h) More: Advanced formatting options, including Subscript, Superscript,
Strikethrough, and special characters
- (i) Restore Formatting: Clears all formatting from the selected text and restores defaults
If no style is explicitly defined, the visitor's browser defaults will dictate how the text is displayed.
This section allows users to add/modify/remove the background style of the selected style zone.
A: Add/modify/remove a background image
B: Add/modify/remove a background color
C: Specify how the image should repeat
Note: The background image and color can be combined
This section allows users to add/modify/remove the border style of the selected style zone.
To display a border, first select a border style from the available list, then choose a size.
The default color is black, but it can also be modified from this menu.
This section allows users to modify the spacing values for the selected style zone.
Spacing can be external (margin in css) or internal (padding in css).
The relationship between external and internal spacing, borders, and the element's content are detailed in this diagram:
Note: Depending on the selected style zone, internal and external spacing are not always accessible.
Edit CSS: Quick link to directly edit the element's css (expert mode). The tab for editing the css of the selected element's style zone will open in the Elements and Styles Menu on the right of the editing pane.
Restore Defaults: Removes all styles and formatting, and reverts the element or style zone to its default configuration.
Tools and Wizards: Contains useful tools and wizards for modifying elements' styles, including the Frame Editor. The Frame Editor allows users to quickly and easily add a frame to the selected element and customize it.