Grundsätzlicher Aufbau von inoovum®

Hier fügt man den Seitentitel ein.
Also wie deine Website heißen soll.
z.B. Firma Mustermann

Hier kannst du ein kleines Rädchen einstellen, das beim Öffnen der Website gesehen wird. Es weist darauf hin, dass die Seite lädt

Bei der Scroll Animation kannst du die Animation aktivieren oder deaktivieren. Diese ist aber nur im Frontend also bei deiner Website sichtbar.

Mit der Navigation ist die sogenannte Menüleiste, die dich, auf deiner Website, in die Unterseiten navigiert, gemeint. 

1. Navigation volle Breite
Menüleiste füllt die volle Breite des Bildschirms aus

2. Sticky Navigation
Menüleiste wird beim scrollen der Seite oben am Bildschirm immer angezeigt

3. Klickbare Drobdownmenüs
Weitere Seiten die untergeordnet in der Menüleiste sind, können angeklickt werden

4. Submenüs "hover" aktivieren
Die Menüpunkte reagieren wenn du dich mit der Maus darüber bewegst

5. Navigation im Schatten
Menüleiste wirft einen leichten Schatten

Mit der Sprachen Navigation können Benutzer die Sprache der Website bequem anpassen.

Hier fügst du eine zusätzliche Leiste ober der Menüleiste ein. 
Da könntest du weitere Informationen wie zum Beispiel Öffnungszeiten oder Kontaktdaten hinzufügen, um die Suche zu erleichtern.

Hier kannst du die Burger Navigation aktivieren um hier die verschiedenen
Seiten unterzuordnen, wenn man sie nicht in der Menüleiste sehen will. 

Die Breadcrumb-Navigation (oder "Brotkrumen-Navigation") ist ein Element auf Websites, das Nutzern hilft, ihren aktuellen Standort innerhalb der Website-Struktur nachzuvollziehen und sich leichter auf der Website zu bewegen. Der Begriff stammt aus dem Märchen "Hänsel und Gretel", in dem Brotkrumen hinterlassen wurden, um den Weg zurückzufinden.

Funktionen der Breadcrumb-Navigation:

Orientierung: Breadcrumbs zeigen den Nutzern, wo sie sich innerhalb der Hierarchie der Website befinden. Dies ist besonders nützlich auf komplexen Websites mit tiefen Strukturen.

Navigation: Sie ermöglichen eine schnelle Navigation zu höheren Ebenen der Website, ohne dass der Benutzer den "Zurück"-Button oder das Hauptmenü verwenden muss.

Usability-Verbesserung: Breadcrumbs machen es für Nutzer einfacher, sich auf der Website zurechtzufinden, besonders bei E-Commerce-Seiten, Blogs oder großen Inhaltsportalen.

Suchmaschinenoptimierung (SEO): Suchmaschinen wie Google nutzen Breadcrumbs, um die Struktur einer Website besser zu verstehen. Außerdem können sie in Suchergebnissen angezeigt werden und die Klickrate (CTR) verbessern.

Aufbau eines Breadcrumbs:

Breadcrumbs bestehen aus einer Reihe von Links, die den Weg von der Startseite zur aktuellen Seite darstellen. Die Struktur sieht oft so aus:

Startseite > Kategorie > Unterkategorie > Aktuelle Seite

Beispiel:

Auf einer E-Commerce-Seite könnte die Breadcrumb-Navigation so aussehen:

Startseite > Elektronik > Smartphones > iPhone 14

Typen von Breadcrumb-Navigation:

Standortbasiert: Zeigt, wo sich der Nutzer in der Website-Hierarchie befindet. Beispiel: Startseite > Blog > Tutorials > Wie man Breadcrumbs erstellt

Attributbasiert: Wird oft in Online-Shops verwendet, um Filter oder Attribute anzuzeigen. Beispiel: Startseite > Kleidung > Damen > Größe: M > Farbe: Schwarz

Pfadbasiert: Zeigt den tatsächlichen Navigationspfad des Nutzers. Beispiel: Startseite > Suchergebnisse > Produktseite

Breadcrumbs verbessern die Benutzererfahrung und machen Websites benutzerfreundlicher und effektiver!

Hier fügst du dein Logo ein, das schlussendlich die Website tragen soll.
Die Breite des Logos sollten ca. 200 – 300 px sein. Die Höhe passt sich selbst an.

Ein Favicon ist ein Symbol, das bei einem Text dabei oder anstelle eines Textes steht.
Hier stellst du das Favicon in der Tab Leiste ein. Dann steht neben deiner Website ein Symbol das deine Seite widerspiegelt.

Der Footer ist die sogenannte Fußzeile.
Dieser ist auf jeder Seite der Website sichtbar. Hier kannst du die Farbe des Footers einstellen (sollte die Hauptfarbe sein, Logofarbe)

Hier kannst du entscheiden ob deine Elemente (z.B. Buttons) abgerundet sein oder Schatten werfen sollen.

Hier stellst du die Farben ein die deine Website tragen soll. Es sollten nicht viele unterschiedliche sein, sondern eher ein Farbton und eine Zusatzfarbe.
z.B. Blau soll die Hauptfarbe sein und evtl. Rot als Zusatz- oder Sekundärfarbe, Hellblau als Heller Farbton und Dunkelblau als Dunkler Farbton. 
So vermeidest du eine farbenreiche Website und erleichterst den Zuschauern die Übersicht.

Suche fonts.google.com  -> hier kannst du diverse Schriftarten auf Google vergleichen und auswählen.
Spricht dir eine zu, fügst du sie im Inspector hinzu.
Überschrift 1 – 3 Sollte die Stärke von 700 haben
Fließtext die Stärke 300
Fließtext fett die Stärke 700
Auch hier solltest du mit den Arten nicht übertreiben. Ein bis zwei Schriftarten reichen völlig aus.

Die Schriftgrößen sind grundsätzlich schon angepasst.
Du kannst diese aber gerne individuell gestalten. 

Hier kannst du eine Grafik einfügen, die dann deine Aufzählungen, anstelle eines Punktes oder Zahl, schmückt. Wie zum Beispiel dein Logo oder ein Symbol, dass deine Website widerspiegelt.

Hier wird das Analysetool Google Analytics eingebaut. Dafür wird entweder die ID des Google Analytics Kontos benötigt (GA-Tag) oder die ID aus dem Google Tag Manager

Hier kannst du eigenes CSS Styling oder Javascript Code-Schnipsel einfügen
(Für Profis ;) ) 

In den Admin Einstellungen kann man die folgenden wie am Bild vornehmen: 

Im Cookie-Banner kann das Cookie-Opt-In deaktiviert werden

in den Mailserver Einstellungen kann der eigene Mailserver verwendet werden. Dazu muss man folgende Punkte ausfüllen:

Unter dem Punkt "Mailversand" kann eingestellt werden, dass die eigene Email Adresse für die Website verwendet wird. Dazu muss man folgende Punkte ausfüllen:

Unter diesem Menüpunkt kann man die Version der Font Awesome Icons auswählen. Mit diesem Programm kann man verschiedene Symbole und Selfies auf der Website einfügen.