Infobox

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 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 eines von vier vorgefertigten Layouts und stylen jedes 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 Icon oder Bild auf einen Titel und eine kurze Beschreibung Die vier Stilvoreinstellungen bedeuten, dass der gleiche 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 Feature-Reihe 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 Elementor 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 Variation Eins bis Vier. Jedes legt Symbol, Titel und 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.

Unter denen finden Sie eine Hilfe Docs Link und ein Wrapper Link Option (eine Pro-Funktion), die die gesamte Karte anklickbar macht.

Wählen Sie eine Stilvoreinstellung #

Die vier Voreinstellungen ändern das gesamte Erscheinungsbild, ohne Ihre Inhalte zu berühren. Der Wechsel zwischen ihnen ist also eine schnelle Möglichkeit, das Layout zu finden, das zum Abschnitt passt.

• Variante Eins: Eine zentrierte Karte mit gestapeltem Symbol, Titel und Beschreibung, oft auf einem gefüllten Hintergrund.
• Variante Zwei: Eine umrandete Karte, deren Symbol links über dem Titel ausgerichtet ist.
• Variante drei: Eine Karte, bei der das Symbol in einem farbigen quadratischen Block über der Überschrift gesetzt ist.
• Variation Vier: Ein zentriertes Layout mit dem Symbol in einem kreisförmigen Abzeichen.

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 (eine Pro-Option).Allgemeine Stile 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.

Häufig gestellte Fragen #

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.