Willkommen zu Abschnitt 2 des Einsteigerkurses „Website World“.
Am Ende dieses Abschnitts werden Sie Folgendes können:
- Erstelle ein animiertes Banner
- Füge einem animierten Banner einen Overlay-Text hinzu
Erstellen eines animierten Banners
Um ein animiertes Banner zu erstellen, benötigen Sie zunächst mindestens zwei statische Banner. Diese können von einem Grafikdesigner erstellt werden. Alternativ können Sie, wie in diesem Kurs, kostenlos ein Banner in Canva erstellen. Die Größe Ihres Banners hängt von der gewählten Website-Vorlage ab. Die Beispielseite, die wir für diesen Kurs erstellen, verwendet die Vorlage „Dekor-Theme“ mit den Maßen 1200 x 480 Pixel.
Hier sind die Banner, die wir verwendet haben. Auch Sie können sie herunterladen und verwenden, wenn Sie möchten (klicken Sie mit der rechten Maustaste auf den jeweiligen Link und wählen Sie „Speichern unter“):
Klicken Sie auf die Schaltfläche „Design“ und wählen Sie anschließend die Option „Bannerbild/Diashow“. Standardmäßig sind bereits vier Banner vorhanden – ein Hauptbanner und drei animierte Banner. Alle vier Banner werden in einem Scrollmuster angezeigt, wobei jedes Banner für eine festgelegte Anzahl von Abschnitten erscheint, bevor zum nächsten übergegangen wird.
In diesem Kursabschnitt werden wir nur drei Banner verwenden. Sie können eines der Banner unter dem animierten Titel entfernen, indem Sie auf das rote Symbolfeld klicken. Speichern Sie anschließend Ihre bisherige Arbeit, indem Sie auf die Schaltfläche „Veröffentlichen“ klicken.
Sie können nun die verbleibenden drei Standardbanner durch drei eigene ersetzen. Klicken Sie dazu auf das Bildsymbol unter jedem Banner. Dadurch öffnet sich der Bildassistent, in dem Sie erneut ein Bild auswählen und von Ihrem Gerät hochladen können. Wiederholen Sie diesen Vorgang für alle drei Banner.
Scrollen Sie weiter nach unten, um ein Feld zu finden, in dem Sie die Standardeffekte für animierte Banner bearbeiten können. Hier können Sie Animationsstil und -geschwindigkeit, die Übergangsgeschwindigkeit zwischen den Folien, die Position des Banners und die gewünschten Beschriftungen auswählen. Für diesen Kurs wählen wir die Option „Beschriftung zentriert“ und belassen die anderen Optionen auf den Standardeinstellungen.
Hinzufügen von Bildunterschriften zu Ihren animierten Bannern
Scrollen Sie auf der Seite wieder nach oben, um alle drei Banner erneut anzuzeigen. Neben jedem Banner sehen Sie drei Felder: Link-URL, Bildunterschrift und Handlungsaufforderung. Hier geben Sie den Text ein, der auf dem jeweiligen Banner angezeigt werden soll.
Die Link-URL bleibt für jedes Banner gleich. Sie finden den richtigen Link, indem Sie auf das blaue Quadrat mit den drei Punkten klicken. Dadurch öffnet sich der URL-Assistent, in dem Sie eine Seite Ihrer Testseite auswählen oder eine URL in das Feld unten kopieren und einfügen können. In diesem Beispiel klicken wir auf die Option „Link zu einer Seite auf dieser Website“ und wählen dann die Shop-Seite aus.
Die Link-URL wird dann im Feld neben dem Banner angezeigt. Wiederholen Sie diesen Schritt für die beiden verbleibenden Banner.
Als Nächstes fügen wir allen drei Bannern eine Bildunterschrift und einen Handlungsaufruf hinzu. Eine Bildunterschrift ist eine kurze, prägnante Information über etwas auf Ihrer Website oder über Ihr Unternehmen. Ein Handlungsaufruf sagt dem Besucher Ihrer Website, was er als Nächstes tun soll. Folgendes haben wir hinzugefügt:
Beachten Sie, dass in der Desktop-Vorschau der Text im hellgrauen Feld und der Handlungsaufruf in einem kleineren, dunkelgrauen Feld darin angezeigt werden. Dies ist nun ein anklickbarer Link für Ihre Website-Besucher.
Sie haben nun Abschnitt 2 des Anfängerkurses abgeschlossen. Gut gemacht! Es geht weiter mit dem nächsten Abschnitt: Anfänger, Abschnitt 3.
