Der GutenKit-Akkordeonblock ist die perfekte Lösung, um Ihrem Publikum einfachen Zugriff auf Langformatinhalte zu ermöglichen. Er fügt Ihrer WordPress-Website einen zusammenklappbaren Abschnitt hinzu und bietet Funktionen, um den Akkordeonabschnitt sowohl in aktiven als auch inaktiven Phasen zu verschönern.

In dieser Dokumentation zeigen wir, wie man Akkordeonabschnitte im standardmäßigen Gutenberg-Editor erstellt.

So fügen Sie Akkordeonblöcke auf der Gutenberg-Website hinzu #

Um den Vorgang zu starten, müssen Sie das GutenKit-Plugin installieren. Wenn Sie fertig sind, folgen Sie einfach den folgenden Schritten.

Schritt 1: GutenKit Akkordeonblock hinzufügen #

Von Ihrem WordPress-Dashboard aus, 

• Folgen Seiten > Neue Seite hinzufügen oder beginnen Sie mit der Bearbeitung einer vorhandenen Seite.
• Um einen neuen Block hinzuzufügen, klicken Sie auf „+“-Symbol oben auf dem Blockeditor-Bildschirm.
• Suchen Sie nach dem GutenKit Akkordeon.
• Sobald es angezeigt wird, klicken Sie auf das Symbol oder ziehen Sie es per Drag & Drop.

Schritt 2: Akkordeonelemente hinzufügen #

Öffnen Sie die Blockeinstellungen, wo Sie Ihren Akkordeontitel, Ihre Beschreibung und Ihr Symbol hinzufügen.

Akkordeon: #

Standardmäßig wird der Akkordeonblock mit drei Elementen geladen. Klicken Sie auf ein beliebiges Element, um das Titel Und Beschreibung Text. Es gibt einen „Diese Folie geöffnet lassenWenn Sie diese Option aktivieren, bleibt dieser Schieberegler oder dieses Element für Ihre Besucher immer geöffnet.

Klicken Sie außerdem auf „Neue hinzufügen”-Button, um ein neues Akkordeonelement hinzuzufügen. Sie können auch ein bereits angepasstes Element kopieren, indem Sie auf den „Gegenstand klonen”-Symbol. Und wenn Sie einen Artikel nicht behalten möchten, klicken Sie einfach auf das „X" Taste.

Wählen Sie Stil aus: Wählen Sie aus 5 vorgefertigten Stilen das gewünschte Akkordeon-Layout aus.

Symbol: #

• Symbolposition: Definieren Sie die Positionierung Ihres Symbols zwischen links und rechts. Oder Sie können Symbole auf beiden Seiten anzeigen.
• Schleifenanzahl anzeigen: Aktivieren Sie diesen Umschaltknopf, um die Zahlenzählung mit Akkordeonelementen anzuzeigen. Beachten Sie, dass diese Einstellung verschwindet, wenn Sie in der vorherigen Einstellung die Option „Beide Seiten“ auswählen.
• Rechts/Links-Symbol: Fügen Sie ein Anzeigesymbol hinzu, mit dem Besucher den Akkordeon-Schieberegler öffnen können.
• Rechts/Links Symbol aktiv: Zeigt ein Symbol für den aktiven Akkordeon-Schieberegler.

*Zusätzlich zur Auswahl aus der Symbolbibliothek können Sie auch eine SVG-Symboldatei von Ihrem eigenen Gerät hochladen.

Schritt 3: Akkordeon-Textinhalt formatieren #

Titel: #

• Typografie: Verwenden Sie diesen Einstellungsbereich, um alle Optionen zur typografischen Anpassung wie Schriftfamilie, Größe, Stärke, Stil, Dekoration, Zeilenhöhe usw. anzuwenden.

Als nächstes stehen folgende Optionen für beide zur Verfügung Offen Und Geschlossen Optionen. Das bedeutet, dass Sie den Titeltext für aktive und inaktive Phasen separat anpassen können.

• Farbe: Legen Sie eine Farbe für den Titeltext fest.
• Hintergrundtyp: Wählen Sie für den Titelhintergrund zwischen einer Volltonfarbe und einem Verlaufshintergrund.

• Grenze: Steuern Sie die Breite, legen Sie die Farbe und den Stil für den Titelrahmen fest.
• Grenzradius: Definieren Sie die Rundung des Titelrahmens.
• Box Schatten: Verwenden Sie diese Steuerelemente, um einen Kastenschatten um den Titelrand festzulegen.
• Polsterung: Passen Sie die Polsterung des Akkordeonelementtitels an.
• Rand unten: Verwenden Sie den Schieberegler oder fügen Sie einen benutzerdefinierten Wert hinzu, um den Abstand zwischen den Akkordeonelementen festzulegen.

Beschreibung: #

• Farbe: Wählen Sie die Textfarbe für Ihre Akkordeon-Artikelbeschreibung.
• Typografie: Hier finden Sie Optionen zum Ändern der Schriftart, Größe, Stärke, des Stils, des Abstands und mehr des Beschreibungstextes.
• Hintergrundtyp: Wählen Sie einen Hintergrundtyp zwischen Volltonfarbe und Farbverlauf.
• Grenzradius: Definieren Sie die Rundung der Beschreibungsbereichsgrenze.
• Polsterung: Passen Sie den Innenraum des Beschreibungsbereichs an.

Schritt 3: Angepasster Akkordeonrahmen und Symbol #

Grenze: #

Ähnlich wie bei der Titeloption können Sie auch den Rahmen für beide separat anpassen Offen Und Geschlossen Modi.

• Grenze: Steuern Sie die Breite, legen Sie die Farbe und den Stil für den Rahmen des Akkordeonelements fest.
• Grenzradius: Definieren Sie die Rundung des Akkordeonelementrahmens.
• Box Schatten: Verwenden Sie diese Steuerelemente, um Schatteneffekte um den Rand des Akkordeonelements zu erzeugen.
• Rahmen für letzte Elemente deaktivieren: Aktivieren Sie diesen Umschaltknopf, um den Rahmen für das letzte Akkordeonelement zu deaktivieren.

Symbol: #

Die folgenden Symbol-Stileinstellungen gelten für beide Geschlossenes Symbol Und Symbol „Öffnen“. 

• Symbolgröße: Definieren Sie die Größe der Symbole.
• Farbe: Verwenden Sie die Farbauswahl, um dem Symbol Farbe hinzuzufügen.
• Hintergrundtyp: Wählen Sie einen Hintergrundtyp zwischen Volltonfarbe und Farbverlauf.

• Grenze: Verwenden Sie diesen Einstellungsbereich, um Rahmenfarbe, Stil und Breite um das Symbol anzuwenden.
• Grenzradius: Diese Einstellung definiert die Rundung des Symbolrahmens.
• Polsterung: Passen Sie die Polsterung des Symbols an.
• Marge: Passen Sie den Rand um das Symbol an.

Schritt 4: Erweiterte Einstellungen #

Auf der Registerkarte „Erweiterte Einstellungen“ können Sie das Layout, den Hintergrund und die Rahmenstile des Akkordeonblocks konfigurieren und seine Sichtbarkeit steuern.

Layout: #

• Marge: Definieren Sie den Raum um das Blocklayout. Dies hilft, Lücken zwischen anderen Blöcken festzulegen.
• Polsterung: Geben Sie einen Wert ein, um den Abstand um den Block innerhalb seines Layouts festzulegen.
• Breite: Abgesehen von der Beibehaltung der Standardlayoutbreite.
  • Gesamtbreite: Wenn Sie diese Option auswählen, wird das Layout über die gesamte Bildschirmbreite ausgerichtet.
  • Inline (Auto): Beim Anwenden hat es die gleiche Breite wie das Blockelement.
  • Brauch: Wenn Sie diese Option wählen, wird ein Schieberegler angezeigt, mit dem Sie den horizontalen Bereich des Blocklayouts definieren können.
• Z-Index: Verwenden Sie den Schieberegler, um die Stapelreihenfolge des Blocks mit anderen Blöcken festzulegen.

Position: #

Unter der Dropdown-Liste sehen Sie drei Optionen: Standard, Absolut, Und Fest. 

• Absolut: Wenn Sie diese Option auswählen, erhalten Sie eine absolute Position des Blocks, d. h. die Elemente passen in ihren Container.
• Fest: Mit der Option „Feste Position“ passt das Element das gesamte Ansichtsfenster oder den gesamten Bildschirm an.

Sowohl die Option „Absolut“ als auch die Option „Fest“ haben ähnliche Einstellungen wie die folgenden:

• Horizontale Ausrichtung: Wählen Sie die Positionierungsrichtung zwischen links und rechts.
• Versatz: Verwenden Sie den Schieberegler oder geben Sie manuell einen Wert ein, um die horizontale Positionierung des Blocks anzupassen.
• Vertikale Ausrichtung: Wählen Sie die Positionierungsrichtung zwischen nach oben oder nach unten.
• Versatz: Verwenden Sie den Schieberegler oder geben Sie manuell einen Wert ein, um die vertikale Positionierung des Blocks anzupassen. 

Hintergrund: #

• Hintergrund: Wählen Sie eine Hintergrundoption zwischen Volltonfarbe, Farbverlauf oder Bild.

Unter der Hover-Option:

• Bild: Wenn Sie die Bildoption wählen, werden die folgenden Optionen geöffnet:
  • Bild: Wählen Sie ein Bild aus der Medienbibliothek oder laden Sie Ihr eigenes hoch.
  • Bildgrößee: Wählen Sie die Bildgröße zwischen Miniaturansicht, Mittel, Groß oder Vollbild.

• Position: Wählen Sie die Position der 10 verschiedenen Optionen aus.
• Anhang: Geben Sie die Beziehung des festen oder scrollbaren Hintergrundbilds zum Rest des Browserbildschirms an.
• Wiederholen: Wählen Sie eine Option, um festzulegen, wie Hintergrundbilder wiederholt werden.
• Bildschirmgröße: Wählen Sie eine Anzeigegröße aus vier verschiedenen Optionen.

• Übergangszeit: Verwenden Sie den Schieberegler, um den Hintergrundübergang vom Normal- zum Schwebezustand anzupassen.

Grenze: #

• Grenze: Unter dieser Einstellungsoption erhalten Sie Rahmeneinstellungsoptionen wie Breite, Stil und Farbe.
• Grenzradius: Legen Sie die Rundung des Rahmens durch Eingabe eines Wertes fest.
• Box Schatten: Holen Sie sich alle Einstellungen wie Farbe, horizontal/vertikal, Unschärfe, Ausbreitung und mehr, um dem Rand Schatteneffekte zu verleihen. 

Unter der Hover-Option:

• Übergangszeit: Sie können manuell einen Wert hinzufügen oder mit dem Schieberegler die Zeit für die Änderung des Rahmendesigns im Schwebezustand festlegen.

Sichtweite: #

Mit dem Sichtbarkeitsmodul können Sie die Anzeige von Blockdesigns je nach Gerätetyp steuern. Es gibt drei Geräteoptionen (Desktop, Tablet, Mobil) mit einem Umschaltknopf. Aktivieren Sie den Umschaltknopf, um das Blockdesign dieses Geräts auszublenden.

Sie können es jedoch weiterhin in der Editoransicht sehen.

Fortschrittlich: #

• Blockname: Geben Sie einen Namen ein, um diesen Block beim Verknüpfen oder beim Erstellen eines Skripts zum Stylen des Blocks eindeutig zu identifizieren.
• HTML-Anker: Fügen Sie eine URL hinzu, um auf eine Website-Seite zu verlinken.

• Zusätzliche CSS-Klassen: Weisen Sie dem Block zusätzliche CSS-Klassen zu, mit denen Sie den Block mit benutzerdefiniertem CSS nach Wunsch gestalten können. 

Achtung: Sie können mehrere Klassen separat mit Leerzeichen hinzufügen.

Das ist alles. Wir hoffen, dass Ihnen dieser Leitfaden dabei geholfen hat, zu lernen, wie Sie einer WordPress-Website ein Akkordeon-Design hinzufügen.