Stackable: das Plugin, das deine Blöcke entsperrt

Erinnerst du dich an die 80er? Die Ankunft der neuen Welle, das Aufkommen von Vokuhila-Haarschnitten, der Erfolg von Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran und so weiter. In den 80er Jahren ist es auch die Explosion des Videospiels und die Veröffentlichung eines Spiels, bei dem wir zahlreich auf Knopfdruck dabei waren: Tetris.

Dieses Spiel mit seinem einfachen Prinzip bestand darin, Blöcke unterschiedlicher Form zu stapeln und gleichzeitig den verfügbaren Platz zu optimieren.

Das Konzept lässt sich in einer Zeile zusammenfassen: „Tetris passt perfekt zur Definition des besten Spiels: Eine Minute, um es zu lernen, ein Leben lang, um es zu meistern“ , wie der Journalist Bill Kunkel (alias The Game Doctor) sagte.

Eine Aussage, die auf viele Programme wie WordPress zutreffen könnte.

Apropos WordPress, wenn ich Tetris erwähne, liegt das daran, dass das Plugin, das ich heute analysieren werde, Stackable heißt. Und aus gutem Grund fügt dieses Plugin neue Gutenberg-Blöcke hinzu, die in Ihrer WordPress-Site verschachtelt werden können .

Bereit für diesen neuen Test? Auf die Plätze, fertig, los!

Dieser Artikel wurde ursprünglich im Juli 2021 geschrieben und im November 2021 mit den kostenlosen und Premium-Versionen 3.0.5 von Stackable aktualisiert.

Ihre besten WordPress-Projekte brauchen den besten Host!

WPMarmite empfiehlt Bluehost: großartige Leistung, großartiger Support. Alles, was Sie für einen guten Start brauchen.

Versuchen Sie es mit Bluehost

Was ist stapelbar?

„Powering the next generation of web design“. Dies ist die Mission von Stackable auf seiner offiziellen Website, wo sich das Plugin als „neues Seitenerstellungserlebnis für Gutenberg“ definiert. Nicht weniger!

Es muss gesagt werden, dass das Block-Plugin im WordPress-Verzeichnis mehr als 40.000 aktive Installationen und eine schöne Bewertung von 4,9 von 5 Sternen hat, begleitet von einer Reihe begeisterter Kritiken.

Wenn Sie bereits nach neuen Gutenberg-Blöcken suchen, sind Sie vielleicht schon auf Plugins wie Ultimate Addons for Gutenberg, Qubely, Getwid oder Coblocks gestoßen.

Wir haben in unserem Artikel über Addons zur Steigerung von Gutenbergs Kräften darüber gesprochen. Ihre Mission ist einfach: die Palette der im Inhaltseditor verfügbaren Gutenberg-Blöcke zu diversifizieren.

Stackable ist auch ein für Gutenberg entwickeltes Plugin, zu dem es eine Vielzahl von Blöcken bringt, von den großen Klassikern (Header, Galerie, Aufruf zum Handeln) bis zu den exotischeren (Zitate, Preistabellen, Timer, Testimonials usw.).
Diese Blöcke sind gebrauchsfertig und anpassbar.

Sie könnten also denken, was ist der Sinn der Installation von Stackable? Sie sind nur Blöcke unter anderen Blöcken. Nun, Gutenberg bietet viele nützliche Blöcke, aber mit Stackable vervielfachen sich die Möglichkeiten.

Darüber hinaus haben Sie Zugriff auf erweiterte Anpassungsfunktionen als die, die nativ mit Gutenberg angeboten werden, wie z. B.: Anpassen des Layouts der Elemente innerhalb der Blöcke, Abstände, Ändern des Hintergrunds, Hinzufügen von Hover-Effekten usw.

Es gibt zwei Versionen von Stackable:

• Eine kostenlose Version ist im WordPress-Verzeichnis verfügbar.

• Eine kostenpflichtige Version ist auf der offiziellen Website des Plugins ab 49 US-Dollar für die Verwendung auf einer Website erhältlich.

Wie Sie sich vorstellen können, bietet der zweite Zugriff auf mehr Blöcke und ermöglicht eine feinere Anpassung.

Für diesen Test haben wir uns auf die Premium-Version konzentriert.

Stapelbare Einstellungen

Um mit der Konfiguration von Stackable zu beginnen, installieren und aktivieren Sie das Plugin. Gehen Sie dann zu Einstellungen > Stapelbar.

Auf seiner Oberfläche haben Sie Zugriff auf die folgenden Einstellungen:

• Font Awesome Icons Pro (Premium): zum Integrieren eines Font Awesome Pro-Kits in Stackable.
• Editor-Einstellungen: Damit können Sie bestimmte Funktionen des Stackable-Editors steuern. Sie können beispielsweise die Designbibliothek deaktivieren, die Breite bestimmter Blöcke festlegen, Editorfenster schließen, die Sie nicht verwenden, und Spalten verknüpfen, damit sie dieselben Änderungen erfahren.
• Rollenmanager (Premium): um einigen Benutzerrollen den Zugriff auf den Blockeditor zu gewähren oder zu sperren und sie nur den Inhalt bearbeiten zu lassen. Hinweis: Diese Verwaltung funktioniert auf allen Blöcken , nicht nur auf denen, die in Stackable enthalten sind.
• Benutzerdefinierte Felder (Premium): Mit dieser Funktion können Sie benutzerdefinierte Felder erstellen, die Sie dynamisch aus dem Editor zu Ihren Inhalten hinzufügen können . Gehen Sie dazu in den Bereich Felder Ihrer WordPress-Administration, klicken Sie auf „Neu hinzufügen“, definieren Sie einen Feldtyp (Text, Zahl, Datum, Uhrzeit oder URL) und einen Namen.

Klicken Sie dann auf „Feld speichern“, geben Sie einen Wert für Ihr Feld ein und klicken Sie auf „Änderungen speichern“, um es zu speichern.

Um es in Ihren Inhalt zu integrieren, platzieren Sie den Cursor an der Stelle, an der der Wert Ihres Felds erscheinen soll, und klicken Sie auf das Datenbanksymbol (es entspricht dynamischen Feldern).

Wählen Sie „Site“ als „Dynamic Source“, dann Ihr neu erstelltes Feld (es erscheint unter „Stackable Custom Fields“) und klicken Sie abschließend auf „Apply“. Das ist es!

Das ist alles schön und gut, aber warum haben wir das alles getan? Dank der Magie dynamischer Inhalte wird meine E-Mail-Adresse automatisch an jeder Stelle auf meiner Website aktualisiert, an der das benutzerdefinierte Feld integriert ist, sobald ich sie aktualisiere.

• Responsive Haltepunkte: Es ist möglich, die Bildschirmbreite zu ändern, von der aus Ihre Website im Tablet- oder Mobilmodus angezeigt wird, und so die Einstellungen anzuzeigen, die Sie für diese Geräte definiert haben.
• Globale Einstellungen: Es stehen zwei Funktionen zur Verfügung, um mögliche Inkompatibilitäten mit dem auf Ihrer Website vorhandenen Design zu überwinden. Sie können den Selektor des Inhaltsbereichs Ihres Themas eingeben und die Verwendung der Schriftarten von Stackable erzwingen, damit sie die Ihres Themas übernehmen.

Wie Elementor hat Stackable globale Einstellungen: die Farben und die Typografie , die für mit Elementor erstellte Seiten gelten. Aber mit Stackable haben Sie die Möglichkeit, diese Einstellungen für alle Blöcke zu definieren, aus denen Ihre Website besteht .

• Block aktivieren und deaktivieren: Wenn Sie einige Blöcke nicht benötigen, können Sie sie deaktivieren, sodass sie nicht in der Liste der verfügbaren Blöcke angezeigt werden.
• Optimierungseinstellungen (Premium): Ermöglicht es Ihnen, JavaScript- und CSS-Dateien nur in Beiträgen zu laden, die stapelbare Blöcke enthalten, und nicht auf der gesamten Website. Der Zweck dieser Funktion besteht darin, die Leistung Ihrer Website zu verbessern. Diese Funktion gilt nur für Blöcke der Version 2, da sie bereits für die neuesten Blöcke des Plugins (ab Version 3) gilt.

Wie benutzt man Stackable?

Bausätze und Blöcke

Stackable wird direkt aus dem WordPress-Editor verwendet. Erstellen oder öffnen Sie dazu eine Seite oder einen Beitrag und wählen Sie dann Designbibliothek oben in Ihrem Beitrag aus.

Die Designbibliothek enthält UI-Kits und Kategorien . Was ist es?

Tatsächlich enthalten diese beiden Abschnitte dieselben Elemente, sind jedoch unterschiedlich kategorisiert. Die UI-Kits sammeln die vom Styleguide verfügbaren Blöcke und die Kategorien gruppieren sie nach Blocktyp: Header, Testimonial, Call-to-Action usw., die in allen verfügbaren Styleguides zu finden sind.

Kategorien und UI-Kits sind zwei verschiedene Möglichkeiten, um den richtigen Block für Sie zu finden.

Jeder Block wird mit einem gebrauchsfertigen und anpassbaren Design geliefert. Wir werden sehen, wie man sie im nächsten Teil anpasst.

Um den gewünschten Block zu finden, können Sie auch die Suchleiste verwenden, die Ihnen zur Verfügung steht. Mit den vier Symbolen oben rechts im Fenster können Sie die Suchergebnisse aktualisieren und die Größe der Miniaturansichten ändern, um eine genauere oder größere Ansicht der verschiedenen Blöcke zu erhalten.

So integrieren Sie einen stapelbaren Block in einen Beitrag

Sie können auch einfach auf das „+“-Symbol klicken, als würden Sie einen beliebigen Block hinzufügen, und Sie werden die stapelbaren Plugin-Blöcke leicht erkennen, da sie mit einem lila-orangen Farbverlauf verziert sind.

Durch Klicken auf die Schaltfläche „Alle durchsuchen“ können Sie auf alle Ihnen zur Verfügung stehenden Gutenberg-Blöcke zugreifen. Die stapelbaren Blöcke befinden sich in den Abschnitten „Text“ und „Erscheinungsbild“ und sind alle im gleichnamigen Abschnitt „stapelbar“ gruppiert, der auch Zugriff auf die Designbibliothek bietet.

Alle diese Pfade führen nach Rom zu den stapelbaren Blöcken, ja, aber es ist in erster Linie der Design Library-Pfad, der den Zugriff auf die vorgefertigten Designs ermöglicht.

Nehmen Sie zum Beispiel diesen Testimonial-Block, der eine minimale Formatierung, Fülltext und kein Beispielbild hat:

Und sehen Sie sich einen weiteren Testimonial-Block an, der aus der Designbibliothek hinzugefügt wurde (der Prime Testimonial 2 -Block):

Wenn Sie die perfekte Passform gefunden haben, klicken Sie auf den gewünschten Artikel, um ihn direkt in Ihren Beitrag einzubetten. Sie können das Element dann wie jeden Gutenberg-Block auf der Seite neu anordnen und anpassen.

Anpassen Stapelbar

Um einen stapelbaren Block anzupassen, gehen Sie zum Abschnitt „Block“ auf der rechten Seite Ihres Beitrags, wo Sie eine Reihe von Optionen finden, die in drei Kategorien eingeteilt sind: Block , Stil und Erweitert .

Das zu finden, was Sie interessiert, kann mühsam sein, weil es so viel Auswahl gibt, aber Sie können es auch finden, indem Sie einfach auf das Blockelement doppelklicken, das Sie ändern möchten. Sie gelangen dann mit einem Klick zu den Einstellungen für diesen Block.

Die verschiedenen Anpassungsoptionen sind in drei Registerkarten gruppiert:

• Block : Hier können Sie das Layout der verschiedenen Elemente anpassen, aus denen Ihr Block besteht, Rahmen und Schatten hinzufügen und auf den Hintergrund, die Abstände und die Ausrichtung des Textes einwirken.

Sie können auch den Abstand zwischen den Elementen in Ihren Blöcken anpassen, indem Sie mit der Maus darüber fahren und dann die Griffe am unteren Rand des Elements verwenden. Sie können sogar die Anzahl der Pixel sehen, die es von seinem Nachbarn trennen. Sehr hilfreich!

• Stil : Ermöglicht Ihnen, die Spalten zu verwalten und auf Typografie, Farben, Schaltflächen und Trennzeichen einzuwirken. Es ist unerwarteter, aber Sie können Ihrem Block auch einen Titel und eine Beschreibung hinzufügen.
• Erweitert : Hier haben Sie Zugriff auf erweiterte Funktionen wie das mit dem Block verknüpfte HTML-Tag und die Verwaltung des Responsive (Möglichkeit, den Block auf Computer, Tablet oder Handy auszublenden). Sie können die Ränder des Blocks und die Ausrichtung des Inhalts anpassen, aber auch Spaß daran haben, Animationen oder Übergangseffekte zu Ihren Elementen hinzuzufügen (gehen Sie jedoch einfach).
  Das i-Tüpfelchen für CSS-Fans ist die Möglichkeit, das CSS des Blocks direkt in dieser Oberfläche neben dem Block und mit einer Vorschau der Änderungen in Echtzeit zu ändern.
  Schließlich ermöglicht Ihnen die bedingte Anzeige, ein Element nur dann anzuzeigen, wenn eine zuvor definierte Bedingung erfüllt ist.

Schließen Sie sich den WPMarmite-Abonnenten an

Holen Sie sich die letzten WPMarmite-Beiträge (und auch exklusive Ressourcen).

ABONNIERE JETZT

Wenn Sie mit dem Design eines Blocks nicht ganz zufrieden sind, haben Sie die Möglichkeit, viele Parameter zu ändern, um ihn Ihren Wünschen anzupassen.

Zum Beispiel mochte ich es, dem Hover der Elemente oder des übergeordneten Elements einfach Effekte hinzufügen zu können (einen Hintergrund auf den übergeordneten Block anwenden, um diese letzte Funktion zu nutzen) oder die Ränder jedes Elements des Blocks einfach zu ändern .

Noch besser: Sie können auf Mobilgeräten und Tablets unterschiedliche Margen auswählen! So können Sie den responsiven Aspekt Ihrer Website ganz einfach ändern. Klicken Sie dazu zunächst auf das Desktop-Symbol (Computer), um die Symbole anderer Geräte anzuzeigen.

Eine weitere nette Option ist das Hinzufügen von Trennzeichen am oberen oder unteren Rand eines Elements, wie bei Elementor. Sie können das Aussehen dieser Separatoren natürlich anpassen und in der Premium-Version sogar ein oder zwei hellere Schichten hinzufügen.

So sieht es unten auf diesem appetitlichen Burger aus:

Wenn Sie den Mauszeiger über ihren Namen bewegen, werden einige Einstellungen lila und Ihr Cursor verwandelt sich in ein Fragezeichen. Wenn Sie nicht wissen, was sie sind, klicken Sie hier, um eine Animation anzuzeigen, die Ihnen hilft zu verstehen, wofür sie sind. Sehr nützlich, um sich in all diesen Optionen zurechtzufinden.

Welche Anpassung an Themes und Plugins?

Anpassung an Themen

Laut der offiziellen Dokumentation sollte „Stackable mit jedem Thema funktionieren“, solange das Thema, das Sie auf Ihrer Website haben, für Gutenberg optimiert ist.

Apropos Themes, ich habe es am Anfang dieses Beitrags erwähnt: Es gibt ein hauseigenes Theme , das für die Arbeit mit dem Gutenberg-Editor und dem Stackable-Plugin entwickelt wurde. Es ist kostenlos und im offiziellen WordPress-Verzeichnis verfügbar. Damit ist die Kompatibilität garantiert, kurz gesagt.

Es ist in den Farben des gleichnamigen Plugins gehalten, also hoffe ich, dass euch das Candy Pink nichts ausmacht.

Laden Sie das Stackable-Design herunter:

Anpassung an Plugins

Die Stackable-Dokumentation stellt sicher, dass sie mit dem elementor Page Builder (aff link) kompatibel ist. Aber Vorsicht, Sie können keine stapelbaren Blöcke im Page Builder-Editor verwenden.

Es ist eigentlich genauso wie bei Gutenberg-Blöcken, Sie können sie nicht im Elementor-Editor verwenden, Sie müssen eine Wahl treffen: Erstellen Sie Ihre Seite mit Elementor oder mit dem WordPress-Editor.

Die offizielle Stackable-Website behauptet auch, dass ihre Blöcke mit jedem Plugin kompatibel sind , sodass Sie sie problemlos mit anderen Blockbibliotheken verwenden können.

Erstellen Sie Ihre Website mit Elementor

Gestalten Sie ganz einfach das Erscheinungsbild Ihrer WordPress-Website mit dem berühmten Seitenersteller. Versuchen Sie Elementor

Versuchen Sie Elementor

Dokumentation und Support

Falls Sie bei der Verwendung von Stackable auf Schwierigkeiten stoßen, können Sie jederzeit auf die offizielle Dokumentation zurückgreifen.

Dort finden Sie:

• Ein Abschnitt, der den ersten Schritten mit dem Plugin gewidmet ist.
• Ein Abschnitt zur Fehlerbehebung.
• Details zu Preisen und Lizenzen.
• Gezielte Anleitungen.
• Eine häufig gestellte Frage.
• Und andere Ressourcen.

Sie finden diese Dokumentation auch unter Einstellungen > Stapelbar, Registerkarte Dokumentation .

Bei technischen Störungen stellt das für das Plugin zuständige Team den Benutzern eine Liste häufig auftretender Probleme sowie Lösungen zu deren Behebung zur Verfügung.

Wenn Sie immer noch nicht weiterkommen, können Sie den Support von Stackable anrufen oder der Facebook-Gruppe beitreten, um Antworten auf Ihre Fragen zu erhalten.

In Bezug auf den Support kann Ihnen das Stackable-Team helfen, wenn Sie ihm Ihre Anfrage über das Kontaktformular auf der Registerkarte Kontakt unter Einstellungen > Stackable oder an die E-Mail-Adresse [email protected] senden .

Was ist das Preis-Leistungs-Verhältnis?

Die Premium-Version ist natürlich großzügiger in der Vielfalt der angebotenen Blöcke. Auch die Anpassungsmöglichkeiten sind zahlreicher.

Für den Feature -Block gibt es beispielsweise 2 Layout-Optionen in der kostenlosen Version (Basic und Plain ), im Vergleich zu 13 in der Premium-Version.

In der Premium-Version gibt es je nach Nutzung von Stackable auch mehr oder weniger interessante Parameter, wie die Integration mit Font Awesome Pro und dem Role Manager sowie die Möglichkeit, beliebige Blöcke in CSS zu modifizieren.

Um diese letzte Funktion zu verwenden, gehen Sie zum Abschnitt Erweitert und dann zu Benutzerdefiniertes CSS . Bequem: Ihre Änderungen werden in Echtzeit angezeigt.

Die Premium-Version gewährt außerdem Zugriff auf ein Jahr Support und Updates .

Stackable oder einen Page Builder verwenden: Das ist die Frage

Das war's, wir haben die Funktionen und Einstellungen von Stackable zusammen durchgesehen. Jetzt haben Sie eine klarere Vorstellung davon, was das Block-Plugin auf Lager hat.

Wenn Sie ein Fan von Seitenerstellern sind oder sich diese bereits genauer angesehen haben, fragen Sie sich vielleicht: Warum Stackable anstelle eines Seitenerstellers verwenden?

Denn die Möglichkeiten, die beispielsweise Stackable und die kostenlose Version von Elementor bieten, sind vergleichbar. Und aus gutem Grund nähert sich Stackable einem Designerlebnis mit einem Seitenersteller , wie es auf seiner offiziellen Website behauptet wird: „Haben Sie das Vertrauen, mit einem neuen Seitenerstellungserlebnis für Gutenberg ganz einfach die schnellsten Websites zu erstellen.“

Und mit der Einführung von Full Site Editing, das es ermöglicht, auf alle Elemente der Website-Oberfläche (und nicht nur auf den Inhalt der Posts) einzuwirken, könnte Stackable noch näher kommen. Allerdings hat Stackable den Vorteil, dass es direkt im WordPress-Inhaltseditor verwendet werden kann , was das Designerlebnis im Vergleich zu aktuellen Seitenerstellern vereinfacht.

Andererseits bietet die Pro-Version von Elementor viel fortschrittlichere Widgets und Funktionen. Da beide Plugins für die Verwendung auf einer einzelnen Website gleich viel kosten (49 US-Dollar), empfehlen wir Ihnen, sich stattdessen an den Giganten der Seitenersteller zu wenden.

Unsere letzte Meinung zu Stackable

Alles in allem können wir sagen, dass Stackable ein recht intuitives Plugin ist, das moderne und ästhetische Designs bietet.

Stackable ist für jeden Website-Ersteller, der fortgeschrittenere Blöcke haben möchte, um das Design seiner Website anzupassen , ohne eine Codezeile berühren zu müssen (aber die Möglichkeit haben, die Blöcke nach Belieben zu platzieren, wenn sie das CSS beherrschen).

Sollten Sie es jedoch verwenden oder direkt zu einem fortgeschritteneren Seitenersteller wie Elementor gehen?

In der Tat nähern wir uns mit Stackable einem Design-Erlebnis eines Seitenerstellers direkt im WordPress-Editor. Man könnte sagen, dass dies der Beginn des endgültigen Ziels des Projekts Gutenberg ist, nämlich ein echter „Site Builder“ zu werden.

Aber so weit sind wir noch nicht. Im Moment hilft Ihnen Stackable beim Erstellen von Posts auf die gleiche Weise wie die kostenlose Version von Elementor, ohne jegliche Vorlagenverwaltung (mit Stackable können Sie vorgefertigte Designs laden, aber nicht Ihre eigenen speichern).

Wenn Sie gerne mit dem WordPress-Editor arbeiten und die von Stackable bereitgestellten Blöcke für Ihr Projekt ausreichen, tun Sie es! Die Verwendung von Elementor ist nicht erforderlich.

Wenn Sie jedoch erweiterte Funktionen benötigen oder eine Website von Grund auf neu entwerfen müssen (womit ich meine, alle Seitenvorlagen anpassen), ist Elementor (aff link) oder einer seiner Konkurrenten unverzichtbar.

Und wenn Sie einer der Benutzer sind, die bereits von Elementor verführt wurden, ist Stackable möglicherweise kein großer Erfolg. Schließlich hast du deine eigenen Gewohnheiten, also gibt es keinen wirklichen Grund, sie zu ändern.

Wenn Sie an der Pro-Version von Stackable interessiert sind, zögern Sie nicht, sich die verfügbare Demo anzusehen und die kostenlose Version zu durchsuchen, um sicherzustellen, dass die Blöcke und Optionen Ihren Wünschen entsprechen.

Laden Sie das Stackable-Plugin herunter:

Und du, hast du es schon benutzt? Hat dieser Artikel Sie dazu gebracht, es zu verwenden? Teilen Sie Ihre Gedanken in den Kommentaren.