So erstellen Sie Hero-Website-Abschnitte in Gutenberg mit dem Total Theme

Das Total WordPress-Theme enthält eine ganze Reihe von Tools, die eine Unternehmenswebsite jemals benötigen könnte.

Das Theme bietet Ihnen eine visuelle Bearbeitung per WordPress Customizer und einen schnellen Import von Demodaten, die besonders hilfreich für den Aufbau einer herausragenden Startseite sind.

Wie Sie sehen, sperrt Sie die kostenlose Version von Total nicht mit zusätzlichen WordPress-Seitenerstellern, sondern bietet eine WordPress-native Möglichkeit, Ihre Website zu gestalten.

Mit der Einführung von Gutenberg, dem blockbasierten WordPress-Editor, kann jedes WordPress-Theme, einschließlich Total, viel weiter angepasst werden. Die Auswahl der Inhaltselemente (Blöcke) gibt uns die Anpassungsfreiheit, die wir noch nie zuvor im WordPress-Kern gesehen haben, das ist schwer zu leugnen.

Einige Blockstileinstellungen sind im Standardeditor jedoch immer noch sehr eingeschränkt. Wenn Sie also mit dem neuen Gutenberg-Editor und Total bessere Inhalte erstellen und gestalten möchten, finden Sie in diesem Tutorial ein paar hilfreiche Tipps.

Um genauer zu sein, möchten wir in diesem Beitrag einige Beispiele zeigen, wie man in Gutenberg so wichtige Website-Elemente wie Helden-, Subhelden- und Call-to-Action-Abschnitte erstellt und anpasst. Diejenigen, die normalerweise Unternehmen helfen:

• Erstellen Sie Einführungs-/Willkommens-Website-Abschnitte
• Fördern Sie wichtige Produkte oder Veranstaltungen
• Konzentrieren Sie sich auf bestimmte Portfolioelemente oder Dienstleistungen usw.

Um die Anpassungsmöglichkeiten von Gutenberg zu verbessern, verwenden wir das Getwid WordPress Blocks-Plugin, das wir Benutzern des Total-Themes empfehlen. Wir sind sicher, dass einige Total-Benutzer sich bereits bei Getwid versucht haben.

Aber für diejenigen unter Ihnen, die sich fragen, was Getwid ist, ist das Folgende eine kurze Beschreibung.

In wenigen Worten, es ist ein kostenloses , für Gutenberg natives Addon, das mit der bisher größten Bibliothek von Premium-ähnlichen Blöcken und einer Sammlung von Pick-and-Paste- maßgeschneiderten Designs für Gutenberg ausgestattet ist . Das ist nicht der einzige Grund, warum wir es empfehlen.

Wir sind besonders an diesem Plugin interessiert, weil es sich gut in das Standard-Total-Design einfügt, es Ihnen ermöglicht, jeden Block zu deaktivieren, den Sie nicht benötigen, und wirklich reich an Funktionen ist.

Das Plugin wird als empfohlen angezeigt, wenn Sie Total aktivieren – es ist eine vorübergehende Lösung, um zu sehen, ob es für unsere Kunden geeignet ist.

Aber gut, Sie müssen es selbst ausprobieren, um zu sehen, ob es Ihre Lösung ist. Lassen Sie uns in der Zwischenzeit die Beispiele durchgehen, die wir erstellt haben.

Beispiele für Hero- und Call-to-Action-Abschnitte, die mit Getwid in Total erstellt wurden

Wir haben diese Testläufe in einer kostenlosen Version des Total-Designs durchgeführt und können mit Sicherheit sagen, dass es fast keine Einschränkungen gab.

Allerdings sind die Optionen für die Gesamtbreite des Website-Containers begrenzt. Wenn Sie also nach immersiven Vollbild-Layouts suchen, sollten Sie an Total Plus denken.

Zunächst müssen Sie fast immer den Abschnittsblock von Getwid WordPress-Blöcken verwenden. Es ist ein Container, der eine beliebige Anzahl anderer Blöcke verarbeiten kann. Somit können Ihre Heldenabschnitte jede Art von Inhalt anzeigen.

Ein weiteres herausragendes Merkmal des Section-Containers ist, dass er Ihnen viele Hintergrundtypen bietet: ein Bild, eine Farbe, ein Video (aus Ihrer WP-Medienbibliothek oder YouTube), einen mehrfarbigen Farbverlauf und mehr.

Deine Hauptaufgaben bei der Gestaltung von Website-Bereichen mit dem Section-Block sind also:

• Wählen Sie den Hintergrundtyp aus und passen Sie ihn an, damit der Inhalt darüber lesbar und klar bleibt.
• Fügen Sie die benötigten Blöcke in der bevorzugten Reihenfolge ein.
• Passen Sie den Abstand an (es gibt ziehbare Winkel, genau wie in visuellen Buildern, um innere und äußere Räume festzulegen).
• Optional: Fügen Sie Animationen, Formteiler und andere Dekorationselemente hinzu.

Lassen Sie uns nun mit Beispielen fortfahren.

Beispiel 1. Die Produktpräsentation

Alle Blöcke in diesem Beispiel werden innerhalb des Section-Blocks platziert:

1. Erweiterte Überschrift
2. Erweiterte Überschrift
3. Erweiterte Überschrift
4. Schaltflächengruppe
5. Abschnittshintergrund: ein Bild (Positionierung > Oben rechts; Größe > Auto)

Der Kopfzeilenblock ermöglicht es Ihnen, jede Google-Schriftart, Textgröße, Schriftstärke usw. zu verwenden. Es gibt auch mehrere Stile für Schaltflächen (Füllung oder Umriss).

Die größte Herausforderung, die auftreten kann, besteht darin, das richtige Hintergrundbild zu finden und die richtige Bildposition auszuwählen, da die Größe automatisch basierend auf dem Ansichtsfenster geändert wird.

Beispiel 2. Portfolio-Extrakt

Alle Blöcke werden innerhalb des Section-Blocks platziert:

1. Erweiterte Überschrift
2. Erweiterte Überschrift
3. Drei Spalten (Absatz, Bild, Bild, Bild)
4. Abschnittshintergrund: Farbverlauf

Sie können auch einen Call-to-Action-Button platzieren, um auf die vollständige Portfolio-Seite zu verlinken.

Beispiel 3. Feature- oder Ereigniskarte

In einem solchen Heldenbereich können Sie ein Produkt, eine Veranstaltung, eine Dienstleistung, eine Sache, eine Person usw. präsentieren.

Im Block „Erweiterte Überschrift“ können Sie eine beliebige Schriftart auswählen:

In diesem Beispiel haben wir einen Hintergrund mit Farbverlauf und eine Trennlinie für die untere Hintergrundform (Wellen mit mehreren Ebenen) verwendet.

1. Zwei fortgeschrittene Überschriften
2. Absatz
3. Taste
4. Bild
5. Abschnittshintergrund: Farbverlauf + Formteiler

Beispiel 4. Call-to-Action-Abschnitt

Auch hier müssen Sie mit dem Section-Block beginnen. Um Überschriften wie im Beispiel unten zu platzieren, können Sie eine Vorlage aus der Getwid-Vorlagenbibliothek verwenden oder ein Muster von Grund auf neu erstellen.

Es ist ein sehr einfacher Abschnitt mit dem Hintergrundbild, einigen Überschriften und einer zentralisierten Schaltfläche.

1. Drei erweiterte Heading-Blöcke
2. Der Button-Block
3. Abschnittshintergrund: ein Bild mit Deckkraft (Größe > Cover)

Sie werden auch genießen, wie einfach Sie die Inhaltsausrichtung mit den verschiebbaren Winkeln anpassen können:

Es ist auch ein Trend, versetzte Layouts zu erstellen, indem man Überschriften über Bilder legt:

In Getwid können Sie das erreichen, indem Sie ein entsprechendes Hintergrundbild mit etwas Leerraum für die Textzeile festlegen.

Beispiel 5. Sub-Helden-Abschnitte

Ziemlich oft bieten Subhelden-Abschnitte mehr Informationen über ein Projekt oder eine Person. Es ist geeignet, um Ihre Biografie, Geschichte oder Schlüsselziele zu präsentieren.

Als visuelles Element haben wir den Image Stack Gallery-Block von Getwid verwendet, der mehrere Stile enthält. Sie können es jedoch durch ein Bild, Video oder ein anderes Inhaltselement ersetzen.

1. Zwei fortgeschrittene Überschriften
2. Absatz
3. Taste
4. Der Bildstapel-Galerie-Block
5. Abschnittshintergrund: einfarbig

Beispiel 6. Visuelle Akzente

Bildergalerien, Schieberegler und Videos sind sehr verbreitete visuelle Werkzeuge zum Erstellen aufmerksamkeitsstarker Abschnitte.

Sie können beispielsweise den Media & Text Slider-Block von Getwid verwenden, um eine Diashow mit optionalem Textinhalt zu erstellen:

1. Schieberegler für Medien und Text
2. Abschnittshintergrund: Farbverlauf + obere und untere Trennlinien mit benutzerdefinierter Höhe

Es gibt auch zahlreiche postbasierte Getwid-Blöcke, die in einem Schieberegler angezeigt werden können (sie werden automatisch aus dem Inhalt Ihrer Website bezogen). Möchten Sie einige der neuesten oder manuell ausgewählten Beiträge in einem Schieberegler- oder Raster-/Listenformat präsentieren? Dafür gibt es eine Sperre.

Beispiel 7. Banner

Getwid wird mit einem praktischen Banner-Block geliefert, der Bild- und Text-Standardcontainer bietet. Es hat auch eine Auswahl an Animationseffekten, mit denen Sie Abschnitte mit Bannern dynamischer gestalten können.

Der Block passt perfekt sowohl zu temporären Verkäufen als auch zu ständigen Highlights.

1. Banner
2. Abschnittshintergrund: einfarbiger Farbverlauf

Beispiel 8. Informative Abschnitte

Wenn Sie mehr Informationen strukturiert und kompakt anzeigen möchten, bietet Getwid zu diesem Zweck drei dedizierte Blöcke an: Tabs, Accordion und Toggle.

Hier ist ein zweispaltiges Layout mit dem Accordion-Block und einem Bild daneben:

Das einzigartige Merkmal dieser Blöcke ist die Fähigkeit, jeden Block innerhalb der Registerkarten-Widgets zu enthalten. Das bedeutet, dass Sie neben Text auch Bilder, Listen, Videos, Galerien und Schieberegler zu den Registerkarten hinzufügen können.

Es gibt viele weitere Blöcke, die Ihren Marketingabschnitten einzigartige Funktionen hinzufügen können, z. B. Image Hotspot zum Erstellen informativer Bildabschnitte, Icon Box für Dienste, einen Instagram-Galerie-Feed in Echtzeit und mehr.

Sie können ähnliche Abschnitte aus einer leeren Gutenberg-Seite erstellen und gestalten, indem Sie sich für das erforderliche Seitenlayout in den Gesamtseiteneinstellungen entscheiden.

Einwickeln

Weißt du, was das Beste an der Kombination von Gutenberg und Getwid im kostenlosen Total-Design ist? Nein, es kommt nicht nur auf die Anzahl der Blöcke an.

Was noch wichtiger ist, Sie müssen nicht das Auge eines Designers (oder die Fähigkeiten eines Entwicklers) haben, um gut aussehende Inhalte zu erstellen. Es gibt so viele vorgefertigte Skins, Blockmuster und fertige Designs, die Ihnen helfen sollen. Getwid WordPress-Blöcke sind auch eine gute Alternative zu Seitenerstellern für diejenigen unter Ihnen, die bei der kostenlosen Version von Total bleiben.

Bis der Blockeditor nicht ausgereift genug ist, kann ein zusätzliches Gutenberg-natives Addon ein guter Ausgangspunkt sein.

Hast du Gutenberg oder Getwid ausprobiert? Lass es uns in den Kommentaren wissen.