Blog

Online Marketing noch besser machen

Tutorial, wie du mit dem ProcessWire CMS Webseiten kreierst und editierst

Screenshot: Titel und ProcessWire Backend
Screenshot: Titel und ProcessWire Backend

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, zum Beispiel 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 reduzieren 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.

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

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, wie auf der jeweiligen Webseite. Komplexe Elemente, werden für dich sinnvoll beschriftet. All das ist möglich durch individuelles oder maßgeschneidertes Programmieren.

Zum Start loggen dich ein.

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

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

Diese Struktur entspricht genau der Aufteilung der Webseiten. Folglich sind Seiten mit einer Zahl dahinter 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 von ProcessWire.

Was du auf deiner Seite findest

Sobald du deine 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 am meisten begegnen wirst.

Text- oder Datumsfelder

In der Abbildung weiter oben findest du ein Beispiel vom Textfeld mit der Bezeichnung Menü 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: CKEditor WYSIWYG 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

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 dann 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.

Du bekommst schon während du die Änderungen machst ein wesentlich besseres Gefühl für den Fluss deines Inhalts.

Speichere die Änderungen.

Ein weiterer Vorteil des Frontend Editierens ist, dass du sofort die frisch geänderte Webseite sehen. 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?

Du sehen also, ProcessWire ist für dich leicht bedienbar. Die Software bietet für deine Unternehmenswebsite eine sichere und flexible programmatische Lösungzugleich. - Kontaktiere mich gerne, um mehr über die Möglichkeiten zu erfahren oder ein weiteres Tutorial in Text/Bild Formzu bekommen.

Weiterführende Links

WYSIWYG CKEditor Tutorial

Autor/in: Iris Mitlacher, Datum (inkl. Änderungen): 10.05.2019