Intuitive Frontend-Bearbeitung in Drupal

5 min.
Display der Frontend-Bearbeitungsfunktionen

Im digitalen Zeitalter von heute liegt der Fokus auf Inhalten – eine Herausforderung für die Verantwortlichen der Webseite und ihre Content-Redakteure. Egal, ob es sich um einen persönlichen Blog, eine Unternehmenswebseite oder eine E-Commerce-Plattform handelt, die Notwendigkeit, hochwertige und ansprechende Inhalte bereitzustellen, ist von enormer Bedeutung.

Heutzutage ist es essentiell, den Redakteuren intuitive Tools und wichtige Funktionen bereitzustellen. Früher waren sie beim Bearbeiten von Webinhalten auf das Backend angewiesen, was bedeutete, dass sie die Verwaltungsoberfläche der Webseite öffnen mussten, um Änderungen vorzunehmen. Doch Content-Management-Systeme haben sich weiterentwickelt, um den Bedürfnissen der Nutzer gerecht zu werden. Moderne Systeme ermöglichen es Redakteuren, Inhalte direkt im Kontext der Live-Site über Frontend-Bearbeitungsfunktionen zu bearbeiten.

In diesem Artikel erläutern wir, wie Ihre Redakteure von der Frontend-Bearbeitung profitieren können. Zudem präsentieren wir Beispiele für Module, die diese Funktionalität Ihrer Drupal CMS-Plattform hinzufügen können.

Was bedeutet Frontend-Editing?

Frontend-Editing, auch als In-Place-Editing oder Inline-Editing bekannt, ist eine benutzerfreundliche Methode des Content Managements. Es erlaubt Redakteuren, Inhalte direkt im Frontend der Webseite zu bearbeiten, anstatt auf die traditionelle Backend-Verwaltungsoberfläche zugreifen zu müssen. Dieser Ansatz zielt darauf ab, den Bearbeitungsprozess zu vereinfachen und ein visuell nahtloses Redaktionserlebnis zu schaffen.

Video file

Die Vorteile der Frontend-Bearbeitung für Redakteure

Benutzerfreundliches Interface

Die Frontend-Bearbeitungsoberflächen sind intuitiv und benutzerfreundlich gestaltet und auch ohne technische Vorkenntnisse verständlich. Inhalte lassen sich leicht finden und aktualisieren. Das erleichtert das Bearbeiten von Inhalten, sodass Redakteure sich darauf konzentrieren können, hochwertige Inhalte direkt im Gesamtzusammenhang zu erstellen.

Schnellere Aktualisierung des Contents

Durch das Frontend-Editing werden die Schritte reduziert, die zur Aktualisierung von Inhalten nötig sind. Content-Redakteure können Abschnitte schnell bearbeiten, Layouts, Formate und Stile direkt auf der Seite ändern, ohne zwischen Backend- und Frontend-Oberflächen wechseln zu müssen. Dieser unmittelbare Zugang zur Bearbeitung spart den Redakteuren Zeit und Mühe.

Screenshot der Bearbeitungsanzeige im Backend
Screenshot der Bearbeitungsanzeige im Frontend

Visualisierung in Echtzeit

Durch Frontend-Bearbeitung sehen Redakteure ihre Änderungen in Echtzeit auf der Oberfläche der Webseite. Anders als bei der Backend-Bearbeitung, wo Änderungen separat in der Vorschau betrachtet werden, bietet das Frontend sofortige Visualisierung des Inhalts. Dieses direkte visuelle Feedback optimiert den Bearbeitungsprozess und führt zu einem präziseren Ergebnis.

Benutzerfreundlicher Ansatz

Content-Redakteure wissen, wie wichtig es ist, Inhalte zu erstellen, die ihre Zielgruppe ansprechen. Mit der Frontend-Bearbeitung können sie die Webseite aus der Perspektive der Besucher erleben. Diese direkte Interaktion erlaubt es Redakteuren, das Benutzererlebnis zu bewerten, Layouts zu testen und den Contentflow anzupassen, um sicherzustellen, dass die Inhalte den Erwartungen der Benutzer gerecht werden.

Screenshot der Frontend-Bearbeitung des Bildparagraphes
Screenshot des Ergebnisses der Frontend-Bearbeitung des Bildparagraphes

Optimierung der Drupal CMS-Plattform mit der Frontend-Bearbeitungsfunktionen

Drupal bietet mehrere Module, die die Implementierung von Frontend-Editing-Funktionalität in Ihre CMS-Plattform erleichtern, wie z.B. das “Frontend Editing” oder die "Paragraphs frontend UI".

Besonders hervorheben möchten wir an dieser Stelle, dass das Frontend-Editing-Modul von unseren zertifizierten Drupal-Experten entwickelt und gepflegt wird. Dank jahrelanger Erfahrung in der Entwicklung digitaler Lösungen für unsere Kunden haben wir die Notwendigkeit erkannt, diese Funktionalität mit der Drupal-Gemeinschaft zu teilen und sie als Out-of-the-Box-Funktion in unser CMS-System zu integrieren.

Mehr über unser CMS-System

Dieses Modul wurde als leichtgewichtige Integration konzipiert, die unabhängig von Kernmodulen wie Settings TrayContextual Links, oder Quick Edit. Anstatt sich auf diese Module zu verlassen, fügt es direkt Links zu Bearbeitungsformularen von Entitäten auf dem Frontend hinzu und bietet eine Seitenleiste zum Laden dieser Formulare als Iframes. Durch diesen Ansatz wird eine konsistente Gestaltung von Frontend- und Backend-Oberflächen erreicht.

Hauptmerkmale des Moduls "Frontend Editing":

  • Nahtlose Integration in jedes Frontend-System 
  • Anzeigekomponenten werden direkt im Frontend hinzugefügt, bearbeitet oder entfernt
  • Müheloses Verschieben der Frontend-Komponenten
Ein- und Ausschalter der Frontend-Bearbeitung
Frontend-Bearbeitung mit automatischer Vorschau

Highlights der neuesten Version

Content-Editoren können die Frontend-Bearbeitung jetzt über einen Ein/Aus-Schalter in der Benutzeroberfläche steuern. Mit dieser Funktion können User die Funktionalität aktivieren/deaktivieren, wenn sie einzelne Elemente der Frontend-Bearbeitung nicht auf einer Seite anzeigen möchten.

Um die Bearbeitung von Inhalten zu beschleunigen, haben wir eine “automatische Vorschau” aktiviert. Sie ermöglicht es den Editoren, Änderungen in Echtzeit zu prüfen, während diese im Seitenbereich vorgenommen werden, ohne dass das Element gespeichert und die Seite neu geladen werden muss.

Durch die Installation dieses Moduls erweitern Sie nicht nur die Funktionalität Ihres CMS-Systems, sondern bieten Ihren Redakteuren auch ein nahtloses und visuell ansprechendes Redaktionserlebnis.

Testen Sie es vor der Installation!

Artikel teilen via

Weitere Highlights

Fachwissen

Das Modul Content-Templates in Drupal

Modul Content-Templates

Wenn es um den Aufbau einer erfolgreichen Website geht, spielt die Inhaltserstellung eine...

4 min.
Fachwissen

Entkoppelte Suche mit Drupal Search API

Beispiel der Ergebnisse für die Suchanfrage

Wir haben dem Modul Search API Decoupled einen voll funktionsfähigen Javascript-Client hinzugefügt...

5 min.