Michael Baierl – WordPress-Profi aus Wien.

Vom Elementor-Programmierer:
Widgets & Addons für Elementor

Einfach Websites mit WordPress und Elementor

„Du programmierst eine WordPress-Website mit Elementor. Die ganze Website ist bereits mit Elementor umgesetzt. Die ganze Website? Nein! Eine vom Grafiker oder Kunden gewünschte Funktion hört nicht auf dir Kopfzerbrechen zu bereiten. Das Leben ist nicht leicht für dich als WordPress-Programmierer mit den vorgefertigten Widgets von Elementor …“

Ja, Elementor ist der beste Page-Builder für WordPress.

Ja, es lassen sich sehr viele Designs damit umsetzen.

Aber eben nicht alle Wünsche und Anforderungen funktionieren out-of-the-box. Und genau da komme ich ins Spiel. Als WordPress-Programmierer mit Fokus auf Elementor passe ich in meinen Kundenprojekten auch Elementor an.

Und zwar NICHT durch die Installation von unzähligen Plugins mit noch unzähligeren Addons und Widgets. Sondern zielgerichtet auf deine Bedürfnisse und Anforderungen zugeschnitten, als extra Plugin oder im Child-Theme deines Projektes.

Hier ein paar Module, Widgets, Addons und Erweiterungen die ich als Elementor-Programmierer schon umgesetzt habe:

Eigene Elementor Widgets & Addons

Das Design-System von Elementor ist sehr flexibel, aber trotz “innerer Abschnitte” und der smarten Kombination von Widgets lässt sich nicht alles umsetzen. Besonders wenn die Funktion eines Moduls speziell ist oder sichergestellt werden soll, dass das Layout immer gleich ist.

Vergleiche den Aufbau zwischen der Variante nur mit Elementor (links) und der selbst programmierten Version (rechts). Womit denkst du werden deine Website-Editoren besser zurecht kommen?

Elementor Funktion händisch erstellt
Selbst programmiertes Elementor-Widget

Als Elementor-Freelancer setze ich eigene Elementor Widgets und Addons um. Mit genau den Einstellmöglichkeiten, die du benötigst. Und auch mit genau dem HTML- und CSS-Code, der für dein Widget vorgesehen ist.

Beispiel eines eigenen Elementor-Widgets

Anstelle der mittlerweile veralteten Shortcodes setze ich auf eigene Widgets und Addons. Ebenso habe ich schon MemberPress, LearnDash und andere 3rd-Party-Plugins via Elementor-Addons erweitert.

Elementor Formular Erweiterungen

Elementor Formulare ersetzen spielend leicht extra zu installierendes Formular-Plugins wie NinjaForms oder Contact Form 7.

Doch was tun, wenn eine Funktion fehlt? Wie zum Beispiel ein Slider-Element? Als Elementor-Entwickler programmiere ich auch neue Formular-Felder für Elementor-Formulare. Wie eben einen Range-Slider für Elementor.

Elementor "Slider" Formularfeld
Beispiel des Elementor Formular Sliders

Weiters kann ich eigene Aktionen für Elementor Formulare programmieren. Wie beispielsweise die Berechnung des Ergebnisses beim Stresstest.

Elementor Blog Post Oberflächendesigns (“Skins”)

Eigene Elementor Oberflächendesigns (Skins)

Das Beitrags-Widget von Elementor lässt sich nur bedingt anpassen und bietet relativ wenige Einstellmöglichkeiten.

Es gibt zwar Plugins, welche dir erlauben eigene Elementor Custom Skins zu erstellen. Doch die Erfahrung damit hat gezeigt, dass sich diese negativ auf die Performance deiner Website auswirken.

Warum? Weil für jeden einzelnen Beitrag ein Elementor Template aus der Datenbank geladen wird. Was bei der Anzeige von 12 Beiträgen bedeutet, dass 12x das Template aus der Datenbank geladen und befüllt wird.

Als WordPress-Entwickler programmiere ich Elementor Skins direkt mit PHP. So erstellte Skins laufen ohne Einfluss auf die Performance deiner Website und erlauben sogar noch weitreichendere Anpassungen, als sie mit Elementor Templates möglich sind.

Die Anzeige von eigenen ACF-Feldern (Advanced Custom Fields) oder komplexen Taxonomie-Strukturen mit Abhängigkeiten zwischen Beiträgen ist kein Problem.

Auch das Anpassen der Abfrage aus der Datenbank (WP_Query) ist kein Thema. So lassen sich die angezeigten Elemente noch genauer Filtern, als mit Elementor alleine möglich ist.

Elementor Popups mit dynamischen Inhalten

Elementor Popups sind relativ “dumm” und können keine dynamischen Inhalte laden. Sollen aber Inhalte aus Custom Post Types dargestellt oder Blog-Beiträge in Popups angezeigt werden, dann ist eine Erweiterung der Elementor Popups notwendig.

Die Inhalte werden dabei dynamisch mittels AJAX aus der Datenbank geladen – und bei Bedarf werden sogar Zugriffsrechte kontrolliert. So lassen sich Mitgliederbereiche, die einen Fokus auf einzelne Videos oder nur kurze Texte haben, optisch ansprechend umsetzen.

Elementor Popup mit dynamischem Inhalt

Elementor Slider Erweiterungen

Der Slider von Elementor Pro ist ebenso relativ “dumm” und erlaubt nicht sehr viele Anpassungen. Die Verwendung von LayerSlider oder RevolutionSlider ist aber oft Overkill. Besonders in Bezug auf die Performance der Website.

Daher erweitere ich – wenn möglich – den Slider von Elementor Pro:

  • Hinzufügen von extra Elementen
  • Neu-Anordnung der Slider-Buttons
  • Laden von Beiträgen oder Custom Post Types im Slider
  • Anpassung des Layouts des Sliders

Dabei verwende ich immer die Swiper-Library, welche mit Elementor mitgeliefert wird. Die Erweiterungen haben daher keinen Einfluss auf die Performance der Website.

Elementor Slider - perfekt umgesetzt

Elementor CSS Design Anpassungen

Die meisten Designs und Wünsche lassen sich mit Elementor ohne zusätzlichen CSS-Code umsetzen. Aber eben nicht alle, wie zB. CSS-Grids oder korrekte Spaltenabstände in Elementor.

Eigenes CSS mit Elementor

Als Elementor-Programmierer klicke ich nicht nur an der Oberfläche, sondern gehe in die Tiefe und passe die CSS Styles an:

  • Mit der Funktion “Eigenes CSS” direkt in Elementor.
  • Direkt im CSS-Stylesheet des Child-Themes. Dort selbstverständlich basierend auf SASS.

So lassen sich auch komplexe Designs einfach umsetzen und – ganz wichtig – die Styles zentral ändern.

Ich greife auf die globalen CSS Stile und die globalen Schriften von Elementor zu. So können Farben und Schriften von den Erweiterungen direkt in Elementor geändert werden.

Elementor Addons & Erweiterungen

Im Laufe unzähliger Projekte habe ich bestehende Elementor Widgets um praktische und sinnvolle Funktionen erweitert:

  • Responsive Margin und Padding. Ja, das geht auch mit Standard-Elementor-Funktionen, lässt sich dank der Verwendung eines zentralen Stylesheets aber an einer Stelle für die gesamte Website anpassen.
  • Standard-Breiten für Abschnitte. Auch hier ist der Vorteil, dass ich alle Abschnitte der gesamten Website an einer Stelle (eigene Optionen-Seite für dein Theme!) bearbeiten und ändern kann.
  • Stile für Links im Text-Editor – je nach gewünschtem Design kann der Link-Stil angepasst werden. Änderungen erfolgen dann wieder zentral über das Stylesheet.
  • Buttons & Toggles für diverse (globale) Einstellungen. Damit müssen die Kunden keine CSS-Klassen einfügen sondern können Einstellungen bequem per Klick vornehmen.

Standard-Breiten für Abschnitte in Elementor
Responsive Margins und Paddings
Link-Stile für Text-Element von Elementor
Verwendung von Klassen vs. eigene Einstellungen

Dein Elementor-Projekt mit mir?

Du willst Elementor erweitern und suchst einen kompetenten Elementor-Developer? Ich freue mich auf deine Anfrage und dein Projekt!

Das sagen meine Kund*innen über mich:

Lukas von Admiral Sportwetten GmbH
Michael hat uns in kürzester Zeit eine highperformance Website auf die Beine gestellt. Ausgelegt auf viele Zugriffe mit einen mobile first Approach, der aber auch am Desktop fantastisch wirkt. Die Zusammenarbeit ist absolut professionell, ziel- & lösungsorientiert (& auch immer super angenehm!) Auch die Betreuung nach dem Launch ist absolut großartig. Danke dafür. Absolute Weiterempfehlung meinerseits!
Lukas, Admiral Sportwetten
Im Laufe unterschiedlichster Tätigkeiten habe ich schon viele Websites programmieren lassen. Bei Michael habe ich mich zum ersten Mal nicht „dumm“ gefühlt. Es gelingt ihm den Kunden wirklich zu verstehen. Er denkt weiter. Dahinter steht eine Kompetenz, die es ihm ermöglicht, entspannt und locker zu bleiben. Ganz einfach, weil er kann. Danke Michael.
Mike, Das Zentrum

PS: Falls es dir aufgefallen ist – die Einleitung dieser Seite entstand frei nach Asterix & Obelix ;-)

Projektanfrage

Wobei kann ich dich unterstützen?