So verwenden Sie das Bild-Widget in Elementor

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.

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.

• 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.

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.

• 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.

• 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!

2. Pan Zoom Bild

Mit diesem Plugin können Sie auf einfache Weise die Schwenk-Zoom-Funktion für Bilder auf Ihrem hinzufügen Wordpress-Blog über einen Shortcode. Sie können es beispielsweise in Ihren Artikel oder Ihre Seite integrieren.

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

Herunterladen | Demo | Web-Hosting

3. Marketing-Automatisierung

Ce WordPress Plugin premium bietet eine einfache und flexible Benutzeroberfläche, deren Zweck es 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.

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.

Herunterladen | Demo | Web-Hosting

• 10 WooCommerce Plugins eine dynamische Preisgestaltung zu schaffen
• So moderieren Sie Kommentare in WordPress
• 6 WordPress-Plugins zum Hinzufügen von Authorize.Net zu Ihrer Website
• Einige Wordpress-Plugins Besucher engagieren