Medien - Bild

Verwenden Sie den Inhaltstyp Image, um ein JPG-, GIF- oder PNG-Bild in den Page Builder Arbeitsbereich einzufügen. Zusätzlich zum Standardbild für den Desktop können Sie ein zweites Bild für mobile Geräte angeben. Sie können auch eine Beschriftung hinzufügen, die unterhalb des Bildes erscheint, und das Bild mit einer beliebigen URL, einem Produkt, einer Kategorie oder einer Seite verknüpfen.

Sie können die Adobe Stock-Integration verwenden, um ein geeignetes Asset aus den Millionen von [Adobe Stock] (https://stock.adobe.com) bereitgestellten Bildern zu finden und zu speichern. Unter Verwendung von Adobe Stock-Bildern erfahren Sie, wie Sie Adobe Stock-Assets suchen, verfeinern und in Ihrer Galerie speichern können.

Bild-Toolbox

Die Bild-Toolbox erscheint, wenn Sie den Mauszeiger über den Bildcontainer bewegen.

Bild-Werkzeugkasten

Werkzeug	Symbol	Beschreibung
Bewegen		Verschiebt das Bild an eine andere Position auf dem Arbeitsbereich.
(Beschriftung)	Bild	Identifiziert den aktuellen Inhaltscontainer als ein Bild. Bewegen Sie den Mauszeiger über den Bildcontainer, um die Toolbox zu sehen.
Einstellungen		Öffnet die Seite Bild bearbeiten, wo Sie die Eigenschaften des Bildes und des Containers ändern können.
Ausblenden		Blendet das aktuelle Bild aus.
Anzeigen		Zeigt das versteckte Bild.
Duplizieren		Erzeugt eine Kopie des Bildes.
Entfernen		Löscht das Bild vom Arbeitsbereich.
Neues Bild hochladen		Lädt ein Bild aus Ihrem lokalen Dateisystem in die Galerie hoch.
Aus Galerie auswählen		Wählt ein vorhandenes Bild aus der Galerie aus.

Ein Bild hinzufügen

1. Erweitern Sie im Page Builder Panel Medien und ziehen Sie einen Bild Platzhalter in den Zielcontainer.

   Sie können ein Bild zu einer Zeile, einer Spalte oder einer Registerkarte hinzufügen. Im folgenden Beispiel wird das Bild in eine leere Spalte gezogen.

   Ziehen eines Bildinhaltstyps auf den Arbeitsbereich

2. Verwenden Sie eine der folgenden Methoden, um das Bild-Asset hinzuzufügen:

   Bild hochladen oder aus Galerie-Tools auf dem Arbeitsbereich auswählen

Die maximale Dateigröße beträgt 4 MB. Unterstützte Dateitypen sind JPG, GIF und PNG.

• Ein neues Bild hochladen: Verwenden Sie diese Methode, um eine neue Bilddatei von Ihrem System hochzuladen.

  • Klicken Sie auf Bild hochladen.

  • Suchen Sie das Bild und wählen Sie es aus, um es der Galerie und dem Ziel-Container hinzuzufügen.

  Alternativ können Sie auch eine Bilddatei von Ihrem System ziehen und sie auf dem Kamera () Symbol ablegen.

• Ein vorhandenes Asset auswählen: Verwenden Sie diese Methode, um ein vorhandenes Bild aus dem Medienspeicher/der Galerie auszuwählen.

  • Klicken Sie auf Aus Galerie auswählen.

  • Verwenden Sie die Baumstruktur, um zu dem Bild zu navigieren.

  • Klicken Sie auf die Miniaturansicht und dann auf Markierte hinzufügen.

    Hinzufügen eines ausgewählten Bildes

• Suchen und wählen Sie ein Adobe Stock-Bild: Verwenden Sie diese Methode, um ein Bild aus Adobe Stock zu finden.

  Dies erfordert eine für Ihren Admin konfigurierte Adobe Stock-Integration.

  • Klicken Sie auf Adobe Stock durchsuchen und suchen Sie nach einem Bild.

  • Speichern Sie die Vorschau oder das lizenzierte Bild in der Galerie.

    Weitere Informationen zur Arbeit mit Adobe Stock-Assets finden Sie unter Verwendung von Adobe Stock-Bildern.

  • Wählen Sie die Miniaturansicht des Assets in der Galerie aus und klicken Sie auf Markierte hinzufügen.

Das Bild wird im Ziel-Container an der Position des Platzhalters angezeigt. Anders als bei einem Hintergrundbild können Sie das Bild an eine andere Position innerhalb des aktuellen Containers oder in einen anderen Container verschieben.

Die Inhaltstypen Banner und Slider enthalten auch die Optionen Bild hochladen und Aus Galerie auswählen zum Hinzufügen von Bildern.

Bild in einer Spalte

Bildeinstellungen ändern

1. Bewegen Sie den Mauszeiger über den Bildcontainer, um das Werkzeugfeld anzuzeigen, und wählen Sie das Symbol Einstellungen (). Der Dateiname, die Abmessungen und die Dateigröße werden unter dem aktuellen Bild angezeigt.

   Aktuelles Bild

2. Um das aktuelle Bild zu ändern, führen Sie einen der folgenden Schritte aus:

   • Hochladen eines neuen Bildes: Verwenden Sie diese Methode, um eine neue Bilddatei von Ihrem System hochzuladen.

     • Klicken Sie auf Bild hochladen.

     • Suchen Sie das Bild und wählen Sie es aus, um es der Galerie und dem Ziel-Container hinzuzufügen.

   • Ein vorhandenes Asset auswählen: Verwenden Sie diese Methode, um ein vorhandenes Bild aus dem Medienspeicher/der Galerie auszuwählen.

     • Klicken Sie auf Aus Galerie auswählen.

     • Verwenden Sie die Baumstruktur, um zu dem Bild zu navigieren.

     • Klicken Sie auf die Miniaturansicht und dann auf Markierte hinzufügen.

       Hinzufügen eines ausgewählten Bildes

   • Suchen und wählen Sie ein Adobe Stock-Bild: Verwenden Sie diese Methode, um ein Bild aus Adobe Stock zu finden.

     Dies erfordert eine für Ihren Admin konfigurierte Adobe Stock-Integration.

     • Klicken Sie auf Adobe Stock durchsuchen und suchen Sie nach einem Bild.

     • Speichern Sie die Vorschau oder das lizenzierte Bild in der Galerie.

       Weitere Informationen zur Arbeit mit Adobe Stock-Assets finden Sie unter Verwendung von Adobe Stock-Bildern.

     • Wählen Sie die Miniaturansicht des Assets in der Galerie aus und klicken Sie auf Markierte hinzufügen.

3. Um ein Mobiles Bild hinzuzufügen, verwenden Sie die gleichen Methoden wie im vorherigen Schritt beschrieben, um ein Bild auszuwählen, das für die Anzeige auf mobilen Geräten verwendet werden soll.

   Mobiles Bild

4. Falls erforderlich, geben Sie einen Link für das Bild an.

   Der Link ist die Zielseite, die erscheint, wenn der Kunde auf das Bild klickt. Sie können einen von drei Link-Typen verwenden:

   • URL - Verweist entweder auf eine relative oder eine vollqualifizierte URL.

     Verknüpfung mit einer URL

   • Produkt - Identifiziert die Zielseite anhand des Produktnamens oder der SKU. Suchen Sie das Produkt nach dem Namen, entweder nach einem Teil des Namens oder nach dem vollständigen Namen. Wählen Sie das Produkt aus der Liste der Suchergebnisse aus.

     Auswählen eines zu verlinkenden Produkts

   • Kategorie - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie in der Kategorienstruktur. Suchen Sie die Kategorie entweder anhand eines Teilnamens oder des vollständigen Namens. Wählen Sie die Kategorie aus dem erweiterten Bereich der angezeigten Struktur.

     Auswahl einer zu verknüpfenden Kategorie

   • Seite - Identifiziert die Zielseite als eine bestimmte Inhaltsseite. Suchen Sie die Seite entweder anhand eines Teilnamens oder des vollständigen Namens. Wählen Sie die Seite aus der Liste der Suchergebnisse aus.

     Auswahl einer zu verlinkenden Seite

   Wenn Sie verhindern möchten, dass der Besucher Ihren Shop verlässt, aktivieren Sie das Kontrollkästchen In neuer Registerkarte öffnen. Wenn das Kontrollkästchen deaktiviert ist, wird das verlinkte Ziel in derselben Registerkarte des Browsers geöffnet, was dazu führen kann, dass der Besucher Ihren Shop verlässt.

5. Um eine Bildunterschrift hinzuzufügen, geben Sie den Text ein, der unterhalb des Bildes erscheinen soll.

   Das Format der Beschriftung wird durch das Stylesheet bestimmt, das mit dem aktuellen Thema verknüpft ist. T

   Bildunterschrift

   Die Bildunterschrift erscheint in der Regel unter dem Bild und enthält Informationen über das Bild für Besucher und Suchmaschinen. Wenn Ihre Website in mehreren Sprachen verfügbar ist, können Sie das gleiche Bild verwenden, aber die Bildunterschrift übersetzen. In HTML<figcaption>ist</figcaption>der<figcaption>Tag</figcaption> <figcaption> eine Untermenge des

   Tags

   <figure> . <figcaption>Dies ist die Bildunterschrift</figcaption>

6. Aktualisieren Sie alle anderen Einstellungen nach Bedarf:

   • Suchmaschinenoptimierung
   • Erweitert

7. Wenn Sie fertig sind, klicken Sie auf Speichern, um die Einstellungen zu übernehmen und zum Arbeitsbereich Page Builder zurückzukehren.

Bild verschieben

1. Bewegen Sie den Mauszeiger über den Bildcontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Move ().

   Ein Bild verschieben

2. Wählen Sie das Bild aus und ziehen Sie es an die neue Position, direkt unter die rote Hilfslinie.

   Positionierung des Bildes mit Hilfe der roten Hilfslinie

Ein Bild entfernen

1. Bewegen Sie den Mauszeiger über den Bildcontainer, um die Toolbox anzuzeigen, und wählen Sie das Symbol Entfernen ().

2. Wenn Sie zur Bestätigung aufgefordert werden, klicken Sie auf OK.

Suchmaschinen-Optimierung

Der Text für diese Einstellungen ist für Suchmaschinen sichtbar und verbessert die Indizierung der Seite.

• Geben Sie für Alternativer Text den alt Text ein, der zur Verbesserung der Zugänglichkeit verfügbar sein soll.

  Die Verwendung von Alt-Text ist eine bewährte Methode zur Verbesserung der Zugänglichkeit und ist in einigen Ländern gesetzlich vorgeschrieben. Das Attribut alt ist eine Teilmenge des Bild-Tags. <image title="tooltip" alt="description" src="image.jpg">

• Geben Sie für Titelattribut den Text ein, der beim Überfahren mit der Maus als QuickInfo erscheinen soll.

  Wählen Sie am besten einen beschreibenden, schlüsselwortreichen Titel, um die Indizierung des Bildes durch Suchmaschinen zu verbessern. In HTML ist das Attribut title eine Teilmenge des Bild-Tags. <image title="tooltip" alt="description" src="image.jpg">

Erweitert

• Wählen Sie eine Ausrichtung, um die horizontale Positionierung der dem Container hinzugefügten Bilder zu steuern.

  Standard	Wendet die Standardeinstellung der Ausrichtung an, die in der Stilvorlage des aktuellen Themas angegeben ist.
  Links	Richtet den Bildinhalt entlang des linken Randes des Bildcontainers aus, unter Berücksichtigung der angegebenen Polsterung.
  Zentriert	Richtet den Bildinhalt in der Mitte des Bildcontainers aus, unter Berücksichtigung der angegebenen Füllung.
  Rechts	Richtet den Bildinhalt entlang des rechten Randes des Bildcontainers aus, unter Berücksichtigung der angegebenen Füllung.

• Legen Sie den Stil Rahmen fest, der auf alle vier Seiten des Bildcontainers angewendet wird:

  Standard	Wendet den Standard-Rahmenstil an, der durch das zugehörige Stylesheet festgelegt ist.
  Keiner	Bietet keinen sichtbaren Hinweis auf die Containergrenzen.
  Gepunktet	Der Containerrand erscheint als gepunktete Linie.
  Gestrichelt	Der Containerrand erscheint als gestrichelte Linie.
  Durchgehend	Der Containerrand wird als durchgezogene Linie dargestellt.
  Doppelt	Der Containerrand wird als Doppellinie dargestellt.
  Rille	Der Containerrand erscheint als gerillte Linie.
  Steg	Der Containerrand erscheint als geriffelte Linie.
  Einzug	Die Umrandung des Containers erscheint als versenkte Linie.
  Außenlinie	Der Containerrand erscheint als Umrandungslinie.

• Wenn Sie einen anderen Rahmenstil als None einstellen, vervollständigen Sie die Rahmenanzeigeoptionen:

  • Rahmenfarbe - Geben Sie die Farbe an, indem Sie ein Farbfeld auswählen, auf den Farbwähler klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.

    Rahmenfarbe

  • Rahmenbreite - Geben Sie die Anzahl der Pixel für die Breite der Rahmenlinie ein.

  • Rahmenradius - Geben Sie die Anzahl der Pixel ein, um die Größe des Radius zu definieren, der verwendet wird, um jede Ecke des Rahmens abzurunden.

• (Optional) Geben Sie die Namen der CSS-Klassen aus der aktuellen Stilvorlage an, die auf den Bildcontainer angewendet werden sollen.

  Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

• Geben Sie Werte in Pixel für Ränder und Auffüllung ein, um die äußeren Ränder und die innere Auffüllung des Bildcontainers festzulegen.

  Geben Sie die entsprechenden Werte in das Diagramm des Bildcontainers ein.

  Ränder	Die Menge an Leerraum, die an der Außenkante aller Seiten des Containers angebracht wird.
  Auffüllung	Die Menge an Leerraum, die auf die Innenkante aller Seiten des Containers angewandt wird.</image></image></figure></figcaption>