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.

Wenn Sie im Arbeitsbereich Page Builder arbeiten, werden Ihre Inhaltsänderungen erst dann vollständig gespeichert, wenn Sie auf das Symbol Vollbild schließen () in der oberen rechten Ecke des Arbeitsbereichs klicken und dann auf Speichern in der oberen rechten Ecke für die CMS-Seite, die Produktseite, die Kategorieseite, den Block oder den dynamischen Block.

Wenn Sie umfangreiche Änderungen am Inhalt von Page Builder vornehmen, empfehlen wir Ihnen, die Admin Session Lifetime zu erhöhen, um zu verhindern, dass die Sitzung während Ihrer Arbeit abläuft.

Bild-Toolbox

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

Bild-Werkzeugkasten

Werkzeug Symbol Beschreibung
Bewegen Move icon 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 Einstellungssymbol Öffnet die Seite Bild bearbeiten, wo Sie die Eigenschaften des Bildes und des Containers ändern können.
Ausblenden Symbol ausblenden Blendet das aktuelle Bild aus.
Anzeigen Symbol anzeigen Zeigt das versteckte Bild.
Duplizieren Doppeltes Symbol Erzeugt eine Kopie des Bildes.
Entfernen Symbol 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 (Kamera-Symbol) 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:

  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>