Brizy Cloud – Grundlagen zum Erstellen einer Website

Ein Einstieg und Grund-Setup zum Erstellen einer Website in Brizy Cloud.

Das Backend

Unten links finden wie den Zugang zum WordPress Backend, Tastaturbefehle für die Bedienung des Brizy-Backends, ein Link zu der Dokumentation (englisch) und zur Brizy Website.

brizy backend wp

Darüber die Auswahl für die jeweiligen Ansichten, Desktop, Tablet und Mobile.

viewports

Es folgt das “Styling” Panel für die globalen Schriftarten und Farben.

styling

Dann das Panel “Reorder Blocks”, hier können wir die einzelnen Sektionen neu anordnen.

“Add Elements” ist das Panel, um Inhaltselemente auf die Website zu ziehen.

elements

Assets

Das obere Panel Assets ist das Verwaltungspanel für das CMS Brizy Cloud. Hier können wir

  • Seiten anlegen.
  • Blog Kategorien erstellen.
  • Blog-Artikel schreiben.
  • Popups erstellen.
  • Webhooks anlegen. Webhooks bieten die Möglichkeit, Server miteinander kommunizieren zu lassen. Dieses kann bei unterschiedlichen Webservices zum Nutzen kommen, eine Art “Universalschnittstelle” zwischen Diensten, Apps usw.
  • Custom Assets erstellen, damit können wir den Blog um eigene Felder ergänzen.
assets

und wir haben hier die Project Settings.

Project Settings

In den Project Settings haben wir die Tabs “Menus” und “Settings”. Unter Menus können wir unsere Navigationsmenüs anlegen. Zu den Menüs kommen wir weiter unten beim Seitenaufbau….

Settings

  • Site Settings, der globalen Title und Description Tag für die Website und der Favicon Upload. Das Favicon ist das kleine Icon, welches im Browser-Tab und in den abgespeicherten Lesezeichen zu sehen ist. Favicon = Favourite-Icon
  • Social Sharing, beim Teilen der Seiten in sozialen Netzwerken, verwendet Brizy Cloud diesen Inhalt, um ihn in Links anzuzeigen.
  • Custom CSS, wir können eigenen CSS Code eingeben.
  • Code Injection, wir können eigenen Code, z.B. Java Script in den Head Bereich und in den Footer Bereich der Website eingeben.
  • Redirects, wir können Weiterleitungsregeln hinzufügen.
site settings

Ein Website Projekt beginnen

Das HTML Sprach-Attribut

Brizy Cloud gibt Webseiten standardmäßig mit dem HTML Sprachattribut <html lang="en-US"> im Quelltext aus. Für Deutschland wäre <html lang="de-DE"> sinnvoll. Das HTML Attribut “lang” ist nützlich für die Browser, um zu wissen, in welcher Sprache die Website ist. Z.B. für die Sprachfilter der Suchmaschinen, Übersetzungsdienste, Screenreader usw.

Noch ist eine entsprechende Einstellung im Brizy Cloud Backend nicht integriert, aber auf der ToDo-Liste der Entwickler.

Dieses HTML Attribut für die deutsche Sprache einzubauen ist empfehlenswert, aber nicht zwingend notwendig.

Hierfür kopieren wir diesen JavaScript Code in den globalen Head Bereich unserer Website

<script>
const html = document.querySelector("html");
if (html) {
html.setAttribute("lang", "de");
}
</script>
sprach attribut

Der Seitenaufbau

Nun erstelle ich die zukünftige Seitenstruktur. Zumindest grob… Mit angelegten und veröffentlichen Seiten kann ich dann später besser die Navigationsmenüs einsetzen.

Unter “CMS” “Pages” kann ich meine Seiten anlegen. Hierbei ist schon die Seite “Home” als Entwurf vor angelegt.

pages

Durch Klick auf den Namen “Home” bekomme ich Zugang zum Page Title, zum Meta Tag Description und zum Permalink. Der Permalink sollte bei der Startseite nicht geändert werden, bzw. wenn dann in “index”.

Der Link /home öffnet eine Vorschau und über das “Edit” Symbol unter “Actions” können wir den Seiteninhalt berabeiten.

seite

Neue Seiten

Mit “Add New Page” legen wir eine neue Seite an.

  • Page Title ist der Name unserer Seite und der Title Tag. Dieser sollte unter SEO Richtlinien genutzt werden.
  • Description ist der Description Tag und auch diesen sollten wir nutzen.
  • Permalink ist die URL unserer Seite, nutze sie ebenfalls für SEO.
neue seite

Ein Beitrag zu den Meta-Tags und SEO findest du hier

 Den Tab SEO können wir soweit erst einmal ignorieren. Ich weiß ehrlich gesagt selber nicht, warum dieser Tab bis jetzt so integriert ist. Die Eingaben dort finden sich nicht im Quelltext wieder und dienen scheinbar nur zur Voransicht eines Suchergebnisses. Da wir aber unsere SEO Eingabe im Tab davor gemacht haben und wir diese hier wiederholen müssten, ergibt das ganze für mich so wenig Sinn. 
 Brizy Cloud ist weiterhin am Wachsen und es werden immer wieder neue Funktionen eingebaut und bestehende verbessert. So kann dieses gerade ein "Übergang" sein. Es fehlt hierbei keine Funktion oder ähnliches… 

In diesem Beispiel habe ich die Seiten Home, Leistungen, About und Kontakt für die Hauptnavigation und die Seiten Datenschutz, Impressum für die Navigation im Footer angelegt. Alle Seiten sollten auf “Published” stehen, erst dann kann ich diese einem Menü hinzufügen.

Navigationsmenü erstellen

Die Menüeinstellungen rufen wir unter “Assets” Project Settings” auf. “Create or select a menu:”, einen Namen eingeben, das kleine blaue “Plus” Symbol und das neue Menü anklicken.

menu

Auf der linken Seite haben wir dann unsere angelegten Seiten, die Blog Kategorien, bzw. die schon angelegte Kategorie Blog und die Möglichkeit einen eigenen Link zu bestimmen.

Wir haken unsere gewünschten Seiten an und klicken unten auf Add To Menu. Wir können den Menüpunkt mit Drag & Drop verschieben, ihn löschen und über “Settings” Einstellungen vornehmen. Z.B. im neuen Tab öffnen, als Startseite verwenden und mehr.

main menu
menu optionen

Unten speichern wir das ganze und legen genauso eine Navigation mit den Seiten für den Footer an.

footer menu

Nun können wir mit dem Aufbau der einzelnen Seiten beginnen…

Weiterführende Beiträge zum Seitenaufbau und Blog folgen…

Weiterführende Links

Erste Einstellungen im Brizy Builder

Meta-Tags und SEO

Thema Weiterleitungen / Redirects auf der Brizy Website

Schreibe einen Kommentar