Erweiterte Option für benutzerdefinierte Elemente: Hierarchische benutzerdefinierte Elemente

Wenn diese Option auf „Verwendung hierarchischer benutzerdefinierter Elemente zulassen“ eingestellt ist, kann ein CET auf einem anderen CET basieren. Sie können die Einstellungen dann beim Bearbeiten eines CET im Reiter „Anpassen“ vornehmen.

Dadurch können Sie Einstellungen gruppieren und die änderbaren Optionen eingrenzen.

Grundsätzlich dasselbe Verhalten wie oben beschrieben, nur ein großer Unterschied:

Wichtig – dieses Verhalten unterscheidet sich von dem auf einer Seite:

Beim Wechsel zu einem anderen CET als Basis werden die Einstellungen dieses zugrundeliegenden CETs als neue Standardwerte übernommen – sie werden jedoch nicht kopiert, wenn die zugrundeliegenden Einstellungen später geändert werden. Beim Zurückwechseln zu „Kein benutzerdefiniertes Element verwendet“ werden die bestehenden Einstellungen NICHT geändert.

Sehen wir uns ein Beispiel mit unserem Schaltflächenelement an:

Angenommen, Sie benötigen eine feste Farbe für alle Schaltflächen:

Erstellen Sie eine CET-Schaltfläche „Feste Farbe“ mit der Farbe Rot und einem Schloss.

Erstellen Sie eine weitere CET-Schaltfläche „Klein“:

  • Wählen Sie „Feste Farbe“ als benutzerdefiniertes Element, um die Werte zu sperren (= „Feste Farbe“ wird zum übergeordneten Element).
  • Die Farbe Rot ist gesperrt und wird zum neuen Standard und kann nicht geändert werden.

  • Wählen Sie die Schaltflächengröße „Klein“ und sperren Sie sie.

Wenn Sie die CET-Schaltfläche „Klein“ auf einer Seite verwenden, sind sowohl Farbe als auch Größe gesperrt.

Wenn Sie die Farbe im CET-Button „Feste Farbe“ auf „Blau“ ändern, wird der CET-Button „Klein“ auf der Seite im Frontend blau. Der CET-Button „Klein“ hat die Farbeinstellung ROT nicht geändert.

Wichtig: Falls Sie die Hierarchie des CET ändern: Gesperrte Werte werden vom ersten übergeordneten Element aufwärts geprüft.
(„Feste Farbe“ -> „Klein“ -> ….)

Benutzerdefinierte Elemente – Erweiterte Option: Benutzerdefinierte Elemente für Unterelemente

Es ist auch möglich, CETs für Elemente zu verwenden, die ein weiteres Modal für Unterelemente öffnen, z. B. eine Schaltflächenzeile mit Schaltflächen (als Schaltflächenzeilenelemente).

Die Standardeinstellung lautet: „Alle Unterelemente verwenden dieselbe benutzerdefinierte Elementvorlage“.

Mit der Standardeinstellung können Sie beim Erstellen eines CETs für eine Schaltflächenzeile, beim Definieren und Sperren Ihrer Einstellungen für das Basiselement ein modales Popup für eine Schaltfläche öffnen und Ihre Einstellungen für eine Schaltfläche in der Schaltflächenzeile definieren und sperren.

Diese Einstellungen und gesperrten Werte dienen als Grundlage für alle Schaltflächen, die Sie später einer Schaltflächenzeile hinzufügen, wenn Sie dieses CET auf einer Seite verwenden.

Diese Designoption dient nur als Kurzbefehl. Im Backend wird ein neues CET für dieses Unterelement erstellt und verwaltet. So können Sie für jedes Unterelement individuelle CETs auswählen.

Bei Auswahl dieser Designoption sind hierarchische CETs für Elemente mit Unterelementen nicht möglich.

Unterpunkt-Vorlagen für benutzerdefinierte Elemente einzeln auswählen

Wenn diese Option aktiviert ist, können Sie für jedes im übergeordneten Element verwendete Unterelement ein separates Unterelement-CET verwenden. Wir erläutern dies anhand eines ALB-Schaltflächenzeilenelements.

Erstellen Sie das CET für die Schaltflächenzeile selbst

Die Schritte sind ähnlich wie bei einer Schaltfläche:

  • Klicken Sie auf die Registerkarte „Benutzerdefinierte Elemente“.
  • Klicken Sie auf „Neues benutzerdefiniertes Element hinzufügen“, um ein neues benutzerdefiniertes Element zu erstellen.
  • Ein modales Fenster öffnet sich:
    • Wählen Sie „Schaltflächenzeile“ aus.
    • Geben Sie einen Namen ein, z. B. „Benutzerdefinierte Schaltflächenzeile“.
    • Fügen Sie einen zusätzlichen Tooltip für diese Schaltflächenzeile hinzu.
    • Klicken Sie auf die Schaltfläche „Element erstellen“.
  • Das bekannte modale Popup-Fenster der Schaltflächenzeile öffnet sich mit den voreingestellten Standardeinstellungen und einigen weiteren Einstellungen:
    • Sie werden feststellen, dass die Einstellung „Bearbeitbare Vorlage erstellen“ auf „Basiselementvorlage“ eingestellt ist.
    • Eine Schaltfläche wurde bereits mit den Standardeinstellungen hinzugefügt
    • Ein hinzugefügtes Schlosssymbol sperrt die Option „Schaltflächen hinzufügen/bearbeiten“.

Wenn Sie eine Schaltflächenreihe mehrfach mit denselben Schaltflächen verwenden möchten,

  • fügen Sie Ihre Schaltflächen wie gewohnt über „Schaltflächenreihe – Anpassen: Benutzerdefinierte Schaltflächenreihe“ hinzu (siehe oben) und nehmen Sie alle gewünschten Einstellungen für die Schaltflächen vor.
  • Klicken Sie auf das Schlosssymbol unter „Schaltflächen hinzufügen/bearbeiten“, um die Option zu sperren.
  • Klicken Sie auf „Speichern“.
  • Im Reiter „Benutzerdefinierte Elemente“ sehen Sie nun die Schaltfläche „Benutzerdefinierte Schaltflächenreihe“.
  • Ziehen Sie diese Schaltfläche auf die Seite und klicken Sie zum Bearbeiten darauf.
    • Die Schaltflächen können nicht geändert, hinzugefügt oder entfernt werden – die Einstellungen von CET für die Schaltflächen werden verwendet.

Wenn Sie CET-Schaltflächen später zur Schaltflächenreihe hinzufügen möchten,

  • können Sie die Option „Schaltflächen hinzufügen/bearbeiten“ ignorieren, da alle von Ihnen vorgenommenen Einstellungen oder Schaltflächen ignoriert werden.
  • Nehmen Sie die gewünschten Einstellungen für alle anderen Optionen vor und sperren Sie sie nach Wunsch.
  • Klicken Sie auf „Speichern“.

Erstellen Sie nun eine Schaltfläche für Ihre Schaltflächenzeile, ein sogenanntes „Schaltflächenzeilenelement“.

  • Klicken Sie auf „Neues benutzerdefiniertes Element hinzufügen“, um ein neues benutzerdefiniertes Element zu erstellen.
  • Ein modales Fenster öffnet sich:
    • Wählen Sie „— Schaltflächenzeilenelement“ aus.
    • Geben Sie ihm einen Namen, z. B. „Schaltflächenzeilenelement1“.
    • Fügen Sie einen zusätzlichen Tooltip für dieses Schaltflächenzeilenelement hinzu.
    • Klicken Sie auf „Element erstellen“.

  • Das bekannte modale Popup „Schaltflächenzeile“ öffnet sich. Da wir nur das Schaltflächenelement bearbeiten können, werden nur zwei Optionen angezeigt:
    • „Bearbeitbare Vorlage erstellen“ ist über „Elementelementvorlage“ festgelegt und kann nicht geändert werden.
    • Eine Schaltfläche mit Standardeinstellungen ist bereits hinzugefügt und verfügbar.

    • Klicken Sie auf die Schaltfläche. Das modale Popup für die Schaltfläche öffnet sich mit Vorhängeschlössern für jede Option.
    • Nehmen Sie die gewünschten Änderungen vor.

  • Klicken Sie anschließend auf „Speichern“, um die Popups zu schließen.
  • Fügen Sie über „Neues benutzerdefiniertes Element hinzufügen“ beliebig viele Schaltflächenzeilenelemente hinzu. Befolgen Sie dazu die oben beschriebenen Schritte.
  • Ziehen Sie anschließend das Schaltflächenzeilen-CET auf die Seite und klicken Sie auf „Bearbeiten“.
  • Sie können nun beliebig viele Schaltflächenzeilenelemente hinzufügen.
  • Wählen Sie dazu im modalen Popup jedes Schaltflächenzeilenelements das CET aus der Dropdown-Liste im Tab „Anpassen“ aus.

Hier zeigt die Schaltflächenzeile CET das „Schaltflächenzeilenelement“ CET

Bitte beachten: Ein CET-Unterelement, wie etwa „Button Row Item“, wird nicht im Blockbereich „ALB Custom Elements“ angezeigt, ist jedoch im CET-Übergeordnetelement verfügbar.

For Developers

This is only a quick guide – for more details, please check already existing elements.

Mark an ALB element to support templates:

$this->config['base_element'] = 'yes';
$this->config['name_item'] = __( 'Button Row Item', 'avia_framework' );
$this->config['tooltip_item'] = __( 'A Button Row Button Element', 'avia_framework' );

Add the template selection tab:

				array(	
						'type'			=> 'template',
						'template_id'	=> 'element_template_selection_tab',
						'args'			=> array( 'sc' => $this )
					),

Mark options to support locking (not all options support locking yet – check in config-templatebuilderavia-template-builderphphtml-helper.class.php)

'lockable' => true,

Select multiple options to lock with:

'locked' => array( 'icon', 'font' ),

For a type = modal_group element add:

'editable_item' => true,

in editor_element():

$locked = array();
$attr = $params['args'];
$content =  $params['content'];
Avia_Element_Templates()->set_locked_attributes( $attr, $this, $this->config['shortcode'], $default, $locked, $content );

and use:

$this->class_by_arguments_lockable( 'icon_select, color, size, position', $attr, $locked )

$this->update_template_lockable

If template needs a reload to show locked options correctly add to (outer) container:

data-update_element_template='yes'

in shortcode_handler()

Avia_Element_Templates()->set_locked_attributes( $atts, $this, $shortcodename, $default );

If $content is locked:

$locked = array();
Avia_Element_Templates()->set_locked_attributes( $atts, $this, $shortcodename, $default, $locked, $content );