Please wait...

This guide is for Joomla extension and template developer, who want to add new elements for Azura builder or just override the core elements to implement a different style.

I this new version we rebuilt everything with the smartest and easiest way to extend it. You just need two steps to add new azura element.

1. Add new elements:

To create new elements for Azura builder you have to create a plugin for azura group ( with group="azura" entry in the extension tag ) and elements folder on that plugin.

The screenshot bellow is our example plugin ( which will not include in the download package - but is available for you developers )

And in the plugin main file should has onAzuraPrepareElementsArray function with $elements an array parameter was passed by reference.

You can add new element by add new item to the $elements array with key is your element type (contains only a-zA-Z0-9 and _ characters. Example: helloazura ). And new item value is an array contains its cofiguration values).

2. Element Parameters

This is a list of element parameters:

  1. name (string): name of the element
  2. desc (string): element description text
  3. category (string): this text will be used in filter tab on elements selector window. Default: content, structure, social. You can also add your new one.
  4. open_settings_on_create (bool): whether to show element settings window after element is added to page or nor.
  5. showStyleTab (bool): show Style settings tab or not
  6. showTypographyTab (bool): show Typography settings tab or not
  7. showAnimationTab (bool): show Animation settings tab or not
  8. icon (string): element icon url
  9. template_path (string): absolute path of template file which will use to output the element content. Note: if your plugin is azuraoption (modified our one ) so you don't need this option, Azura will automatically load helloazura.php file from elements folder.
  10. attrs (array): is an array contains arrays of element attributes.

When done your new element will appear in elements selector and eleemnt settings window like screenshots bellow:

3. Element Template

Is this so easy? Yes, it's incredible easy.

Now the left thing is create a .php file which will output the element content. In the code above we declare template_path value is helloazura.php file in azuraoptions/elements/ folder so just create it and implement code to output its content.

When the template file is load by Azura, $azura_attrs, $azura_content and $azura_element variables are passed to the file.

  1. $azura_attrs (array): is a key/value pair array for element settings ( from attrs array when you define the element ) with key is param_name value. In the template file we will extract it as element parameter variables.
  2. $azura_content (string): contains content value for the element. Which is value of field with "param_name"=>"content" and "iscontent"=>"yes"
  3. $azura_element (string): is element type (key in the $elements variable - helloazura for this element ).

Next, you will see these functions: self::buildStyleself::buildTypographyself::buildAnimation which are bult-in functions, all take $azura_attrs array as parameter.

  1. self::buildStyle (string): return element style which get options from Style settings tab. Ex: style="background-color: #fff;"
  2. self::buildTypography (string): return custom class which has css style from Typography tab and already added to page using azura script class.
  3. self::buildAnimation (array): the first value is trigger class and the second is html data arttributes for element animation.

That's all you need to create new element for Azura page builder. We think it's the simplest, easiest and fastest way.

Now, let see how our new element display on the front-end:

We are so glad if you enjoy making your own element and help us expand the extension. Thank you.

Download the example plugin at: Azura Option plugin

Share this: