Logo
Logo

Element Studio Overview

Element Studio is intended for developers who wish to build elements for Breakdance.

Introduction to Element Studio

This guide provides an overview of the Element Studio interface, focusing on the creation and configuration of custom elements in a WordPress environment using Element Studio.

Element Studio is a built-in IDE for creating elements for Breakdance. It provides a visual interface for creating elements using HTML, CSS, and Twig.

Documentation for Element Studio is by example. Almost all of the elements included with Breakdance can be opened up in Element Studio so you can see how they were created. You can even make copies of these elements to add your custom modifications to them.

Element Studio generates PHP code. If you make a mistake or something goes wrong, it could be impossible to open Breakdance until the change that caused the problem is reverted. We advise you to use Git and commit regularly so it’s easy to revert any changes if something goes wrong.

Before beginning with Element Studio, please ensure you’ve completed the initial setup.

Navigating Element Studio

Opening Element Studio

Open Element Studio from the builder by navigating to the “Settings” menu and selecting “Element Studio”.

With Element Studio open, you’ll then be able to edit existing elements, macros, and presets in Element Studio or create new ones.

Working with Controls in Element Studio

Content and Design Controls

Element Studio allows for configuring both content and design aspects of elements. These controls are accessible via the content controls tab and the design controls tab, respectively.

Configuring Controls

  1. Add content controls to your element by creating sections and controls within those sections.
  2. For design controls, similar steps allow you to define aspects like background color and text styling, including hover effects.

Advanced Features

Dynamic CSS and HTML Integration

Element Studio supports dynamic integration with CSS and HTML using the Twig templating engine. This feature allows for real-time updates in element styling and behavior based on user interactions or predefined conditions.

Utilizing Twig for Dynamic Content

Twig syntax is used to integrate dynamic content and styles within the elements created. This integration extends to defining HTML tags and CSS properties that react to changes in content control settings.

You can learn more about Twig through their documentation: https://twig.symfony.com/doc/.

Conclusion

This overview introduces the basic operations within Element Studio, from element creation to advanced dynamic integrations. For more detailed operations and specific use cases, refer to further tutorials and documentation on Element Studio.