So fügen Sie in WordPress einen Rahmen um ein Bild hinzu

Möchten Sie in WordPress einen Rahmen um Ihre Bilder hinzufügen? Vor kurzem hat uns einer unserer Benutzer nach einer einfachen Möglichkeit gefragt, in WordPress ein Bild einzufügen. Während Sie CSS verwenden können, ist es für Anfänger verwirrend. In diesem Artikel zeigen wir Ihnen eine einfache Möglichkeit, Bildrand in WordPress hinzuzufügen, ohne HTML- oder CSS-Code zu bearbeiten.

Videoanleitung

Wenn Ihnen das Video nicht gefällt oder Sie weitere Anweisungen benötigen, lesen Sie weiter.

Methode 1: Verwenden eines Plugins zum Hinzufügen eines Bildrahmens in WordPress

Diese Methode ist für Anfänger gedacht, die kein HTML oder CSS bearbeiten möchten. Zunächst müssen Sie das Plugin für WP-Bildumrandungen installieren und aktivieren. Nach der Aktivierung müssen Sie besuchen Einstellungen »WP-Bildumrandungen um die Plugin-Einstellungen zu konfigurieren.

Im ersten Abschnitt der Plugin-Einstellungen können Sie Bilder anvisieren. Sie können allen Bildern in Ihren WordPress-Posts Rahmen hinzufügen, indem Sie das Kontrollkästchen neben aktivieren "Hinzufügen von Rahmen zu allen Bildern in Blogbeiträgen" Möglichkeit.

Alternativ können Sie bestimmte CSS-Klassen mit Rahmen versehen. Wir zeigen Ihnen später in diesem Artikel, wie Sie einem bestimmten Bild eine CSS-Klasse hinzufügen. Im Moment können Sie alles in die CSS-Klasse einfügen .Randbild.

Im zweiten Abschnitt der Plugin-Einstellungen können Sie die Randeinstellungen anpassen. Sie können einen Randstil, eine Breite, einen Radius und eine Farbe auswählen.

Im letzten Abschnitt der Einstellungsseite können Sie Ihren Bildern Schlagschatten hinzufügen. Sie können einen horizontalen und vertikalen Abstand, einen Unschärfe- und Ausbreitungsradius sowie die Schattenfarbe des Kastens eingeben. Wenn Sie Ihren Bildern keine Schlagschatten hinzufügen möchten, lassen Sie diese Felder einfach leer.

Vergessen Sie nicht, auf die Schaltfläche Save Changes zu klicken, um Ihre Plugin-Einstellungen zu speichern.

Wenn Sie die erste Option ausgewählt haben "Hinzufügen von Rahmen zu allen Bildern in Blogbeiträgen", dann müssen Sie nichts anderes tun.

Sie sollten Bildumrandungen auf allen Ihren Blogpost-Bildern sehen.

Wenn Sie jedoch die zweite Option ausgewählt haben, um nur Rahmen für bestimmte Bilder anzuzeigen, müssen Sie den nächsten Schritt ausführen.

CSS-Klasse zu einem Bild in WordPress hinzufügen

Wenn Sie nur ausgewählten Bildern Rahmen hinzufügen möchten, müssen Sie WordPress mitteilen, welche Bilder Rahmen haben sollen. Sie können dies tun, indem Sie Bildern, die einen Rahmen benötigen, eine CSS-Klasse hinzufügen.

Laden Sie einfach Ihr Bild hoch und fügen Sie es Ihrem Post hinzu. Nachdem Sie das Bild hinzugefügt haben, klicken Sie im visuellen Editor darauf und dann auf die Schaltfläche Bearbeiten in der Symbolleiste.

Das Popup-Fenster für die Bildbearbeitung wird mit Ihren Bilddetails angezeigt. Sie müssen auf Erweiterte Optionen klicken, um sie zu erweitern, und geben Sie dann die CSS-Klasse Ihres Images ein.

Hinweis: das ist .Randbild weil wir das in unseren Plugin-Einstellungen ausgewählt haben.

Klicken Sie anschließend auf die Aktualisierungsschaltfläche, um die Bildeinstellungen zu speichern und zu aktualisieren. Das ist alles, Ihr Image wird jetzt eine zusätzliche Klasse haben. Da Sie das Plugin für WP-Bildumrandungen verwenden, wird in diesem Bild ein Rand angezeigt.

Methode 2: Verwenden von HTML & CSS zum Hinzufügen von Bildrahmen in WordPress

Das Hinzufügen von Bildumrandungen mit CSS / HTML ist eine schnellere und schnellere Methode, um in WordPress Umrandungen um Ihre Bilder herum zu erhalten. Es gibt viele Möglichkeiten, dies zu tun, und wir zeigen Ihnen alle. Sie können wählen, was für Sie am besten funktioniert.

Hinzufügen von Rahmen mit Inline-Styles in WordPress

Nachdem Sie Ihr Bild hochgeladen und in einen WordPress-Beitrag eingefügt haben, wechseln Sie in den Texteditor. Sie sehen HTML-Code für Ihr Bild. Es wird ungefähr so ​​aussehen:

Sie können CSS-Stil einfach wie folgt in den HTML-Code einfügen:

Fühlen Sie sich frei, die Breite, Farbe, Füllung und den Rand des Rahmens an Ihre eigenen Bedürfnisse anzupassen.

Bildrahmen in Ihrem WordPress-Theme oder untergeordneten Theme hinzufügen

Wenn Sie allen Bildern in Ihren WordPress-Blogbeiträgen und -seiten dauerhaft Rahmen hinzufügen möchten, können Sie CSS direkt in Ihrem WordPress-Design oder untergeordneten Design hinzufügen.

Bei den meisten WordPress-Designs sind diese Stilregeln bereits im Stylesheet des Themes definiert, das normalerweise die Datei style.css ist. Sie können das vorhandene CSS ändern oder Ihr eigenes CSS in einem untergeordneten Design hinzufügen.

WordPress fügt allen Bildern Standardbildklassen hinzu. Um sicherzustellen, dass Bilder in Ihren Posts / Seiten einen Bildrand haben, müssen Sie alle diese Klassen als Ziel festlegen. Hier ist ein einfaches CSS-Snippet für den Einstieg:

 img.alignright float: right; Marge: 0 0 1em 1em; Grenze: 3px fest #EEEEEE;  img.alignleft float: left; Marge: 0 1em 1em 0; Grenze: 3px fest #EEEEEE;  img.aligncenter display: block; Rand links: auto; Rand rechts: auto; Grenze: 3px fest #EEEEEE;  img.alignnone border: 3px fest #EEE;  

Wenn Sie Bildrahmen nur bei Bedarf verwenden möchten, können Sie Ihren Bildern eine CSS-Klasse hinzufügen (siehe oben). Fügen Sie Stilregeln für diese CSS-Klasse in Ihrem Design oder untergeordneten Design hinzu.

 img.border-image border: 3px fest #eee; Polsterung: 3px; Marge: 3px;  

Wir hoffen, dass Ihnen dieser Artikel dabei geholfen hat, Ihren WordPress-Blog-Bildern einen Bildrahmen hinzuzufügen. Vielleicht möchten Sie auch unsere Anleitung zum Speichern von für das Internet optimierten Bildern, um Ihre WordPress-Site zu beschleunigen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unsere Video-Tutorials für unseren YouTube-Kanal für WordPress. Sie finden uns auch auf Twitter und Facebook.