Springe zum Hauptinhalt

So verwenden Sie das Bild-Widget in Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Müssen Sie wissen, wie Sie das Bild-Widget in Elementor verwenden?

Wie das Sprichwort sagt. " Ein Bild sagt mehr als tausend Worte ". Manchmal ist es viel einfacher, eine Botschaft über ein Bild zu vermitteln.

Dies gilt auch für das Webdesign. Es ist fast unmöglich, eine Webseite ohne Bildelement zu gestalten. Als Werkzeug, das Design betont, Elementor ermöglicht es Ihnen, Ihrem Design ganz einfach ein Bild hinzuzufügen, indem Sie das Bild-Widget bereitstellen. Sie können das Bild-Widget einfach in das Bearbeitungsfeld ziehen, um ein Bildelement hinzuzufügen.

Sie können nicht nur ein statisches Bild hinzufügen, sondern auch ein dynamisches Bild in Elementor. Diese Funktion (die Möglichkeit, ein dynamisches Bild hinzuzufügen) ist besonders nützlich zum Erstellen einer benutzerdefinierten Vorlage wie einer benutzerdefinierten einzigartigen Nachricht, einer benutzerdefinierten Kategorieseite, einer benutzerdefinierten Kopfzeile usw. - mit dem Theme Builder von Elementor.

Das Bild-Widget selbst ist in beiden Versionen von Elementor verfügbar, aber um ein dynamisches Bild hinzuzufügen, müssen Sie die Pro-Version verwenden.

So fügen Sie ein Bild in Elementor hinzu

Bevor wir weitermachen, gehen wir davon aus, dass Sie es bereits wissen wie benutzt man Elementor

Ziehen Sie im Editor von Elementor einfach das Bild-Widget aus dem linken Bereich in das Bearbeitungsfeld und klicken Sie dann auf die Bildauswahl, um das Bild auszuwählen, das Sie verwenden möchten.

Dynamisches Bild hinzufügen

Um ein dynamisches Bild hinzuzufügen, können Sie mit der Maus über die Bildauswahl fahren, auf das Datenbanksymbol klicken und aus den verfügbaren Optionen den Typ des dynamischen Bildes auswählen, das Sie hinzufügen möchten.

Sie können dann auf das Schraubenschlüsselsymbol klicken, um die Rettung auszuwählen. Fallback selbst ist der Standardinhalt, der angezeigt wird, wenn kein dynamischer Inhalt verfügbar ist. In diesem Fall ist Fallback das Standardbild, das angezeigt wird, wenn Elementor das dynamische Bild nicht finden kann.

So verwenden Sie das Bild-Widget in Elementor

Bildanpassung

Um das Bild zu personalisieren, können Sie auf die Registerkarte Stil aus dem Einstellungsfeld (Feld auf der linken Seite). Bevor du gehst die Registerkarte Stil, Sie können Bildgröße und Bildausrichtung einstellen und einen Link zum Bild im Block hinzufügen Bild unter der Registerkarte Inhalt. 

Lesen Sie auch: So verwalten Sie Formulareinsendungen in Elementor

Unter der Registerkarte Stil, Sie können den Randradius festlegen, CSS-Filter anwenden, benutzerdefinierte Größe und Deckkraft festlegen und Flächenschatten anwenden.

  • Definition der benutzerdefinierten Größe

Im Block Bild unter der Registerkarte Inhalt, Sie können die Größe Ihres Bildes einstellen. Wenn Sie eine benutzerdefinierte Größe festlegen möchten, können Sie einfach den Breitenwert und den Höhenwert für den Block festlegen Bild sous die Registerkarte Stil. Sie können die Prozenteinheit, Pixel oder Anzeigefensterbreite (VW) verwenden.

  • Einstellen der Deckkraft des Bildes

Um die Deckkraft des Bildes einzustellen, ziehen Sie einfach den Schieberegler von Deckkraft-Option unter der Registerkarte Stil. Sie können die Deckkraft von 0 bis 1 eingeben.

  • Anwenden von CSS-Filtern

Wenn Sie möchten, können Sie CSS-Filter auf Ihr Bild anwenden, um einige Bildeffekte hinzuzufügen. Es gibt 5 Filteroptionen, die Sie anwenden können: Weichzeichnen, Helligkeit, Kontrast, Sättigung und Farbton. Klicken Sie einfach auf das Bleistiftsymbol in der Option CSS-Filter und stellen Sie die gewünschten CSS-Filterwerte durch Ziehen der Schieberegler ein.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

  • Definition von Grenze

Um Ihr Bild ansprechender zu gestalten, können Sie auch die Ränder festlegen. Um den Rahmen hinzuzufügen, wählen Sie zuerst den Rahmentyp in der Option Art der Grenze. Anschließend können Sie die Rahmenbreite, die Rahmenfarbe und den Rahmenradius festlegen.

Der Randradius ist übrigens die Neigung der Seitenwinkel des Bildes (rechts oben, links oben, rechts unten, links unten). Je höher der Wert für den Randradius, desto abgerundeter wird Ihr Bild.

 

  • Anwenden eines Boxschattens

Um einen Boxschatten anzuwenden, klicken Sie einfach auf das Bleistiftsymbol in der Option Schatten der Kiste. Wählen Sie die Schattenfarbe aus und legen Sie den Wert für horizontale Ausrichtung, vertikale Ausrichtung, Unschärfegrad und Ausbreitungsgrad fest.

So verwenden Sie das Bild-Widget in Elementor

erweiterte Einstellungen

Um einige erweiterte Einstellungen für das Bild vorzunehmen, müssen Sie die Registerkarte öffnen fortgeschritten im Einstellungsfeld. Daraus können Sie Dinge wie Rand und Auffüllung, Eingabeanimation, benutzerdefiniertes CSS usw. definieren.

  • Definieren von Rand und Auffüllung

Um den Bildrand und die Füllung festzulegen, müssen Sie den Block öffnen Fortgeschritten.

  • Anwenden einer Eingabeanimation

Um Ihr Bild überzeugender zu machen, können Sie Eingabeanimationen anwenden. Dazu können Sie den Block öffnen Bewegungseffekte. Von diesem Block aus können Sie Scroll-Effekte, Maus-Effekte und Sticky-Optionen einstellen.

Um eine Eingabeanimation anzuwenden, benötigen Sie lediglich den Eingabeanimationsstil in der Option Eingangsanimation.

So verwenden Sie das Bild-Widget in Elementor

  • Benutzerdefiniertes CSS hinzufügen

Wenn Sie über CSS-Kenntnisse verfügen, können Sie dem Bild-Widget auch benutzerdefiniertes CSS hinzufügen. Um benutzerdefiniertes CSS hinzuzufügen, können Sie einfach den Block öffnen Benutzerdefinierte CSS und fügen Sie Ihren CSS-Code in das verfügbare Feld ein.

  • Bild auf einem bestimmten Gerätetyp ausblenden

In Elementor können Sie für verschiedene Gerätetypen eine andere Einstellung für ein bestimmtes Widget verwenden. Darüber hinaus können Sie festlegen, dass ein Widget auf einem bestimmten Gerätetyp deaktiviert wird.

Sie können beispielsweise das Bild-Widget auf dem Tablet deaktivieren. Dazu können Sie den Block öffnen Als Reaktion. Ziehen Sie die Schaltflächen, um das Widget auf einem bestimmten Gerät auszublenden.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

  • Definieren der benutzerdefinierten Position

Wenn Sie ein Bild in Elementor hinzufügen, wird die Standardposition auf statisch (Defaultwert). Es gibt zwei weitere Positionsoptionen, die Sie einstellen können: fest et absolute.

Behoben: Wenn Sie diese Option auswählen, wird das Bild relativ zum Anzeigefenster des Benutzers positioniert

absolute : Wenn Sie diese Option auswählen, wird das Bild absolut an seinem ersten positionierten übergeordneten Element positioniert.

Um die benutzerdefinierte Position festzulegen, können Sie den Block öffnen Positionierung unter der Registerkarte Fortgeschritten. Wählen Sie die benutzerdefinierte Position aus, die Sie in der Option festlegen möchten Position und stellen Sie den Versatz der horizontalen Ausrichtung und der vertikalen Ausrichtung ein.

Kurzum

Image ist ein wichtiger Bestandteil eines Designs. Sie können sicherlich eine Seite ohne Bild gestalten, aber Ihr Design wird geschmacklos sein. Sie können das Bild-Widget verwenden, um Ihrem Elementor-Design ein Bildelement hinzuzufügen, unabhängig davon, ob es sich um eine Seitendesign-Vorlage oder ein Thema handelt.

Mit Elementor können Sie sowohl statische als auch dynamische Bilder hinzufügen (nur Pro-Version). Neben dem Bild-Widget gibt es auch das Bild-Box-Widget, um ein Bildelement mit dem Textinhalt hinzuzufügen. Dieses letztgenannte Widget eignet sich besser für einen bestimmten Bedarf wie das Erstellen eines Teammitgliedsbereichs, eines Funktionslistenbereichs und anderer Bereiche, die Bild- und Textinhalte beinhalten.

Holen Sie sich jetzt Elementor Pro!

Weitere zusätzliche Premium-WordPress-Plugins 

Entdecken Sie auch andere Premium-WordPress-Plugins, die die Leistung Ihres WordPress-Blogs oder Ihrer Website optimieren.

1. MapSVG

MapSVG est l’un des plugins WordPress de création d’annuaire les plus puissants et les plus performants. Il vous permet de transformer n’importe quel fichier SVG en cartes vectorielles interactives et en cartes entièrement personnalisables. Il vous permet de créer un répertoire d’entreprises lokale, Lieferantenlisten usw. Mapsvg Plugin WordPress-Verzeichnis

Il propose une carte pour tous les principaux pays du monde. Ses principales fonctionnalités sont : l’édition des cartes SVG dans n’importe quel éditeur de vecteurs afin de pouvoir facilement dessiner vos propres cartes, une base de données intégrée pour afficher tout type d’objet, des outils puissants de création de formulaire, pour renseigner la base de données, l’ajout des marqueurs de géolocalisation et autres.

Lesen Sie auch unseren Artikel über So halten Sie Ihre Besucher länger auf Ihrer Website

Download| Demo | Web-Hosting

2. Pan Zoom Bild

Mit diesem Plugin können Sie ganz einfach eine Panorama-Zoomfunktion für Bilder in Ihrem WordPress-Blog über einen Shortcode hinzufügen. Sie können es beispielsweise in Ihren Artikel oder Ihre Seite integrieren.

Bild Zoom Pan WordPress Plugin für Zoom

Als Funktionen haben Sie unter anderem: den Panorama-Zoom auf ein einzelnes Bild oder eine Galerie mit unbegrenzten Bildern, die Position der Steuerleiste kann oben, rechts, unten und links sein, der Boden des Behälters kann dunkel, hell und nichts davon sein; die Live-Vorschau im Dashboard, das Beispiel eines mehrfachen Panorama-Zooms auf derselben Seite usw.

Entdecken Sie auch unsere 5 Shortcodes Premium WordPress Plugins

Download | Demo | Web-Hosting

3. Marketing-Automatisierung

Dieses Premium-WordPress-Plugin bietet eine einfache und flexible Benutzeroberfläche, deren Zweck sein wird Sie können ganz einfach einen leistungsstarken Newsletter auf Ihrer Website erstellen. Dank seiner Flexibilität können Sie eine Vielzahl von Ereignissen, Bedingungen und Aktionen verwalten. So können Sie Ihre E-Mail-Marketingstrategie einfach so konfigurieren, dass sie gesendet, verfolgt und davon profitiert wird.

WordPress-Plugins für die Marketingautomatisierung erstellen eine Newsletter-Website

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Seine Hauptfunktionen sind: die Möglichkeit, bedingte Logik anzuwenden, die auf der Reaktion und dem Verhalten der Besucher basiert, die Verfolgung der Aktionen der Besucher der Website, perfekt für alle Treueprogramme, hervorragend für Marketingstrategien, die wetten auf die Belohnungen, ein intuitives Dashboard, die Segmentierung der Website-Besucher, die Möglichkeit, Umfragen durchzuführen, SMS-Benachrichtigungen und per E-Mail Pop-ups basierend auf dem Besucherverhalten, Bannerwerbung basierend auf dem Besucherverhalten und vieles mehr.

Download | Demo | Web-Hosting

Empfohlene Ressourcen

Informieren Sie sich über andere empfohlene Ressourcen, die Sie beim Erstellen und Verwalten Ihrer Website unterstützen.

Fazit

Hier ! Das war's für unseren Artikel, der Ihnen zeigt, wie Sie das Bild-Widget in Elementor verwenden. Wenn Sie haben Kommentare oder Vorschläge, zögern Sie nicht, uns im reservierten Bereich zu informieren.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden zu WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken

... 

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
0 Aktien
Aktie
tweet
Registrieren