WordPress Shape Divider: Meistern Sie die Kunst, Abschnitte zu trennen

Veröffentlicht: 2023-07-26

Versuchen Sie, eine bessere Webseite zu erstellen, um Ihre Inhalte, Dienstleistungen und Produkte zu bewerben oder zu präsentieren? Eine praktische Sache ist ein von PostX angebotenes Element – ​​Shape Divider.

Shape Divider ist ein Designelement oder Werkzeug zum Erstellen optisch ansprechender und dynamischer Abschnittstrenner auf Webseiten. Sie können damit einzigartige Formen, Muster oder Linien hinzufügen, die verschiedene Inhaltsabschnitte trennen und Ihrer Website ein ansprechenderes und moderneres Aussehen verleihen.

Aber wie trennt man Abschnitte mit einem Formteiler?

  • Erstellen Sie zunächst eine Seite und fügen Sie den Zeilenblock hinzu.
  • Wählen Sie dann in der Einstellung „Formteiler“ aus.
  • Fügen Sie oben/unten einen Formstil hinzu.
  • Schließlich können Sie Farbe hinzufügen, es umdrehen oder die Breite und Höhe anpassen.

Es ist nur die Zusammenfassung. Mit Formen können Sie verschiedene Dinge tun, und in diesem Artikel haben wir ausführlich erklärt, wie Sie einen WordPress-Formteiler verwenden. Lesen Sie also weiter.

Wie verwende ich einen WordPress-Formteiler?

Jetzt ist es an der Zeit, eine Schritt-für-Schritt-Anleitung zur Verwendung von Shape Divider zu erklären. PostX bietet multifunktionale Teiler für Website-Abschnitte. Wenn Sie also PostX nicht verwenden, installieren und aktivieren Sie PostX.

Holen Sie sich PostX Pro , um alle aufregenden Funktionen freizuschalten und fantastische Websites zu erstellen

Schritt 1: Melden Sie sich an und erstellen Sie einen Beitrag/eine Seite

Melden Sie sich zunächst bei Ihrem WordPress-Dashboard an und suchen Sie dann oben nach der Schaltfläche „+ Neu“. Bewegen Sie nun den Cursor dorthin und fügen Sie je nach Wunsch einen Beitrag oder eine Seite hinzu.

add new page
neue Seite hinzufügen

Schritt 2: Fügen Sie den Zeilen-Spalten-Block hinzu

Klicken Sie nun auf die Schaltfläche „+“ und es erscheint ein Suchfeld zum Hinzufügen eines Blocks. Geben Sie dann im Suchfeld „Zeile“ ein und Sie sehen das Zeilen-Spalten-Blocksymbol. Betrachten Sie das folgende Bild, wenn Sie Erläuterungen benötigen.

add row column block
Zeilenspaltenblock hinzufügen

Schritt 3: Wählen Sie eine beliebige Vorlage

Jetzt werden Sie aufgefordert, ein beliebiges Layout auszuwählen. Es gibt 10 voreingestellte Layouts. Wählen Sie eine davon nach Ihren Wünschen. Ich gehe vom 70:30-Layout aus.

choose any layout
Wählen Sie ein beliebiges Layout

Schritt 4: Wählen Sie die Formteiler-Einstellung

Nachdem Sie das Layout erstellt haben, finden Sie in der Einstellung verschiedene Optionen zum Anpassen der Zeile. Eine der Optionen, die Sie finden, ist „Shape Divider“. Überprüfen Sie das Bild, um es leichter zu finden.

open shape divider option
Option für offene Trennwände

Schritt 5: Erkunden Sie die Formteiler-Einstellungen

Jetzt sind wir im Hauptsegment. Nachdem Sie die Schaltfläche „Shape Divider“ ausgewählt haben, finden Sie darunter verschiedene Einstellungsmöglichkeiten.

explore shape divider setting
Entdecken Sie die Formteiler-Einstellung

Dem Bild zufolge sind zunächst 9 anpassbare Felder verfügbar. Lassen Sie uns nun einige Ideen zu den Hauptfunktionen haben.

1. Position und Typ

In der allerersten Einstellung müssen Sie die Position auswählen. Es gibt 2 Möglichkeiten für Sie. Sie können die Oberseite, die Unterseite oder beides auswählen. Beginnen wir mit der obersten Position. Danach müssen Sie den Typ auswählen. Es stehen 8 voreingestellte Formen zur Verfügung.

types of shape dividers
Arten von Formteilern

Sie können eine davon auswählen, um Ihre Seite zu gestalten. Lassen Sie uns einige davon erkunden.

Wenn Sie die erste Voreinstellung auswählen, wird sie wie folgt angezeigt:

1st preset
1. Voreinstellung

Wenn Sie die dritte Voreinstellung auswählen, wird sie wie folgt angezeigt:

3rd preset
3. Voreinstellung

Und wenn Sie die letzte Voreinstellung auswählen, wird sie wie folgt angezeigt:

last preset
letzte Voreinstellung

2. Farbe

Die nächste und weitere wichtige Funktion ist die Farbeinstellung. Sie können die Farbe der Form nach Ihren persönlichen Vorlieben ändern. Glücklicherweise gibt es Optionen zur Auswahl von „Solid“ und „Gradient“. „Sehen wir uns ein Beispiel an.

Wenn Sie die Farbeinstellung „Vollton“ auswählen, stehen Ihnen verschiedene Optionen für Volltonfarben zur Verfügung. Wählen Sie eine davon aus. Oder Sie können auf die Farbauswahl (das Pinselsymbol) klicken, um die Farbpalette zu öffnen und die gewünschten Farben auszuwählen. Gehen wir mit der blauen Farbe um und sehen, wie sie aussieht:

choose desired color
Wählen Sie die gewünschte Farbe

Kommen wir nun zur Einstellung „Verlauf“ und wie bei der vorherigen Einstellung finden Sie einige Verlaufsfarben. Ich habe die Farbe „Juicy Cake“ ausgewählt und so sieht sie aus:

gradient color
Farbverlauf

3. Breite und Höhe

Die nächsten Optionen, die Sie finden, sind Breite und Höhe. Sie können die Breite und Höhe ganz einfach nach Ihren Wünschen ändern. Lassen Sie uns zum Beispiel „Breite 100 und Höhe 500“ beibehalten und sehen, wie die Form aussieht –

adjust width and height
Breite und Höhe anpassen

4. Umdrehen, Nach vorne bringen und Versetzen

Es sind noch 3 weitere Einstellungen übrig, die speziell der weiteren Individualisierung dienen. Lassen Sie uns etwas über sie erforschen.

Es gibt eine Option namens „Flip“. Standardmäßig ist sie deaktiviert. Wenn Sie es aktivieren, wird die Position der Form umgekehrt. So wird es aussehen.

flip the shape divider
Drehen Sie den Formteiler um

Die nächste Option ist „Nach vorne bringen“. Die Funktion dieser Einstellung besteht darin, dass Sie auswählen können, ob die Form vorne oder der Block angezeigt wird, wenn ein Block die Form überlappt. Standardmäßig ist die Option deaktiviert. Wenn Sie also einen Block hinzufügen, wird dieser vor der Form angezeigt.

disable bring to front option
Deaktivieren Sie die Option „Nach vorne bringen“.

Wenn Sie jedoch möchten, dass die Form in den Vordergrund gerückt wird, aktivieren Sie die Option. Mal sehen, wie es dann aussieht.

enable bring to front option
Aktivieren Sie die Option „Nach vorne bringen“.

Das ist alles über die Trennwände. Ich denke, Sie haben inzwischen die Funktionsweise verstanden. Um Ihnen jedoch eine bessere Vorstellung zu geben, erstellen wir gemeinsam ein Projekt mit Shape Divider von PostX.

Praktische Verwendung des Formteilers

Da Sie den Prozess der Verwendung eines Formteilers bereits verstanden haben, gehen wir dieses Mal direkt vor und führen Sie durch die Erstellung eines beliebigen Projekts mit dem Formteiler von PostX.

Schritt 1: Erstellen Sie einen Zeilenblock und fügen Sie ein 70:30-Layout hinzu

Im vorherigen Abschnitt über „Wie verwende ich einen Formteiler?“ Wir haben gezeigt, wie man den PostX-Zeilenblock hinzufügt und ein Layout auswählt. Befolgen Sie einfach die Schritte 1, 2 und 3 im Abschnitt „Wie verwende ich einen Formteiler?“ Abschnitt, und dieser Schritt wird durchgeführt.

Schritt 2: Wählen Sie die Überschriftsschaltfläche

Klicken Sie nun auf den ersten Block und fügen Sie den Block „Überschrift“ von PostX hinzu. In der Überschrift werden wir etwas hinzufügen, das sich auf ein Fitnessstudio in Miami bezieht.

add heading block
Überschriftenblock hinzufügen

Schritt 3: Fügen Sie einen Absatz und eine Schaltfläche unter der Überschrift hinzu

Jetzt fügen wir unter der Überschrift eine Absatzschaltfläche hinzu, um etwas Spannendes über das Fitnessstudio zu schreiben und so Menschen anzulocken.

add paragraph block
Absatzblock hinzufügen

Fügen Sie nun eine Schaltfläche unter der Überschrift hinzu. Suchen Sie dazu nach einer Schaltfläche und fügen Sie sie hinzu.

add button block
Tastenblock hinzufügen

Gestalten Sie es nun mit einer bestimmten Farbe und einem bestimmten Text. Schauen wir uns an, was wir getan haben.

Schritt 4: Bild hinzufügen

Jetzt fügen wir im leeren Block auf der rechten Seite ein einprägsames Fitnessstudio-Bild hinzu, damit es professionell aussieht.

add image
Bild hinzufügen

Schritt 5: Formteiler hinzufügen und entwerfen

Zum Schluss fügen Sie den Formteiler hinzu, indem Sie die unten angegebenen Schritte befolgen. Hier fügen wir den Formteiler für den oberen und unteren Teil hinzu und verwenden Verlaufsfarben. Schauen wir uns die endgültige Version an.

final output
endgültige Ausgabe

Letzte Worte

Das ist alles über Shape Divider. Formteiler bieten eine Reihe anpassbarer Optionen, z. B. die Auswahl verschiedener Formen, die Anpassung ihrer Größe und Position sowie die Auswahl von Farben oder Farbverläufen, die zur Ästhetik Ihrer Website passen.

Durch das Hinzufügen von Shape Dividers zu Ihrer WordPress-Site können Sie deren visuelle Attraktivität verbessern, ein Gefühl von Originalität erzeugen und Ihre Inhalte durch kreative und fesselnde Abschnittsunterteilungen hervorheben.

Wir glauben, dass Ihnen jetzt alles über den Elementformteiler klar ist.

Holen Sie sich PostX Pro , um alle aufregenden Funktionen freizuschalten und fantastische Websites zu erstellen

Gefällt Ihnen dieser Artikel? Verbreiten Sie es weiter
  • Optimize for Featured Snippets

    So optimieren Sie für Featured Snippets

  • WordPress Pagination

    So fügen Sie WordPress-Paginierung zu jedem Theme hinzu

  • WordPress Menu Customization in 2022 WordPress Theme

    Anpassung des WordPress-Menüs im Twenty Twenty-Two-Theme

  • Food Layout 2

    Exklusives Food-Layout 2 – Starterpaket Montag