Innerhalb dieses Tutorials werden wir sehen, wie man einen Slider erstellt und ihn zu einer auf Framework360 basierenden Website hinzufügt. Ein Slider è ist ein Inhalt, der normalerweise im ersten Teil der Startseite der Website hinzugefügt wird. Der Slider è besteht aus einem Bild, einem Karussell von Bildern oder einem Video, und über dem multimedialen Inhalt befinden sich ein Titel und eine Beschreibung.
Schritt 1: Erstellen wir unseren Slider
Zuerst erstellen wir unseren Slider, indem wir auf den Unterpunkt in der Sidebar von Framework360 “Slider” klicken und die folgenden Schritte befolgen:
Website > Slider
Zu diesem Zeitpunkt öffnet sich der Bildschirm, auf dem alle von uns erstellten Slider angezeigt werden. Um einen neuen Slider zu erstellen, müssen wir nur auf die grüne Schaltfläche oben rechts “Hinzufügen” klicken.
Sobald wir im Bildschirm zur Erstellung des Sliders sind, fügen wir den Titel unseres Sliders hinzu und stellen die verschiedenen Einstellungen für den Slider ein, die in den Abschnitten unterhalb des Titels zu finden sind.
Lassen Sie uns nun die verschiedenen Abschnitte analysieren.
ABSCHNITT “OPTIONEN”
Innerhalb des Abschnitts “Optionen” definieren wir die allgemeinen Einstellungen unseres Sliders. Konkret legen wir bei der Option “Sliderhöhe” die Höhe fest, die unser Slider haben soll. Bei der Option “Autoplay”, falls der Slider aus einem Karussell von Bildern besteht, definieren wir, ob diese automatisch vom System nach einer von uns gewählten Zeit gewechselt werden sollen; wenn das Autoplay nicht aktiviert ist, muss der Besucher die im Slider eingefügten Bilder selbst durchblättern. Bei der Option “ Loop” können wir entscheiden, ob das Karussell der Bilder neu gestartet werden soll, sobald alle angezeigt wurden, oder ob die Anzeige des letzten Bildes bestehen bleiben soll. Unter dem Punkt “Pfeile” können wir entscheiden, ob wir Pfeile rechts und links vom Slider hinzufügen möchten, damit der Besucher die Bilder manuell wechseln kann. Schließlich können wir durch Klicken auf die Schaltfläche “Zufällige Anordnung” die von uns eingefügten Bilder in zufälliger Reihenfolge anzeigen lassen; andernfalls folgt die Anzeige der Reihenfolge der Einfügung.
ABSCHNITT “HINTERGRUND”
Wenn wir weiter auf der Seite zur Erstellung des Sliders scrollen, fügen wir im Abschnitt “Hintergrund” das Bild ein, das unser Slider bilden wird. In diesem Abschnitt definieren wir unter dem Punkt “Größe” die Größe, die das innerhalb des Sliders hochgeladene Bild haben soll; normalerweise wird der Modus verwendet Cover, die es ermöglicht, die gesamte Breite des Bildschirms mit unserem Bild auf jedem Bildschirmtyp abzudecken. Unter dem Punkt “Wiederholen” können wir entscheiden, ob das Bild mehrmals wiederholt werden soll, bis der gesamte Abschnitt abgedeckt ist; im Allgemeinen setzen wir im Modus Cover unter “Größe” hier den Modus no-repeat. Unter dem Punkt “Position” können wir die Position des Slides festlegen; in der Regel wird an dieser Stelle der Modus center-center verwendet. Unter dem Punkt “Anheftung” bleibt normalerweise der Modus Standard. Schließlich laden wir unter den Punkten “Desktop-Bild” und “Mobilbild” unser Bild für die Anzeige jeweils von PC und Mobiltelefon hoch. Wenn wir kein Bild für mobile Geräte hochladen, zeigt das System auch für diese Positionierung das Desktop-Bild an. Wir empfehlen, auch ein Bild für die mobile Ansicht mit quadratischen Abmessungen hochzuladen, um das Laden der Seite zu erleichtern, wenn der Benutzer die Seite ohne Wi-Fi-Verbindung betrachtet.
SEKTION “VIDEO”
Wenn wir hingegen möchten, dass in unserem Slider ein Video und kein Bild angezeigt wird, fügen wir im Abschnitt “Video” unter dem Punkt “Hintergrundvideo” den Link zu einem YouTube- oder Vimeo-Video ein, das als Hintergrund in unserem Slider angezeigt wird. Immer im Abschnitt “Video”, unter dem Punkt “Nach Vollendung des Videos”, definieren wir, ob am Ende des Videos die Wiedergabe neu gestartet, das Video ausgeblendet oder auf dem letzten Frame angehalten werden soll. Schließlich können wir unter dem Punkt “Anzeigen auf” entscheiden, ob das Video sowohl auf Desktop, Tablet und Mobilgerät angezeigt werden soll oder die Anzeige des Videos in einer dieser Positionen ausgeblendet werden soll.
ABSCHNITT “OVERLAY”
Innerhalb des Abschnitts “Overlay” können wir entscheiden, ob wir einen farbigen Verlauf über das Bild oder das Video anwenden, das wir hochgeladen haben. Diese Auswahl kann über die Option “Verlauf” getroffen werden. Alternativ können wir eine Farbe über die Option “Farbe” auswählen, die dann über den hochgeladenen Inhalt gelegt wird. Anschließend können wir mit der Option “Opazität” die Opazität der Farbe verringern, um das darunterliegende Bild oder Video sichtbar zu machen.
ABSCHNITT “INHALT”
Innerhalb des letzten Abschnitts auf dem Bildschirm zur Erstellung des Sliders, genannt “Inhalt”, fügen wir mithilfe des klassischen Visual Builders von Framework360 einen Titel und eine Beschreibung hinzu, die auf unserem Slider angezeigt werden sollen.
Sobald das Erstellen des Sliders abgeschlossen ist, klicken wir auf die grüne Schaltfläche oben rechts “Speichern”, um die Arbeit zu speichern.
Schritt 2: Fügen wir den Slider zur Seite unserer Website hinzu
Nachdem wir unseren Slider erstellt haben, wie im vorherigen Schritt gesehen, müssen wir ihn jetzt auf der Seite unserer Website einfügen, wo wir möchten, dass er angezeigt wird. Dazu gehen wir zum Unterpunkt der Sidebar “Seiten” und folgen den folgenden Schritten:
Website > Seiten
Innerhalb des Detailbildschirms “Seiten” finden wir die Liste der Seiten, die auf unserer Website vorhanden sind. An diesem Punkt klicken wir auf die Seite, auf der wir den Slider einfügen möchten, und wählen mit dem visuellen Builder den Block “Slider” aus und ziehen ihn in den Abschnitt der Webseite, wo wir möchten, dass er angezeigt wird, wie in der folgenden Abbildung dargestellt:
Sobald der Block eingefügt ist, wählen wir den von uns erstellten Slider aus.
Schließlich klicken wir auf die Schaltfläche oben rechts “Speichern”, um die Eingabe des Sliders zu speichern.
