Is it possible to create a Custom Element that behaves like a column and allows you to add other elements

Is it possible to create a Custom Element that has similar functionality to a section that you can then add elements to?

I need to create a element that has custom markup and allows you to have 2 columns that content can be then added to. I envision the structure to work like this.

Sections -> 1 column -> my custom element { element | element1 element2 }

I understand explaining how to do this exactly is beyond the scope of support, but I am curious if it is possible within the framework of the theme without extensive customization. If possible if I could be pointed in the right direction as far as which existing Classes or Functions might be utilized for this, that would be extremely helpfull.

Cheers!

Hi Kelly,

Thanks for writing in! Yes, it will require custom development knowledge to implement your own custom element. If you’re interested, you can refer to our developer guide here (https://theme.co/apex/forum/t/cornerstone-content-builder-custom-elements/217).

Thanks!

Thanks for the reply,

I am familiar with the documentation you provided and how to make custom components. My issue is trying to get my component to utilize the row and column fictionality of the Pro Builder so that I can add elements to my custom component. I have things working and rendering fine on the builder side of things and can add elements to the two columns of my component. The issue is when rendering content when not in the builder view is it only renders elements placed in the first column, but not the second.

Is there anyway you can offer any hint as to what is missing in my component code?

definition.php

class Peekaboo_Content {

	public function ui() {
		return array(
      'title'       => __( 'Peek-a-boo Content', 'ev-peekaboo-content' )
    );
	}

	public function flags() {
		return array(
      'no_server_render' => true,
			'context' => '_layout',
			'dynamic_child' => true,
			'elements' => array(
				'floor' => 2,
				'ceil' => 2
			),
		);
	}

	public function peekaboo_layout() {
		return array(
			'_column_layout' => '2/2',
			'elements' => array(
				array(
					'_type' => 'column',
					'_active' => true,
					'size' => '1/2',
				),
				array(
					'_type' => 'column',
					'size' => '1/2',
				)
			)
		);
	}


	public function update_defaults( $defaults ) {
		return array_merge($defaults, $this->peekaboo_layout() );
	}

	// public function register_shortcode() {
  // 	return false;
  // }

	public function update_build_shortcode_atts( $atts ) {

		unset( $atts['title'] );

		return $atts;

	}

	public function update_build_shortcode_content( $content ) {

		return $content;
	}

}
<?php

/**
 * Shortcode handler
 */

$class = "ev-peekaboo-content ev-peekaboo-content--plugin" . $class;

?>

<div <?php cs_atts( array( 'id' => $id, 'class' => $class, 'style' => $style ), true ); ?>>

  <?php echo $content; ?>

</div>

Any assistance would be greatly appreciated as solving this will really make this theme useful and allow us to use it on my more projects.

Cheers

Hey Kelly,

Your business is important to us but regretfully, we are not capable of providing technical support for creating your own elements. The Support Staff focuses on built-in Theme and bundled plugins functionality. Consulting for this case would actually be custom development which is outside the scope of our support. Please see our Terms

The correct team to contact for this case is our Pinnacle team as they handle custom development requests. You can use our contact form for this.

Thank you for understanding.

No worries. Totally understand.

Cheers

You’re welcome, thank for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.