Wie man Prozessschritte in WordPress anzeigt

Wie wir in vielen unserer Blog-Beiträge wiederholt gesagt haben, Tischberg ist ein vielseitiges Plugin. Es ist nicht nur ein Plugin zur Tabellenerstellung; Sie können es auch für Mehrzweck-Webdesign-Projekte verwenden. Zum Beispiel für Feature-Boxen, Call-to-Action-Abschnitte, Infografiken, Schritt-für-Schritt-Anleitungen und mehr.

In diesem Tutorial zeigen wir Ihnen, wie Sie Prozessschritte in WordPress anzeigen können, damit Sie Ihren Webbesuchern Schritt-für-Schritt-Anleitungen präsentieren können. Fangen Sie an!

Das Inhaltsverzeichnis:

Schritt 01: Hinzufügen des Tableberg-Blocks zum Editor

Das Tableberg-Plugin fügt einen Block namens Tischberg zur Blockbibliothek hinzufügen. Fügen Sie ihn dem Editor hinzu, indem Sie auf die Schaltfläche Plus-Symbol (+).

Legen Sie die Anzahl der Zeilen und Spalten fest, die Sie zur Darstellung des Prozesses benötigen. Für dieses Tutorial stellen wir 3*9 für Spalten und Zeilen ein.

Die Tabelle ist fertig. Als Nächstes fügen wir den Zeilen und Spalten Inhalte hinzu, um die Prozessschritte zu veranschaulichen.

Schritt 02: Hintergrundfarbe für einzelne Zeilen festlegen

Mit Tableberg können Sie die Zeilenfarbe individuell einstellen. Um dies zu tun, eine Zeile auswählen und gehen Sie zum Registerkarte "Stile. Klicken Sie dann auf [PRO] Zeilenhintergrundfarbe. Ich hoffe, Sie können den Rest erledigen.

Wie Sie sehen können, haben wir für die einzelnen Zeilen unterschiedliche Farben festgelegt. Da die Farbgebung und Stilisierung aller anderen Elemente vom Hintergrund abhängt, haben wir die Zeilenfarben im Voraus festgelegt.

Schritt 03: Auflistung der Schrittnummern im Prozess

Führen Sie die Nummern der Schritte auf, die Sie während des Prozesses durchlaufen werden. Machen Sie die Text fett, sie zentral auszurichtensetzen, ein Textfarbeund ihre Größe zu erhöhen.

Schritt 04: Schreiben Sie die Titel der Schritte und ihre Beschreibungen

Beginnen Sie nun damit, die Titel und Beschreibungen der einzelnen Schritte in jede Spalte zu schreiben. Sie können zwei Absatzblöcke verwenden, einen für den Titel und einen für die Beschreibung. Stellen Sie als nächstes die Textfarbe auf Weiß ein.

Sie können den Titeltext etwas größer machen als den Beschreibungstext, damit er leicht zu unterscheiden ist.

Schritt 05: Bilder zu den jeweiligen Zellen hinzufügen

Die letzte Spalte ist für das Hinzufügen von Bildern reserviert. Fügen wir Bilder in die Zellen der Spalte ein, die den Tabellenzeilen entspricht.

Also, fügen Sie die Bildblock by clicking the Plus-Symbol (+) in die entsprechende Zelle. Sie können Bilder hochladen, entweder vom lokalen Laufwerk oder von Ihrer Medienbibliothek.

Wie Sie sehen, haben wir der Zelle ein Bild hinzugefügt. Sie können die Größe des Bildes erhöhen, indem Sie das kreisförmige Symbol ziehen und gleichzeitig gedrückt halten.

Fügen Sie auf die gleiche Weise allen anderen Zellen der letzten Spalte Bilder hinzu, wobei Sie darauf achten, dass sie zum Inhalt passen.

Schritt 06: Fügen Sie Ihre Kontaktinformationen hinzu

Fügen Sie in den Absatzblock Kontaktinformationen ein, damit Besucher und Nutzer Sie erreichen können, wenn sie Hilfe benötigen.

Fügen Sie nun die Block mit gestalteter Liste in die letzte Zeile der Tabelle.

Wählen Sie ein Symbol, das die Website darstellt. Schreiben Sie neben das Symbol die Adresse Ihrer Website.

Schritt 07: Anpassen des Tabellenrandes

Mit Tableberg können Sie den inneren und äußeren Rand der Tabelle entfernen, einfärben und in der Breite verändern. Wenn Sie diese Optionen entsprechend konfigurieren, können Sie Ihre Tabelle weiter verschönern.

Gehen Sie zum Registerkarte "Stile. Scrollen Sie auf der Registerkarte nach unten und gehen Sie zur Seite Grenzabschnitt. Im heutigen Tutorial haben wir die äußeren und die Spaltenränder entfernt, mit Ausnahme des Zeilenrandes. Wir haben die weiße Farbe und 1 px Breite für die Zeilenränder eingestellt.

Schritt 08: Vorschau der Prozess-Schritte

Rufen Sie die Vorschauseite auf. Sehen Sie, ob Ihr Entwurf perfekt dargestellt wird. Wir haben so viel von dem Bild angezeigt, wie auf dem Bildschirm unten zu sehen ist.

Schlussfolgerung

Tableberg ist ein aufregendes und vielversprechendes, vielseitiges Plugin für die Erstellung von Tabellen. Sie können mit dem Plugin neben Tabellen auch verschiedene wunderschöne Webabschnitte erstellen. Zum Beispiel können Sie wie man in WordPress Feature-Boxen hinzufügt.

Wir werden weitere Blogbeiträge veröffentlichen, in denen wir weitere außergewöhnliche Dinge und Designs vorstellen, die Sie mit dem Plugin erstellen können. Bleiben Sie also bei uns und erkunden Sie unsere Blogs, um Ihr Wissen zu erweitern.