Inhalte direkt im Frontend bearbeiten Frontend-Editing
Damit Sie gleich sehen können, wie Ihre Inhalte im Frontend wirken, können Sie diese mit bee.tools einfach direkt über das Frontend pflegen. So sehen Sie unmittelbar, wie Ihre Texte und Bilder auf der Webseite aussehen.
Nochmal kurz zusammengefasst
Bevor wir ins Detail gehen, hier nochmal die Fakten:
- bee.tools ähnelt eher dem Bearbeiten einer Zeitung. Mehrere Artikel bilden den Inhalt einer Seite.
- Kategorien sind zum Strukturieren Ihrer Webseite erforderlich.
- Nur Startartikel können Menüpunkte sein.
- Bilder und andere Downloads werden in der Mediathek abgelegt.
Frontend-Editing aktivieren
Das Frontend-Editing können Sie über 2 Wege aktivieren.
Methode 1:
- Klicken Sie in der Artikelübersicht auf das Auge-Icon vor dem gewünschten Artikel.
- Wählen Sie eine Domain, über welche Sie den Artikel bearbeiten wollen (Über die Domain wird das Template bzw. Design gewählt).
- Ihr Frontend öffnet sich in einem neuen Tab.
Methode 2:
- Klicken Sie in der “Artikel bearbeiten”-Maske auf das Auge-Icon (preview).
- Wählen Sie eine der vorgegebenen Optionen, bevor der Artikel im Backoffice geschlossen wird.
- Wählen Sie eine Domain, über welche Sie den Artikel bearbeiten wollen (Über die Domain wird das Template bzw. Design gewählt).
- Ihr Frontend öffnet sich in einem neuen Tab.
Inhalte im Frontend bearbeiten
Wenn das Frontend-Editing aktiv ist, erkennen Sie das daran, dass im Frontend Ihre einzelnen Elemente mit einem farbigen Rahmen umgeben sind. Alle mit Rahmen umgebenenen Elemente können bearbeitet werden. Fahren Sie nun mit der Maus über ein solches eingerahmtes Element, wird das Element hervorgehoben und Sie erhalten einen Hinweis, um welche Art von Element es sich hierbei handelt.
Inhaltselement bearbeiten + sortieren
- Fahren Sie mit der Maus über das gewünschte Element.
- Führen Sie einen Rechtsklick aus.
- Wählen Sie “Bearbeiten” aus dem Kontextmenü.
- Es öffnet sich ein Popup mit der gewohnten Ansicht, um das Element zu bearbeiten.
- Klicken Sie auf “save”, um Ihre Änderungen am Element zu speichern.
Inhaltselement hinzufügen
- Fahren Sie mit der Maus über das Element, das vor (oder nach) Ihrem neuen Element stehen soll.
- Führen Sie einen Rechtsklick auf dem Element aus.
- Wählen Sie das gewünschte Element aus dem Kontextmenü.
- Im Bereich “Einfügen: Vorher oder danach einfügen” wählen Sie nun, ob das neue Element vor oder nach Ihrem geklickten Element stehen wird.
- Fügen Sie Ihre Inhalte ein.
- Mit einem Klick auf “save” wird das neue Element angelegt.
Inhaltselement löschen
- Fahren Sie mit der Maus über das gewünschte Element.
- Führen Sie einen Rechtsklick auf dem Element aus.
- Wählen Sie “Block löschen” aus dem Kontextmenü.
- Bestätigen Sie das Löschen mit einem Klick auf “OK”.
Gesamten Artikel bearbeiten (inkl. Artikel-Einstellungen)
- Fahren Sie mit der Maus über ein eingerahmtes Element.
- Führen Sie einen Rechtsklick auf dem Element aus.
- Wählen Sie “Artikel bearbeiten” aus dem Kontextmenü.
- Es öffnet sich ein Popup mit der “Artikel bearbeiten”-Maske.
- Sichern Sie Ihre Änderungen mit einem Klick auf “save”.
Inaktive Artikel zeigen
Inaktive Artikel werden im Frontend nicht dargestellt. Dies kann jedoch auf zwei Wege im Frontend-Editing aktiviert werden.
Entweder aktivieren Sie das Frontend-Editing über einen inaktiven Artikel. In diesem Fall wird automatisch der Schalter "Inaktive Artikel zeigen" aktiviert.
Alternativ können Sie dies auch manuell über das Kontextmenü aktiveren.
Hinweis: Bei "inaktive Artikel zeigen"-Aktivierung, werden alle inaktiven Artikel gezeigt. Dies kann zur Folge haben, dass das Aussehen der Webseite nicht mehr dem realen Aussehen übereinstimmt.
Entweder aktivieren Sie das Frontend-Editing über einen inaktiven Artikel. In diesem Fall wird automatisch der Schalter "Inaktive Artikel zeigen" aktiviert.
Alternativ können Sie dies auch manuell über das Kontextmenü aktiveren.
Hinweis: Bei "inaktive Artikel zeigen"-Aktivierung, werden alle inaktiven Artikel gezeigt. Dies kann zur Folge haben, dass das Aussehen der Webseite nicht mehr dem realen Aussehen übereinstimmt.
Smartphone-Testing
Mit Ihrem Smartphone können Sie mithilfe des QR-Codes im Kontextmenü die Webseite aufrufen. So können Sie prüfen, ob die Bedienbarkeit und Lesbarkeit Ihren Anforderungen entspricht. Sie können dabei jedoch nur aktive Artikel öffnen.
Frontend-Editing deaktivieren
Wenn Sie Ihre Bearbeitungen beendet haben und das Frontend-Editing deaktivieren möchten, loggen Sie sich einfach aus dem Backoffice aus. So lange Sie im Backoffice eingeloggt sind, bleibt das Frontend-Editing aktiv.
Weitere Hilfeseiten
- Grundaufbau
- SEO
- Web
- Mediathek
- Medienverwaltung
- Mediaordner
- Upload von Bildern & Dateien
- Videos uploaden & bearbeiten
- Mediadaten bearbeiten & löschen
- Mediadaten löschen
- Verwendungsprüfung einer Mediadatei
- Mediadatei ersetzen
- Bild rotieren & spiegeln
- Bild zuschneiden & neues Bild erzeugen
- PDF in JPG konvertieren
- PNG in JPG konvertieren
- GIF in JPG konvertieren
- JPG + PNG: Wasserzeichen hinzufügen + Bild in Bild
- MP4-Dateien in HTML5-Video konvertieren
- Mediadaten: Informationen auslesen + hinterlegen
- Mediadaten: Copyright-Auszeichnung
- Bilder für das Web optimieren
- Mediensammlung
- Massenbearbeitung von Mediadaten
- Bildoptimierung
- HowTo: Mediathek bereinigen
- HowTo: Bildfreigabe
- HowTo: Video SEO-Ranking
- Webshop
- Shop-Modul
- Basis-Modul Webshop
- Vorbereitung für das Google Merchant Center
- Gutschein Add-on
- Anbindung verschiedener Zahlungsprovider
- Anbindung an Ihr Warenwirtschaftssystem / PIM
- Bestellverwaltung Add-on
- Gespeicherte Bestellungen Add-on
- Preisgruppen / Individualpreise Add-on verfügbar
- Individuelle Sonderprogrammierung / Erweiterungen
- Bestellauswertungen Add-On
- Shop-Modul
- Leitfäden
- Was ist gutes Design?
- Was macht Webdesign besonders?
- Wie beeinflusst das Design die User Experience?
- Häufige Fehler im Webdesign
- Tipps: die Schrift
- Tipps: User Experience
- Wodurch wird mein Design zeitlos?
- Gibt es gesetzliche Vorgaben für mein Design?
- Worauf muss ich beim Arbeiten im Web mit meinem Design achten?
- Weitere Informationen
- Suchmaschinenoptimierung
- Was ist gutes Design?
- Weitere Funktionen
- Release Notes
- CMS bee.tools® 19 - Release Note
- CMS bee.tools® 18 - Release Note
- CMS bee.tools® 17 - Release Note
- CMS bee.tools® 16 - Release Note
- CMS bee.tools® 15 - Release Note
- CMS bee.tools® 14 - Release Note
- CMS bee.tools® 13 - Release Note
- CMS bee.tools® 12 - Release Note
- CMS bee.tools® 11 - Release Note
- CMS bee.tools® 10 - Release Note