{"id":371963,"date":"2023-04-07T16:19:00","date_gmt":"2023-04-07T13:19:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=371963"},"modified":"2023-04-07T16:19:04","modified_gmt":"2023-04-07T13:19:04","slug":"so-erstellen-sie-einen-schrittfluss-mit-dem-elementor-process-widget","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-einen-schrittfluss-mit-dem-elementor-process-widget\/","title":{"rendered":"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget"},"content":{"rendered":"\n<p>Unabh\u00e4ngig von der Art Ihrer Website ist es wichtig, nicht nur qualitativ hochwertige Inhalte zu haben, sondern diese auch ansprechend darzustellen. Gl\u00fccklicherweise erm\u00f6glichen uns viele Tools den <strong>kreativen Austausch einer Vielzahl von Informationen und Daten<\/strong>. Sie k\u00f6nnen <a href=\"https:\/\/themewp.inform.click\/de\/so-fuegen-sie-den-elementor-parallax-effekt-schnell-und-einfach-hinzu\/\" title=\"einen Parallax-Effekt hinzuf\u00fcgen\">einen Parallax-Effekt hinzuf\u00fcgen<\/a>, um den modernen Ton Ihrer Website hervorzuheben, <a href=\"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-umschalter-und-akkordeons-in-wordpress\/\" title=\"Umschalter und Akkordeons verwenden\">Umschalter und Akkordeons verwenden<\/a>, um eine bessere Inhaltsstruktur zu erreichen, und Prozess-Widgets sind wertvoll, da sie es uns erm\u00f6glichen, komplexe Daten auf klare, interessante und ansprechende Weise anzuzeigen.<\/p>\n<p>Wenn Sie Inhalte haben, die die Darstellung eines Prozesses implizieren, ist es wichtig, dass Sie diese auf einfache, klare und pr\u00e4gnante Weise f\u00fcr Ihre Benutzer aufschl\u00fcsseln k\u00f6nnen, ohne jedoch wichtige damit verbundene Details zu verlieren. Online-Shops werden das Prozess-Widget wertvoll finden, da es verwendet werden kann, <strong>um den Prozess des Online-Kaufs Schritt f\u00fcr Schritt zu zeigen, Unternehmen k\u00f6nnen mitteilen, wie das Einstellungsverfahren in ihrem Unternehmen aussieht<\/strong>, medizinische Websites k\u00f6nnen <strong>den Heilungsprozess durch Phasen<\/strong> und jede Art von Arbeitsablauf zeigen kann durch Phasen visuell dargestellt werden \u2013 die M\u00f6glichkeiten sind grenzenlos.<\/p>\n<p>In diesem Artikel zeigen wir Ihnen, wie Sie das Prozess-Widget auf Ihrer Website einfach einstellen und anpassen k\u00f6nnen. Bleiben Sie dran, um mehr zu lesen \u00fcber:<\/p>\n<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/colSjAmnAQU\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Qi-Addons f\u00fcr Elementor Process Widget<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Addons f\u00fcr Elementor<\/a> ist ein leistungsstarkes, vielseitiges und <strong>sehr einfach zu bedienendes Tool<\/strong>, das Ihrer Website neben der Funktionalit\u00e4t einen Hauch von Eleganz verleiht. Dieses Tool ist derzeit die <strong>gr\u00f6\u00dfte Sammlung kostenloser Add-Ons im Web und umfasst 60 kostenlose Widgets<\/strong>, die es auch Anf\u00e4ngern leicht machen, ihre Websites ohne Programmierkenntnisse mit effektiven Elementen zu bereichern. Neben kostenlosen Widgets finden Sie erstaunliche 40+ Premium.<\/p>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/process\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external\"><\/a>Das kostenlos enthaltene <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/process\/?campaign=ProcessWidget&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Prozess-Widget bietet<\/a> <strong>zahlreiche Anpassungsoptionen und erm\u00f6glicht es Ihnen, sch\u00f6ne Darstellungen aller Arten von Workflows und Prozessen zu erstellen<\/strong>, die sich nahtlos an die Anforderungen und den Stil Ihrer Website anpassen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d783b50.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Nachdem Sie das Prozess-Widget zur Seite gezogen haben, erhalten Sie seine Standardansicht, die Sie bearbeiten k\u00f6nnen. Es ist wichtig zu beachten, dass das Widget die von Ihrem Design verwendeten Schriftarten verwendet. Wenn Sie also in diesem Teil Einheitlichkeit w\u00fcnschen, m\u00fcssen Sie ihn nicht \u00e4ndern.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36d96dc04.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Die Optionen zum Einrichten des Prozess-Widgets sind Inhalts- und Stiloptionen. Hier werden wir <strong>ausw\u00e4hlen, welches Element wir in unserem Prozess-Widget haben wollen, und wir werden bestimmen, wie es stilistisch aussehen wird<\/strong>. Es gibt viele Anpassungseinstellungen, aber sie sind so gut organisiert, dass Sie es sehr einfach finden werden, Optionen auszuprobieren und mit ihnen zu experimentieren.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36db5fdc3.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<h2>Prozess-Widget \u2013 Option f\u00fcr die Registerkarte \u201eInhalt&#8220;.<\/h2>\n<p>Hier finden Sie allgemeine Optionen, Animationsoptionen, Prozesslayout und ein n\u00fctzliches Entwicklertool, aber auch <strong>Hilfe, wo Sie Anweisungen und Unterst\u00fctzung vom Addon-Autor selbst finden k\u00f6nnen<\/strong>.<\/p>\n<h3>Allgemeine Optionen<\/h3>\n<p>Als erstes m\u00fcssen Sie die allgemeinen Einstellungen des Widgets selbst einrichten.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36ddf0499.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Hier w\u00e4hlen wir die <strong>Anzahl der Spalten und wenn Sie m\u00f6chten, dass alle Ihre Artikel in einer Zeile stehen, dann w\u00e4hlen Sie die Anzahl der Artikel f\u00fcr die Anzahl der Spalten aus<\/strong>. Andernfalls, wenn Sie weniger Spalten als das Element einf\u00fcgen, befinden sich die Elemente in 2 oder mehr Zeilen, oder wenn Sie mehr Spalten als das Element ausw\u00e4hlen, bleibt ein leerer Platz in der Zeile.<\/p>\n<p>Sie werden wahrscheinlich wissen, wie viele Elemente Sie m\u00f6chten, sobald Sie mit dem Erstellen beginnen, daher richte ich es gerne sofort ein, und nat\u00fcrlich k\u00f6nnen Sie diese Einstellungen auch sp\u00e4ter anpassen.<\/p>\n<p>Eine wichtige Einstellung ist <strong>Columns Responsive<\/strong>, wo wir <strong>anpassen, wie unser Prozess auf Ger\u00e4ten unterschiedlicher Gr\u00f6\u00dfe aussehen wird<\/strong>. Sie k\u00f6nnen Vordefiniert oder Benutzerdefiniert ausw\u00e4hlen, es ist Ihre Wahl.<\/p>\n<p>Basierend auf unserer Erfahrung sieht die Gr\u00f6\u00dfe von 618-768px am besten aus, wenn sie eine Spalte verwendet, also haben wir es so ausgedr\u00fcckt.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e0a9b27.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p><strong>Items dienen nat\u00fcrlich dazu, dem Prozess ein Item hinzuzuf\u00fcgen<\/strong>. Sie k\u00f6nnen beliebig viele hinzuf\u00fcgen. Es besteht die M\u00f6glichkeit, das Element sowohl zu <strong>kopieren als auch zu l\u00f6schen<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e2be51a.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p><strong>Jeder Artikel wird separat angepasst<\/strong>, seine spezifischen Eigenschaften werden eingegeben und <strong>es ist m\u00f6glich, bestimmte Artikel f\u00fcr jeden Artikel einzustellen, so dass jeder Artikel anders aussieht<\/strong>. Wenn Sie jedoch m\u00f6chten, <strong>dass alle Elemente gleich aussehen, geben Sie deren Stil in den Stiloptionen an, nicht in jedem Element einzeln<\/strong>. Alles, was in den Stiloptionen eingestellt ist, gilt f\u00fcr alle Prozesselemente, mit Ausnahme derjenigen, bei denen das Element selbst in Bezug auf die Stileinstellungen etwas anders eingestellt ist. Alles wird Ihnen klar sein, wenn wir die Einstellungen durchgehen.<\/p>\n<p>Die Felder <strong>Titel<\/strong> und <strong>Text<\/strong> werden verwendet, <strong>um Text einzugeben, der zu einem bestimmten Prozessschritt geh\u00f6rt<\/strong>. Nat\u00fcrlich hat in diesem Fall jeder Schritt einen anderen Titel und eine andere Beschreibung, sodass Sie diese Werte nur hier eingeben k\u00f6nnen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e46aed3.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>So sieht es aus, wenn es durch unseren Text ersetzt wird.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e68d676.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p><strong>Artikeloptionen beziehen sich auf den Teil des Artikels, der nicht Titel und Beschreibung ist<\/strong>. Wir verwenden <strong>Item Offset, um einen Artikel zu positionieren<\/strong>. Der Kreis mit der Einheit und die Linie, die zum n\u00e4chsten Schritt f\u00fchrt, sind Teil eines Elements und durch Anpassen des Positionsversatzes <strong>verschieben wir diese Elemente nach unten oder oben<\/strong>. Wie Sie auf dem Bild sehen k\u00f6nnen, haben wir f\u00fcr das erste Element einen Offset eingestellt und es liegt jetzt etwas unter dem Niveau des n\u00e4chsten Elements.<\/p>\n<p>Die Item-Offset-Option existiert auch in den Style-Optionen, die, wie bereits erw\u00e4hnt, alles, was dort eingestellt ist, f\u00fcr alle Prozesselemente gilt. Wenn Sie also m\u00f6chten, dass sich alle Elemente f\u00fcr jedes Element in einer anderen Ebene befinden, legen Sie den Versatz separat fest.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36e95bd4c.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p><strong>Item Holder Size<\/strong> ist die Gr\u00f6\u00dfe des Feldes, in dem es derzeit 1 ist, also die Anzahl der Schritte, und sp\u00e4ter werden wir sehen, was hier noch zu finden ist. (Diese Option finden Sie auch in den Stiloptionen, wenn wir m\u00f6chten, dass alle Artikelhalter dieselbe Gr\u00f6\u00dfe haben).<\/p>\n<p><strong>Die Artikeltypografie<\/strong> bezieht sich auf die typografischen Merkmale der Anzahl der Schritte.<\/p>\n<p>Der <strong>Hintergrund<\/strong> dient dazu <strong>, dem Artikel die entsprechende Farbe bzw. den Hintergrund zuzuweisen<\/strong>. Au\u00dferdem k\u00f6nnen wir einen Hintergrund mit Farbverlauf festlegen. Wenn wir m\u00f6chten, dass alle Elemente denselben Hintergrund haben, passen wir ihn in den Stiloptionen an. Wenn wir m\u00f6chten, dass der Hintergrund f\u00fcr ein anderes Element unterschiedlich ist, passen wir ihn \u00fcber die Elementeinstellungen an.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36eb93a9c.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Im Moment f\u00fcgen wir nur die Hintergrundfarbe hinzu.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36edc20b7.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Standardm\u00e4\u00dfig werden Elemente als Kreise angezeigt, aber wenn Sie ein Quadrat oder eine Form mit bestimmten Winkeln w\u00fcnschen, passen Sie den <strong>Radius des Elementhalters an.<\/strong> <strong>Wenn der Wert 0 ist, dann ist es das Quadrat der rechten Winkel<\/strong>. Durch Hinzuf\u00fcgen von Werten sehen Sie, wie sich die Winkel \u00e4ndern. Wenn Sie die Werte l\u00f6schen, erhalten Sie wieder einen Kreis. Nicht alle Winkel m\u00fcssen gleich sein, Sie k\u00f6nnen f\u00fcr jeden Winkel einen anderen Wert einstellen.<\/p>\n<p><strong>Randtyp, Breite und Farbe beziehen sich auf Randelemente<\/strong>. Wenn Sie keinen Rand w\u00fcnschen, ist Border Type None.<\/p>\n<p>Sie haben auch alle diese Einstellungen in den Stiloptionen, wenn Sie m\u00f6chten, dass alle Elemente gleich sind.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f07dd7e.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Wir haben gerade gesehen, wie man den Offset \u00e4ndert, und jetzt haben wir zwei Optionen, mit denen wir nur die Position der Linie \u00e4ndern k\u00f6nnen, die zum n\u00e4chsten Prozess f\u00fchrt. <strong>Line top offset<\/strong> wird verwendet, <strong>um die Position der Linie (nach oben\/unten)<\/strong> zu verschieben, und <strong>Line rotation wird verwendet, um sie zu drehen<\/strong>. Wie Sie in der Anmerkung unten sehen k\u00f6nnen, haben wir die Linie gedreht und sie steht nicht mehr im rechten Winkel zum Artikel. Sie haben diese Einstellungen nur am Artikel selbst.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f3073fc.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Was wir am Anfang absichtlich vermisst haben, ist die <strong>Option Icon Type<\/strong>, sie dient uns dazu <strong>, ein Icon aus der Bibliothek zum Item hinzuzuf\u00fcgen oder unser SVG-Icon hochzuladen<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f658152.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Achten Sie darauf, was als n\u00e4chstes passiert, <strong>die Ordnungszahl der Schritte wird nicht mehr in der Mitte des Elements geschrieben, sondern als separater zus\u00e4tzlicher Kreis<\/strong>.<\/p>\n<p>Jetzt beziehen sich <strong>Artikeltypografie<\/strong> und <strong>Artikelfarbe auf das Symbol selbst<\/strong>. Hier passen wir die Gr\u00f6\u00dfe (in der Typografie-Gr\u00f6\u00dfenoption) und die Farbe f\u00fcr jedes Symbol an.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36f84bdde.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Was wir oben nicht n\u00e4her betrachtet haben, ist das Hintergrundbild des Items wie beim zweiten Item im Beispiel:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fac84a2.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p><strong>Jedes Hintergrundbild enth\u00e4lt bestimmte Einstellungen<\/strong> bez\u00fcglich der Positionierung des Bildes, seiner Gr\u00f6\u00dfe und ob es ein einfacher Hintergrund oder ein Scroll-Effekt sein soll (Anhangsoption). Sie haben alle diese Optionen, wenn Sie ein Hintergrundbild verwenden.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e36fe223dd.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Nach dem Einstellen der allgemeinen Optionen sieht unser Prozess-Widget so aus:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370092b5f.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<h3>Animationsoptionen erscheinen<\/h3>\n<p>Das Prozess-Widget kann eine Animation haben \u2013 <strong>Elemente werden nacheinander geladen und erscheinen in der gleichen Reihenfolge<\/strong>, und hier werden wir anpassen, ob wir es wollen oder nicht.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37034cbd2.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<h3>Layoutoptionen<\/h3>\n<p>Es gibt zwei Layoutoptionen \u2013 <strong>horizontale und vertikale Ansicht des Prozesses<\/strong>. Bisher haben wir alles horizontal gezeigt. Wenn Sie sich jedoch f\u00fcr die vertikale Anzeige entscheiden, sind die Optionen genau gleich. <strong>Das einzige, worauf Sie achten m\u00fcssen, ist die Anzahl der Spalten<\/strong> (wir haben dar\u00fcber in den allgemeinen Optionen gesprochen). Der vertikale Prozess hat immer eine Spalte, wenn wir m\u00f6chten, dass die Artikel untereinander in einer Spalte angeordnet werden.<\/p>\n<p>Da wir f\u00fcr unser Beispiel drei Spalten eingestellt haben, weil wir 3 Artikel haben, sieht unser Widget ohne \u00c4nderung auf eine Spalte so aus:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3706c21f6.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Wenn wir eine Spalte einrichten, ist nat\u00fcrlich alles so, wie es sein sollte:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3709b51cf.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<h3>Entwicklerwerkzeuge<\/h3>\n<p>Diese Option gibt uns die M\u00f6glichkeit, das Widget bei Bedarf <strong>in Shortcode-Form anzuzeigen .<\/strong><\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e370d32300.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Wie bereits erw\u00e4hnt, finden wir <strong>hier Dokumentation und Hilfe vom Autor<\/strong> der Addons f\u00fcr das Widget selbst.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371118542.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<h2>Prozess-Widget \u2013 Stil-Tab-Option<\/h2>\n<p>Die Registerkarte \u201eStil&#8220; bietet <strong>Optionen zum Stilisieren von Teilen des Prozesses<\/strong>. Wie bereits erw\u00e4hnt, gilt <strong>alles, was hier eingestellt wird, f\u00fcr alle Artikel in unserem Prozess, au\u00dfer f\u00fcr diejenigen, bei denen am Artikel selbst etwas anderes eingestellt ist<\/strong>.<\/p>\n<h3>Stiloptionen<\/h3>\n<p>Hier finden Sie verschiedene wiederholte Optionen aus den Artikeln selbst, z. B. in Bezug auf Farben, Typografie und Vers\u00e4tze.<\/p>\n<p>Das einzige, was nicht in den Elementen enthalten ist, ist die <strong>Ausrichtung<\/strong>, die angibt, <strong>wie Titel und Text zentriert werden<\/strong>.<\/p>\n<p>Wenn Sie m\u00f6chten, dass alle Elemente gleich sind, k\u00f6nnen Sie den Stil hier anpassen. In unserem Fall haben wir die Elemente haupts\u00e4chlich angepasst, weil wir unterschiedliche Hintergrundfarben, Gr\u00f6\u00dfen und Positionen haben. Was wir hier einstellen, ist <strong>Item color<\/strong>, also die Farbe des Symbols, die standardm\u00e4\u00dfig grau war und jetzt f\u00fcr uns schwarz ist.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371766e2b.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<h3>Linienstil-Optionen<\/h3>\n<p>Prozesslinienstilisierung \u2013 wir haben <strong>mehrere Typen<\/strong>, wir k\u00f6nnen die Farbe und Dicke anpassen.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3719cdd73.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<h3>Abstandsstil<\/h3>\n<p><strong>Abstand, Abstand \u00fcber dem Untertitel, \u00fcber dem Text und Abstand um den Text<\/strong>. Dieses Auff\u00fcllen um den Text dient gewisserma\u00dfen dazu, den Inhalt \u201eeinzuschr\u00e4nken&#8220;, indem das Auff\u00fcllen in ein Feld gesetzt wird, in dem der Text nicht angezeigt werden kann.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371c3e0ee.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<h3>Zus\u00e4tzlicher Stil<\/h3>\n<p>Wir haben diese Einstellungen <strong>nur, wenn unser Artikel ein eingef\u00fcgtes Symbol enth\u00e4lt, also wenn wir dieses zus\u00e4tzliche Feld haben, in dem sich die Nummer befindet<\/strong>. Die Einstellungen beziehen sich auf diese Nummer und das Feld, in dem sie sich befindet.<\/p>\n<p><strong>Farbe des zus\u00e4tzlichen Halters<\/strong> ist die Farbe des Felds, in dem sich die Nummer und die <strong>Typografie des zus\u00e4tzlichen Halters<\/strong> auf die Anpassung des Erscheinungsbilds der Nummer selbst beziehen. <strong>Additional Holder Size<\/strong> ist die Gr\u00f6\u00dfe des Feldes und mit Hilfe von Additional Holder Position k\u00f6nnen wir die Position des Feldes \u00e4ndern.<\/p>\n<p>Wir k\u00f6nnen auch einen Hintergrund f\u00fcr das regul\u00e4re Artikelfeld hinzuf\u00fcgen, aber wir k\u00f6nnen ihn hier nicht f\u00fcr jedes Feld einzeln hinzuf\u00fcgen, er wird allgemein auf alle Felder angewendet. Wir haben ein Hintergrundbild hinzugef\u00fcgt.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e371ec0061.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Mal sehen, ob wir uns gut verstehen und anhand der Pr\u00e4sentation sehen k\u00f6nnen, wie bestimmte Prozesse durchgef\u00fchrt wurden. Dies kann Ihnen helfen, Ihre eigenen zu erstellen und sofort zu wissen, wo Sie was einstellen m\u00fcssen.<\/p>\n<p>Wir haben bereits ein Beispiel f\u00fcr horizontal gezeigt. Was wir auf den ersten Blick bemerken, ist, dass wir 3 Spalten haben und darin die Elemente, in denen Symbole sind \u2013 ein zus\u00e4tzliches Feld mit der Nummer sagt uns, dass das Element ein Symbol und kein Bild ist, weil wir gesagt haben, dass es nur dann erscheint .<\/p>\n<p>Da die Artikel unterschiedliche Farben haben, wissen wir, dass diese Einstellungen in den Artikeln selbst vorgenommen wurden, nicht in allgemeinen Optionen.<\/p>\n<p>Wir stellen m\u00f6glicherweise auch fest, dass der Versatz einstellbar ist, da sich nicht alle Elemente in derselben Ebene befinden.<\/p>\n<p>Alle Symbole und Texte haben die gleichen Farben, die uns sagen, dass dies in den Stil-Tab-Optionen eingestellt ist.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e37205efd6.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Das zweite Beispiel ist, obwohl es komplizierter erscheint, noch einfacher auszuf\u00fchren. Hier ist die Zeile auf der Seite in zwei Teile geteilt. Links ist das Bild und rechts der Prozess.<\/p>\n<p>Der Prozess hat ein vertikales Layout, was bedeutet, dass die Anzahl der Spalten dieses Prozesses 1 ist und dass alle 5 Elemente untereinander angeordnet sind.<\/p>\n<p>Alle Items sind symmetrisch untereinander angeordnet, dh es wird kein Offset eingestellt.<\/p>\n<p>Alle Texte haben die gleichen Eigenschaften, daher wird der Stil auf der Registerkarte Stil festgelegt.<br \/>\nHier k\u00f6nnen wir sehen, dass jeder Artikel ein Hintergrundbild hat (und dass es keine zus\u00e4tzlichen Felder f\u00fcr die Nummer gibt), aber wir k\u00f6nnen auch feststellen, dass die Nummer nicht wie standardm\u00e4\u00dfig in der Mitte des Artikels steht.<\/p>\n<p>Es gibt einen Trick, mit dem Sie die Nummer ausblenden k\u00f6nnen, falls Sie nicht m\u00f6chten, dass die Nummer angezeigt wird. Alles, was Sie tun m\u00fcssen, ist, die Objekttypografiegr\u00f6\u00dfe auf der Registerkarte Stil in den allgemeinen Optionen auf 0px einzustellen. Auf diese Weise wird die Nummer nicht angezeigt.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-288518-633e3725561cd.jpg\" alt=\"So erstellen Sie einen Schrittfluss mit dem Elementor Process Widget\"><\/a><\/p>\n<p>Dies kann n\u00fctzlich sein, wenn Sie den Prozess nicht anzeigen m\u00f6chten, sondern dieses Widget nur f\u00fcr Ihre anderen Bed\u00fcrfnisse verwenden und es Sie st\u00f6rt, die Anzahl oder Schritte anzuzeigen.<\/p>\n<h2>Abschlie\u00dfend<\/h2>\n<p>Das Hinzuf\u00fcgen eines Prozess-Widgets zu Ihrer Website mit den Qi-Addons f\u00fcr Elementor ist nicht nur einfach, sondern macht auch Spa\u00df und erm\u00f6glicht es Ihnen, Ihrer Kreativit\u00e4t freien Lauf zu lassen. Wir empfehlen Ihnen, weiterhin nach M\u00f6glichkeiten zu suchen, wie Sie das Design und die Funktionalit\u00e4t Ihrer Website verbessern k\u00f6nnen. Wenn sich Ihre Website haupts\u00e4chlich auf visuelle Inhalte konzentriert, sind Sie vielleicht auch neugierig, mehr \u00fcber <a href=\"https:\/\/themewp.inform.click\/de\/elementor-seite-und-zeile-in-voller-breite-im-detail-erklaert\/\" title=\"das Hinzuf\u00fcgen von Seiten und Zeilen in voller Breite\">das Hinzuf\u00fcgen von Seiten und Zeilen in voller Breite<\/a> zu Ihrer WordPress-Website zu erfahren, oder wenn Sie eine bessere Inhaltsstruktur erreichen m\u00f6chten, sind Sie vielleicht daran interessiert <a href=\"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-wordpress-tabs-mit-qi-addons-fuer-elementor\/\" title=\", mehr \u00fcber WordPress-Registerkarten zu erfahren\">, mehr \u00fcber WordPress-Registerkarten zu erfahren<\/a>. Wie bereits erw\u00e4hnt, enth\u00e4lt Qi Addons 60 kostenlose Widgets, sodass das Experimentieren und Ausprobieren neuer M\u00f6glichkeiten Ihr Budget nicht gef\u00e4hrdet, sondern Sie nur dazu inspirieren kann, Ihre Website zu verbessern und weitere n\u00fctzliche Funktionen hinzuzuf\u00fcgen.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Schnelle und einfache M\u00f6glichkeit, Elementor-Prozess-Widgets hinzuzuf\u00fcgen und einen Schrittablauf auf jeder Art von WordPress-Website zu pr\u00e4sentieren.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-371963","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/371963","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=371963"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/371963\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=371963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=371963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=371963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}