Elementor ist mein absoluter Liebling, wenn es um Page-Builder für WordPress geht. Nicht nur die Benutzeroberfläche überzeugt, sondern auch der Umfang der Funktionen. Vor allem als Entwickler fühle ich mich hier richtig wohl.

Auch wenn Elementor wirklich sehr viele eigene Widgets mitliefert und grundsätzlich sehr flexibel ist, arbeitet man manchmal an Projekten, die noch individuelleres Design benötigen. Oder wir möchten unseren Kunden die Möglichkeit geben, Inhalte nachträglich sehr einfach bearbeiten zu können. In solchen Fällen ist die beste Lösung die Entwicklung eines eigenen Elementor Widgets.

Wie erstellt man ein Elementor Widget?

Grundsätzlich unterscheidet sich die Programmierung eines Elementor Widgets nur wenig von der eines üblichen WordPress Widgets. Elementor selbst bietet Entwicklern eine sehr gute Dokumentation, wenn es um die Vorgehensweise geht. So sehen wir, dass die Klasse `Widget_Base` extended wird. Aus dieser Klasse können wir die unterschiedlichsten Methoden verwenden.

Die Entwicklung eines voll funktionsfähigen Elementor Widgets könnte zum Beispiel so aussehen:

<?php
/**
 * Elementor oEmbed Widget.
 *
 * Elementor widget that inserts an embbedable content into the page, from any given URL.
 *
 * @since 1.0.0
 */
class Elementor_oEmbed_Widget extends \Elementor\Widget_Base {

	/**
	 * Get widget name.
	 *
	 * Retrieve oEmbed widget name.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return 'oembed';
	}

	/**
	 * Get widget title.
	 *
	 * Retrieve oEmbed widget title.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return __( 'oEmbed', 'plugin-name' );
	}

	/**
	 * Get widget icon.
	 *
	 * Retrieve oEmbed widget icon.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return 'fa fa-code';
	}

	/**
	 * Get widget categories.
	 *
	 * Retrieve the list of categories the oEmbed widget belongs to.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return array Widget categories.
	 */
	public function get_categories() {
		return [ 'general' ];
	}

	/**
	 * Register oEmbed widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @since 1.0.0
	 * @access protected
	 */
	protected function _register_controls() {

		$this->start_controls_section(
			'content_section',
			[
				'label' => __( 'Content', 'plugin-name' ),
				'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'url',
			[
				'label' => __( 'URL to embed', 'plugin-name' ),
				'type' => \Elementor\Controls_Manager::TEXT,
				'input_type' => 'url',
				'placeholder' => __( 'https://your-link.com', 'plugin-name' ),
			]
		);

		$this->end_controls_section();

	}

	/**
	 * Render oEmbed widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @since 1.0.0
	 * @access protected
	 */
	protected function render() {

		$settings = $this->get_settings_for_display();

		$html = wp_oembed_get( $settings['url'] );

		echo '<div class="oembed-elementor-widget">';

		echo ( $html ) ? $html : $settings['url'];

		echo '</div>';

	}

}

Ziemlich viel Code, was? Und dabei geht es hier um ein sehr simples Widget, welches Elementor uns als Beispiel zeigen möchte.

Doch wie sieht das ohne Programmierkenntnisse aus? Kann man auch dann eigene Elementor Widgets erstellen? Ja. Demnächst werde ich ein ausführliches Tutorial erstellen, wie Du als Entwickler starke Elementor Widgets programmieren kannst. In diesem Beitrag konzentrieren wir uns jedoch erstmal auf etwas anderes.

Eigene Elementor Widgets erstellen ohne Programmierkenntnisse

Richtig gelesen. Auch ohne Programmierkenntnisse kann man eigene, vollwertige Elementor Widgets erstellen. Dafür haben wir für euch den Elementor Widget Creator entwickelt. Mit diesem Tool könnt ihr euch in wenigen Minuten individuelle und dynamische Widgets erstellen.

Wie funktioniert das?

Das ist im Grunde recht einfach. Du musst das Tool mit entsprechenden Informationen füttern wie z.B. den Namen des Widgets, die Kategorie und das Icon.

Bildschirmfoto 2021 11 23 um 13.11.53 scaled

Anschließend kannst du für das Widget verschiedene Felder anlegen. Das sind die Bereiche, die du später in den Widget-Einstellungen individuell bearbeiten kannst:

Bildschirmfoto 2021 11 23 um 13.14.02 scaled

Für jedes Feld, welches du anlegst, generiert dir das Tool eine Variable, die du später im HTML-Bereich des Codes einsetzen kannst. So bist du sehr flexibel, wenn es darum geht, wo die dynamischen Daten angezeigt werden sollen.

Bildschirmfoto 2021 11 23 um 13.15.34 scaled

Außerdem hast du noch die Möglichkeit, entsprechend CSS und Javascript Code einzubinden.

Warum ohne Programmierkenntnisse?! Ich sehe doch Code!

Ganz einfach. Als Nicht-Programmierer kannst du wie folgt vorgehen: Du suchst dir ein schickes Design aus codepen.io heraus. Dort wird HTML, CSS und JavaScript Code immer mitgeliefert. Das einzige was du jetzt tun musst, ist den Code in die richtigen Bereiche des Elementor Widget Creators einzufügen und den statischen Text / Inhalt durch deine Variablen zu ersetzen. Und voilá! Schon hast du dein eigenes Elementor Widget, ohne eine einzige Zeile Code selbst geschrieben zu haben 🙂

Dazu habe ich ein Video gemacht, in dem ich dir kurz zeige, wie das in der Praxis aussieht. (Das Video ist auf Englisch, allerdings geht es hier ohnehin eher um das, was ich zeige).

Probier das Tool gerne aus! Es ist kostenlos. Schreib mir gerne in die Kommentare, wie du es findest und ob es dir gelungen ist, damit coole Elementor Widgets zu erstellen! Ich freue mich auf dein Feedback! 🙂

Smalltalk-Ecke

Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Werde Teil unserer Community

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.