Nested Element

Nested element like element accordion or element tab is same as creating new element, but Need to add some options:

Lets create a sample element with nested element.

Example Shortcode:

[accordion title="Accordion" enable="true"]
     [accordion-item default="true"] <p>Contents</p> [/accordion-item]
     [accordion-item default="false"] <p>Contents</p> [/accordion-item]
[/accordion]

Register nested accordion-item first

// ...
$_upb_options = array(
    'element' => array(
        'name'  => esc_html__( 'Accordion Item', 'ultimate-page-builder' ),
        'icon'  => 'mdi mdi-playlist-plus',
        'child' => TRUE // Add Child true on child element.
    ),  
// ...

Register Main accordion.

// ...
 $contents = array(); // contents should array
// ...

If you want to add some default nested elements as content it should look like:

// ...
$contents = array(
    upb_elements()->generate_element( 'accordion-item', '<p>Demo Contents.</p>', array( 'active' => TRUE, 'title' => esc_html__( 'Accordion Item 1', 'ultimate-page-builder' ) ) ),
    upb_elements()->generate_element( 'accordion-item', '<p>Demo Contents.</p>', array( 'active' => FALSE, 'title' => esc_html__( 'Accordion Item 2', 'ultimate-page-builder' ) ) )
);
// ...

Adding Toolbar.

  • To Add New nested element
  • To go element Settings

Nested element Example

$_upb_options = array(

// ...

'tools' => array( 
    'contents' => array( 
        array( 
            'id' => 'add-new', 
            'title' => esc_html__( 'Add New', 'ultimate-page-builder' ), 
            'icon' => 'mdi mdi-shape-plus', 
            'action' => 'addNew', 
            'data' =>  upb_elements()->generate_element( 'accordion-item', '<p>Accordion Item</p>', array( 'title' => esc_html__( 'Accordion Item %s', 'ultimate-page-builder' ) ) ) 
            ), 

        array( 
            'id' => 'settings', 
            'title' => esc_html__( 'Settings', 'ultimate-page-builder' ), 
            'icon' => 'mdi mdi-settings', 
            'action' => 'showSettingsPanel' ) 
        )
    )

// ...  
),

Accordion Item %s. Where %s used to add incremental value on adding new nested element.

results matching ""

    No results matching ""