Vom Elementor-Programmierer:

Widgets & Addons für 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.

Unten findest du 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 flexibler Container und der smarten Kombination von Widgets lässt sich nicht alles einfach und sinnvoll 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?

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.

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.

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

Elementor Blog Post 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 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 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.

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.

Das sagen meine meine Kund:innen über mich

Michael hat meine Website sauber und strukturiert wieder aufgebaut. Ich fühlte mich von Anfang bis Ende hervorragend betreut.

Vera Mayrhofer, Motion Designerin

Professionell, freundlich und kompetent und der perfekte Partner. Die Zusammenarbeit war super angenehm!

Maria & Ralph, Claasen Communication GmbH

Die Zusammenarbeit ist absolut professionell, ziel- & lösungsorientiert (& auch immer super angenehm!). Absolute Weiterempfehlung meinerseits!

Lukas Mayer, ADMIRAL Sportwetten

Für mich ist Michael in seinem Bereich ein absoluter Geheimtipp! Also auf gar keinen Fall weitersagen!

Andreas, refraktiv.com

Michael gelingt es den Kunden wirklich zu verstehen. Er denkt weiter. Dahinter steht seine Kompetenz, die es ihm ermöglicht, entspannt und locker zu bleiben.

Mike Mandl, Das Zentrum

Dein Elementor-Projekt mit mir?

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

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