Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Cup
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

So fügen Sie einen Rahmen um ein Bild in WordPress hinzu (3 einfache Methoden)

Haben Sie jemals das Gefühl, dass Ihre Bilder einfach im Hintergrund Ihrer WordPress-Website verschwinden? Sie wählen großartige Bilder, aber sobald sie auf der Seite sind, sehen sie flach aus, als wären sie kaum vorhanden.

Das passiert oft, besonders bei klaren, weißen Layouts. Und es kann dazu führen, dass Ihre Inhalte weniger ansprechend wirken, selbst wenn alles andere poliert aussieht.

Hier kann das Hinzufügen eines einfachen Rahmens einen großen Unterschied machen.

Bei WPBeginner fügen wir gerne saubere Rahmen um unsere Screenshots hinzu, damit sie besser hervorstechen und das Gesamtbild unserer Seiten verbessert wird. Es ist einer unserer Lieblingstricks für mehr Engagement, ein ausgewogeneres Design und ein professionelleres Gefühl.

In dieser Anleitung zeigen wir Ihnen drei einfache Möglichkeiten, einen Rahmen um ein Bild in WordPress hinzuzufügen. Am Ende wissen Sie, wie Sie Ihre Bilder hervorheben und Ihre Besucher bei Ihren Inhalten halten können. 🙌

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

Warum einen Rahmen um ein Bild in WordPress hinzufügen?

Ein Rahmen hilft Ihren Bildern, sich vom Rest Ihres Inhalts abzuheben, insbesondere auf Seiten mit hellen oder unruhigen Hintergründen. Er schafft eine klare visuelle Grenze, die Ihre Bilder leichter sichtbar macht und eher Aufmerksamkeit erregt.

Bilder sind mächtige Werkzeuge zur Kommunikation. Sie können Informationen schnell teilen und textlastige Seiten ansprechender gestalten.

Manchmal können Bilder jedoch mit dem Hintergrund der Website verschmelzen. Dies ist wahrscheinlicher, wenn Sie ein Hintergrundbild verwenden oder die Farben Ihrer Website denen Ihrer Bilder ähneln.

Menschen mit Sehbehinderungen oder Farbenblindheit kann es auch schwerfallen, Bilder vom Hintergrund zu unterscheiden. Wenn Sie mehr erfahren möchten, haben wir einen Leitfaden zur Verbesserung der Barrierefreiheit von WordPress-Websites.

Das Hinzufügen eines Rahmens um ein Bild in WordPress unterscheidet das Bild deutlich vom Hintergrund Ihrer Website. Es ist auch eine großartige Möglichkeit, die Aufmerksamkeit auf Ihre wichtigsten Bilder zu lenken.

In diesem Sinne führen wir Sie durch, wie Sie einen Rahmen um ein Bild in Ihrem WordPress-Blog hinzufügen können.

Hier ist eine kurze Übersicht über alle Methoden, die wir in diesem Artikel behandeln werden:

Bereit? Legen wir los.

Methode 1: Verwenden von benutzerdefinierten CSS-Klassen, um einen Rahmen um ein Bild in WordPress hinzuzufügen

Das Erstellen einer benutzerdefinierten CSS-Klasse ist eine intelligente und einfache Möglichkeit, Bildern Rahmen hinzuzufügen. Eine CSS-Klasse ist ein wiederverwendbarer Block von Code, mit dem Sie die gleiche Formatierung, wie Rahmen, Farben oder Abstände, auf mehrere Elemente Ihrer Website anwenden können.

Anstatt jedes Bild einzeln zu bearbeiten, können Sie Ihre Rand-Einstellungen an einem Ort definieren und sie mit nur wenigen Klicks überall dort anwenden, wo Sie sie benötigen. Dies ist perfekt, wenn Sie vorhaben, mehreren Bildern auf Ihrer Website Ränder hinzuzufügen.

Es gibt verschiedene Möglichkeiten, eine benutzerdefinierte CSS-Klasse zu erstellen. Sie können den Theme-Customizer, den Full Site Editor oder das WPCode-Plugin verwenden.

Wir empfehlen immer die Verwendung des WPCode-Plugins, da es anfängerfreundlich und themenunabhängig ist. Das bedeutet, dass Ihr benutzerdefiniertes CSS auch dann noch funktioniert, wenn Sie zu einem anderen Theme wechseln.

Über unsere Partner-Marken hinweg verwenden wir WPCode, um benutzerdefinierte Code-Snippets hinzuzufügen und zu verwalten. Um mehr darüber zu erfahren, lesen Sie unsere detaillierte WPCode-Bewertung.

WPCode's Homepage

Installieren und aktivieren wir also das WPCode Plugin. Wenn Sie Hilfe benötigen, können Sie sich auf unseren Leitfaden zur Installation eines WordPress-Plugins beziehen.

📝 Hinweis: Sie können die kostenlose Version von WPCode verwenden, aber ein Upgrade auf WPCode Pro schaltet weitere Funktionen wie Code-Planung und eine vollständige Revisionshistorie frei.

Nach der Aktivierung navigieren Sie zu Code-Schnipsel » + Schnipsel hinzufügen.

Dann können Sie mit der Maus über die Option „Benutzerdefinierten Code hinzufügen (Neuer Schnipsel)“ fahren und auf „Schnipsel verwenden“ klicken.

Einen neuen benutzerdefinierten Snippet hinzufügen

Auf dem nächsten Bildschirm werden Sie von WPCode aufgefordert, einen Codetyp auszuwählen.

Möglicherweise stellen Sie fest, dass die Standardeinstellungen von WPCode auf „PHP-Schnipsel“ verweisen. Hier müssen Sie jedoch auf „CSS-Schnipsel“ klicken.

CSS-Snippet als Code-Typ auswählen

Dies öffnet den WPCode-Editor. Von hier aus können Sie zuerst einen Namen für den benutzerdefinierten Schnipsel erstellen. Zum Beispiel verwenden wir „border-black“.

Beachten Sie, dass Sie bei der Erstellung Ihrer CSS-Klasse die Farbe und Breite des Rahmens angeben müssen.

Sie können beispielsweise Pixel (px) für die Breite und einen Hex-Farbcode für die Farbe festlegen.

Im folgenden Code-Snippet erstellen wir einen schwarzen Rand, der 5 Pixel breit ist:

.border-black { border: #000 solid 5px; } 

Im obigen Beispielcode ist border-black der Name der CSS-Klasse (derselbe wie in unserem benutzerdefinierten Code-Snippet in WPCode, was die Organisation erleichtert).

Sie können jeden beliebigen Namen verwenden, aber Sie müssen jedes Mal, wenn Sie einen Rahmen erstellen möchten, den Namen der CSS-Klasse eingeben. Vor diesem Hintergrund sollten Sie einen CSS-Klassennamen wählen, der kurz und leicht zu merken ist.

Jetzt müssen Sie nur noch diesen Code-Schnipsel in das Feld „Code-Vorschau“ von WPCode kopieren, so:

Hinzufügen eines Bildrahmens-CSS-Snippets in WPCode

Danach können Sie den Schalter umlegen, um den Snippet zu aktivieren, und auf die Schaltfläche „Snippet speichern“ oder „Aktualisieren“ klicken. Detaillierte Anweisungen finden Sie in unserem Leitfaden zum Hinzufügen von benutzerdefiniertem CSS zu WordPress.

Sie können so viele CSS-Klassen hinzufügen, wie Sie möchten. Sie könnten zum Beispiel Rahmen mit unterschiedlichen Farben erstellen.

Jetzt ist das Hinzufügen eines Rahmens zu einem Bild ziemlich einfach.

Um zu beginnen, klicken Sie auf das Bild auf Ihrer WordPress-Seite oder Ihrem Beitrag. Als Nächstes sollten Sie auf der rechten Seite Ihres Bildschirms auf die Registerkarte „Block“ schauen und dort die Option „Erweitert“ finden.

Klicken Sie darauf, um den Abschnitt zu erweitern.

Der Abschnitt Erweitert, um einem Bild mit CSS einen Rand hinzuzufügen

Im Feld „ZUSÄTZLICHE CSS-KLASSE(N)“ können Sie den Namen der CSS-Klasse eingeben, die Sie dem Bild hinzufügen möchten.

Beachten Sie, dass der Rahmen, wie Sie im folgenden Bild sehen können, nicht im WordPress-Content-Editor angezeigt wird.

Das Feld „Zusätzliches CSS“ im Block-Editor

Um zu sehen, wie der Rahmen für Ihre Besucher aussehen wird, klicken Sie auf die Schaltfläche „Vorschau“.

Sie sehen nun Ihr Bild mit dem angewendeten Rahmen.

Ein Rahmen, der mit CSS-Code erstellt wurde

Wenn Sie mit dem Aussehen des Rahmens zufrieden sind, müssen Sie nur noch die Seite veröffentlichen oder aktualisieren.

Methode 2: Verwenden eines Page Builders, um einen Rahmen um ein Bild in WordPress hinzuzufügen

Eine weitere Methode ist die Verwendung eines Page-Builder-Plugins.

Drag-and-Drop-Seitenersteller ermöglichen es Ihnen, Webseiten wie Anmelde- und Landingpages einfach zu gestalten und anzupassen. Sie können Text, Bilder und andere Elemente hinzufügen, ohne Programmierkenntnisse zu benötigen.

Diese Werkzeuge ermöglichen es Ihnen auch, ganz einfach einzigartige Ränder für jedes Bild zu erstellen. Sie können diese mit einem visuellen Editor gestalten, was für viele Menschen einfacher ist.

Wir empfehlen SeedProd, den besten Landingpage-Builder für WordPress. Er ist benutzerfreundlich und ermöglicht es Ihnen, einfach professionell aussehende Seiten zu erstellen.

Fühlen Sie sich frei, unsere vollständige SeedProd-Bewertung zu lesen, um zu sehen, warum wir dieses Tool empfehlen.

SeedProd's Homepage

SeedProd verfügt über einen speziellen Bildblock mit integrierten Rahmenoptionen. Sie können auch einfach Schatten hinzufügen und Abstände anpassen.

Zuerst müssen Sie das Plugin installieren und aktivieren. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

📝 Hinweis: In diesem Leitfaden verwenden wir die kostenlose Version von SeedProd, damit Sie Ihren Bildern Rahmen hinzufügen können, unabhängig von Ihrem Budget. Es gibt auch eine SeedProd Pro-Version, die Ihnen Zugriff auf eine Bibliothek mit 2 Millionen Stockfotos sowie zusätzliche Blöcke bietet.

Nach der Aktivierung gehen wir in Ihrem WordPress-Dashboard zu SeedProd » Landing Pages.

So erstellen Sie eine neue Landingpage in SeedProd

SeedProd wird mit Hunderten von professionell gestalteten Vorlagen geliefert, die in Kategorien gruppiert sind. Oben auf dem Bildschirm sehen Sie Kategorien, die Sie verwenden können, um:

Um sich ein Design anzusehen, bewegen Sie einfach die Maus über eine Vorlage und klicken Sie dann auf das Lupensymbol, wenn es erscheint.

Dies zeigt eine Vorschau der Vorlage an.

SeedProd's Landingpage-Vorlagen

Wenn Sie mit dem Aussehen der Vorlage zufrieden sind, klicken Sie auf „Diese Vorlage auswählen“.

Geben Sie im Feld „Seitenname“ einen Namen für die Seite ein. Standardmäßig verwendet SeedProd diesen Namen als URL der Seite.

Wenn Sie diese automatisch erstellte URL ändern möchten, bearbeiten Sie einfach den Text im Feld „Seiten-URL“.

Eine neue Seite in WordPress erstellen

Sobald Sie die Informationen eingegeben haben, können Sie auf die Schaltfläche „Speichern und mit der Bearbeitung der Seite beginnen“ klicken. Dies öffnet Ihre ausgewählte Vorlage im Drag-and-Drop-Editor von SeedProd.

Im linken Menü sehen Sie alle Blöcke, die Sie per Drag & Drop zu Ihrer WordPress-Seite hinzufügen können.

Hinzufügen von Blöcken zum SeedProd-Design

Suchen Sie einfach den Block „Bild“ und ziehen Sie ihn dann auf Ihr Seitendesign.

Sobald Sie das getan haben, klicken Sie einfach auf den „Bild“-Block, um alle Einstellungen anzuzeigen, mit denen Sie den Block anpassen können.

Hinzufügen eines Rahmens zu einem Bild mit SeedProd

🧑‍💻 Profi-Tipp: Der KI-Bildgenerator von SeedProd mit DALL·E-Integration ermöglicht es Ihnen, in Sekundenschnelle hochwertige Bilder zu erstellen. Beschreiben Sie einfach, was Sie benötigen, und die KI generiert visuelle Elemente, die zum Stil Ihrer Website passen.

Sie können dann das integrierte Pinselwerkzeug verwenden, um vorhandene Bilder zu bearbeiten, Farben anzupassen, Objekte auszutauschen oder Layouts mit einfachen Eingabeaufforderungen zu optimieren. Sehen Sie sich unseren Leitfaden an, wie Sie KI verwenden, um Bilder in WordPress zu generieren, für Details.

Im linken Menü möchten Sie auf „Eigenes Bild verwenden“ klicken.

Sie können nun jedes Bild aus der WordPress-Mediathek auswählen.

Die Schaltfläche „Eigenes Bild verwenden“ in SeedProd

Klicken Sie danach im linken Menü auf die Registerkarte „Erweitert“.

Klicken Sie dann auf den Abschnitt „Bildrand“, um ihn zu erweitern.

Der Abschnitt Bildrand, um einem Bild mit SeedProd einen Rand hinzuzufügen

Standardmäßig sind alle Einstellungen für die Rahmenbreite von SeedProd auf 0 gesetzt, was bedeutet, dass das Bild keinen Rahmen hat.

Zuerst möchten Sie diese Werte auf 1 oder höher erhöhen. Dies fügt dem Bild einen sichtbaren Rahmen hinzu.

Um zu beginnen, klicken Sie auf jedes der Felder „Randbreite“ und geben Sie dann entweder eine höhere Zahl ein oder verwenden Sie die angezeigten Pfeiltasten.

Anpassen der Bildrandbreite mit SeedProd

Wenn Sie mit der Dicke des Rahmens zufrieden sind, können Sie mit der Gestaltung beginnen.

Eine Option besteht darin, die Farbe des Rahmens zu ändern, indem Sie auf das Feld neben „Rahmenfarbe“ klicken. Dies öffnet ein Popup, in dem Sie eine neue Rahmenfarbe auswählen können.

Ändern der Farbeinstellungen eines Rahmens mit SeedProd

SeedProd bietet drei einfache Rahmenstile: durchgezogen, gepunktet und gestrichelt. Sie können den Stil wählen, der am besten zu Ihrem Bild passt.

Um diese verschiedenen Rahmenstile auszuprobieren, öffnen Sie einfach das Dropdown-Menü „Rahmenstil“ und wählen Sie dann eine Option aus der Liste aus.

Ein gepunkteter Rahmen, erstellt mit SeedProd

Da haben Sie es!

Und wenn Sie anderen Bildern einen Rahmen hinzufügen möchten, folgen Sie einfach dem gleichen Prozess wie oben beschrieben.

Sobald Sie mit Ihrem Seitendesign zufrieden sind, können Sie auf die Schaltfläche „Speichern“ klicken und dann „Veröffentlichen“ wählen, um es live zu schalten.

Methode 3: Verwenden von HTML und CSS, um einen Rahmen um ein Bild hinzuzufügen in WordPress

Sie können auch Rahmen mit HTML und CSS hinzufügen. Diese Methode erfordert kein Plugin, was praktisch sein kann.

Das Anpassen des Rahmens erfordert jedoch das Schreiben von Code, daher ist es möglicherweise nicht die beste Wahl für Anfänger. Wenn Sie sich jedoch mit ein wenig Programmierung wohlfühlen, bietet diese Methode große Flexibilität.

Um zu beginnen, fügen wir ein Bild zu einer Seite oder einem Beitrag hinzu.

Sobald Sie dies getan haben, können Sie auf das Drei-Punkte-Symbol in der oberen rechten Ecke klicken und dann auf „Code-Editor“.

Das Menüelement des Code-Editors in WordPress

WordPress zeigt nun den gesamten Code an, aus dem die Seite oder der Beitrag besteht.

Sie können nun den Abschnitt mit dem Code finden, der das Bild zu Ihrer Seite hinzufügt. Dieser Code beginnt mit wp:image .

Der wp:image-String im WordPress-Code-Editor

Wenn die Seite mehrere Bilder hat, überprüfen Sie den img src=-Wert. Dies ist die URL des Bildes in Ihrer WordPress-Mediathek und sie unterscheidet sich für jedes Bild.

Sobald Sie den richtigen Codeabschnitt gefunden haben, besteht der nächste Schritt darin, eine Codezeile zu schreiben, die den Rahmen hinzufügt und steuert, wie er gestaltet wird.

Im folgenden Code-Snippet hat der Rahmen beispielsweise eine Breite von 3 Pixeln. Wir fügen auch 3 Pixel Polsterung und Abstand hinzu:

style="border:3px solid #000000; padding:3px; margin:3px;" /> 

In dem obigen Beispielcode setzt solid #000000 die Farbe des Rahmens. Der Wert #000000 ist der Hex-Code für die Farbe Schwarz.

Und wenn Sie keinen schwarzen Rand erstellen möchten, können Sie den Wert durch einen beliebigen anderen Hex-Code ersetzen.

Sobald Sie sich für den Rahmen-Code entschieden haben, müssen Sie den Abschnitt /></figure> finden und Ihren Code direkt vor dem ersten / Zeichen einfügen.

Schauen wir uns ein Beispiel an:

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} --> <figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure> <!-- /wp:image --> 

Wenn Sie mit Ihrem Code zufrieden sind, verlassen Sie den Code-Editor, indem Sie auf „Code-Editor verlassen“ klicken.

Sie sollten nun einen Rahmen um Ihr Bild sehen. Machen Sie sich keine Sorgen, wenn Sie eine Warnung bezüglich ungültigem HTML erhalten. Dies ist normal und beeinträchtigt nicht die Anzeige Ihres Bildes.

Eine Fehlermeldung für Bildrahmen im WordPress Block-Editor

Wenn Sie mit dem Ergebnis zufrieden sind, können Sie Ihre Seite wie gewohnt aktualisieren oder veröffentlichen.

Wenn Sie nun Ihre WordPress-Website besuchen, sehen Sie einen Rahmen um Ihr Bild.

Der HTML-Rahmen um ein Bild auf einer Live-Website

Bonus-Tipp: Verwenden eines Grafikdesign-Tools zum Hinzufügen eines Rahmens um ein Bild

Während WordPress mehrere Methoden zum Hinzufügen von Rahmen bietet, sind diese Optionen manchmal in Stil und Anpassungsmöglichkeiten begrenzt. Warum also nicht zuerst Ihr Bild bearbeiten und es danach in WordPress hochladen?

Hier kommen Grafikdesign-Tools ins Spiel.

Adobe Photoshop ist hier der große Player mit unzähligen ausgefallenen Funktionen für Profis. Wenn Sie nicht die Bank sprengen wollen, dann ist Affinity Photo eine solide Wahl – es hat ähnliche Tricks auf Lager, aber Sie zahlen nur einmal.

Für eine benutzerfreundlichere, browserbasierte Erfahrung ist Canva ein ausgezeichnetes Werkzeug. Unser Team nutzt es regelmäßig, um schnell Beitragsbilder und Social-Media-Grafiken zu gestalten.

Und wenn Sie auf Ihr Budget achten, kann GIMP (GNU Image Manipulation Program) Ihre erste Wahl sein. Es ist völlig kostenlos, Open-Source und kann vieles von dem, was kostenpflichtige Tools können.

GIMP ist auch eine großartige Option für Anfänger und erfahrene Benutzer gleichermaßen. Sie können es auf Mac und Windows verwenden.

In diesem Tutorial zeigen wir Ihnen, wie Sie mit GIMP einen Rahmen um ein Bild hinzufügen.

GIMP

Nach der Installation möchten Sie die Desktop-Anwendung für GIMP öffnen. Klicken Sie dann auf Datei » Öffnen und wählen Sie ein Bild von Ihrem lokalen Laufwerk aus, das Sie bearbeiten möchten. Oder Sie können eines per Drag & Drop in den GIMP-Editor ziehen.

Sobald das Bild im GIMP-Editor geladen ist, zeichnen wir mit dem „Rechteck-Auswahlwerkzeug“ einen Rahmen um das Bild. Sie finden dieses Werkzeug in der Werkzeugleiste oben links.

GIMPs Rechteck-Auswahlwerkzeug

Als Nächstes möchten Sie vielleicht Ihre Vordergrund- und Hintergrundfarbeneinstellungen überprüfen.

Das liegt daran, dass GIMP die Vordergrundfarbe zum Umranden der Linien verwendet. Wenn Sie also eine bestimmte Farbe für Ihren Rahmen verwenden müssen, können Sie auf die Vordergrundfarbe klicken, um sie anzupassen.

Dies öffnet die Farbauswahl, wo Sie Ihre Maus über den Farbauswahlbereich bewegen oder den Hex-Code der Farbe eingeben können.

GIMPs Farbauswahl

Sobald Sie dies getan haben, können Sie auf „OK“ klicken.

Jetzt, da Sie Ihre Rahmenfarbe festgelegt haben, ist es an der Zeit, sie anzuwenden. Sie können zu Bearbeiten » Auswahl umranden navigieren, und dies öffnet das Popup „Auswahl umranden“.

Hier können Sie den Stil des Strichs, die Linienbreite und mehr anpassen. Wir haben zum Beispiel unsere Linienbreite auf 5 Pixel eingestellt.

GIMP's stroke selection popup

Sobald Sie dies getan haben, klicken Sie auf „Kontur“ und der Rahmen sollte nun zu Ihrem Bild hinzugefügt werden.

Bevor Sie nach WordPress hochladen, möchten Sie das Bild möglicherweise optimieren, um eine ausgezeichnete Website-Geschwindigkeit und -Leistung aufrechtzuerhalten. Rohbilder sind oft groß, daher kann dieser Schritt eine enorme Hilfe sein.

In GIMP können Sie Ihr Bild optimieren, indem Sie es in der Größe ändern.

Um zu beginnen, navigieren Sie zu Bild » Bild skalieren. Dies öffnet das Popup-Fenster „Bild skalieren“, in dem Sie die „Bildgröße“ wie folgt anpassen können:

Bildgröße in GIMP anpassen

Nach dem Anpassen der Bildgröße können Sie auf die Schaltfläche 'Skalieren' klicken.

GIMP wird das Bild dann in der Größe ändern und die neue Version im Editor anzeigen.

Die neue Bildversion im GIMP-Editor

Sobald Sie fertig sind, können Sie das Bild speichern, indem Sie zu Datei » Als exportieren gehen.

Dann können Sie der Aufforderung folgen, einen Speicherort auswählen, den Dateinamen festlegen und das Bildformat definieren. Wenn alles eingestellt ist, klicken Sie auf „Exportieren“.

Jetzt können Sie Ihr Bild in Ihren WordPress-Beitrag oder Ihre Seite hochladen. So könnte es im Block-Editor aussehen:

Bild mit Rahmen im WordPress-Block-Editor

Das war's – Sie haben gelernt, wie Sie mit einem Grafikdesign-Tool einen Rahmen um ein Bild hinzufügen!

Sie können diese Methode jederzeit verwenden, wenn Sie ein Bild in WordPress hochladen möchten.

FAQs: Hinzufügen eines Rahmens um ein Bild in WordPress

Haben Sie noch Fragen zum Styling Ihrer Bilder? Hier sind einige häufig gestellte Fragen, die Ihnen bei der Fehlerbehebung, Anpassung und optimalen Nutzung von Rändern in WordPress helfen.

Kann ich denselben Rand gleichzeitig zu allen Bildern auf meiner Website hinzufügen?

Ja, das können Sie mit benutzerdefiniertem CSS tun, indem Sie Stile auf das Haupt-img-Tag anwenden. Dies kann jedoch auch Elemente wie Logos, Icons oder Bilder in Widgets beeinträchtigen.

Für eine bessere Kontrolle empfehlen wir, eine CSS-Klasse zu erstellen (wie in Methode 1) und diese nur auf Bilder anzuwenden, bei denen Sie den Rahmen wünschen.

Wie kann ich abgerundete Ecken für meinen Bildrahmen erstellen?

Sie können leicht abgerundete Ecken mit der CSS-Eigenschaft border-radius erstellen. Fügen Sie einfach eine Zeile border-radius: 15px; zu Ihrem benutzerdefinierten CSS-Snippet hinzu. Je höher der Pixelwert, desto runder werden die Ecken.

Kann ich einen Rahmen entfernen, den mein WordPress-Theme automatisch hinzufügt?

Ja. Um dies zu überschreiben, können Sie eine benutzerdefinierte CSS-Klasse erstellen – zum Beispiel .no-border mit border: none !important;. Sie können diese dann auf bestimmte Bilder anwenden, indem Sie das Feld „Zusätzliche CSS-Klassen“ in den Block- oder Bild-Einstellungen verwenden.

Verlangsamt das Hinzufügen eines CSS-Rahmens meine Website?

Nein, ein einfacher CSS-Rahmen ist nur eine Codezeile und hat keine spürbaren Auswirkungen auf die Ladegeschwindigkeit Ihrer Seite. Die Dateigröße des Bildes selbst beeinflusst die Leistung, stellen Sie also immer sicher, dass Sie Ihre Bilder für das Web optimieren.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Rahmen um ein Bild in WordPress hinzufügen.

Wenn Sie dies hilfreich fanden, können Sie auch unsere Anleitungen zu folgenden Themen durchgehen:

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

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

11 CommentsLeave a Reply

  1. Ich versuche, dies mit dem Gutenberg-Editor zum Laufen zu bringen, und stattdessen erhalte ich die folgende Fehlermeldung: Dieser Block enthält unerwartete oder ungültige Inhalte.

    Ich weiß, dass es keinen Fehler gibt. Ich füge eine CSS-Klasse im HTML hinzu, aber Gutenberg mag es nicht.

  2. Das von Ihnen erwähnte Plugin wurde offenbar nicht mit den letzten 3 Hauptversionen von WordPress getestet. Es wäre keine gute Idee, es dann zu verwenden.

  3. Hallo, schöner Artikel!

    Kennen Sie eine Möglichkeit, einen Rahmen im „Holzstil“ anzubringen?

    Ich erstelle eine WordPress-Website, um Landschaftsfotos zu zeigen, und ich möchte einen Holzstil-Rahmen verwenden, damit die Leute sehen können, wie das Bild als echter Fotorahmen aussieht. Können Sie mir dabei helfen?

    Danke!

  4. Sehr, sehr talentierter Artikel, nicht viele Leute im Netz und in der WP-Welt wissen, wie man Dinge einfach und klar macht!

    Danke, ich habe meinen schönen, netten Rahmen gut eingestellt

    dav aus frankreich

  5. Das sieht wunderschön aus, so sauber.
    Gibt es eine Möglichkeit, Bilder und Text (mit Links) in einem Kasten auf WordPress zu haben. Ich erstelle eine Buchrezensionsseite, also muss ich das viele Male tun.

  6. Netter kleiner Artikel. Es gibt ein Plugin für jede grundlegende Sache in WordPress, was es so anfängerfreundlich macht. Aber Sie können sich direkt mit den Innereien beschäftigen, wenn Sie kein Plugin für etwas so Kleines wie Rahmen verwenden möchten (besonders da Ihre Website ohne sie schneller ist).

    Es war gut von Ihnen, die Option für das Child-Theme zu zeigen, da dies die Ränder zu allen Bildern hinzufügt, die bereits vorhanden sind und noch kommen werden.

    Sie könnten auch erwähnen, dass Sie durch Ändern der Rahmenbreite und -farbe „Kästen“ und „Rahmen“ um die Bilder erstellen können, indem Sie nur das verwenden, was Sie bereits hier haben.

Antwort hinterlassen