Speak to our experts today 0333 004 0333
Speak to one of our experts today
User Guides

EKM Tag: [ekm:element]

This tag is used to output the title of an editable area. The title is defined in the title field when editing an area.

  • Tag Information
  • Nesting This Tag
Basic Use
In its most basic use the tag can be implemented by simply including the element reference attribute.

[ekm:element]element_reference='welcome-area';[/ekm:element]
                                
Full Use
With the full use of the tag you can specify the HTML surrounding an editable area as well as default content. If the editable area is empty the surrounding HTML will be removed. This avoids empty boxes.

[ekm:element]
  show='yes';
  allowed_types='text,html';

  element_reference='welcome-area';
  edit_button='YES';
  output_start='<div id="welcome-area"><header>[element_name]</header>';
  output_end='</div>';
  element_name_default='Welcome To my EKM shop';
  output_default='Here is some welcome text about my EKM shop.';
[/ekm:element]
                                
Tag Attributes
Show/Hide
show='yes';

Specify whether, by default, the element should be set to show. If set to no the shop owner will need to turn on the element before it is visible to shop vistors.

Value
Description
yes
Tells the element to be visible by default for shop owners and visitors.
no
Tells the element to be visible to shop owners in edit mode, but hidden for vistors.
Allowed Element Types
allowed_types='text,html';

Specify the types of element interfaces that this element can be switched between.

Value
Description
all
This allows shop owners to select from whatever content type they want including any future additions.
html
This is the default interface and allows shop owners to have a full WYSIWYG editor.
text
This interface limits the element to only text input and basic formatting.
plaintext
This interface limits the element to only plaintext input. This prevents any formatting from being added to the text, such as making the text bold, italic, etc.
image
This interface limits the element to only images. This type works with image_width, image_height, image_recommended_width and image_recommended_height.
carousel
Outputs a carousel/slideshow of banner images. This interface limits the element to only images. This type works with image_width, image_height, image_recommended_width and image_recommended_height.
Image Width
image_width='100';

Sets the maximum width of an image when the element type is set to image.

Value
Description
{user defined}
Define the maximum width you wish images in this element to be. Enter 200 which will resize images to 200px wide.
Image Height
image_height='100';

Sets the maximum height of an image when the element type is set to image.

Value
Description
{user defined}
Define the maximum height you wish images in this element to be. Enter 200 which will resize images to 200px high.
Element Reference
element_reference='welcome-area';

Specify a unique editable area reference. This will act as the ID for a specify editable area. You may also use the same ID if you wish the editable area to appear twice on a page.

Value
Description
{user defined}
Enter a name that describes the editable area. For example logo, welcome-area, promo-area-1, etc
Refrain from using spaces, symbols or foreign characters.
Edit Buttons
edit_buttons='yes';

Select whether or not you wish edit buttons to display for this editable area. This can be useful if you have an editable area on a page more than once but you do not want multiple edit buttons.

Value
Description
yes
Edit buttons will appear
no
Edit buttons will not appear
Output Start
output_start='<div id="welcome-area"><header>[element_name]</header>';

Define any HTML you want to surround the editable area. You can also include the [element_name] attribute tag which allows you output the element name.

Value
Description
{user defined}
Define any HTML you want to output before the editable area.

These are the attribute tags you can use within this attribute.

Value
Description
[element_name]
Outputs the title of this editable area
Output End
output_end='</div>';

Define any closing HTML tags that were opened within the output_start attribute.

Value
Description
{user defined}
Define any closing HTML tags you opened in the output_start attribute.
Element Default Title
element_name_default='Welcome To my EKM shop';

When you insert an editable area into your code you can specify the content of this element without having to use the WYSIWYG editor. This is most commonly used in custom designs or templates to define content easily which will later be changed by the shop owner.

Here you can define the default name of the editable area.

Value
Description
{user defined}
Define the editable area title that will appear by default. This can be changed using the WYSIWYG editor later.
Output Default
output_default='Here is some welcome text about my EKM shop.';

When you insert an editable area into your code you can specify the content of this element without having to use the WYSIWYG editor. This is most commonly used in custom designs or templates to define content easily which will later be changed by the shop owner.

Here you can define the default contents of the editable area.

Value
Description
{user defined}
Define the editable area content that will appear by default. This can be changed using the WYSIWYG editor later.
(Product) Account Type
product='ekmpowershop, ekmsitebuilder';

Specify whether the element will output for EKM or ekmSitebuilder or both. This allows you to specify shop related elements if the account is EKM or generic site related content if the account is an ekmSitebuilder. By default the element will output for both.

Value
Description
ekmpowershop
The element will only output for EKM.
ekmsitebuilder
The element will only output for ekmSitebuilder.

The EKM system allows for some tags to be nested within other tags.

Nesting This Tag

When nesting this tag you must prefix the tag name with nested_ and ensure all singal quotes ' are replaced by double quotes "


[ekm:showdata]
    ...
    output_item='
        [ekm:nested_element]element_reference="welcome-area";[/ekm:nested_element]
    ';
    ...
[/ekm:showdata]