Training

Dein Online Marketing noch besser machen

Wie du mit dem ProcessWire CMS Webseiten editierst

Vorzüge von ProcessWire

Bevor du erfahren wirst, wie komfortabel das Kreieren/Editieren in ProcessWire ist, einige wichtige Details über die Vorzüge der Software. ProcessWire weist wesentlich mehr Funktionen gegenüber oftmals verwendeten Content Management Systemen, wie WordPress oder Joomla auf.

Die Software lässt sich flexibel programmieren. So ist es nicht nur ein CMS, sondern auch ein Content Management Framework.

Das bedeutet, dass du durch ProcessWire folgende Vorteile hast:

  • das Design / die Programmierung kann pro Seite variieren
  • die Nutzung neuster Marketing-Technologien ist möglich
  • Seiten lassen sich flexibel für Suchmaschinen und Nutzer optimieren
  • nur Inhalte, die von dir veränderbar sind, werden im Backend gezeigt
  • jedes Feld hat klare Instruktionen für die Inhalte

Ein weiter Vorteil ist, dass ProcessWire durch seine Architektur sichere Programmierung fördert.

Du reduzierst so die Risiken deines Unternehmens, dass deine Website kompromittiert wird.

ProcessWire hat in den letzten 5 Jahren, seitdem ich es einsetzte, nur Funktionsupdates erhalten. Es brauchten keine Sicherheitsupdates installiert werden. Das bedeutet weniger Wartungen, wie bei anderen CMS.

Wie nun macht ProcessWire das Kreieren/Editieren von Webseiten komfortabler?

Webseite LIVE editieren
Screenshot: Webseite LIVE editieren

Wie Du eine neue Seite kreierst

Zum Erstellen/Ändern von Inhalten verwende ein beliebiges Gerät, einen PC, ein Tablet oder ein Smartphone.

Die Seiten werden übersichtlich zur Auswahl angezeigt. Du findest jedes Element in der Reihenfolge der jeweiligen Webseite. Komplexe Elemente, werden für dich sinnvoll beschriftet. All das ist möglich durch individuelles oder maßgeschneidertes Programmieren.

Zum Start logge dich ein.

Rufe die Software durch deine Firmenwebsite auf https://www.meinefirma.de/xyz/ im Browser auf. Gebe deinen Nutzernamen und in der nächsten Zeile das Passwort ein.

Nach deinem erfolgreichen Login, bekommst du im Backend von ProcessWire die Baumstruktur deiner Website zu sehen (Abb. oben Titelscreenshot).

Die Struktur entspricht genau der Aufteilung der Webseiten. Folglich sind Seiten mit einer Zahl Container, die weitere Seiten enthalten.

Um eine neue Seite, hier einen Newsartikel, zu erstellen, fahre mit der Maus über den Container mit der Bezeichnung „News". Seitlich von News erscheinen mehrere Buttons (Abb. oben Titelscreenshot). Klicken Sie den „Neu" Button.

Titel eingeben
Screenshot: ProcessWire, Titel neuen Blogartikels eingeben

Gebe den neuen Titel in das erste Feld ein. Das zweite Feld darunter erstellt die nutzer- und suchmaschinenfreundliche URL der Seite automatisch. Willst du eine andere Bezeichnung, ändern diese manuell.

Nachdem du den neuen Titel gespeichert hast, öffnet sich die neue Webseite zum Editieren im Backend.

Was du auf deiner Seite findest

Sobald du die neue Seite aufgerufen hast, siest du die aktuelle Position in Breadcrumb Format der Seite z. B. „Home > News > Mein Test".

Darunter befinden sich mehrere Tabs. Momentan ist der Tab „Inhalt" aktiviert. Kreiere oder ändere nun die Inhalte deiner neuen Webseite.

ProcessWire Seiten Tabs
Screenshot: ProcessWire, Seiten Tabs

Hier ist eine kurze Übersicht von den Elementen, denen du innerhalb dieses Tabs am meisten begegnen wirst. Die Elemente werden vom Template, das als Basis der Seite dient, bestimmt.

Text- oder Datumsfelder

In der Abbildung weiter oben findest du ein Beispiel vom Textfeld mit der Bezeichnung Titel.

Den Stern darunter kennst du wahrscheinlich schon aus Online-Formularen, das Feld muss einen Inhalt bzw. Text enthalten.

WYSIWYG Editor

Inhaltsfelder mit gestylten Texten oder Fotos editiere durch einen WYSIWYG (What you see is what you get) Editor.

Diese Editoren sind visuell, d.h. du kannst einschätzen, wie deine Inhalte Online aussehen.

WYSIWYG TinyMCE
Screenshot: WYSIWYG TinyMCE

Neben dem robusteren TinyMCE wird oftmals der CKEditor verwendet.

Eine generelle Anleitung, wie du diese Editorn nutzt, finden du hier: WYSIWYG Editor Tutorial.

Fotos oder Grafiken laden

Um ein Foto/Grafik im WYSIWYG Editor hinzuzufügen, lade das Bild zuvor auf der jeweiligen Webseite. Klicke dazu unter das Segment „Fotos/Bilder" auf „Datei auswählen".

ProcessWire Bild laden
Screenshot: ProcessWire Bild laden

Du bekommst das Ordnerverzeichnis deines Computers (PC, Tablet oder Smartphone) angezeigt. Wähle das Foto zum Hochladen in ProcessWire aus.

Je nach den Aufgaben der Seite sind eventuell weitere Elemente für dich wichtig. Diese Elemente werden, wie zuvor bereits erwähnt, individuell oder maßgeschneidert programmiert.

Deine neue Seite anschauen

Um einen Blick auf deine neue Webseite zu werfen, ohne sie schon Online zu platzieren, klicke auf „Speichern" und wechsle den Tab ganz oben von „Inhalt" zu „Ansehen".

Neue Seite ansehen
Screenshot: neue Seite ansehen

Je nach dem Design deiner Website wirst du die Inhalte so sehen, wie sie letztendlich Online gezeigt werden.

Bist du mit dem Ergebnis zufrieden, klicke im Backend ganz oben neben den grünen Button „Speichern" auf „Speichern und veröffentlichen".

Deine neue Webseite ist nun offiziell Online.

Um Änderungen zu machen, logge dich erneut ein. Doch eventuell hast du noch eine weitere Editor-Option.

Bonus: Deine neue Webseite im Frontend editieren

Bis jetzt konntest du alle Schritte sowohl auf Ihrem PC, Tablet oder Smartphone durchführen. Auf deinem PC oder Notebook gibt es noch eine weitere Möglichkeit die Inhalte Ihrer Webseite zu ändern.

Du loggst dich dazu ins Backend wie zuvor ein. Dann rufst du in einem neuen Browserfenster deine Webseite Online auf. Fahre direkt über den Text (Abb. schwarzer Pfeil vorheriger Screenshot „neue Seite ansehen") deines neuen Artikels.

Webseite LIVE editieren
Screenshot: Webseite LIVE editieren

Ein kleines Quadrat mit 2 Linien erscheint neben dem Mauszeiger. Doppelklicke den Text und der WYSIWYG Editor wird auf der gezeigten Seite direkt aktiviert. Nun editiere genauso wie zuvor im Backend.

Da bekommst du während du die Änderungen machst ein wesentlich besseres Gefühl für den Fluss deiner Inhalte.

Speichere die Änderungen.

Ein weiterer Vorteil des Frontend Editierens ist, dass du sofort die frisch geänderte Webseite siehst. Du sparst somit den Schritt eines weiteren Klicks für die Anzeige deiner Webseite. Diese Funktion ist seit ProcessWire 3.0 verfügbar.

Hast du Fragen zu ProcessWire?

ProcessWire ist leicht bedienbar. Die Software bietet eine sichere und flexible programmatische Lösung zugleich. - Kontaktiere mich gerne, um mehr über die Möglichkeiten zu erfahren oder ein weiteres Tutorial in Text/Bild Form zu bekommen.

Weiterführende Links

WYSIWYG CKEditor Tutorial

Autor/in: Iris Mitlacher