Symbole und Text, jedes für sich, haben Stärken und Schwächen, die sie bei der Erstellung einer Website zu einem perfekten Paar machen. Ein Symbol allein könnte zu mehrdeutig sein, ohne Kontext oder feste Bedeutung. Der Text sieht vielleicht langweilig aus und wird sicherlich nicht so viel Aufmerksamkeit auf sich ziehen. Kombinieren Sie beides, und Sie erhalten das Beste aus beiden Welten. Häufig sehen Sie die Kopplung, wenn Sie Funktionen, Dienste oder andere Elemente auflisten, die als eindeutig, aber als Teil der Gruppe angezeigt werden müssen.
Diese Paarung ist so weit verbreitet, dass viele Premium-Themen mit einem Shortcode ausgestattet sind, um schnell ein Symbol mit Text als Designelement einzufügen. Wenn Ihr Thema dies nicht tut, machen Sie sich keine Sorgen. Dank Qi Addons für Elementor, der größten Sammlung kostenloser Elementor-Addons im Internet, können Sie alle Symbole mit Text, die Sie benötigen, im Handumdrehen hinzufügen. Alles, was Sie brauchen, ist Elementor und das Icon mit Text-Widget.
Brauchen Sie Inspiration für den Einstieg? Keine Bange. Hier ist ein Video, das zeigt, wie Sie ganz einfach eine Gruppe von Symbolen mit Text erstellen können, genau wie auf der Widget-Seite:
Wenn Sie es vorziehen, darüber zu lesen, führt Sie dieser Artikel durch die Schritte, die wir unternommen haben, um eine schöne Anzeige von Symbolen mit Text zu erstellen. Hoffentlich werden Sie das, was Sie hier lesen, verwenden, um einige erstaunliche Designs auf Ihrer eigenen Website zu erstellen!
Wir werden abdecken:
Der erste Schritt zum Hinzufügen von Symbolen mit Text in WordPress mit dem Qi Addons for Elementor-Plugin ist das Herunterladen und Installieren Elementor. Als einer der weltweit führenden Seitenersteller haben Sie es vielleicht bereits, aber wenn nicht, laden Sie es einfach herunter und aktivieren Sie es.
Der nächste Schritt wäre, Qi Addons für Elementor herunterzuladen und zu aktivieren. Sie können dies tun, indem Sie zu Plugins > Neu hinzufügen, danach suchen und installieren und aktivieren, sobald Sie es in den Ergebnissen sehen.
Wenn Sie das erledigt haben, können Sie sich am besten mit dem Widget vertraut machen, indem Sie zu einer Seite navigieren, auf der Sie möglicherweise ein Symbol mit Text hinzufügen und darauf zugreifen. Wir für unseren Teil haben einen dreispaltigen Abschnitt erstellt, weil wir am Ende drei Symbole mit Text erstellt haben. Einfach nach dem Widget suchen und es in die Spalte ganz links ziehen, hat den Zweck erfüllt – Wir hatten unser erstes Symbol mit Text zum Bearbeiten bereit.
Der Abschnitt Inhalt der Plugin-Option enthält viele Registerkarten, aber keine Sorge – es bedeutet nur, dass Sie Ihr Design bis ins kleinste Detail anpassen können. Auf der ersten Registerkarte Allgemein können Sie das Layout des Symbols und des Textes auswählen, ob Sie einen Link zum Symbol hinzufügen möchten und einige zugehörige Optionen.
Hier wählen Sie auch den Symboltyp aus, den Sie verwenden möchten, ob ein Trennzeichen verwendet werden soll oder nicht, sowie einige Regeln für die Spaltenreaktion. Die erste Änderung, die wir vorgenommen haben, war der Wechsel zum Top-Layout. Wir haben das Symbol in das Zahnradsymbol geändert, das in der Symbolbibliothek enthalten war, und wir waren bereit, weiterzumachen.
Auf der Registerkarte Inhalt können Sie die Kachel des Textes in der Spalte ändern – oder ganz entfernen – sowie den Text selbst ändern und einige eingeschränkte Stiloptionen anwenden. Sie haben auch die Möglichkeit, die Textausrichtung auszuwählen.
Der Titel, den wir dieser Symbol-Text-Kombination gegeben haben, war „Unbegrenzte Optionen“. Wir haben den Text auf „Hunderte Schriftarten zur Auswahl und Optionen zur Verwendung benutzerdefinierter Symbole oder SVGs“ geändert.
Auf den Registerkarten Schaltfläche und Schaltflächensymbol können Sie auswählen, wie Ihre Schaltfläche aussehen soll, wie groß sie sein soll, ob sie ein Symbol haben soll und wohin und auf welchen Link sie zeigen soll.
Die interessanteste Option in diesen beiden Registerkarten ist die Option Schaltflächentext auf der Registerkarte Schaltfläche. Durch Löschen des Textes können Sie die Schaltfläche vollständig entfernen. So haben wir es gemacht.
Die restlichen Registerkarten in den Inhaltsoptionen befassen sich mit dem Trennzeichen und der erscheinenden Animation. Sie können das Layout des Trennzeichens, seine Position, das Rahmenbild sowie das Symbol auswählen. Sie haben auch die Möglichkeit, zwischen verschiedenen Animationsstilen zu wechseln und deren Verzögerungen festzulegen.
Da wir beim Erstellen unseres Symbols mit Text kein Trennzeichen verwendet haben und wir keine Animation einschließen wollten, haben wir Ihnen im Abschnitt Inhalt nichts mehr zu zeigen und können mit den Stiloptionen fortfahren.
Wenn Sie Ihr Symbol mit Text gestalten, wird die Registerkarte Stil als erste angezeigt. Mit den Optionen, die Sie dort finden, können Sie das Title-Tag, die normale Farbe des Titels und die Farbe beim Bewegen des Mauszeigers sowie Optionen für die Titeltypografie wie Schriftart, Größe und Gewicht auswählen. Für den Text können Sie die Farbe und die Typografieoption auswählen.
Wir haben hier einige minimale Änderungen an den Standardeinstellungen vorgenommen. Wir haben das Title-Tag in H5 geändert, die Titelfarbe mit dem Hex-Code #000000 in Schwarz und die Größe des Titels auf 21 Pixel gesetzt.
Auf der Registerkarte Abstandsstil dreht sich alles um das Festlegen von Rändern. Sie können den Titelrand oben, den Textrand oben, den Rand um das Symbol und, wenn Sie eine Schaltfläche haben, den Schaltflächenrand oben auswählen.
Auch hier haben wir uns für eine minimale Änderung entschieden, indem wir den Titelrand oben auf 22 Pixel gesetzt haben.
Auf der Registerkarte Symbolstil variieren die angezeigten Optionen stark davon, ob Sie Ihr Symbol in eine Box einfügen möchten oder nicht. Wenn Sie dies tun, können Sie eine Vielzahl von Optionen für Form, Größe und Farbe der Schachtel auswählen. Wenn Sie dies nicht tun, sind Sie auf die Optionen beschränkt, die sich mit dem Symbol selbst befassen – seiner Größe, Farbe und Animation beim Schweben.
Wir haben uns dagegen entschieden, unser Symbol in eine Schachtel zu legen. Wir haben die Größe unseres Symbols jedoch auf 60 Pixel und seine Farbe auf #ececec geändert. Beim Schweben haben wir ihm eine leichte vertikale Bewegung gegeben.
Auf den verbleibenden Registerkarten können Sie mit dem Aussehen und dem Styling der Schaltflächen, Schaltflächensymbole, Rahmen, Unterstreichungen, Trennzeichen und Trennzeichensymbole großartige Dinge tun. Wir haben uns gegen die Verwendung eines dieser Elemente in unserem Design entschieden, aber wenn Sie einen anderen Pfad wählen, sollten Sie wissen, dass Sie hier alle Größen-, Farb-, Rand- und Hover-Optionen finden, die Sie benötigen, um die Schaltflächen und Trennzeichen Ihres Symbols und Textes hervorzuheben.
Der letzte Schliff besteht darin, das von uns erstellte Design zu duplizieren und einige Änderungen daran vorzunehmen. Diese Möglichkeit, ein Design mit all seinen Optionen einfach zu duplizieren, ist großartig, nachdem Sie Stunden damit verbracht haben, die Einstellungen eines Elements zu perfektionieren, und Sie es dann mit ein paar anderen wiederholen müssen, aber mit nur geringfügigen Änderungen.
Um das Design zu duplizieren, haben wir mit der rechten Maustaste darauf geklickt, die Duplizierungsoptionen ausgewählt und es noch einmal getan. Elementor stapelt diese Duplikate unter dem Original – ziehen Sie sie einfach in ihre Spalten.
Als Nächstes müssen Sie die Symbole, die Titel und den Text ändern. Wir haben das Symbol des mittleren in Kartenmarkierung alt geändert, seinen Titel in „Vollständig anpassbar“ und seinen Text in „Responsiv und mobilfreundlich, dieses Widget wird ein Star auf der Seite sein.“ Der dritte bekam ein Tag für sein Symbol, „Flexible Stile“ für den Titel und „Wählen Sie verschiedene Farben, Stile, erscheinen Animationen und mehr mit diesem Widget“ für den Text.
Lass es uns einwickeln!
Dank Qi Addons für Elementor kann das Hinzufügen interessanter und nützlicher Designs zu Ihrer Website, wie zum Beispiel das Symbol mit Text, einfach und interessant sein. Es gibt eine Vielzahl von Optionen, aus denen Sie wählen können – viele mehr als die, die wir in dieser Demonstration untersucht haben, und Sie sollten sich frei fühlen, sie alle zu erkunden und die beste Kombination von Elementen zu finden, die dieses Add-On bietet.
Unterstützen Sie unsere Arbeit ❤️
Wenn Ihnen dieser Artikel gefallen hat, können Sie uns mit einem Trinkgeld unterstützen, damit wir weiterhin großartige Inhalte veröffentlichen können.
