Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE

Beschreibung

Otter ist ein Page-Builder-Plugin für Gutenberg-Blöcke, das dem WordPress-Block-Editor (auch bekannt als Gutenberg) zusätzliche Funktionen hinzufügt, um das Erstellen von Seiten zu vereinfachen, ohne dass man traditionelle Page-Builder wie Elementor und Divi benötigt.

Quicklinks 🔗

• Möchtest du Otter Blocks in Aktion sehen, bevor du es installierst? OTTER-BLOCKS-DEMO ANZEIGEN
• Bist du neu im Ökosystem der Gutenberg-Blöcke? Lies dir unseren Artikel zu GUTENBERG ERKLÄRT durch
• Benötigst du Hilfe bei der Einrichtung? Schau dir unsere DOKUMENTATION an
• Bist du an Otter PRO interessiert? Hier findest du mehr Details zu OTTER PRO

Mit Otter Blocks erhältst du Zugriff auf

• Über 20 zusätzliche Blöcke für Gutenberg
• Sammlung von Vorlagen
• Ganzseiten-Templates
• Sichtbarkeitsbedingungen
• Custom CSS
• Animations
• Dynamische Inhalte und mehr

Für alle Blöcke, die auf deiner Website vorhanden sind – auch von Drittanbietern.

Mit der Block-Funktion „Individuelles CSS“ kannst du die CSS-Eigenschaften jedes Gutenberg-Blocks direkt auf der Seite anpassen, während du mit der Animationsfunktion schnell und einfach Animationen zu jedem Block hinzufügen kannst, um die Attraktivität deiner verschiedenen Seitenblöcke und -abschnitte zu erhöhen.

Mit der Sichtbarkeitsbedingungen-Funktion von Otter kannst du festlegen, welche Bedingungen erfüllt sein müssen, damit die von dir ausgewählten Blöcke auf der Seite angezeigt werden.

Die Vorlagen-Bibliothek beinhaltet eine Reihe verschiedener Elemente in vielen Stilen, mit denen du großartige Seiten erstellen kannst. Alle wichtigen Bereiche deiner Website sind dabei: Header, Testimonials, Preistabellen, Abschnitte und mehr.

Hier findest du einen schnellen Überblick über Otter Blocks

Wie können dir die Gutenberg-Blöcke von Otter helfen? 🤔

Ein WordPress-Plugin für Gutenberg-Blöcke

Otter fügt über 26 herausragende und nützliche Blöcke hinzu, die das Erstellen von Seiten in Gutenberg zum Kinderspiel machen!

Mehr als nur Blöcke – du benötigst auch erweiterte Anpassungsoptionen, um Stil und Design nach deinen Wünschen zu steuern. Mit Otter bekommst du all das.

Jeder Block verfügt über Anpassungsfunktionen, mit denen du deine Website ganz nach deinen Vorstellungen gestalten kannst:

• Farbsteuerung für Primärfarben, Akzente und Hintergründe.
• Animation auf Knopfdruck: Hintergrund, Springen, Ausblenden, Drehen, Rotieren, Gleiten, Rollen, Lichtgeschwindigkeit und mehr.
• Typografiesteuerung von Abständen bis zur Schriftauswahl.

Your AI Assistant for the Block Editor

Otter brings AI right into the block editor to help you build, not just edit. Describe what you want, and Otter creates it as real, editable blocks.

• AI Content Generator: Generate a full section or an entire page from a simple prompt with the AI Block. Pick a type like Hero, Features, Pricing, Testimonials, or Call to action, or describe your own. Otter matches your theme colors and current page style, so the result arrives on-brand.

• AI Toolbar: Select any text to rewrite, summarize, expand, shorten, translate, change tone, fix grammar, or simplify it, all without leaving the page. You can also create your own custom actions with your own prompts and reorder the toolbar to fit how you work.

• AI Form Autoresponder [PRO]: Reply to every form submission with a personalized, AI-written message. Write a prompt using your form fields, set a fallback message, and let AI craft the rest.

• Native WordPress AI Connectors: Otter’s AI works with the native AI adapters in WordPress 7.0, so you connect your preferred AI provider once, and every Otter AI feature uses it.

Mobile Responsivität von Otter Blocks

Erstelle mit den integrierten responsiven Einstellungen von Otter mobilfreundliche Designs. Jeder Block kann angepasst werden, um ein einheitliches Erlebnis auf Mobilgeräten, Tablets und Desktops zu gewährleisten.

Ein WordPress-Plugin für Gutenberg-Block-Bedingungen

Möchtest du bestimmte Blöcke nur anzeigen, wenn ein Benutzer angemeldet oder abgemeldet ist? Wie wäre es, wenn es sich um einen Kunden deines Shops handelt, im Gegensatz zu einem Redakteur für deinen Blog oder einer anderen Benutzerrolle? Mit der in Otter verfügbaren Bedingungen-Funktion für Gutenberg-Blöcke ist das möglich. Führe ein Upgrade auf die PRO-Version von Otter durch, um die leistungsstarken Funktionen weiterer Blockbedingungen zu nutzen, wie z. B.:

• URL Query String
• Datumsbereich
• Wochentag
• Tageszeit
• WooCommerce-Produkte im Warenkorb
• WooCommerce-Gesamtausgaben
• WooCommerce-Gesamtbetrag im Warenkorb
• WooCommerce-Kategorien
• WooCommerce-Schlagwörter
• WooCommerce-Attribute
• Cookie-basiert
• und mehr

Ein WordPress-Plugin für Gutenberg-Block-Animationen

Beeindrucke die Besucher deiner Website mit tollen Animationen, die du zu jedem Block auf der Seite hinzufügen kannst. Mit über 50 Animationen zur Auswahl macht Otter es möglich, jedem Beitrag oder jeder Seite auf deiner Website das gewisse Etwas zu verleihen.

Ein WordPress-Plugin für Gutenberg-Pop-ups

Pop-ups sind eine der ältesten Techniken zur Lead-Generierung und Übermittlung von Mitteilungen im Internet. Mit dem in Otter verfügbaren Pop-up-Block für Gutenberg kannst du Pop-ups aus jedem anderen in Gutenberg verfügbaren Block erstellen!

Nimm eine Feinabstimmung deiner Pop-ups vor, indem du festlegst, wann sie erscheinen und wie sie geschlossen werden können. Mit unserem Pop-up-Block hast du Zugriff auf mehrere Auslöser: beim Laden, beim Verlassen, beim Klicken auf einen Anker und beim Scrollen.

Außerdem kannst du dein Pop-up mit individuellen Overlays gestalten, um es an deine Markenidentität anzupassen und mehr Aufmerksamkeit zu erregen. Live-Demo ansehen

Globale Standardeinstellungen für Otter-Blöcke

Bist du es leid, jedes Mal die gleichen Optionen einstellen zu müssen, wenn du einen Block zur Seite hinzufügst? Mit Otter kannst du die Standardkonfiguration für einige der am häufigsten verwendeten Blöcke wie den Abschnitts-Block, den Icon-Block, die erweiterte Überschrift und weitere festlegen.

In Otter verfügbare Blöcke:

Akkordeon-Block für Gutenberg [KOSTENLOS]

Verwende diesen Block, um vertikal gestapelte Inhaltslisten zu erstellen, die mit einem Klick auf einen Button ein- oder ausgeblendet werden können; besser bekannt als Akkordeons. Live-Demo ansehen

Erweiterter Überschriften-Block für Gutenberg [KOSTENLOS]

Der Überschriften-Block, von dem du nicht wusstest, dass du ihn benötigst. Dieser Otter-Block verfügt über alle Funktionen des Standard-Überschriftenblocks und bietet darüber hinaus einige weitere Möglichkeiten, wie die Änderung der Schrift, das Hervorheben von Textteilen und vieles mehr.Live-Demo ansehen

KI-Block [KOSTENLOS]

Build with AI, right in the editor. Describe the section or page you want, and the AI Block generates it as real, editable Gutenberg blocks, matched to your theme colors and page style. Adjust anything by hand afterward, just like blocks you built yourself.

Button-Gruppen-Block für Gutenberg [KOSTENLOS]

Erstelle schnell und einfach mehrere Buttons und zeige sie je nach Gerät, auf dem die Seite angezeigt wird, vertikal oder horizontal an. Live-Demo ansehen

Countdown-Block für Gutenberg [FREE]

Zählst du die Tage bis zu einem großen Event? Zeige es, indem du diese Gutenberg-Blöcke verwendest. Du kannst von Tagen, Stunden, Minuten oder Sekunden herunterzählen. Live-Demo ansehen

Kontaktformular-Block für Gutenberg [KOSTENLOS]

Füge schnell und einfach ein Kontaktformular an einer beliebigen Stelle auf der Seite ein. Optional kannst du das Formular in eine Maschine zur Lead-Generierung verwandeln, indem du Brevo (Sendinblue) oder Mailchimp integrierst. Außerdem kannst du die Datenverwaltung durch die Einbindung von Webhooks optimieren und durch die Integration von hCaptcha für mehr Sicherheit sorgen. Live-Demo ansehen

Inhaltszeitleisten-Block [KOSTENLOS]

Zeige Ereignisse elegant in einer chronologischen Zeitleiste an. Perfekt, um historische Ereignisse, Prozessschritte oder wichtige Meilensteine hervorzuheben.

Content Slider Block [FREE]

A slider where every slide can hold any Gutenberg blocks, not just images. Add headings, text, buttons, images, or full layouts like testimonial, pricing, or feature cards inside each slide, then let visitors move through them with arrows or dots. Unlike a standard image slider, the Content Slider turns anything you build in Gutenberg into a swipeable carousel, with no extra plugin needed.

Kreisförmiger Fortschritts-Block [KOSTENLOS]

Zeige deinen Fortschritt mit einem schicken Kreiszähler-Block. Live-Demo ansehen

Flip-Box-Block [KOSTENLOS]

Erstelle eine Karte mit einem Flip-Effekt, in die du beliebige Inhalte oder Blöcke einfügen kannst, die in Gutenberg verfügbar sind. Live-Demo ansehen

Icon-Listen-Block für Gutenberg [KOSTENLOS]

Peppe langweilige Punktelisten auf, indem du individuelle Icons als Aufzählungspunkte verwendest. Live-Demo ansehen

Icon-Block für Gutenberg [KOSTENLOS]

Zeige jedes Icon von Font Awesome oder aus unserer eigenen Liste mit individuellen Symbolen an beliebiger Stelle auf der Seite an. Ändere Farben, füge Ränder hinzu und kombiniere sie mit anderen Blöcken, um das Aussehen deiner Seite zu verbessern. Live-Demo ansehen

Lottie-Animations-Block für Gutenberg [KOSTENLOS]

Hast du schon von Lottie gehört? Hervorragend! Mit dem Lottie-Animations-Block von Otter kannst du Lottie-Animationen überall in Gutenberg anzeigen. Live-Demo ansehen

Karten-Block für Gutenberg [KOSTENLOS]

Entscheide dich zwischen einem Open-Street-Map- oder Google-Maps-Block und erstelle Marker deiner Sehenswürdigkeiten für deine Website-Besucher. Mit unserem Karten-Block kannst du das Karten-Erlebnis anpassen: Passe die Farbe und Beschreibung der Markierungen an, suche Orte nach Namen oder Koordinaten, füge Kartensteuerelemente hinzu und entferne sie oder ändere die Größe und den Stil der Karten mit wenigen Klicks. Live-Demo ansehen

Fortschrittsbalken-Block [KOSTENLOS]

Zeige deinen Fortschritt mit einem schicken Fortschrittsbalken-Block. Live-Demo ansehen

Beiträge-Block für Gutenberg [KOSTENLOS]

Mit diesem Block kannst du Elemente aus Beiträgen, Seiten und individuellen Inhaltstypen in die aktuelle Seite einfügen, die du gerade bearbeitest. Der Beiträge-Block lässt dich eine bestimmte Anzahl von Beiträgen auf verschiedenen Seiten anzeigen. Die für diesen Block verfügbaren Anpassungen umfassen Bereiche wie Stile, Inhaltstypen, Einstellungen, Designs und Layout.

Produktbewertungs-Block für Gutenberg [KOSTENLOS]

Bloggst du über ein Produkt, das du liebst? Oder betreibst du vielleicht eine Rezensionswebsite? Mit diesem Block kannst du eine Bewertungstabelle für den Artikel erstellen und seine Funktionen, seine Vor- und Nachteile sowie optionale Kauf-Links auflisten. Live-Demo ansehen

Pop-up-Block für Gutenberg [KOSTENLOS]

Erstelle atemberaubende Pop-ups und leg fest, wann sie auftauchen und wie man sie schließen kann. Live-Demo ansehen

Slider-Block für Gutenberg [KOSTENLOS]

Verwende diesen Gutenberg-Block, um Bild-Slider auf jeder Gutenberg-Seite zu erstellen. Zu den Einstellungen gehören die Höhe des Sliders, die Verzögerung, die Anzahl der Slides pro Seite, die automatische Wiedergabe und mehr. Live-Demo ansehen

Abschnitts-Block für Gutenberg [KOSTENLOS]

Ein Spalten-Block der Extraklasse! Mit diesem Block kannst du einen Abschnitt mit bis zu 6 Spalten erstellen, die jeweils eine individuelle Hintergrundfarbe, ein Bild oder einen Farbverlauf haben können. Verwende die responsiven Funktionen dieses Blocks, um den Innen- und Außenabstand für Desktop-, Tablet- und Mobilgerätebildschirme festzulegen. Live-Demo ansehen

Stripe Checkout [KOSTENLOS]

Dieser Block ist sehr praktisch, wenn du ein paar Produkte, wie E-Books, Lizenzen etc., verkaufen möchtest, ohne gleich einen ganzen Shop einzurichten.

Teilen-Icons-Block [KOSTENLOS]

Die Teilen-Buttons helfen den Besuchern deiner Website, damit sie Inhalte auf beliebigen sozialen Netzwerken teilen können. Live-Demo ansehen

Tabs-Block für Gutenberg [KOSTENLOS]

Verwende diesen Block, um horizontal gestapelte Inhaltslisten zu erstellen, die mit einem Klick auf einen Button ein- oder ausgeblendet werden können; besser bekannt als Tabs. Live-Demo ansehen

In-den-Warenkorb-Block für Gutenberg [PRO]

Füge einen „In den Warenkorb”-Button für jedes beliebige WooCommerce-Produkt an einer beliebigen Stelle in dem Beitrag oder auf der Seite ein, die du gerade bearbeitest.

Geschäftszeiten-Block für Gutenberg [PRO]

Erstelle eine ansprechend gestaltete Tabelle mit den Öffnungszeiten und passe die Einstellungen so lange an, bis sie perfekt ist.

Live-Suche [PRO]

Die Funktion „Live-Suche“ erweitert den Kernblock „Suche“, indem zwei neue Attribute (isLive und postTypes) hinzugefügt werden, die du im Inspektor unter dem Live-Suchfeld einstellen kannst.

Modal [PRO]

Implementiere modale Dialoge für ein interaktives Erlebnis, bei denen Formulare, Inhalte oder Ankündigungen direkt im Seitenlayout angezeigt werden.

Bewertungs-Vergleichstabelle [PRO]

Bereite dich darauf vor, deine Leser mit dem Otter-Block „Bewertungs-Vergleichstabelle“ zu beeindrucken. Erstelle mühelos professionell aussehende Produktvergleichstabellen für deinen Blog oder deine Website.

Wir fügen kontinuierlich neue Gutenberg-Blöcke zu Otter hinzu, um dir beim Erstellen deiner Website-Seiten zu helfen. Teile uns gerne in unserem Support-Forum mit, was wir noch vergessen haben! Einige andere Blöcke umfassen:

Bereit zum Importieren von Vorlagen und Ganzseiten-Templates in Otter:

Starte deine Website ganz einfach mit unseren anpassbaren Vorlagen und ganzseitigen WordPress-Templates. Importiere fertige Designs mit nur einem Klick und leg sofort los.

Explore a wide range of Otter patterns and full-page templates for services, testimonials, pricing, features, call-to-action sections, and more. Browse the available designs here.

Erhalte mehr Optionen in Otter PRO 🤩

WooCommerce-Builder-Blöcke

Erstelle individuelle Seiten für einzelne Produkte mit den WooCommerce-Builder-Blöcken von Otter. Alle neuen Funktionen sind darauf ausgelegt, deine Konversionsrate zu maximieren und weitere Verbesserungen zu erzielen.

Mit Otter PRO erhältst du noch mehr Funktionen, inklusive:

• In-den-Warenkorb-Block
• Geschäftszeiten-Block
• Modal-Block
• Produktbewertungs-Vergleichs-Block
• Live-Suche-Block
• PRO-Add-ons für kostenlose Blöcke
• Mehr Optionen für dynamische Inhalte
• Mehr Optionen für Sichtbarkeitsbedingungen
• Mehr Vorlagen und Ganzseiten-Templates
• und mehr!

Du kannst Otter Blocks live ausprobieren – keine Einrichtung erforderlich. Klicke hier, um es auszuprobieren.

Für wen ist Otter gedacht? 👀

• Für alle, die die besten Funktionen des neuen Gutenberg-Editors mit nützlichen und benutzerfreundlichen Gutenberg-Blöcken verwenden möchten.
• Für alle, die darüber nachdenken, von traditionellen Page-Buildern wie Elementor und Divi Builder wegzukommen und stattdessen den neuen Gutenberg-Block-Editor zu verwenden.
• Für alle, die versuchen, Gutenberg-Seiten in Rekordzeit zu erstellen.
• Für alle, die versuchen, Gutenberg-Blöcke basierend auf Bedingungen wie dem Status „Benutzer angemeldet/abgemeldet“ zu verbergen oder anzuzeigen.
• Für alle, die versuchen, Animationen zu Gutenberg-Blöcken hinzuzufügen.

Schauen wir uns ein paar Anwendungsfälle an 🚀

• Reiseblogger: Verschönere deinen Reiseblog mit faszinierenden Karten, indem du Karten-Blöcke von Otter und Google Maps verwendest, um deine Reisen der Welt zu präsentieren.

• Non-Profit-Organisationen: Begeistere dein Publikum und wirb für dein Anliegen mit den Kreiszähler- und Testimonial-Blöcken von Otter, um inspirierende Erfolgsgeschichten zu teilen.

• Blogger: Verbessere deine Blogbeiträge mit Teilen-Icons und biete deinen Lesern einfache Optionen zum Teilen. Verwende Slider, um Bildergalerien anzuzeigen und dein Publikum zu begeistern.

• Content-Ersteller und Verkäufer digitaler Produkte: Der Gutenberg-Block „Stripe Checkout“ macht es einfach, digitale Produkte wie E-Books, Online-Kurse, Softwarelizenzen oder digitale Kunstwerke zu verkaufen, ohne dass du einen kompletten Online-Shop einrichten musst. Mit diesem Block kannst du deinen Kunden ein reibungsloses und sicheres Erlebnis beim Checkout bieten.

• Produktbewerter: Erstelle informative und ansehnliche Vergleiche von Produktrezensionen mit einer Bewertungsvergleichstabelle, die den Benutzern hilft, fundierte Entscheidungen zu treffen.

• Restaurantbesitzer: Zeige deine Öffnungszeiten in einem stilvollen Format mithilfe von Geschäftszeiten-Blöcken an, damit Kunden dich leicht finden können.

Mitwirkender werden 💁‍♂️

Otter Blocks ist ein Open-Source-Projekt und wir freuen uns über Mitwirkende, die Teil unserer lebendigen Community werden möchten! Hilf uns dabei, das Plugin zu verbessern und noch besser zu machen – GitHub-Link

Nützliche Ressourcen 📌

• Erfahre mehr über WordPress in unserem Blog.
• Interessierst du dich für unsere anderen Plugins? Schau hier vorbei.
• Hol das Beste aus Otter Blocks mit unserer hilfreichen YouTube-Tutorials-Playlist heraus.

Das Plugin nutzt den Dienst von api.themeisle.com für den Zugriff auf die Vorlagen-Liste, die KI-Prompts und das Onboarding. Für den Zugriff auf den Template-Sammlungs-Dienst ist kein Konto erforderlich. Die Datenschutzerklärung findet man hier.