Last Updated on 11/10/2021 by MTE Leben
In diesem Tutorial erfahren Sie, wie Sie kreative und auffällige Inhalte erstellen und beeindruckende Image-Akkordeon-Widgets erstellen.
Klicken Sie auf die Schaltfläche Neuen Abschnitt hinzufügen, wählen Sie die Struktur aus und ziehen Sie das Image-Akkordeon-Modul per Drag & Drop.
Sie sehen das Standardmodullayout, das angepasst werden kann. Sie können neue Elemente hinzufügen, nicht benötigte Elemente duplizieren oder löschen.
Klicken Sie auf Element Nr. 1, um die gesamte Liste der Einstellungen anzuzeigen. Hier können Sie das Element als Aktiv festlegen, Bild aus Ihrer Medienbibliothek auswählen, Titel und Beschreibung Ihres Elements eingeben, den Text für die Schaltfläche definieren, der im Widget angezeigt werden soll, und schließlich Linkoptionen auswählen. Alle diese Schritte sollten für jedes Element durchgeführt werden, das Sie in Ihr Widget einfügen möchten.
Navigieren Sie als nächstes zum Einstellungsblock. Hier können Sie die Ausrichtung der Elemente (entweder vertikal oder horizontal) einstellen, den Schieberegler bewegen, um die Größe des aktiven Elements festzulegen, die Dauer der Animation auswählen und die Art der Beschleunigung aus einer Dropdown-Liste auswählen. Hier ist, was wir für dieses Tutorial ausgewählt haben.
Navigieren Sie zur Registerkarte Stil, um das Layout der Registerkarten des Bildakkordeons zu ändern.
So passen Sie den Container-Block an
Dieser Block ist für die Anpassung des gesamten Widget-Layouts verantwortlich. Hier können Sie den Schieberegler bewegen, um die Höhe des Widgets einzustellen, den Randtyp auswählen, Breite, Farbe und Radius einstellen. Es steht Ihnen auch frei, Box Shadow hinzuzufügen und den Padding-Wert zu ändern.
So passen Sie den Hintergrund des Bildakkordeon-Containers an Es gibt zwei Hauptvarianten des Widget-Hintergrundtyps: Klassisch und Verlauf.
Klassischen Typ auswählen. Hier können Sie Farbe (zB #90ce98) und/oder Bild auswählen, die hinter dem Widget angezeigt werden. Wählen Sie die Optionen Position, Anhang, Wiederholung und Größe aus.
Wählen Sie den Farbverlaufstyp. Hier müssen Sie zwei Farben auswählen, um einen Verlaufseffekt zu erzeugen. Zum Beispiel setzen wir #90ce98 und #f2295b entsprechend. Sie können auch einen Schieberegler verschieben, um die Farbposition festzulegen. Wählen Sie als Nächstes Typ (entweder Linear oder Radial). Linearer Typ hat eine zusätzliche Einstellung – Winkel – Verschieben Sie den Schieberegler, um ihn einzustellen. Radialer Typ enthält eine Dropdown-Liste mit Ausrichtungsoptionen.
So passen Sie den Elementblock an
Navigieren Sie zum Elementblock, der Einstellungen zum Gestalten von Elementen des Bildakkordeon-Widgets enthält. Hier können Sie Element-Gutter ändern, Rahmen einstellen und Breite, Farbe und Radius auswählen, Boxschatten hinzufügen.
Hier können Sie auch den Hintergrundtyp der Elemente ändern. Siehe Schritte 7 und 8.
Die nächsten Optionen im Artikelblock sind Cover-Stile. Sie können Parameter der Schwebestile im normalen und im aktiven Modus einstellen. Für jede Option können Sie Hintergrundtypen auswählen. Für dieses Tutorial haben wir den klassischen Hintergrundtyp und die Farbe rgba (64,84,178,0,81) gewählt. Hier ist, was wir haben.
So passen Sie den Inhaltsblock an
In diesem Schritt können Sie den Hintergrundtyp einstellen, die Parameter für die Auffüllung ändern und die Textausrichtung auswählen, um das am besten geeignete Erscheinungsbild des Inhaltsblocks zu erstellen.
So passen Sie den Titelblock an
Dieser Block enthält Einstellungen zum Ändern des Textlayouts. Wählen Sie die Titelfarbe (z. B. #ff0000), navigieren Sie dann zur Typografieeinstellung und wählen Sie die für Ihr Widget geeigneten Parameter aus. Außerdem können Sie hier den Titelabstand, den Rand und die Ausrichtung ändern.
So passen Sie den Beschreibungsblock an
Der Beschreibungsblock enthält die gleichen Einstellungen wie im Titelblock. Wählen Sie die Optionen für Textfarbe und Typografie aus, ändern Sie auch den Titelabstand, den Rand und die Ausrichtung.
So passen Sie den Aktionsschaltflächenblock an
Navigieren Sie zum Aktionsschaltflächenblock, wo Sie die Schaltflächenausrichtung auswählen und das Layout entweder im Normal- oder Hover-Modus festlegen können. Wählen Sie die Farbe Ihres Buttons (zB #23a455) und die Farbe des Textes innerhalb des Buttons (zB #ffffff).
Als nächstes können Sie Ihre Typografie-Optionen ändern.
Stellen Sie Ihre Parameter von Padding, Margin und ändern Sie Ihren Rand Radius zu runden Knopfwinkeln. Wählen Sie außerdem Rahmentyp und stellen Sie Box Shadow ein, wenn diese Optionen für Ihr Widget geeignet sind.
So passen Sie die Inhaltsreihenfolge und den Ausrichtungsblock an
Dieser Block ist dafür verantwortlich, die Reihenfolge der Inhaltselemente festzulegen: Titel, Beschreibung und Schaltfläche. Hier können Sie deren Ausrichtung im Widget ändern.
Hier ist also, was wir nach der Anpassung haben.
Das ist alles! Jetzt können Sie Ihre wirklich ansprechenden Image-Akkordeon-Widgets erstellen und sie mit nützlichen Informationen füllen. Viel Glück!
