{"id":51581,"date":"2022-06-20T13:28:27","date_gmt":"2022-06-20T12:28:27","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=51581&preview=true&preview_id=51581"},"modified":"2023-08-23T16:02:35","modified_gmt":"2023-08-23T15:02:35","slug":"elementor-tabs","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/elementor-tabs\/","title":{"rendered":"Wie man Elementor Tabs erstellt und verwendet"},"content":{"rendered":"

Wenn du eine Webseite erstellst<\/a>, ist es wichtig, dass deine Inhalte gut organisiert sind. Wenn du deine Seiten \u00fcbersichtlich anordnest, verbessert das die User Experience (UX) und macht den Text verst\u00e4ndlicher. Eine M\u00f6glichkeit, deine Inhalte zu organisieren, ist das Elementor Tabs Widget.<\/p>\n

Mit Registerkarten k\u00f6nnen deine Nutzer zwischen verschiedenen Inhaltsbereichen wechseln. Mit dieser Funktion m\u00fcssen die Besucher nicht mehr zu verschiedenen Bereichen der Seiten navigieren. Wenn du zusammenh\u00e4ngende Inhalte in Registerkarten-Containern gruppierst, kann das das Aussehen und die Benutzerfreundlichkeit deiner Webseite verbessern. Au\u00dferdem kannst du das alles ohne WordPress-Entwicklungserfahrung<\/a> einrichten.<\/p>\n

In diesem Beitrag stellen wir dir Elementor und seine verschiedenen Versionen kurz vor. Dann zeigen wir dir, wie du Elementor-Tabs erstellst und anpasst und welche Tools von Drittanbietern du verwenden kannst, um die Standardfunktionen des Widgets zu erweitern.<\/p>\n

Los geht’s!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Ein \u00dcberblick \u00fcber Elementor<\/h2>\n

Elementor<\/a> ist ein beliebtes und leistungsstarkes Page-Builder-Plugin:<\/a><\/p>\n

\"Startseite
Elementor Page Builder<\/figcaption><\/figure>\n

Mit dem Page Builder kannst du sch\u00f6ne Seiten f\u00fcr deine Webseite erstellen, entweder von Grund auf oder mit vorgefertigten Vorlagen. Elementor verf\u00fcgt \u00fcber einen Drag-and-Drop-Editor, sodass du keine einzige Zeile Code anfassen<\/a> musst.<\/p>\n

Es gibt eine kostenlose<\/a> und eine kostenpflichtige Version von Elementor<\/a>. Mit dem kostenlosen Elementor-Plugin kannst du Standardseiten und -beitr\u00e4ge erstellen.<\/p>\n

Allerdings k\u00f6nnen die Funktionen und der Funktionsumfang begrenzt sein. Um den vollen Funktionsumfang zu nutzen, empfehlen wir ein Upgrade auf Elementor Pro. In diesem Beitrag werden wir auf die Unterschiede zwischen der kostenlosen und der Pro-Version eingehen, wenn du mit dem Tabs-Widget arbeitest.<\/p>\n\n

Wie man Elementor Tabs (Tabs Widget) erstellt<\/h2>\n

Jetzt, wo wir mehr \u00fcber Elementor wissen, schauen wir uns an, wie wir das Tabs-Widget verwenden. F\u00fcr die folgende Anleitung gehen wir davon aus, dass du Elementor bereits auf deiner WordPress-Seite installiert und aktiviert<\/a> hast.<\/p>\n

Um loszulegen, navigiere zu dem WordPress-Beitrag oder der Seite, auf der du die Tabs einf\u00fcgen m\u00f6chtest, und w\u00e4hle Mit Elementor bearbeiten<\/strong>:<\/p>\n

\"W\u00e4hle
W\u00e4hle „Mit Elementor bearbeiten“<\/figcaption><\/figure>\n

Daraufhin wird die Elementor-Editoroberfl\u00e4che ge\u00f6ffnet. Suche auf der linken Seite unter Elemente<\/strong> nach dem Tabs-Widget <\/strong>und w\u00e4hle es aus:<\/p>\n

\"Suche
Suche nach dem Widget „Tabs“ und w\u00e4hle es aus<\/figcaption><\/figure>\n

Du kannst das Widget per Drag & Drop auf einen Seitenabschnitt ziehen. Sobald du das Tabs-Widget platziert hast, wird ein neues Dashboard mit seinen Einstellungen angezeigt:<\/p>\n

\"Ziehe
Ziehe das Widget auf deine Seite<\/figcaption><\/figure>\n

Du kannst den Titel und den Inhalt f\u00fcr jeden Tab eingeben. Du kannst auch auf die Schaltfl\u00e4che + Element hinzuf\u00fcgen <\/strong>klicken, um eine weitere Registerkarte einzuf\u00fcgen. Unter Typ<\/strong> w\u00e4hlst du aus, ob die Tabs horizontal oder vertikal angezeigt werden sollen.<\/p>\n

Wie du deine Elementor Tabs anpasst<\/h2>\n

Sobald du den Tabs Text hinzugef\u00fcgt hast, kannst du die allgemeinen Widget-Einstellungen anpassen. Es gibt ein paar verschiedene Optionen.<\/p>\n

W\u00e4hle jede benutzerdefinierte Registerkarte aus, um ihre Attribute zu \u00e4ndern<\/a>, z. B. den Titel, den Inhalt der Box und das Symbol. Au\u00dferdem kannst du ihre Position und Ausrichtung \u00e4ndern:<\/p>\n

\"\u00c4ndere
\u00c4ndere die Tabs nach Bedarf<\/figcaption><\/figure>\n

Unter dem Reiter Stil <\/strong>findest du viele Optionen, um das Design und das Aussehen des Elementor Tabs Widgets anzupassen. Du kannst die Textfarbe und den Schatten, die Typografie, die Abst\u00e4nde und vieles mehr \u00e4ndern:<\/p>\n

\"Stile
Stile und Abst\u00e4nde anpassen<\/figcaption><\/figure>\n

Du kannst die Farbe und Breite des Rahmens, der die Tabs umgibt, \u00e4ndern. Dieses Designmerkmal kann helfen, die einzelnen Abschnitte zu unterscheiden.<\/p>\n

Unter Titel<\/strong> kannst du die Textfarbe der Tab-Titel \u00e4ndern. Du kannst auch die Schriftart und die Textgr\u00f6\u00dfe \u00e4ndern, indem du auf Typografie<\/strong> klickst:<\/p>\n

\"Weitere
Weitere \u00c4nderungsm\u00f6glichkeiten<\/figcaption><\/figure>\n

Wenn du fertig bist, speichere deine \u00c4nderungen. Es gibt auch einige erweiterte Einstellungen, die du nutzen kannst, um deine Tabs noch anspruchsvoller zu gestalten.<\/p>\n

Erweiterte Einstellungen f\u00fcr Elementor Tabs<\/h2>\n

Unter dem Reiter Erweitert<\/strong> in den Widget-Einstellungen findest du eine Vielzahl zus\u00e4tzlicher Optionen<\/a>:<\/p>\n

\"Erweiterte
Erweiterte Tab-Optionen<\/figcaption><\/figure>\n

Schauen wir uns diese Einstellungen genauer an:<\/p>\n