Spectra - Ultimate Gutenberg Blocks

Spectra - Ultimative Blöcke fĂŒr Gutenberg

Das WordPress Plugin Spectra ist der Nachfolger des sehr erfolgreichen Plugins Ultimate Addons for Gutenberg. Eine Blocksammlung fĂŒr den Gutenberg-Editor, sehr Ă€hnlich dem Kadence Blocks Plugin.

Das Plugin kommt vom renommierten Webentwickler Brainstorm Force, welcher auch das beliebte Astra Theme und viele weitere Plugins vertreibt.

Load WordPress Sites in as fast as 37ms!

Wenn du ein bisschen Englisch kannst, schau dir das folgende Video an, da werden Features sehr gut erklÀrt. Im Detail geht es dann hier im Artikel weiter!

Du kannst natĂŒrlich Gutenberg auch ganz ohne zusĂ€tzliches Plugin nutzen, richtig komfortabel ist das allerdings nichts.

Deshalb ist die Spectra Erweiterung meine Empfehlung fĂŒr dich.

Was kostet WPSpectra?

Screenshot der Spectra Homepage.
Screenshot der Spectra Homepage.

Bevor man sich ein Produkt nĂ€her ansieht, ist immer erst mal der Preis interessant, um zu sehen, ob es ĂŒberhaupt ins Budget passt.

Bei diesem Plugin ist die Entscheidung momentan noch einfach. Es gibt nÀmlich nur die kostenlose Variante des Spectra Plugins. Mitte 2022 kommt dann die Pro-Version.

Hast du bereits ein Astra-Bundle gekauft, bekommst du Spectra kostenlos dazu. Genauso wie es der Hersteller auch verspricht.

Mit welchen Themes ist Spectra kompatibel?

Spectra ist ein Plugin ohne Spezialisierung auf ein bestimmtes WordPress-Theme. Es kommen also alle modernen Themes infrage, die ohne eigenen Page Builder kommen.

FĂŒr mich haben sich in den letzten Jahren die folgenden drei Themes als besonders fortschrittlich herausgestellt:

Astra empfiehlt sich natĂŒrlich in Kombination mit Spectra, da es vom selben Anbieter stammt.

Spectra Einstellungen

Der „Welcome“-Tab ist wenig interessant fĂŒr uns.

In den Einstellungen kannst du Blöcke aktivieren und deaktivieren.
In den Einstellungen kannst du Blöcke aktivieren und deaktivieren.

Zum MenĂŒpunkt Blocks gibt es jetzt auch nicht so viel zu sagen. Du findest hier die Möglichkeit, alle Blöcke an- oder auszumachen.

Einstellungen fĂŒr den Editor
Einstellungen fĂŒr den Editor

TatsĂ€chlich kommt Spectra fĂŒr so ein Plugin mit sehr vielen Einstellungsmöglichkeiten.

  • Default Content Width: Hiermit kannst du die Editorbreite ĂŒberschreiben, ansonsten wird die Breite vom Theme ĂŒbernommen.
  • Collapse Panels: Aktiviere diese Option, wenn du alle anderen Panels in deinen Blocks-Einstellungen einklappen möchtest, außer dem, auf das du geklickt hast. So sparst du viel Platz.
  • Copy Paste Styles: Aktiviere die Option „Stile kopieren und einfĂŒgen“, um die Stile von Spectra und Core Gutenberg Blocks zu kopieren und einzufĂŒgen.
JS und CSS generieren
JS und CSS generieren
  • File Generation: Spectra lĂ€dt die CSS- und JS-Dateien standardmĂ€ĂŸig inline auf die Seite. Wenn du separate CSS- und JS-Dateien fĂŒr Spectra-Blöcke generieren möchtest, aktiviere diese Option.
  • Asset Regeneration: Hast du Probleme mit Stil, Layout, Farbe oder einem anderen Seitenelement? Mit dieser Option kannst du CSS- und Javascript-Assets neu generieren.
  • Enable Templates Button: Spectra wird mit einer beeindruckenden Bibliothek von Seitenvorlagen und Blockmustern geliefert. Auf diese Bibliothek kannst du bei der Bearbeitung im Editor ĂŒber die SchaltflĂ€che „Template Kits“ zugreifen.
  • Rollback to Previous Version: Falls du mit einer Spectra-Version Probleme hast, kannst du hier zu einer beliebigen vorherigen Spectra Version zurĂŒckspringen.
  • Enable Beta: Nur fĂŒr Profis! Aktiviere diese Option, um Beta-Updates zu aktivieren und benachrichtigt zu werden, wenn eine neue Beta-Version von Spectra verfĂŒgbar ist.
Performance-Einstellungen fĂŒr Spectra
Performance-Einstellungen fĂŒr Spectra
  • Allow Only Selected Fonts: Spectra bietet ĂŒber 700 Google-Schriftarten an. Wenn das fĂŒr deine Kunden zu viel ist, kannst du diese Option nutzen, um in den Blockeinstellungen nur eine begrenzte Anzahl von Schriftarten anzuzeigen.
  • Load Google Fonts Locally: Aktiviere diese Option, um Google-Schriftarten herunterzuladen und sie auf deinem Server zu speichern. Das kann die Geschwindigkeit deiner Website verbessern und die GDPR-Richtlinien einhalten.
  • Preload Local Fonts: Mit dieser Option werden die Schriftdateien sofort beim Laden der Seite geladen. Das Vorladen lokaler Schriftarten soll deine Website noch weiter beschleunigen.
  • Form – Google reCAPTCHA: Um die reCAPTCHA-Funktion in deinen Formularblöcken zu aktivieren, aktiviere bitte die reCAPTCHA-Option in den Einstellungen deiner Blöcke und wĂ€hle die Version aus. Hier fĂŒgst du die API-SchlĂŒssel hinzu.
Spectra Plugin: Schalte Coming Soon aktiv
Spectra Plugin: Schalte Coming Soon aktiv
  • Enable Coming Soon Mode: Setze deine gesamte Website in den COMING SOON-Modus, d.h. die Website ist offline, bis sie bereit ist, gestartet zu werden. DafĂŒr wĂ€hlst du deine Seite aus, die du vorher gestaltet hast.

Das waren alle Punkte des Settings-MenĂŒs.

Spectra Features

Wichtige Spectra Features
Wichtige Spectra Features

Responsive Design in Gutenberg

Wechsle mit den drei Buttons zwischen Desktop, Tablet und Mobile.
Wechsle mit den drei Buttons zwischen Desktop, Tablet und Mobile.

WordPress bringt keine ausreichenden Funktionen fĂŒr responsives Design mit. Dieses Problem löst du mit dem Spectra Plugin. Wie du auf dem Screenshot sehen kannst, werden im Editor drei neue Buttons angezeigt, welche dir dein Design wahlweise auf Desktop, Tablet und Smartphone anzeigt.

Templates, Wireframes und Patterns

Template Kits im Editor
Template Kits im Editor

Der Umfang an fertigen Vorlagen, Blöcken und Wireframes ist schon der Hammer. Da können nicht viele andere Themes oder Plugins mit dem Spectra Plugin mithalten.

Im Editor ganz oben findest du einen blauen Button mit der Aufschrift Template Kits. Klickst du auf diesen, öffnet sich ein Pop-up mit den Vorlagen.

Pages

Fertige Pages zum Download
Fertige Pages zum Download

Pages sind fertige Vorlagen mit mehreren Unterseiten. Damit hast du einen super schnellen Start, was besonders interessant ist, wenn du öfters neue Websites machst oder Landing Pages designst.

Patterns

Vorgestilte Patterns
Gestaltete Patterns

Patterns sind eine Kombination aus anderen Spectra Blöcken, die fĂŒr bestimmte FĂ€lle erstellt worden sind. Du nimmst ein Pattern und passt es an deine BedĂŒrfnisse an.

Wireframes

Spectra Plugin: Drahtgitter Designs
Spectra Plugin: Drahtgitter Designs

Wireframes sind sehr einfache Designs, die lediglich in Schwarz und Weiß gehalten sind. Damit kannst du Seiten erstellen, die du vielleicht erst spĂ€ter fĂŒr Kunden fertig machst.

Blöcke mit Schema Auszeichnung

Review Block mit Schema Daten
Review Block mit Schema Daten

Diesen Umfang bietet keine andere Block-Sammlung!

How-to, FAQ, Review
How-to, FAQ, Review

Die Blöcke How-to, FAQ und Review kommen mit voller Schema UnterstĂŒtzung. Damit kann Google diese Meta-Daten auslesen und deine Posts prominent in der Suchmaschine listen. Hast du sicher schon gesehen, wenn bei Reviews in den SERPs schon die Bewertungsdaten angezeigt werden.

Bis jetzt habe ich auf meiner LMS Review Seite ein teures Plugin dafĂŒr genutzt. Mit dem Spectra Plugin hast du diese Funktion schon frei mitgeliefert.

FĂŒr mich sind die Schema-Blöcke ein großer Mehrwert.

Schnell und modern mit Flexbox

Flexbox fĂŒr schlanke Spalten.
Flexbox fĂŒr schlanke Spalten.

Flexbox ist eine moderne Layout-Methode zur Anordnung von Elementen in Zeilen oder Spalten. Elemente lassen sich erweitern, um zusĂ€tzlichen Platz zu fĂŒllen, oder schrumpfen, um in kleinere Bereiche zu passen.

Mit Flexbox werden altmodische Float-Designs ersetzt, die deine Website langsamer machen wĂŒrden.

50 Presets fĂŒr Blöcke

Spectra Block Vorlagen
Spectra Block Vorlagen

Presets sind Vorlagen fĂŒr Blöcke, mit denen du mit wenigen Klicks wunderschöne individuelle Designs erstellen kannst!

FĂŒge schnell professionell aussehende Layouts und Stile auf deiner Seite hinzu, indem du Presets auswĂ€hlst. Das spart dir stundenlange Arbeit und MĂŒhe.

Stile kopieren und einfĂŒgen

Kopiere das Design eines Spectra-Blocks und fĂŒge bei einem anderen hinzu.
Kopiere das Design eines Spectra-Blocks und fĂŒge bei einem anderen hinzu.

Sorge fĂŒr ein einheitliches Design auf der gesamten Website und spare stundenlange Arbeit, indem du Blockstile von einem Block zum anderen oder von einer Website zur anderen auf Spectra kopierst.

Dieses Feature kann echt viel Zeit ersparen.

Spectra Starter Templates

Die Spectra Starter Templates.
Die Spectra Starter Templates.

Fertige Starter Templates waren schon immer die StÀrke von Astra und den Ultimate Addons for Gutenberg. Mit Spectra werden diese WordPress-Website-Vorlagen erweitert und vor allem auch mit den neuen, performanten Blöcken aufgebaut.

Toolset Dynamic Block

Dynamische Daten mit dem Toolset-Block.
Dynamische Daten mit dem Toolset-Block.

Toolset hilft WordPress-Profis bei der Erstellung fortgeschrittener Websites ohne Programmierung. Ähnlich wie mit Advanced Custom Fields und Metabox.

Damit kannst du zusĂ€tzliche Felder oder Custom Post Types erstellen und deine Website damit bereichern. Diese Funktion ist eher was fĂŒr die Profis von euch!

Alle Spectra Gutenberg Blöcke

Die Spectra Blöcke können einzeln aktiviert und deaktiviert werden.
Die Spectra Blöcke können einzeln aktiviert und deaktiviert werden.

Zum Zeitpunkt dieses Reviews kommt das Block-Plugin Spectra mit 35 Blöcken. In Einstellungen > Spectra > Blocks kannst du diese Blöcke einzeln aktivieren und deaktivieren, falls du sie nicht nutzen möchtest, was bei dieser Menge an Blöcken sicher der Fall sein wird.

Die Blöcke sind alle in der kostenlosen Version enthalten. Etwas spĂ€ter kommen zusĂ€tzliche Blöcke mit der Spectra Pro Version hinzu. Beachte, dass auf den Screenshots noch nicht alles fertig ĂŒbersetzt ist.

Im Anschluss stelle ich dir alle Blöcke vor:

Container

Container Block
Container Block

Mit dem Container Block wird aus Gutenberg erst ein richtiger Page Builder.

FĂŒr die Breite und Ausrichtung hast du unglaublich viele Möglichkeiten, wie Full Width, Boxed, Custom und die volle Bandbreite an Flexbox-Möglichkeiten.

Im Reiter Stil legst du dann Hintergrund, Rahmen, Schatten, Shape Deviders und AbstÀnde fest.

Advanced Heading

Advanced Heading
Advanced Heading

Mit dem Header kannst du wunderschöne Überschriften erstellen, die sonst mit Gutenberg nicht möglich wĂ€ren.

Advanced Image

Advanced Image
Advanced Image

Erstelle Bilder mit Rahmen, Overlays, Masken und vielen weiteren optischen Anpassungen.

Besonders interessant sind diese Funktionen fĂŒr Landing Pages und Startseiten.

Info-Box

Info Box
Info Box

Die Info Box ist die Geheimwaffe des modernen Block-Editors.

Damit kannst du die geilsten Designs erstellen.

Anstatt der Icons kannst du ĂŒbrigens auch Bilder verwenden.

Aufruf zum Handeln

Call to action
Call to action

Mit dem CTA (Call to Action) forderst du deine Leser zum Handeln auf.

Momentan kommen mir die Möglichkeiten fĂŒr das Design noch etwas mager vor.

Aber da wird sicherlich noch nachgearbeitet.

Tabs

Tabs Block
Tabs Block

Mit den Tabs kannst du Informationen auf elegante Weise darstellen.

Beachte jedoch, dass wirklich wichtige Inhalte immer direkt sichtbar sein sollten.

Form

Formular Block
Formular Block

Mit dem Formular Block sparst du dir Plugins wie WPForms und Fluent Forms und damit Kosten und einen zusÀtzlichen Ressourcen-Fresser.

Erstelle ein Kontaktformular, ein Newsletter-Formular oder ein Formular mit VorschlÀgen.

Wegen der Menge an Blöcken kann ich hier nicht jeden einzeln vorstellen. Deshalb habe ich den Rest einfach fĂŒr dich aufgelistet.

Alle weiteren Spectra Blöcke

  • Icon-Liste
  • Preisliste
  • Soziale Medien teilen
  • BeitrĂ€ge-Raster
  • BeitrĂ€ge Masonry
  • BeitrĂ€ge-Karussell
  • BeitrĂ€ge-Zeitleiste
  • Inhaltsverzeichnis
  • Inline Notice
  • Star Ratings
  • Blockzitat
  • How-to
  • FAQ
  • Team
  • Testimonials
  • Google Karte
  • Inhalt Zeitachse
  • Review
  • Taxonomy List
  • Marketing-Button
  • Toolset Dynamic Block
  • Lottie Animation
  • Erweiterte Spalten
  • Advanced Row
  • Buttons
  • Search
  • Responsive Conditions
  • Display Conditions
  • Masonry Gallery
  • Documentation

Ich glaube, ich habe nicht zu viel versprochen. Es ist echt krass, was du alles mit diesen Spectra Blöcken verwirklichen kannst.

Fazit

Im letzten Jahr ist es um die Ultimate Blocks for Gutenberg ziemlich leise geworden. Jetzt wissen wir warum. Das Produkt wurde von Grund auf neu entwickelt und ist jetzt unter dem Namen Spectra erhĂ€ltlich. Der Name wurde vom Wort „spectrum“ abgeleitet und soll auf das große Spektrum an unterschiedlichen Gutenberg-Blöcken hinweisen.

Ich bin begeistert von Spectra, was meinst du dazu?

Wenn du allerdings einen voll ausgewachsenen Page Builder möchtest, ist Elementor oder Beaver Builder einen Blick wert.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.