Divi Themebuilder im Härtetest
März 20, 2021
Der Divi Themebuilder ist sicherlich einer der besten Theme- und Pagebuilder auf dem Markt. Wie schneidet er im Test ab?
Steroids for Elementor,
das leicht verrückte Addon
Inhaltsverzeichnis
Wer sich mit so einem Namen als Elementor Addon positionieren will, muss schon Außergewöhnliches anbieten. Aber damit nicht genug. Oooh Boi Steroids for Elementor sind keine Widgets, sondern Module, die den Elementor Widgets neue Funktionen ermöglichen. Und auch diesen wurden leicht verrückte Namen gegeben, die unter anderen da heißen: PoopArt oder Breaking Bad.
Das Addon hat bis dato 18 Module und die Entwickler versprechen noch zusätzliche für die Zukunft. Doch was ich fast vergessen hätte, dieses Elementor Addon ist gratis und es gibt auch keine Pro Upgrade.
Doch kommen wir zu den einzelnen Modulen und Funktionalitäten.
Was wir mögen
Addon ist 100% kostenlos
Einige exklusive und gute Module:
Harakiri
Overlays
PoopArt
Photomorph
Teleporter
Was wir nicht mögen
Wenig bis gar keine Information zu den Modulen
Einige Module sind schwer zu finden
Manche Module eher nutzlos, können aber desaktiviert werden
Bei manchen Funktionen notwendiger Einsatz von CSS Code
Einige Funktionen nur in der Vorschau sichtbar
Butter Button
Fangen wir mit einem relativen einfach zu benutzenden an:
Butter Button.
Was bietet es mehr als die Button Widgets von Elementor?
Es sind hauptsächlich 2 Funktion, die bei Butter Button hervorstechen:
- Das Icon kann unabhängig von der Schrift vergrößert werden.
- Der Buttons kann nicht nur farbig, sondern auch mit einem Farbverlauf oder einem Bild hinterlegt werden, und das sowohl bei Normal wie bei Hover-Ansicht.
- Zusätzlich kann zwischen der Normal- und der Hover-Ansicht die Übergangszeit bis auf eine Sekunde eingestellt werden, was eine Art Überblendungseffekt ergibt.
- Also mir gefällt das an sich schon ganz gut.
Harakiri
Das nächste Modul was ich mir anschaute, heißt:
Harakiri.
Seine Funktion ist relativ einfach: Man kann Überschriften und Texte hochkantig, also vertikal stellen. Und zwar sowohl Vertikal rechts wie vertikal links.
Eine gute Lösung, um kreativ zu gestalten.
Glider
Dieses Modul ist an sich nicht umwerfend, doch kann es einem helfen in schnellster Zeit, Bilder in Spalten zu einem Slider umzufunktionieren.
Nichts geht einfacher als das. Sie haben 3 oder 4 Bilder in Spalten. Einfach das Modul Slider aktivieren, und schon haben wir einen Slider.
Man kann natürlich die klassischen Einstellungen wie:
- Höhe des Sliders
- Navigation Stil
- Stil der Übergänge
Endlosschleife, - und so weiter und so fort vornehmen.
Overlays
Als nächstes kommt ein äußerst nützliches Modul:
Overlays
Und wie der Name es schon sagt, geht es hier um Überlagerungen.
Mit Elementor Pro sind die zwar auch möglich, nur ist es eine Heidenarbeit.
Man muss das Bild als Hintergrundbild einfügen und dann mit einem Verlauf Weiß zu Weiß ohne Deckung operieren. Das geht noch mit einem Textblock, aber mit zwei Textblöcken ist das ohne CSS schier unmöglich.
Mit Overlayz kann man das Bild in der Größe ändern und verschieben. Und so ein qualitativ gutes Design erzielen.
Also Overlays ist ein interessantes Modul, wenn es um Webdesign geht.
PoopArt
PoopArt heißt dieses Modul. Lassen Sie sich aber durch den Namen nicht entmutigen, denn es bringt ungeahnte Möglichkeiten.
Besonders für Webdesigner, die im Bereich Kunst, Mode, Lifestyle oder Werbung tätig sind.
Es kann bei jedem Abschnitt oder Widget aktiviert werden, und man findet das Modul unter der Registerkarte „Erweitert“.
Die Funktionalität des Moduls erlaubt uns auf zwei weiteren Hintergrund Ebenen zu arbeiten, zusätzlich steht auch noch eine Maskenebene zur Verfügung.
Vielleicht ist das Ganze für Sie jetzt etwas chinesisch, aber wer schon mit Photoshop oder Illustrator gearbeitet hat, weiß wovon ich hier rede.
Mit PoopArt können Sie einfache Formen wie Rechtecke oder Kreise, zu Ihren Abschnitten oder Widgets hinzufügen. Aber auch Bilder, Scribbles, Strukturen, also egal was Sie mögen.
All diese einfachen oder mehr komplexe Formen und Bilder interagieren mit dem Host Widget.
Besonders wenn wir von einem Bild Widget sprechen. Hier können sie die Größe, die Position, die Überblendungsart oder die Deckkraft ändern.
Die beiden Ebenen werden als Overlay, lies Überlagerung oder als Underlay, lies Unterlagerung, bezeichnet.
Die Bedeutung ist aber nicht in Stein gemeißelt, da Sie die Stapelreihenfolge über Z-Index steuern können.
Die beiden Ebenen können zusammen mit der Maskenebene, alle auch als Maske benutzt werden, um so komplexe und kreative Kompositionen zu erstellen.
Breaking Bad
Glauben Sie nicht wir hätten uns hier in einer erfolgreichen TV-Serie verirrt. Das Modul heißt wirklich so.
Dieses Modul dient dazu die Spaltenverwaltung besser zu beherrschen.
Wenn sie Beispielsweise eine Spalte auf 100% Breite einstellen möchten, funktioniert das nur bei Tablets und mobilen Geräten.
Dann muss man schon auf eine CSS Kodierung zurückgreifen, um dies in den Griff zu bekommen.
Mit Breaking Bad können sie dies aber unkompliziert erreichen und bei mehreren Spalten, werden die Überhangspalten in die nächste Reihe versetzt.
Zusätzlich können Sie die Spaltenbreiten in Prozent, Pixel oder EM festlegen und zusätzlich die Spaltenbreiten berechnen. Dazu müssen Sie aber schon den CSS Code „calc“ benutzen und die Werte in normale Klammern setzen.
Zum Beispiel: calc(100% – 400px)
Die Spalten, die eventuell in die nächste Reihe gesetzt werden, können zusätzliche entweder links, rechts oder in die Mitte gesetzt werden.
Eine zusätzliche Funktionalität von Breaking Bad ist „Scrollable Column“, also eine Spalte, die man scrollen kann. Nach der Aktivierung, die Spalte auf die gewünschte Höhe setzen. Dies hilft insbesondere, wenn eine der Spalten weitaus höher ist als die Nachbarspalten. Sieht einfach besser aus.
Also Breaking Bad, ein Modul, das manchmal helfen kann, das Seitenlayout zu verbessern.
Space Rat
Was nach einem SciFi Roman oder -Film klingt entpuppt sich als ein Mittelding aus Abstandshalter und Trenner. Die beim Trenner Widget verfügbaren Designmöglichkeiten sind ja bekanntlich mehr als gering.
Mit Space Rat kann man dem Abstand ein einzigartiges Design geben.
Dazu haben wir eine Maske, welche die Form des Abstands definiert. Man kann aber auch die Form durch einen Beschnitts Pfad definieren. Doch dazu mehr in einem zusätzlichen Tutorial.
Und dann last not least kann man den Inhalt der Form definieren. Da kann man ein eine Farbe, ein Verlauf oder ein Bild als Inhalt definieren.
Webdesigner, die mit viel Schnick schnack arbeiten, können sich hier richtig austoben.
Videomask
Mit Videomask kann man einem normalen Video Hintergrund eine bestimmte Form geben. Und zwar ganz einfach- Indem Sie dem Untergrund eine Maske geben.
Die einzige Arbeit, die sie im Endeffekt haben ist die Erstellung der Maske.
Wie der Name es schon sagt können sie mit Perspektive ihre Widgets perspektivisch in Szene setzen.
Mit 5 Schieberegler ist dies kein Problem. Zusätzlich ist es möglich den Overflow sichtbar oder unsichtbar zu machen.
Photomorph
Photomorph heißt die nächste Funktionalität.
Hiermit können sie die Form eines Bildes durch drüber gleiten, also hovern, ändern. Hierzu ist aber ein Code notwendig, welches die Form bestimmt.
Dazu gehen Sie auf Stil und aktivieren unten Photomorph.
Aber Gottseidank gibt es die Website Clippy, wo man die Form auswählen oder sogar selbst definieren kann. Um anschließend den Code unter Normal durch copy-paste einfügen.
Aber aufgepasst, nicht alle Browser akzeptieren den Code in dieser Form. Sie sollten also noch folgenden Code: „-Webkit-“ vor den Code einsetzen.
Wir wählen noch eine zweite Form und copy pasten die unter Hover.
Manchmal funktioniert hier im Frontend der Befehl nicht, sodass sie das Ganze unter der Vorschau betrachten müssen.
In einem nächsten Post werde ich Clippy im Detail vorstellen.
Teleporter
Kommen wir nun zum Modul Teleporter
Hier kann man durch hovern die Spalte an irgendeine Stelle der Seite bewegen.
Nach Aktivierung der Funktionalität, gibt man die X- und Y Koordinaten der Verschiebung an, und schon bewegt sich die Spalte, mit Bild oder Text, an eine andere Stelle. Natürlich kann man noch als Hintergrund ein anderes Bild einfügen, sodass dieses nach dem hovern erscheint.
Paginini
Bei dem Postwidget von Elementor hat man sich, in punkto grafische Gestaltung der Pagination, auf ein Minimum beschränkt. Um die Seitennummerierung auf der Beitrags- oder Archivseite ein bisschen mehr Pep zu geben, da kommt Paginini ins Spiel.
Sowohl in punkto Hintergrund, Abstand, Farbgebung usw., hat man hiermit einige Gestaltungsmöglichkeiten mehr.
Photogiraffe
Bei fester Spaltenhöhe kann man ein Bild mit Photogiraffe auf die ganze Höhe oder im Verhältnis Breite zur Höhe zeigen, wie im hier gezeigten Beispiel.
Search Cop
Search Cop erlaubt uns mit dem Basis Search Form Widget auch in Seiten oder in Beiträge oder überall unsere Suche zu definieren. Diese Funktion findet man natürlich auch oft in Pro Addons.
Shadough
Mit diesem Modul kann man Schatten definieren, die sich besser der Form oder dem Umriss anpassen.
Imbox
Mit diesem Modul kann man dem Bild in dem Bilderbox Widget einen Schatten beifügen.
Commentz
Commentz erlaubt uns das eher lustlose gestaltete Kommentar Widget ein bisschen grafisch aufzupeppen.
Baseline Grid
Dieses Hilfmittel ist fast allen Graphic Designern und layoutern aus InDesign umd Illustrator bekannt. Hiermit kann mein Rasterlinien während der Erstellung der Website legen. Diese helfen Ihnen das Layout geordneter aufzubauen. In dem Modul kann man die Rasterabstände definieren und hat die Wahl zwischen Quadraten sowie Horizontalen oder vertikalen Linien
Video – Oooh Boi Steroids for Elementor
Dieses Hilfmittel ist fast allen Graphic Designern und layoutern aus InDesign umd Illustrator bekannt. Hiermit kann mein Rasterlinien während der Erstellung der Website legen. Diese helfen Ihnen das Layout geordneter aufzubauen. In dem Modul kann man die Rasterabstände definieren und hat die Wahl zwischen Quadraten sowie Horizontalen oder vertikalen Linien
Weitere Beiträge die Sie interessieren könnten
Web-Typografie: Der vollständige Leitfaden für Designer
Dezember 1, 2020
Machen Sie sich bereit, Ihre Webdesign-Fähigkeiten zu verbessern, indem Sie die Besonderheiten der Typografie kennenlernen. In dieser umfassenden Anleitung zur Web-Typografie erfahren Sie alles, was Sie für die Erstellung Ihres Web-Design in punkto Typografie benötigen.
