{"id":367238,"date":"2023-02-25T12:14:00","date_gmt":"2023-02-25T09:14:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367238"},"modified":"2023-04-13T10:03:13","modified_gmt":"2023-04-13T07:03:13","slug":"so-erstellen-sie-wordpress-tabs-mit-qi-addons-fuer-elementor","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-wordpress-tabs-mit-qi-addons-fuer-elementor\/","title":{"rendered":"So erstellen Sie WordPress-Tabs mit Qi-Addons f\u00fcr Elementor"},"content":{"rendered":"\n

Die Qualit\u00e4t der Inhalte Ihrer Website h\u00e4ngt weitgehend von Ihren Kenntnissen und F\u00e4higkeiten ab, aber die Art und Weise, wie Sie sie darstellen, spielt auch eine wichtige Rolle daf\u00fcr, wie andere sie wahrnehmen. WordPress-Tabs sind eine gro\u00dfartige M\u00f6glichkeit, Inhalte zu strukturieren und zu organisieren und sie leichter zu verdauen<\/strong>, insbesondere wenn es um lange Artikel geht. Es war noch nie einfach, einen Leser auf einer Seite zu halten, also ist es einfach nicht klug, es schwieriger zu machen, Inhalte anzubieten, die nicht optisch ansprechend sind.<\/p>\n

Tabulatoren helfen Ihnen, einen Artikel in leicht lesbare Abschnitte zu unterteilen und ihn f\u00fcr den Leser zug\u00e4nglicher zu machen, der dann reibungsloser durch den Text navigieren kann. Nat\u00fcrlich gibt es noch viele weitere Schreibtipps<\/a>, die Ihnen helfen, den Inhalt attraktiver zu gestalten, aber das Setzen von Tabulatoren ist eines der wesentlichen Elemente. In diesem Artikel zeigen wir Ihnen, wie Sie Ihren Inhalten mit den Qi Addons f\u00fcr Elementor sch\u00f6ne Tabs hinzuf\u00fcgen<\/strong>.<\/p>\n

Registerkarten mit einem Plugin hinzuf\u00fcgen<\/h2>\n

Qi Addons for Elementor<\/a> ist ein leistungsstarkes, kostenloses Tool, mit dem Sie Ihrer Website ganz einfach eine Vielzahl sch\u00f6ner Elemente hinzuf\u00fcgen k\u00f6nnen<\/strong>. Es verf\u00fcgt \u00fcber eine intuitive, benutzerfreundliche Oberfl\u00e4che, und sowohl Anf\u00e4nger als auch Fortgeschrittene werden es einfach zu bedienen finden. Besonders toll an Qi ist der Fokus auf Design, der Ihnen neben n\u00fctzlichen Elementen auch eine Prise zeitgem\u00e4\u00dfe Eleganz verleiht<\/strong>.<\/p>\n

Der Prozess der Installation<\/a> der QI-Addons f\u00fcr Elementor unterscheidet sich nicht von jeder anderen Plugin-Installation. Wenn Sie Fragen dazu haben, \u00fcberpr\u00fcfen Sie unbedingt den oben angegebenen Link, und Sie k\u00f6nnen uns auch im Kommentarbereich schreiben.<\/p>\n

Da es sich um ein Elementor-Plugin handelt, stellen Sie sicher, dass Sie beim Erstellen eines neuen Beitrags zum Elementor-Editor wechseln. Alle Qi-Addons-Widgets werden ordentlich im linken Elementmen\u00fc angezeigt<\/strong>. Scrollen Sie einfach im Men\u00fc nach unten, um sie zu finden.<\/p>\n

\"So<\/a><\/p>\n

Jetzt m\u00fcssen Sie nicht mehr alle Qi-Elemente durchsuchen. Sie k\u00f6nnen einfach diejenige, die Sie hinzuf\u00fcgen m\u00f6chten<\/strong>, in diesem Fall Registerkarte, in das Suchfeld eingeben und sie wird in den Suchergebnissen angezeigt. Wie Sie unten sehen k\u00f6nnen, stellen Ihnen die Qi-Addons zwei Registerkartenelemente zur Verf\u00fcgung \u2013 horizontale Registerkarte<\/a> und vertikale Registerkarte<\/a>.<\/p>\n

\"So<\/a><\/p>\n

Um eine vertikale Registerkarte hinzuzuf\u00fcgen, ziehen Sie das Elementor-Element per Drag & Drop an die gew\u00fcnschte Stelle. Wenn die vertikale Registerkarte hinzugef\u00fcgt wird, befinden sich alle Einstellungen auf der linken Seite und innerhalb der Registerkarten Inhalt und Stil befinden sich alle Optionen, die sich auf die Registerkarten beziehen<\/strong>. Die Option Erweitert ist eigentlich die Standardgruppe von Elementor f\u00fcr die Spalte.<\/p>\n

\"So<\/a><\/p>\n

Die ersten Einstellungen, die Sie sehen, sind die allgemeinen Einstellungen. Sie enthalten alle Optionen, die Sie ben\u00f6tigen, um Ihre Inhalte optimal anzupassen<\/strong>.<\/p>\n

\"So<\/a><\/p>\n

Mit der Option \u201eInhalt unterhalb der Registerkarte auf dem Bildschirm platzieren unter“ k\u00f6nnen Sie die vertikale Registerkarte entsprechend der Zielbildschirmgr\u00f6\u00dfe festlegen. Sie k\u00f6nnen zwischen vier Bildschirmgr\u00f6\u00dfen w\u00e4hlen. Wenn die Bildschirmgr\u00f6\u00dfe beispielsweise weniger als 480 Pixel betr\u00e4gt, wird der Tab-Titel \u00fcber und nicht neben dem Text platziert. Diese Option bezieht sich nur auf vertikale Tabulatoren. Das folgende Bild zeigt, wie die vertikale Registerkarte auf dem gro\u00dfen Bildschirm angezeigt wird und wie Sie die Bildschirmgr\u00f6\u00dfe in der Option Place Content Below Tab on Screen unter festlegen.<\/p>\n

\"So<\/a><\/p>\n

Um den Text in die vertikale Registerkarte einzugeben und anzuordnen, klicken Sie auf die Option \u201eElemente“<\/strong> und das Men\u00fc \u00f6ffnet sich mit einem Feld darunter, um den Text direkt einzugeben<\/strong>. Sie k\u00f6nnen auch die Texteinstellungen in Bezug auf Ausrichtung und Typografie sofort anpassen. Es ist nicht erforderlich, die allgemeinen Einstellungen f\u00fcr Typografie festzulegen, da Sie dies sp\u00e4ter auf der Registerkarte Stil tun k\u00f6nnen. Hier legen Sie auch den Titel des vertikalen Tabulators fest<\/strong>, indem Sie ihn einfach in das Feld Titel eingeben. Auf der rechten Seite des Bildschirms sehen Sie sofort die Vorschau aller \u00c4nderungen, die Sie vornehmen.<\/p>\n

\"So<\/a><\/p>\n

Nachdem Sie den Text eingegeben haben, k\u00f6nnen Sie ihn detaillierter gestalten<\/strong>. Klicken Sie im Men\u00fc neben der Option Inhalt auf die Option Stil, um alle Stileinstellungen zu \u00f6ffnen.<\/strong><\/p>\n

\"So<\/a><\/p>\n

Mit der Einstellung Titel-Tag k\u00f6nnen Sie ausw\u00e4hlen, ob der vertikale\/horizontale Registerkartentitel H1, H2 usw. sein soll. Im Bild oben haben wir uns f\u00fcr H1 entschieden.<\/p>\n

Die Option Title Typography<\/strong> ist sehr interessant. Das erste Symbol mit dem Globus \u00f6ffnet ein benutzerdefiniertes Men\u00fc, in dem Sie den Typografietyp aus globalen Schriftarten ausw\u00e4hlen<\/strong> k\u00f6nnen. Dies ist eine sichere Wahl, wenn Sie sicherstellen m\u00f6chten, dass Ihr Tab zum Gesamtstil Ihrer Website passt.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie sich sicher genug f\u00fchlen, die Titeltypografie selbst festzulegen, oder einfach weitere Optionen erkunden m\u00f6chten, klicken Sie auf das Stiftsymbol neben dem Globus, um alle verf\u00fcgbaren Typografieeinstellungen anzuzeigen<\/strong>. Sie k\u00f6nnen sie alle ganz einfach testen, da Sie den Effekt sofort auf der rechten Seite des Bildschirms sehen.<\/p>\n

\"So<\/a><\/p>\n

Mit der Option \u201eFamilie“<\/strong> k\u00f6nnen Sie die Schriftart ausw\u00e4hlen<\/strong>, und mit allen folgenden Optionen k\u00f6nnen Sie die Schriftart Ihrer Wahl weiter anpassen<\/strong>.<\/p>\n

Mit der Einstellung Gr\u00f6\u00dfe in diesem Men\u00fc k\u00f6nnen Sie die Gr\u00f6\u00dfe der Buchstaben selbst festlegen<\/strong>, mit der Option Gewicht k\u00f6nnen Sie die Breite der Buchstaben in der Schriftart anpassen<\/strong>. Mit der Option \u201eTransformieren“ k\u00f6nnen Sie ausw\u00e4hlen, ob der Text nur in Gro\u00df- oder Kleinbuchstaben oder in Gro\u00dfbuchstaben usw. angezeigt werden soll. Mit der Option \u201eDekoration“ k\u00f6nnen Sie zwischen Stilen derselben Schriftart w\u00e4hlen \u2013 Standard, Normal, Kursiv oder Schr\u00e4g. Und Sie k\u00f6nnen auch die Zeilenh\u00f6he<\/strong> und den Buchstabenabstand selbst anpassen.<\/p>\n

Es macht in der Tat Spa\u00df, die Typografieeinstellungen anzupassen, da es so viel Auswahl gibt und Sie sowohl den Titel als auch den Flie\u00dftext so einstellen k\u00f6nnen, dass sie genau so aussehen, wie Sie es sich vorgestellt haben. Nachdem Sie ihm den letzten Schliff gegeben haben, k\u00f6nnen Sie mit anderen Stileinstellungen fortfahren, darunter die Auswahl der Farbe der Schriftart, der Hintergrundfarbe und der Rahmen, wenn Sie diese haben m\u00f6chten<\/strong>. Wenn Sie sich f\u00fcr den Verlaufstyp des Hintergrunds entschieden haben, k\u00f6nnen Sie mit der Option Position den Verlaufseffekt feinabstimmen.<\/p>\n

Unten sehen Sie ein Beispiel daf\u00fcr, wie wir den Titel angeordnet haben. Wir fanden die Randoption, mit der Sie die Breite des Titels anpassen k\u00f6nnen, sehr interessant. Wir haben nur auf einer Seite des Titels verwendet, aber Sie k\u00f6nnen experimentieren und sehen, was f\u00fcr Sie am besten funktioniert.<\/p>\n

\"So<\/a><\/p>\n

Sie k\u00f6nnen den Text auch in Bezug auf Schriftfarbe, Hintergrundfarbe, Typografie und Rahmentyp anpassen. Da Sie eine Live-Vorschau aller von Ihnen vorgenommenen \u00c4nderungen haben, haben Sie viel Raum zum Experimentieren, bis Sie finden, was auf der Seite gut aussieht.<\/p>\n

\"So<\/a><\/p>\n

Das Bild unten ist ein Beispiel daf\u00fcr, wie wir den Text angepasst haben, damit er zum Rest des Inhalts auf der Seite passt.<\/p>\n

\"So<\/a><\/p>\n

Die n\u00e4chste wichtige Einstellung in diesem Men\u00fc ist die Option Active\/Hover<\/strong>. Hier k\u00f6nnen Sie einstellen, wie die Registerkarte aussieht, wenn Sie mit der Maus dar\u00fcber fahren<\/strong>. Die Optionen sind die gleichen wie bei allen oben genannten. Wenn Sie also m\u00f6chten, dass der Inhalt beim Bewegen der Maus anders aussieht, k\u00f6nnen Sie hier genau festlegen, wie unterschiedlich er aussehen soll.<\/p>\n

Die hier zu findenden Sideline-Optionen<\/strong> dienen zum Hinzuf\u00fcgen animierter Hover-Effekte. Wir empfehlen Ihnen, ein wenig damit zu experimentieren und zu sehen, was auf Ihren Seiten am besten aussehen w\u00fcrde.<\/p>\n

\"So<\/a><\/p>\n

Wenn Sie mit der bisherigen Einstellung des Tabulators zufrieden sind, k\u00f6nnen Sie mit den Einstellungen f\u00fcr den Abstandsstil fortfahren. Mit diesen k\u00f6nnen Sie den Abstand des Titels, des Inhalts und der Elemente anpassen, die Sie auf der Registerkarte verwendet haben.<\/p>\n

\"So<\/a><\/p>\n

Falls Sie einen horizontalen Tabulator einf\u00fcgen m\u00fcssen, ist die Vorgehensweise grunds\u00e4tzlich gleich. Ihnen stehen dieselben Optionen zur Verf\u00fcgung, mit Ausnahme von \u201eInhalt unterhalb der Registerkarte auf dem Bildschirm platzieren“ unter der Option.<\/p>\n

Weitere Informationen finden Sie in den n\u00e4chsten Videos:<\/p>\n