Alle Blöcke verwenden dieselben globalen Einstellungen für Schriftarten, Hintergründe und Anzeige, um ein einheitliches visuelles Erscheinungsbild auf Ihrer Website zu gewährleisten, während sich der Blockinhalt unterscheiden kann.

Um die globalen Einstellungen für einen beliebigen Block zu konfigurieren, bewegen Sie den Mauszeiger darüber und wählen Sie die Schaltfläche Einstellungen, die erscheint.

Klicken Sie auf die Schaltfläche Einstellungen, um das Menü mit den globalen Abschnittseinstellungen auf der rechten Seite zu öffnen.

Schriftarteinstellungen

Sie können die folgenden Einstellungen ändern:

  • Schriftart & Stil: Die Schriftfamilie, der Stil (Normal oder Kursiv) und die Stärke (Fettdruck).
  • Abstand: Der Buchstabenabstand, die Zeilenhöhe und die Schriftgröße.

Bei Blöcken mit sowohl einem Überschriften- als auch einem Textfeld haben Sie zwei Gestaltungsoptionen:

  1. Wenden Sie einen einheitlichen Schriftstil auf den gesamten Block an, um Einheitlichkeit zu erzielen.
  2. Aktivieren Sie die Option Zusätzliche Schriftart, um separate Stile für Überschrift und Text zu definieren und so innerhalb desselben Blocks unterschiedliche visuelle Rollen zu schaffen.

So fügen Sie eine benutzerdefinierte Schriftart hinzu

Um eine benutzerdefinierte Schriftart hinzuzufügen, suchen Sie die gleichnamige Schaltfläche und klicken Sie darauf:

Sie werden zu einer Seite mit einer großen Auswahl an verschiedenen Schriftarten weitergeleitet:

Schritt 1. Finden Sie die gewünschte Schriftart

a) Dies kann über die Suchleiste erfolgen:

Wählen Sie die erforderlichen Kriterien für die Schriftart aus:

  • Schriftkategorie
  • Sans-Serif (serifenlose Buchstaben)
  • Serif (Serifenbuchstaben)
  • Handschrift (eine Schriftart, die Handschrift imitiert)
  • Monospace (nichtproportionale oder disproportionale Schriftart, eine Schriftart, in der alle Zeichen die gleiche Breite haben)
  • Display (fette Anzeigeschrift)
  • Sprachunterstützung
  • Kyrillisch
  • Lateinisch

b) Um eine Schriftart manuell zu finden, scrollen Sie durch die Liste im Formatierungsband.

Schritt 2. Klicken Sie auf die ausgewählte Schriftart:

Sie sehen ein modales Fenster mit Schriftoptionen:

Schritt 3. Wählen Sie eine Schriftoption aus, indem Sie das Kontrollkästchen neben der gewünschten aktivieren:

Schritt 4. Klicken Sie auf die Schaltfläche "Hinzufügen":

Ihre benutzerdefinierten Schriftarteinstellungen werden hier angezeigt, sobald sie gespeichert sind.

Schritt 6. Klicken Sie auf "Speichern":

Die hinzugefügten Schriftarten werden in derselben Liste wie die Standardschriftarten angezeigt.

Hintergrundeinstellungen

Passen Sie den Abschnittshintergrund mit einer Volltonfarbe, einem Farbverlauf, einem Bild oder einem Video an.

Sie können eine Farbe oder einen Farbverlauf über ein Hintergrundbild legen.

Das Bild kann als Datei oder als Link zum Bild hinzugefügt werden:

Ein Video kann aus dem Speicher hinzugefügt werden

Laden Sie zunächst Ihre Videodatei in den Dateispeicher hoch.

Einstellungen für Hintergrundbilder

Steuerung der Bildpositionierung

Ein Bild innerhalb eines Abschnitts wird mit zwei unabhängigen Parametern positioniert:

  1. Horizontale Ausrichtung (X-Achse)
  2. Vertikale Ausrichtung (Y-Achse)

Geben Sie die Position mit einem Schlüsselwort oder einer Kombination an:

Schlüsselwort Effekt
top, bottom, center Vertikale Ausrichtung
left, right, center Horizontale Ausrichtung
bottom left, top right, center center Kombinierte Position

Für präzise Steuerung können Sie auch numerische Werte verwenden:

  • Prozentangaben (z. B. 30% 75%)
  • Pixel (z. B. 20px 100px)
  • Oder gemischte Einheiten

Optionen zur Bildgrößenanpassung

Sie können die Abmessungen eines Bildes mit den folgenden Methoden steuern:

1. Benutzerdefinierte Abmessungen festlegen

Definieren Sie sowohl Breite als auch Höhe mit flexiblen Werten.

  • Format: [Breite] [Höhe]
  • Beispiel 1 (Pixel): 500px 300px
  • Beispiel 2 (Prozent): 15% 10%

2. Ein voreingestelltes Schlüsselwort verwenden

Geben Sie einen einzelnen Parameter an, um ein bestimmtes Skalierungsverhalten anzuwenden:

  • contain — Skaliert das Bild so, dass es vollständig in die Höhe des Abschnitts passt, während das Seitenverhältnis beibehalten wird (Beispiel 3).
  • cover — Zeigt das Bild in seinen ursprünglichen Pixelabmessungen an (Beispiel 4: Originalgröße 1268 × 1343 px).

Bildwiederholung

Diese Option ist standardmäßig deaktiviert. Verfügbare Einstellungen umfassen:

So fixieren Sie ein Bild

Aktivieren Sie diesen Schalter, um ein festes Hintergrundbild festzulegen. Wenn aktiv, bleibt das Bild beim Scrollen stationär, sodass sich der Inhalt darüber bewegen kann.

Hintergrundfarbe und Farbverlauf

Sie können den Hintergrund des Abschnitts mit einer Volltonfarbe anpassen oder einen Farbverlauf aus den verfügbaren Optionen auswählen.

Anzeigeeinstellungen

Sie können angeben, wo dieser Abschnitt sichtbar ist (z. B. auf welchen Geräten oder Plattformen). Standardmäßig wird er auf der Website und auf Facebook angezeigt. Über das Dropdown-Menü können Sie eine Anzeigeoption für diesen Block auswählen, z. B. dass er nur auf der Website sichtbar ist.

Randradius:

Der Randradius wird in Pixeln (px) angegeben.

Abschnittshöhe

Die Höhe des Abschnitts kann mit den folgenden Einheiten definiert werden:

  • px: Pixel (fester Wert)
  • vh: Viewport-Höhe (reagiert auf Bildschirmgröße)

Abschnittsbreite

Breite von 1 Spalte = 106 px

Standardmäßig ist die Abschnittsbreite auf Vollbild eingestellt, und der Inhalt wird in einem 8-Spalten-Layout angezeigt.

Beispiel 1: Der Inhalt ist innerhalb des Abschnitts zentriert und erstreckt sich über 5 Spalten des Layouts.

Beispiel 2. Ein Abschnitt erstreckt sich über 8 Spalten, wobei der Inhalt die gesamte Breite des Abschnitts abdeckt:

Scroll-ausgelöster Erscheinungseffekt

Aktivieren Sie diesen Schalter, um scroll-ausgelöste Animationen für Ihren Inhalt zu aktivieren. Sie können wählen, ob der Inhalt von unten, oben, links oder rechts erscheinen soll.

Inhaltsanzeige

Der Inhalt wird standardmäßig horizontal und zentriert angezeigt. Er kann an den linken oder rechten Rand der Seite verschoben werden.

Vertikal wird der Inhalt standardmäßig oben ausgerichtet. Er kann nach unten verschoben oder auf der Seite zentriert werden.

Um Text gemäß den Mavibot-Stilen an schmale Bildschirme anzupassen, aktivieren Sie bitte diesen Schieberegler:

Ränder (für den Abschnitt)

Außenabstände

Sie können diese Felder verwenden, um den Abstand zwischen Abschnitten anzupassen. Standardmäßig ist der Innenabstand (oben/unten/links/rechts) auf 0 px eingestellt.

Um gleiche Ränder auf allen Seiten anzuwenden, geben Sie den Wert in das Hauptfeld ein. Die oberen, unteren, linken und rechten Ränder werden automatisch festgelegt.

Um visuelle Konsistenz zu gewährleisten, müssen die Ränder für jeden Abschnitt einzeln konfiguriert werden.

Innenabstände

Verwenden Sie diese Felder, um den Innenabstand des Abschnitts anzupassen. Standardmäßig ist der Abstand (oben, unten, links, rechts) auf 32 px eingestellt.

Sichtbarkeitsbereich nach Gerät

Der Sichtbarkeitsbereich bestimmt, auf welchen Geräten (z. B. Desktop, Tablet, Mobilgerät) dieser Block angezeigt wird. Diese Einstellung wird für jeden Block einzeln konfiguriert.

Warum ist das nützlich und wie funktioniert es?

Wenn ein Block (z. B. ein Cover) auf dem Desktop gut, aber auf dem Mobilgerät nicht gut angezeigt wird, können Sie ihn so konfigurieren, dass er nur auf Geräten mit einer Bildschirmbreite von 960 Pixeln oder mehr erscheint. Dadurch wird sichergestellt, dass der Block nur in Desktop-Ansichten sichtbar und auf Mobilgeräten ausgeblendet ist.

Dann müssen Sie diesen Block kopieren und sein Erscheinungsbild speziell für Mobilgeräte anpassen (Foto, Schriftgröße usw. ändern). Für diesen Block stellen Sie den Sichtbarkeitsbereich von 0 bis 960 Pixeln ein. Es wird die mobile Version des Blocks sein.

Infolgedessen wird die Desktop-Version auf Computern angezeigt, während die mobile Version auf Smartphones und Tablets angezeigt wird.

Der Sichtbarkeitsbereich (verschiedene Parameterwerte) ist erforderlich, um das Erscheinungsbild des Blocks für ein bestimmtes Gerät durch Auswahl der Auflösung anpassen zu können. Wenn der Block beispielsweise auf einem Tablet oder einem bestimmten Telefonmodell nicht gut angezeigt wird, können Sie sein Erscheinungsbild basierend auf der Auflösung dieser Geräte anpassen.

Standardmäßig wird der Abschnitt auf Geräten jeder Größe angezeigt.

Beispiel

Konfigurieren Sie den ersten Abschnitt für Mobilgeräte und Tablets

  • Erstellen Sie einen Abschnitt
  • Stellen Sie seinen Sichtbarkeitsbereich von 0 bis 640 px ein
  • Laden Sie ein für kleine Bildschirme optimiertes Bild hoch

Der zweite Abschnitt ist für PCs (Laptops). Stellen Sie den Sichtbarkeitsbereich ab 641 Pixeln ein.

  • Speichern Sie Ihre Änderungen und gehen Sie zur Bearbeitungsseite. Zu Ihrer Bequemlichkeit werden dort die Sichtbarkeitseinstellungen des Abschnitts angezeigt.

Um zu testen, wie die Abschnitte auf einem bestimmten Gerät erscheinen, gehen Sie zur Seitenvorschau. Klicken Sie mit der rechten Maustaste und klicken Sie auf "Code anzeigen".

Wählen Sie das Gerät aus, auf dem Sie sehen möchten, wie die Website aussehen wird.

Erscheinungszeitpunkt

Sie können dieses Feld verwenden, um die Verzögerung vor dem Erscheinen eines Abschnitts zu definieren, angegeben in Sekunden (s) oder Minuten (m).