So fügen Sie eine Bildbox in WordPress hinzu: 3 einfache Schritte 

Möchten Sie Ihre WordPress-Seiten optisch hervorheben? Dann sind Bildboxen das geheime Element.

Mit der Bildbox in WordPress können Sie Produkte präsentieren, Teammitglieder hervorheben oder die Aufmerksamkeit Ihrer Kunden auf wichtige Funktionen lenken. 

Und Sie haben richtig geraten!

In diesem Artikel beschreiben wir die 3-Schritt-Anleitung zum Hinzufügen eines Bildfelds in WordPress.

Lass uns anfangen!

Was ist eine Bildbox in WordPress? 

Ein Bildfeld ist ein grafisches Element oder ein Container, der zur Anzeige von Bildern innerhalb einer Webseite oder eines Beitrags dient. Sie können kombinieren Texte und Links mit Fotos, um Informationen auf ansprechende und optisch ansprechende Weise zu präsentieren. Es ist auch hilfreich, das Gesamtdesign und die Benutzererfahrung einer WordPress-Website zu verbessern.

Bildfelder werden auf Webseiten häufig zum Erstellen von Abschnitten verwendet, beispielsweise:

• Hervorhebung wichtiger Funktionen oder Dienste
• Vorstellung von Blogbeiträgen oder Portfolios
• Bilder anzeigen und Produktgalerien
• Teammitglieder vorstellen 
• Anzeigen von Erfahrungsberichten usw.

Schlüsselkomponenten der WordPress Image Box

• Bild: Das wichtigste visuelle Element, das häufig ein Produkt, eine Dienstleistung, ein Teammitglied oder ein zugehöriges Konzept präsentiert.
• Titel: Eine kurze, beschreibende Überschrift, die das Wesentliche des Bildes und des Begleittextes erfasst.
• Text: Eine kurze Beschreibung oder ein Informationsausschnitt, um Kontext und Details bereitzustellen.
• Schaltfläche/Link: Eine anklickbare Schaltfläche oder ein Link, um Benutzer zu einer relevanten Seite, einem Produkt oder anderen Ressourcen weiterzuleiten.

So fügen Sie eine Bildbox in WordPress hinzu: 3-Schritte-Anleitung 

Bildboxen können Ihre WordPress-Seiten in visuell beeindruckende Meisterwerke verwandeln. Es fesselt auch Ihr Publikum und hinterlässt einen bleibenden Eindruck.

Sehen wir uns an, wie Sie in wenigen Schritten eine Bildbox in WordPress erstellen 3 einfache Schritte:

Schritt 1: Installieren und aktivieren Sie die erforderlichen Plugins

Um Ihrer WordPress-Site eine Bildbox hinzuzufügen, können Sie entweder Liquid Code oder Elementor-Plugins verwenden. In diesem Fall ist die Verwendung von Plugins eine bequeme Möglichkeit, Bildboxen zu erstellen und hinzuzufügen, ohne dass Programmierkenntnisse erforderlich sind. 

So können Sie sich für eine entscheiden All-in-One-Elementor-Add-on – ElementsKit. Dieses erstaunliche Plugin bietet umfangreiche Funktionen und fertige Vorlagen zum Hinzufügen von Bildern zu Ihrer WordPress-Website. Darüber hinaus sind das Bildfelddesign und alle Elemente des ElementsKit-Bildfelds vollständig anpassbar.

Um das ElementsKit-Bildbox-Plugin zu installieren, gehen Sie zu Ihrem WordPress-Dashboard.

• Navigieren Sie zu Plugins ➡ Neu hinzufügen 
• Suchen nach „ElementsKit“ 
• Klicke auf "Jetzt installieren"
• Oder laden Sie die Datei herunter und laden Sie sie hoch zip-Datei
• Aktivieren Sie das Plugin, sobald es installiert ist

Schritt 2: Bildfeld zu Ihrer WordPress-Site hinzufügen

Nach der Installation und Aktivierung des WordPress Image Box Plugins, d.h. ElementsKit, können Sie dessen vorgefertigte Vorlagen. Diese Vorlagen sind mit nur einem Klick einfach zu verwenden. Außerdem können Sie Elemente nach Bedarf hinzufügen/entfernen. 

Sehen wir uns an, wie man Bilder in WordPress einfügt mit dem ElementsKit-Bildbox: 

• Erstellen Sie eine neue Seite/einen neuen Beitrag oder öffnen Sie eine bestehende 
• Mit Elementor öffnen 
• Klick auf das „ElementsKit“-Symbol 

• Als nächstes müssen Sie das Bildbox-Widget aus dem auswählen ElementsKit-Widgets-Kategorie 
• Klicke auf „Bildbox“

• Hier können Sie zugreifen 11 kostenlose und 8 Premium-Design und -Stil Variationen; insgesamt 19 verschiedene Vorlagen um der WordPress-Site ein Bildfeld hinzuzufügen
• Du kannst das ... sehen Vorschau aller Vorlagen um das Design und die Elemente zu verstehen, die zu Ihrer Website passen
• Klick auf das Pluszeichen (+) um die Live-Vorschau zu sehen 

• Nachdem Sie das Design fertiggestellt haben, klicken Sie auf "Einfügen"
• Es wird Ihrer Seite/Ihrem Beitrag hinzugefügt 
• Jetzt kannst du hinzufügen/entfernen oder ändern den Inhalt, die Stile und andere Eigenschaften des Bildfelds
• Klicken Sie nach allen Anpassungen auf "Veröffentlichen". Und das Bildfeld wird auf Ihrer WordPress-Website live geschaltet.

Schritt 3: Passen Sie die Stile und Einstellungen an 

ElementsKit, ein hervorragendes Add-on für Elementor ist ein vollständig anpassbares Plugin, das Benutzer nutzen können Über 85 Widgets und Module. Wie andere Elemente kann auch das Bildbox-Widget entsprechend Ihren Anforderungen personalisiert werden. 

Sie können Überschriften und den Hauptinhalt bearbeiten. Auch hier können Sie den Stil der Bilder und Call-to-Action-Buttons ändern. Darüber hinaus können Sie die Bildboxen mit zahlreichen Effekten und Formaten gestalten.

Sehen wir uns an, wie Sie eine Bildbox in WordPress anpassen: 

Layoutanpassung

Nachdem Sie die vorgefertigten Bildbox-Vorlagen von ElementsKit in WordPress eingefügt haben, können Sie das Layout anpassen. 

• Erhöhen oder verringern Sie die Breite des Bildfelds
• Stellen Sie die Spaltenlücke auf „schmal“, „erweitert“, „breit“, „benutzerdefiniert“ oder „keine Lücke“ ein
• Passen Sie die Höhe und Ausrichtung des Bildfelds an 
• Lassen Sie den Überlauf standardmäßig oder ausgeblendet 
• Verwenden Sie HTML-Tags, z. B. Kopfzeile, Fußzeile, Hauptzeile, Artikel usw.

Inhaltsanpassung

Das Bildfeld in WordPress enthält unterschiedliche Inhalte für unterschiedliche Elemente wie Überschriften, Bilder, Schaltflächenusw. Sie können den Text ändern und seine Eigenschaften modifizieren.

Sehen wir uns an, wie Sie den Inhalt der ElementsKit-Bildbox in WordPress anpassen. 

✨ Titel 

• Ändern Sie Überschriften und Unterüberschriften 
• Fügen Sie Links mit dem Titel ein
• Rand mit Start-/Endposition ein-/ausblenden 
• Titelbeschreibung hinzufügen/anzeigen oder ausblenden 
• Fügen Sie Trennzeichen mit verschiedenen Stilen und Positionen hinzu 

✨ Bild 

• Ändern Sie das Bild bzw Fügen Sie KI-generierte Bilder hinzu
• Passen Sie die Bildgröße an, z. B. Voll, Mittel, Groß, Benutzerdefiniert usw
• Legen Sie den Inhaltsbereich als einfache, klassische, Schattenlinie usw. fest
• Gleiche Höhe aktivieren/deaktivieren 
• Geben Sie eine URL ein, um eine andere Ressource zu verlinken 

✨ Körper 

• Titeltext hinzufügen/entfernen oder bearbeiten
• Ändern Sie das Titel-HTML-Tag
• Passen Sie die Ausrichtung des Titels nach links, rechts oder in der Mitte an 

✨ Knopf

• Aktivieren oder deaktivieren Sie die Kreativ-Taste
• Fügen Sie benutzerdefinierten Beschriftungstext für die Schaltfläche hinzu 
• Fügen Sie eine benutzerdefinierte URL hinzu
• Fügen Sie das Symbol hinzu/entfernen Sie es und stellen Sie den Kolben ein 

Stilanpassung 

Bei Layout und Inhalt können Sie auch deren Stile ändern. Dadurch können Sie verschiedene Arten von Bildboxen erstellen, die zu der Benutzeroberfläche Ihrer WordPress-Site und anderen Eigenschaften passen. 

✨ Schattenlinie 

• Wählen Sie die Schattenlinie für links oder rechts
• Stellen Sie je nach Bedarf eine benutzerdefinierte Breite ein
• Passen Sie den Typ und die Farbe des Schattenhintergrunds an 
• Legen Sie ein benutzerdefiniertes Hintergrundbild fest 

✨ Bild 

• Fügen Sie benutzerdefinierten Randradius und Polsterung hinzu 
• Passen Sie die Bildopazität für normale oder Hover-Effekt 

✨ Körper 

• Wählen Sie den Rahmentyp mit Randradius
• Legen Sie benutzerdefiniertes Hintergrundbild, Typ und Farbe fest 
• Passen Sie die Boxfüllung und die Boxschattenfarbe an 
• Passen Sie die Typografie, Farbe und den Abstand des Titels an

✨ Knopf 

• Passen Sie den Füllwert und die Symbolschriftgröße an 
• Ändern Sie den Text und die Hintergrundfarbe der Schaltfläche 
• Legen Sie Normal- oder Hover-Eigenschaften fest 
• Legen Sie den Rahmentyp, den Rahmenradius und den Rahmenschatten fest 

Erweiterte Anpassung 

ElementsKit Image Box ist flexibel und bietet erweiterte Anpassungsfunktionen. Es hilft, Ihre Image Box eleganter und ansprechender zu gestalten. Sie können auch verschiedene Bewegungseffekte sowie benutzerdefinierte Codes um das Bildfeld mit der jeweiligen Webseite Ihrer Website abzugleichen.

Die Anpassungsmöglichkeiten findest du in den erweiterten Einstellungen:

• Ändern Sie den Abstand, den Rand, die Breite, die Position und den Z-Index des Bildbox-Layouts
• Fügen Sie Bewegungseffekte für Elemente hinzu (z. B. Einblenden, Ausblenden, Hineinspringen, Vergrößern, Nach links schieben usw.)
• Passen Sie die Reaktionsfähigkeit der Bildbox an Geräte wie PC, Tab und Mobilgerät an 
• Legen Sie Attribute und Eigenschaften fest, die auf verschiedenen Geräten ausgeblendet/angezeigt werden sollen 
• Benutzerdefiniertes CSS einbinden für zusätzliche Funktionsänderungen 

Vorteile des Hinzufügens einer Bildbox in WordPress

• Verbessern Sie die visuelle Attraktivität: Ein ansprechendes Bildfeld lockert textlastigen Inhalt auf. Außerdem macht es die Seiten optisch ansprechender und leichter zu überfliegen.
• Kerninformationen hervorheben: Sie können wichtige Nachrichten, Funktionen oder Handlungsaufforderungen hervorheben.
• Verbessern Sie das Benutzerengagement: Mithilfe von Bildbox-Elementen in WordPress können Sie auch visuell ansprechende Erlebnisse schaffen. Es kann das Interesse der Benutzer wecken und Ihre Inhalte erkunden.
• Steigern Sie die Klickraten: Bildfelder mit klaren Handlungsaufforderungen (Calls-to-Action, CTA) können Benutzer zum Klicken und Erfahren weiterer Informationen anregen.
• Strukturinformationen: Sie können Inhalte in logische Abschnitte organisieren und die Lesbarkeit durch Navigation verbessern.

5 Tipps zum Hinzufügen einer Bildbox in WordPress 

Durch das Hinzufügen einer Bildbox zu Ihrer WordPress-Website werden Ihre Inhalte ansprechender und informativer. 

Lass uns erforschen 5 Tipps, um es effizienter und auffälliger zu machen Element auf Ihrer Website:

1. Bildgrößen optimieren

Verwenden Sie Tools wie TinyPNG oder Bildoptimierungs-Plugins, um die Größe der Bilddateien zu reduzieren, ohne die Qualität zu beeinträchtigen. Dadurch wird die Seitenladegeschwindigkeit erheblich verbessert.

2. Behalten Sie die Konsistenz bei

Verwenden Sie Bilder mit einem einheitlichen Stil, einer einheitlichen Farbpalette und einheitlichen Proportionen, um ein zusammenhängendes visuelles Erlebnis zu schaffen. Stellen Sie außerdem sicher, dass die Bildfelder mit anderen Elementen auf der Seite übereinstimmen, um ein elegantes Erscheinungsbild zu erzielen.

3. Verwenden Sie beschreibenden Alt-Text

Geben Sie für jedes Bild einen beschreibenden Alternativtext an. Dies hilft Screenreadern, Bilder für sehbehinderte Benutzer zu beschreiben, und verbessert die Sichtbarkeit in Suchmaschinen.

4. Berücksichtigen Sie die mobile Reaktionsfähigkeit

Überprüfen Sie, ob Bildfelder auf verschiedenen Bildschirmgrößen, insbesondere auf Mobilgeräten, korrekt angezeigt werden. Nutzen Sie Responsive-Design-Techniken oder Plugins, um eine nahtlose Anpassung zu gewährleisten.

5. Strategisch verknüpfen (falls zutreffend)

Verknüpfen Sie Bildfelder mit relevanten Inhalten oder Zielseiten, um Benutzer zu leiten und zu gewünschten Aktionen anzuregen.

Gut zu wissen 👉 So wenden Sie die Elementor-Bildmaskierung in 4 einfachen Schritten mit ElementsKit an

FAQs

Wickeln Sie es

Um Ihre WordPress-Websites mit Bildern zu schmücken, gibt es nichts Fesselnderes und Informativeres als die ElementsKit-Bildbox.

Hier haben wir eine Schritt-für-Schritt-Anleitung dazu bereitgestellt Fügen Sie mühelos eine Bildbox zu Ihrer WordPress-Site hinzu. Außerdem haben wir gezeigt, wie man die ElementsKit Elementor-Plugin für mehr Wirkung und experimentieren Sie mit verschiedenen Bildfeldstilen und -layouts. 

Die Macht der Bilder liegt jetzt in Ihrer Hand – nutzen Sie sie effizient und lassen Sie Ihre Inhalte wirklich glänzen! 🥳