Alles über Photoshop und WordPress

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
Die Schrift mit Hintergrund vertikal stellen

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.

sarah cervantes s F84X3ltu0 unsplash scaled
Hovern Sie über das Bild, um den Effekt zu sehen.

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

Kommentar verfassen

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