Medien - Bild

Verwenden Sie den Image-Inhaltstyp, um ein JPG-, GIF- oder PNG-Bild zum Page Builder Staging“. Zusätzlich zum Standard-Desktop-Image können Sie ein sekundäres Image für Mobilgeräte angeben. Sie können auch eine Beschriftung hinzufügen, die unter dem Bild angezeigt wird, und das Bild mit einer beliebigen URL, einem Produkt, einer Kategorie oder Seite verknüpfen.

TIP
Sie können die Adobe Stock-Integration verwenden, um ein geeignetes Asset aus den Millionen zu finden und zu speichern, die von Adobe Stock bereitgestellt. Siehe Verwenden von Adobe Stock für Details zum Suchen, Verfeinern und Speichern von Adobe Stock-Assets in Ihrer Galerie.
NOTE
Wenn Sie wesentliche Änderungen an Page Builder Inhalten vornehmen, wird empfohlen, die Admin-Sitzungslebensdauer) zu erhöhen um zu verhindern, dass die Sitzung während der Arbeit abläuft.

Bild-Toolbox

Die Bild-Toolbox wird angezeigt, wenn Sie den Mauszeiger über den Bild-Container bewegen.

Bild-Toolbox {width="500" modal="regular"}

Tool
Symbol
Beschreibung
Verschieben
move icon {width="25"}
Verschiebt das Bild an eine andere Position auf der Bühne.
(Bezeichnung)
Bild
Identifiziert den aktuellen Inhalts-Container als Bild. Bewegen Sie den Mauszeiger über den Bild-Container, um die Toolbox anzuzeigen.
Einstellungen
Einstellungssymbol {width="25"}
Öffnet die Seite Bild bearbeiten auf der Sie die Eigenschaften des Bildes und des Containers ändern können.
Ausblenden
Symbol ausblenden {width="25"}
Blendet das aktuelle Bild aus.
Anzeigen
Symbol anzeigen {width="25"}
Zeigt das ausgeblendete Bild an.
Duplikat
Symbol „Duplizieren“ {width="25"}
Erstellt eine Kopie des Bildes.
entfernen
Symbol entfernen {width="25"}
Löscht das Bild aus der Phase.
Neues Bild hochladen
Lädt ein Bild aus dem lokalen Dateisystem in die Galerie hoch.
Aus Galerie auswählen
Wählt ein vorhandenes Bild aus der Galerie aus.
NOTE
Ausgeblendete Elemente werden in der Datenbank gespeichert und sind für Kunden unsichtbar. Diese Elemente sind jedoch für Suchmaschinen und andere Bots sichtbar, die Ihre Site durchsuchen. Sie werden auch als Teil des Inhalts zurückgegeben, wenn sie über einen API-Aufruf mit dem Attribut „unsichtbar“ angefordert werden, es sei denn, Sie entfernen sie aus dem Schritt.

Bild hinzufügen

  1. Erweitern Sie im Page Builder Bedienfeld Media und ziehen Sie einen Image Platzhalter in den Ziel-Container.

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

    Ziehen eines Bild-Inhaltstyps auf den Schritt {width="600" modal="regular"}

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

    Bild hochladen oder aus Galerie-Tools auf der Bühne auswählen {width="500" modal="regular"}

    note note
    NOTE
    Die maximale Dateigröße beträgt 4 MB. Unterstützte Dateitypen sind JPG, GIF und PNG.
    • Neues Bild hochladen: Verwenden Sie diese Methode, um eine neue Bilddatei von Ihrem System hochzuladen.

      • Klicken Sie auf Upload Image.

      • 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 aus Ihrem System ziehen und auf dem Symbol Kamera ( Kamerasymbol {width="20"} ) ablegen.

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

      • Klicken Sie auf Select from Gallery.

      • Navigieren Sie mithilfe der Baumstruktur zum Bild.

      • Klicken Sie auf die Miniaturansicht und dann auf Add Selected.

        Ausgewähltes Bild hinzufügen {width="600" modal="regular"}

    • Adobe Stock-Bild suchen und auswählen: Verwenden Sie diese Methode, um ein Bild aus Adobe Stock zu suchen.

      note note
      NOTE
      Für diese Methode ist eine Adobe Stock-Integration für Ihren Administrator konfiguriert.
      • Klicken Sie auf Search Adobe Stock und suchen Sie nach einem Bild.

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

        Weitere zum Arbeiten mit Adobe Stock-Assets findenunter „Verwenden von Adobe StockBildern“.

      • Wählen Sie die Asset-Miniaturansicht in der Galerie aus und klicken Sie auf Add Selected.

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

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

    Bild in einer Spalte {width="500" modal="regular"}

Bildeinstellungen ändern

  1. Bewegen Sie den Mauszeiger über den Bild-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol Einstellungen ( Einstellungssymbol {width="20"} ) aus.
    Der Dateiname, die Abmessungen und die Dateigröße werden unter dem aktuellen Bild angezeigt.

    Aktuelles Bild {width="600" modal="regular"}

  2. Führen Sie einen der folgenden Schritte aus, um die aktuelle Image zu ändern:

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

      • Klicken Sie auf Upload Image.

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

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

      • Klicken Sie auf Select from Gallery.

      • Navigieren Sie mithilfe der Baumstruktur zum Bild.

      • Klicken Sie auf die Miniaturansicht und dann auf Add Selected.

        Ausgewähltes Bild hinzufügen {width="600" modal="regular"}

    • Adobe Stock-Bild suchen und auswählen: Verwenden Sie diese Methode, um ein Bild aus Adobe Stock zu suchen.

      note note
      NOTE
      Für diese Methode ist eine Adobe Stock-Integration für Ihren Administrator konfiguriert.
      • Klicken Sie auf Search Adobe Stock und suchen Sie nach einem Bild.

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

        Weitere zum Arbeiten mit Adobe Stock-Assets findenunter „Verwenden von Adobe StockBildern“.

      • Wählen Sie die Asset-Miniaturansicht in der Galerie aus und klicken Sie auf Add Selected.

  3. Verwenden Sie zum Hinzufügen eines Mobile Image dieselben im vorherigen Schritt beschriebenen Methoden, um ein Bild auszuwählen, das für die Anzeige auf Mobilgeräten verwendet werden soll.

    Mobilgerät - Bild {width="600" modal="regular"}

  4. Geben Sie bei Bedarf einen Link für das Bild an.

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

    • URL - Links zu einer relativen oder vollständig qualifizierten URL.

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

      Auswählen eines zu verknüpfenden Produkts {width="600" modal="regular"}

    • Category - Identifiziert die Zielseite als eine bestimmte Kategorie oder Unterkategorie in der Kategoriestruktur. Suche nach der Kategorie basierend auf einem Teil- oder Vollnamen. Wählen Sie die Kategorie aus dem erweiterten Abschnitt der angezeigten Baumstruktur aus.

      Auswählen einer zu verknüpfenden Kategorie {width="600" modal="regular"}

    • Page - Identifiziert die Zielseite als eine bestimmte Inhaltsseite. Suche nach der Seite basierend auf einem Teil- oder vollständigen Namen. Wählen Sie die Seite aus der Liste Suchergebnisse aus.

      Auswählen einer zu verknüpfenden Seite {width="600" modal="regular"}

    Wenn Sie verhindern möchten, dass der Besucher Ihren Store verlässt, aktivieren Sie das Kontrollkästchen Open in new tab . Wenn das Kontrollkästchen deaktiviert ist, wird das verknüpfte Ziel in derselben Browser-Registerkarte geöffnet, die den Besucher effektiv von Ihrem Store weg navigieren könnte.

  5. Um ein Image Caption hinzuzufügen, geben Sie den Text ein, der unter dem Bild angezeigt werden soll.

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

    Die Beschriftung wird normalerweise unter dem Bild angezeigt und stellt für Besucher und Suchmaschinen Informationen zum Bild bereit. Wenn Ihre Site in mehreren Sprachen verfügbar ist, können Sie dasselbe Bild verwenden, aber die Beschriftung übersetzen. Beim HTML ist das <figcaption>-Tag eine Teilmenge des <figure>-Tags. <figcaption>This is the image caption</figcaption>

  6. Aktualisieren Sie alle anderen Einstellungen nach Bedarf:

  7. Klicken Sie abschließend auf Save , um die Einstellungen anzuwenden und zum Arbeitsbereich Page Builder zurückzukehren.

Verschieben eines Bildes

  1. Bewegen Sie den Mauszeiger über den Bild-Container, um die Toolbox anzuzeigen, und wählen Sie Symbol „Verschieben ( Symbol Verschieben {width="20"} ) aus.

    Verschieben eines Bildes {width="500" modal="regular"}

  2. Wählen Sie das Bild aus und ziehen Sie es an die neue Position, direkt unter der roten Richtlinie.

    Verwenden der roten Richtlinie zum Positionieren des Bildes {width="500" modal="regular"}

Entfernen eines Bildes

  1. Bewegen Sie den Mauszeiger über den Bild-Container, um die Toolbox anzuzeigen, und wählen das Symbol Entfernen ( Symbol entfernen {width="20"} ) aus.

  2. Wenn Sie zum Bestätigen aufgefordert werden, klicken Sie auf OK.

Suchmaschinenoptimierung

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

  • Geben Sie Alternative Text eine Alt-Textbeschreibung für die anzuzeigenden digitalen Barrierefreiheits-Tools ein.

    Die Verwendung von Alternativtext ist eine Best Practice für die Barrierefreiheit und wird in einigen Gebietsschemata gesetzlich vorgeschrieben. Beim HTML ist das alt-Attribut eine Teilmenge des image-Tags: <image title="tooltip" alt="description" src="image.jpg">.

  • Geben Sie Title Attribute den Text ein, der beim Bewegen des Mauszeigers als QuickInfo angezeigt werden soll.

    Wählen Sie als Best Practice einen beschreibenden, schlüsselwortreichen Titel aus, um die Art und Weise zu verbessern, wie das Bild von Suchmaschinen indiziert wird. Beim HTML ist das title-Attribut eine Teilmenge des image-Tags: <image title="tooltip" alt="description" src="image.jpg">.

Advanced

  • Um die horizontale Positionierung der dem Container hinzugefügten Bilder zu steuern, wählen Sie ein Alignment aus.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    Option Beschreibung
    Default Wendet die Standardeinstellung für die Ausrichtung an, die im Stylesheet des aktuellen Designs angegeben ist.
    Left Richtet den Bildinhalt am linken Rand des Bild-Containers aus, wobei ein beliebiger Abstand berücksichtigt wird.
    Center Richtet den Bildinhalt in der Mitte des Bild-Containers aus, wobei für jeden angegebenen Abstand gesorgt wird.
    Right Richtet den Bildinhalt am rechten Rand des Bild-Containers aus, wobei ein beliebiger Abstand berücksichtigt wird.
  • Legen Sie den Border fest, der auf alle vier Seiten des Bild-Containers angewendet werden soll:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
    Option Beschreibung
    Default Wendet die Standardformatvorlage für Rahmen an, die im zugehörigen Stylesheet angegeben ist.
    None Zeigt keine sichtbaren Begrenzungen des Containers an.
    Dotted Der Container-Rahmen wird als gepunktete Linie angezeigt.
    Dashed Der Container-Rahmen wird als gestrichelte Linie angezeigt.
    Solid Der Container-Rahmen wird als durchgezogene Linie angezeigt.
    Double Der Container-Rahmen wird als doppelte Linie angezeigt.
    Groove Der Container-Rahmen wird als gerillte Linie angezeigt.
    Ridge Der Container-Rahmen wird als geriffelte Linie angezeigt.
    Inset Der Container-Rahmen wird als Einfügelinie angezeigt.
    Outset Der Container-Rahmen wird als Ausgangslinie angezeigt.
  • Wenn Sie einen anderen Rahmenstil als None festlegen, müssen Sie die Anzeigeoptionen für den Rahmen vervollständigen:

    Rahmenfarbe {width="600" modal="regular"}

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    Option Beschreibung
    Border Color Geben Sie die Farbe an, indem Sie einen Musterabschnitt auswählen, auf die Farbauswahl klicken oder einen gültigen Farbnamen oder einen entsprechenden Hexadezimalwert eingeben.
    Border Width Geben Sie die Anzahl der Pixel für die Rahmenlinienbreite ein.
    Border Radius Geben Sie die Anzahl der Pixel ein, um die Größe des Radius festzulegen, mit dem jede Ecke des Rahmens gerundet werden soll.
  • (Optional) Geben Sie die Namen der CSS classes aus dem aktuellen Stylesheet an, die auf den Bild-Container angewendet werden sollen.

    Trennen Sie mehrere Klassennamen durch ein Leerzeichen.

  • Geben Sie Werte in Pixeln für die Margins and Padding ein, um die äußeren Ränder und den inneren Abstand des Bild-Containers anzugeben.

    Geben Sie jeden entsprechenden Wert in das Bild-Container-Diagramm ein.

    table 0-row-2 1-row-2 2-row-2 layout-auto
    Container-Bereich Beschreibung
    Margins Die Menge des Leerraums, der auf die Außenkante aller Seiten des Containers angewendet wird.
    Padding Die Menge des Leerraums, der auf die Innenkante aller Seiten des Containers angewendet wird.
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d