Fast jede Seite benötigt am Ende eine Reihe kleiner Karten, die ein Symbol mit einer kurzen Überschrift und einer Textzeile koppeln Features, Services, Schritte, Kontaktdaten, alle gleich Form Die kostenlose Info-Box-Widget In Master-Addons für Elementor Baut diese Karte aus Sie wählen ein Symbol oder Bild aus, geben einen Titel und eine Beschreibung ein, wählen eine Stilvoreinstellung (fünf sind kostenlos, zehn mit Pro) und stylen jeden Teil aus dem Elementor-Panel.
Es ist eines dieser Widgets, nach denen Sie am Ende ständig greifen, da ein Symbol, eine Überschrift und ein Satz so viele Abschnitte einer Website abdecken. Unten finden Sie einen Spaziergang durch jede Einstellung, von den Stilvoreinstellungen bis hin zum Symbol, Titel und Beschreibungssteuerelementen.
Was das Info Box Widget macht #
Eine Infobox stapelt ein Symbol oder Bild auf einen Titel und eine kurze Beschreibung Die Stilvoreinstellungen bedeuten, dass derselbe Inhalt wie eine gefüllte Karte, eine gerandete Karte oder ein sauberer zentrierter Block aussehen kann, und Sie können mehrere nebeneinander ausreihen, um eine Funktionsreihe zu erstellen.
Der Titel kann überall verlinken, das Symbol kann gegen ein hochgeladenes Bild ausgetauscht werden und die Karte kann ihre eigene Hintergrund-, Rand- und Schwebeanimation tragen. Es gibt drei Registerkarten: Inhalt für das Symbol, Titel und Text, Stil für Farben und Abstände und Erweitert für die üblichen Elementoroptionen.
Bevor Sie beginnen #
- Wordpress Mit Elementer Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Ein Symbol im Kopf oder ein Bild zum Hochladen sowie der Titel und der Beschreibungstext.
So fügen Sie das Info-Box-Widget hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Info-box‘oder scrollen Sie in den Abschnitt Master Addons. Ziehen Sie es auf Ihre Seite. Es wird mit einem Beispielsymbol, einem “Infobox Title” und einer Platzhalterbeschreibung geladen, sodass Sie von einer Arbeitskarte anstelle einer leeren beginnen.
Richten Sie den Inhalt ein #
Öffnen Sie die Inhalt Tab. Die Inhalt Abschnitt enthält alles, was die Karte anzeigt, und hier findet der Großteil Ihrer Bearbeitung statt.
- Stilvoreinstellung: Wählen Sie im kostenlosen Plugin Variation Eins bis Fünf oder Sechs bis Zehn mit Master Addons Pro aus. Jedes legt das Symbol, den Titel und die Beschreibung unterschiedlich dar (mehr dazu unten).
- Bild oder Symbol: Ein Drei-Wege-Umschalter für Keine, Symbol oder Bild Wählen Sie Symbol, um die Symbolbibliothek zu verwenden, oder Bild, um Ihr eigenes hochzuladen.
- Symbol: Wenn das Symbol ausgewählt ist, wählen Sie ein beliebiges Symbol aus der Font Awesome-Bibliothek aus oder laden Sie eine SVG hoch.
- Titel: Der Überschriftstext, daneben eine Option Schreiben mit KI.
- Titel-URL: Verwandeln Sie den Titel in einen Link zu einer beliebigen Seite oder externen URL.
- Beschreibung: Die ein oder andere Textzeile unter dem Titel, auch mit Write with AI.
- Weiterlesen Text und Weiterlesen Link: Diese erscheinen nur mit Variation Six, die Pro benötigt.
Unter denen finden Sie eine Hilfe Docs Link und ein Wrapper-Link Abschnitt aus dem freien Wrapper Link-Erweiterung Das macht die gesamte Karte anklickbar.
Wählen Sie eine Stilvoreinstellung #
Die Voreinstellungen ändern das gesamte Erscheinungsbild, ohne Ihre Inhalte zu berühren. Daher ist der Wechsel zwischen ihnen eine schnelle Möglichkeit, das Layout zu finden, das zum Abschnitt passt.
- Variation Eins bis Fünf (kostenlos): Jedes ordnet Symbol, Titel und Beschreibung unterschiedlich an Variation Zwei und Drei fügen eine große verblasste Kopie des Symbols hinter der Karte hinzu, und Variation Fünf setzt das Symbol in eine Sechseckform.
- Variation Sechs bis Zehn (Pro): Fünf weitere Layouts Variation Six fügt die Read More-Taste und eine Hintergrundoption für das Farbverlaufssymbol hinzu.
Verwenden Sie ein Bild anstelle eines Symbols #
Wenn ein Foto oder Logo besser passt als ein Symbol, setzen Bild oder Symbol zu Bild und wählen Sie eine Datei aus der Mediathek aus Das Widget zeigt dann Ihr Bild im Symbolsteckplatz an, was gut für Partnerlogos, Produkt-Miniaturansichten oder illustrierte Feature-Karten funktioniert Stellen Sie es wieder auf Keine Wenn Sie ein Nur-Text-Feld wünschen.
Style die Box #
Die Stil Tab aufgeteilt wird in Allgemeine Stile, Symbolstil, Titel, Beschreibung, und Muster (aus der kostenlosen Patterns-Erweiterung).General Styles steuert den Kartencontainer selbst.
- Randtyp, Breite und Farbe: Die Umrisse um die Karte.
- Grenzradius: Ecken umrunden.
- Polsterung und Rand: Abstand innerhalb und um die Box.
- Hintergrund: Stellen Sie einen Normal- und einen Hover-Hintergrund ein, entweder eine einfarbige Farbe oder ein Bild.
- Hover-Animation: Fügen Sie einen integrierten Bewegungseffekt wie Bob oder Grow hinzu, wenn jemand mit der Karte fährt.
Symbol-, Titel- und Beschreibungsstil #
Die Symbolstil Abschnitt legt die Symbolgröße, Farbe und den Hintergrund fest, mit separaten Normal- und Hover-Zuständen plus Ausrichtung.
Die Titel und Beschreibung Abschnitte behandeln Typografie, Farbe, Ausrichtung und Abstand für den Text. Jeder hat seinen eigenen Normal- und Hover-Zustand, sodass sich die Karte verschieben kann, wenn sich Besucher darüber bewegen.
Hintergrundfarbe und Bildoptionen #
Zurück in General Styles, der Hintergrund Die Kontrolle nimmt entweder einen festen Farbe oder ein Bild. Ein getönter Hintergrund mit weißem Text ist, wie die gefüllte “Über uns” - Karte, eine einfache Möglichkeit, eine Box in einer Reihe schlichter herauszustechen.
Das Ergebnis auf der Seite #
Veröffentlichen oder Vorschauen und die Boxen werden mit Ihren Symbolen, Titeln und Beschreibungen gerendert. Hier ist eine Reihe von drei Infoboxen, jedes auf einer Voreinstellung in einem anderen Stil, der Art von Layout, das zu einem Funktions- oder Dienstabschnitt passt.
Häufige Anwendungsfälle #
- Feature-highlights In einer drei - oder vierspaltigen Reihe unter dem Helden.
- Dienstleistungen oder Angebote Jeweils mit einem Icon und einer einzeiligen Zusammenfassung.
- Schritte zur Funktionsweise Mit einem nummerierten oder thematischen Symbol pro Schritt.
- Kontaktdaten Wie Telefon, E-Mail und Adresse als verknüpfte Felder.
- Über oder Team-Callouts Verwenden Sie die voreingestellte gefüllte Hintergrundvoreinstellung, um sich hervorzuheben.
Tipps für die Arbeit mit dem Info-Box-Widget #
- Beschreibungen kurz halten. Die eine oder andere Zeile liest sich am besten und hält eine Kartenreihe gleichmäßig.
- Symbolgrößen über eine Reihe hinweg abgleichen. Legen Sie auf jeder Box die gleiche Symbolgröße fest, damit sie sich aneinanderreihen. Das ist die Sache, die normalerweise abfällt, wenn Karten nicht ganz übereinstimmen.
- Verwenden Sie eine Voreinstellung pro Zeile. Das Mischen von Voreinstellungen in derselben Zeile sieht tendenziell ungleichmäßig aus; Wechseln Sie stattdessen die Hintergrundfarbe, wenn Sie eine hervorheben möchten.
- Verlinken Sie den Titel oder den Wrapper. Senden Sie Personen mit der Titel-URL an einen nützlichen Ort oder machen Sie die gesamte Karte mit Wrapper Link anklickbar.
- Fügen Sie eine subtile Hover-Animation hinzu. Ein kleiner Bob oder Grow on Hover signalisiert, dass die Karte interaktiv ist, ohne sich in die Quere zu kommen.
Für Voreinstellungen, Demos und einen Vergleich mit der Elementor-Symbolbox siehe die Info Box Widget-Seite.
Häufig gestellte Fragen #
Was ist das Info Box Widget in Master Addons?
Es handelt sich um ein Elementor-Widget, das ein Symbol oder Bild, einen Titel und eine kurze Beschreibung zu einer Karte im Stil kombiniert. Sie erhalten fünf kostenlose Stilvoreinstellungen (zehn mit Pro) und kontrollieren Farben, Abstände und Hover-Effekte, sodass Sie Funktionszeilen, Servicelisten und Callouts direkt aus dem Panel erstellen können.
Wie viele Stilvoreinstellungen hat die Info Box?
Ten. Variation Eins bis Fünf sind kostenlos, und Variation Sechs bis Zehn benötigen Master Addons Pro. Jeder ordnet und dekoriert das Symbol, den Titel und die Beschreibung anders Sie wechseln zwischen ihnen vom Style Preset Dropdown, ohne Ihre Inhalte neu zu machen.
Kann ich ein Bild anstelle eines Symbols verwenden?
Ja. Stellen Sie im Reiter Inhalt Bild oder Symbol auf Bild und wählen Sie eine Datei aus der Mediathek aus Das Widget zeigt Ihr Bild anstelle des Symbols an, das gut für Logos, Produktaufnahmen oder illustrierte Karten funktioniert Wählen Sie Keine für eine reine Textbox.
Kann ich die Infobox anklickbar machen?
Sie können den Titel mit dem Feld Titel-URL im Reiter Inhalt verknüpfen, um die gesamte Karte anklickbar zu machen, verwenden Sie die Option Wrapper Link, aus der kostenlosen Erweiterung Wrapper Link Beide lassen Besucher auf das Kästchen tippen, um eine andere Seite oder einen anderen Abschnitt zu erreichen.
Kann ich der Infobox einen Hover-Effekt hinzufügen?
Ja. General Styles hat einen Hover Animation Dropdown mit eingebauten Effekten wie Bob und Grow, und die Abschnitte Icon, Title, and Description haben jeweils ihre eigenen Hover-Zustände für Farbe und Hintergrund Zusammen lassen sie die Karte reagieren, wenn sich jemand darüber bewegt.
Einwickelnd #
Das Info-Box-Widget verwandelt ein Symbol, einen Titel und einen Satz in eine saubere Karte, die Sie über jeden Abschnitt hinweg wiederholen können Wählen Sie eine Voreinstellung, wählen Sie ein Symbol oder Bild, fügen Sie Ihren Text und Ihre Links hinzu und stylen Sie dann das Feld so, dass es zu Ihrer Seite passt Zu verwandten Layout-Tools siehe die Flipbox-widget und die Widget für TeammitgliederDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
